WebアプリをAIから操作できるようにした話（第4回）— Claude Codeから繋げるときにハマった2つの落とし穴

# initialize → 200 OK
curl -X POST https://your-app.cloudfront.net/api/mcp \
  -H "Authorization: Bearer <token>" \
  -d '{"jsonrpc":"2.0","id":1,"method":"initialize",...}'
# → {"jsonrpc":"2.0","id":1,"result":{"protocolVersion":"2024-11-05",...}}

# tools/list → 43ツールが返る
curl -X POST https://your-app.cloudfront.net/api/mcp \
  -H "Authorization: Bearer <token>" \
  -d '{"jsonrpc":"2.0","id":2,"method":"tools/list","params":{}}'
# → {"result":{"tools":[...43件...]}}

curl -X GET https://your-app.cloudfront.net/api/mcp \
  -H "Authorization: Bearer <token>" \
  -H "Accept: text/event-stream"
# → HTTP 405 Method Not Allowed ← これが原因

// src/app/api/mcp/route.ts に追加
export async function GET(request: NextRequest): Promise<NextResponse> {
  const auth = await authenticateMcpRequest(request.headers.get('authorization'));
  if (!auth) return unauthorized();

  // Lambda はステートレスなので長時間接続できない
  // 即座に閉じることで「SSEは使えないが接続は確立できた」と伝える
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue(new TextEncoder().encode(': connected\n\n'));
      controller.close();
    },
  });

  return new NextResponse(stream, {
    status: 200,
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
      'Access-Control-Allow-Origin': '*',
    },
  });
}

export async function OPTIONS(): Promise<NextResponse> {
  return new NextResponse(null, {
    status: 204,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', // GET を追加
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    },
  });
}

No matching deferred tools found

plugin:context7:context7: npx -y @upstash/context7-mcp - ✓ Connected
playwright: npx @playwright/mcp@latest - ✓ Connected
# ← team-task-scheduler がリストにない！

// ~/.claude/settings.json
{
  "mcpServers": {
    "team-task-scheduler": {
      "type": "http",
      "url": "https://your-app.cloudfront.net/api/mcp",
      "headers": {
        "Authorization": "Bearer <token>"
      }
    }
  }
}

# ユーザースコープで登録（全プロジェクトで使えるようになる）
claude mcp add \
  --transport http \
  --scope user \
  team-task-scheduler "https://your-app.cloudfront.net/api/mcp" \
  --header "Authorization: Bearer <your-token>"

claude mcp list
# → team-task-scheduler: https://... (HTTP) - ✓ Connected

# ❌ エラーになる（--header が name より前）
claude mcp add --transport http --scope user --header "..." team-task-scheduler "https://..."

# ✅ 正しい
claude mcp add --transport http --scope user team-task-scheduler "https://..." --header "..."

Team Task Scheduler の MCP ツールを使って、以下のリクエストを処理してください：

$ARGUMENTS

## 使えるMCPツール

- **チーム・ユーザー**: `team_list`, `team_get`, `user_list`
- **プロジェクト**: `project_list`, `project_get`, `project_create`, `project_update`, `project_delete`
- **タスク**: `task_list`, `task_get`, `task_create`, `task_update`, `task_delete`
（省略）

## ガイドライン

- チームIDが不明な場合は team_list → project_list の順で確認する
- 複数の操作が必要な場合は順番に実行し、各ステップを簡潔に報告する

/task-flow 私が担当しているアクティブなプロジェクトを教えて
/task-flow トレサビリティシステムの未完了タスクを一覧で表示して
/task-flow プロジェクトAの進捗を70%に更新して

作成済みの MCP HTTP サーバーを Claude Code に接続する手順を実施してください。

【確認手順】
1. curl で GET エンドポイントをテスト:
   curl -X GET <MCP_URL> -H "Authorization: Bearer <TOKEN>" -H "Accept: text/event-stream"
   → 200 が返らなければ GET ハンドラーを実装する

2. GET ハンドラーの実装（Lambda/ステートレス環境の場合）:
   Content-Type: text/event-stream で ': connected\n\n' を送信して即閉じる
   OPTIONS の Allow-Methods に GET を追加する

3. Claude Code への登録:
   claude mcp add --transport http --scope user <name> <url> --header "Authorization: Bearer <token>"
   ※ --header は URL の後に指定する
   ※ --scope user で全プロジェクトで使えるようになる

4. 接続確認:
   claude mcp list
   → <name>: <url> (HTTP) - ✓ Connected が表示されれば成功