[生成AI] Web開発に有効なMCP5選

こんにちは。

最近の Web 開発は「AI がコードを書く」だけでは物足りなくて、ドキュメントを読み、ブラウザを操作し、CI を見て……と実務の周辺まで面倒を見てほしくなります。

そんなとき頼りになるのが MCP（Model Context Protocol）。

生成 AI と外部ツールの橋渡しをする標準で、エージェントに安全かつ再現性のある “手足” を生やせます。

Chrome 公式ブログでも「DevTools の力を AI エージェントに持ち込める」仕組みとして紹介されており、旧来の「AI は環境が見えない」という課題を一気に解消してくれました。(Chrome for Developers)

この記事では、私が Web 開発でよく使う MCP サーバーを 5 つに絞って紹介します。どれも実務で役立ったものばかりです。

MCP を選ぶときの視点

• 何を補強したいか？ ドキュメント、決済、ブラウザ、リポジトリ、E2E……用途を絞ると導入が楽になります
• 導入が簡単か？ npx で動かせるか、リモート接続で済むかをチェック
• 安全に使えるか？ OAuth や権限分離が整っているか、監査ログを残せるかを確認

では、具体的に 5 つの MCP を見ていきましょう。

1. Context7 ─ “最新版ドキュメント”を AI に注入する

モデルの学習データはどうしても古くなります。Context7 は Upstash が提供する MCP で、React や Next.js など人気ライブラリの最新ドキュメントやコード例を即座に AI のコンテキストに流し込むことができます。プロンプトに use context7 と添えるだけで、幻の API を提案されるリスクがグッと下がりました。(GitHub)

最小セットアップ

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp", "--api-key", "YOUR_API_KEY"]
    }
  }
}

HTTP 経由での接続や VS Code / Cursor 用サンプルも公開されています。(GitHub)

どんな場面で効く？

• 新しい Next.js App Router の書き方を確認したいとき
• 「この API の現行ベストプラクティスをコード付きで」というリクエスト
• use context7 を添えて“確信度の高い回答”をもらいたいとき

2. Stripe MCP ─ 決済運用をチャットで回す

Stripe 公式の MCP サーバーに接続すると、顧客や支払い、請求、サブスクなどの API を自然言語から操作したり、ドキュメントやサポート記事を検索させたりできます。OAuth で権限を細かく絞れる点も安心です。(docs.stripe.com)

最小セットアップ

{
  "servers": {
    "stripe": { "type": "http", "url": "https://mcp.stripe.com" }
  }
}

CLI 用やローカル実行（@stripe/mcp）の手順、利用可能ツール一覧も公式ドキュメントに揃っています。(docs.stripe.com)

どんな場面で効く？

• 「テスト顧客を作って、直近の支払い一覧をまとめて」と頼む運用タスク
• 実装中に「支払いリンクを作る手順」を確認し、そのまま API コールを生成
• 権限を絞ったキーで安全に運用しつつ、情報システムや CS チームも同じ導線を持てる

3. Chrome DevTools MCP ─ AI がリアルなブラウザでデバッグ

chrome-devtools-mcp を入れると、AI が実際の Chrome を開き、ネットワーク・コンソール・DOM・CSS・パフォーマンスを直接操作できます。CORS やレイアウト崩れの調査、LCP のトレース取得といった“画面を見ないと分からない”作業を任せられるのが快感です。(Chrome for Developers)

最小セットアップ

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

ヘッドレス起動や既存ブラウザへの接続 (--browser-url=...) などオプションも豊富。README には最初に試したいプロンプト例がまとめられています。(GitHub)

どんな場面で効く？

• 「localhost:8080 の画像が時々表示されない」を調査→ネットワーク/コンソールから CORS を特定
• レイアウト崩れが起きたページで DOM/CSS を点検し、修正案まで出してもらう
• LCP のトレースを取り、ボトルネックの指摘と改善案を同時に受け取る

4. GitHub MCP ─ リポジトリ運営をエージェント化

GitHub 公式の MCP は、リポジトリの読み書き、Issue/PR の作成・更新、Actions の監視、依存の分析などを AI に任せられる強力なサーバーです。リモート（OAuth）とローカル（Docker/バイナリ）どちらでも動きます。(GitHub)

最小セットアップ（VS Code の例）

{
  "servers": {
    "github": { "type": "http", "url": "https://api.githubcopilot.com/mcp/" }
  }
}

ツールセットを --toolsets repos,issues,... のように絞れるほか、PAT と OAuth を場面で使い分けられます。(GitHub)

どんな場面で効く？

• 「/api 直下を触るオープン PR だけ列挙して要約して」とお願いするレビュー前の情報収集
• バグ報告 Issue をテンプレで起票 → 関連 PR 作成 → レビュー観点まで一気通貫で任せる
• CI の失敗ログや Dependabot アラートの要約を毎朝 Slack に流す

5. Playwright MCP ─ E2E テストを自動生成・実行

Microsoft が提供する Playwright MCP は、ブラウザ操作と E2E テストの生成・実行を AI に任せられるサーバーです。npx @playwright/mcp@latest で導入でき、既存タブへの接続や --isolated でのセッション分離、--storage-state でのログイン状態再利用など、現場で嬉しいオプションが揃っています。(GitHub)

最小セットアップ

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

どんな場面で効く？

• 新機能を実装した直後に「このユーザーフローの E2E を書いて実行、結果をまとめて」と依頼
• ログインが必要なテストを、ストレージ状態を渡して即走らせる
• 既存のログイン済みタブに接続し、手元ブラウザの状態をそのまま流用する

まとめ ─ AI に“現場のコンテキスト”を渡すだけで変わる

• Context7：最新版ドキュメントを注入してコード回答の確度を高める (GitHub)
• Stripe MCP：決済運用をチャット経由で安全に回せる (docs.stripe.com)
• Chrome DevTools MCP：ブラウザ調査とパフォーマンス計測を自動化 (Chrome for Developers)
• GitHub MCP：Issue/PR/CI など開発運営をエージェント化 (GitHub)
• Playwright MCP：E2E テストを生成・実行し、結果まで報告してくれる (GitHub)

MCP は“AI 用の USB-C”という比喩が本当にしっくり来ます。まずは 1 つ導入して、プロンプトに現場のデータや操作を添えてみてください。AI のアウトプットが一段と実務寄りになり、開発の安心感が劇的に変わります。