Claude Codeで使いたい
おすすめMCP 10選。
コードを書くClaude Codeから、仕様・GitHub・デザイン・DB・デプロイ・本番エラー・ブラウザまで扱うClaude Codeへ。 MCPをどう組み合わせるかで、AI開発環境は大きく変わります。
まずは自分の開発フローで頻繁に行き来するサービスから導入するのがおすすめです。 Web開発ならGitHub・Vercel・Sentry・Notionあたりから始めると、MCPの効果を実感しやすくなります。
おすすめMCP 10選を一覧で比較
1. Notion MCP｜仕様書とコードをつなぐ
NotionにあるPRD・仕様書・技術メモ・タスク情報をClaude Codeから参照・更新できるMCPです。 「仕様を読むためにNotionへ戻る」回数を減らせるのが大きなメリットです。
Notion公式MCPはOAuthでワークスペースへ接続し、ページの検索・作成・更新などをAIエージェントから行えます。
claude mcp add --transport http notion \
https://mcp.notion.com/mcpたとえば「Notionの仕様書を確認して、このリポジトリとの差分を調べて」といった使い方ができます。
2. GitHub MCP｜Issue・PR・リポジトリをAIへ
GitHub公式MCP Serverを使うと、AIエージェントとGitHubのリポジトリ・Issue・Pull Requestなどを接続できます。
Claude Code自体もローカルGitを扱えますが、GitHub MCPを組み合わせることで、GitHub側の情報まで含めた開発フローを組みやすくなります。
たとえば「このIssueを読んで原因を調査し、修正案を作る」「PRの内容と現在のコードを比較する」といった使い方が考えられます。
3. Vercel MCP｜デプロイとログをClaude Codeへ
Vercelプロジェクト、デプロイ、ログなどの情報をAIエージェントから扱うための公式MCPです。 Next.js開発との相性は特に高い組み合わせです。
デプロイ失敗時に、Vercel側のログをClaude Codeへ持ち込み、そのままコード修正まで進めるワークフローを作れます。
VercelはMCPとは別に、Claude Code向けのVercel Pluginも提供しています。MCPはアカウント上のツール操作、PluginはVercelに関する知識・Skillの提供という違いがあり、併用もできます。
4. Sentry MCP｜本番エラーから修正まで
Sentryに記録された本番エラー・トレースなどをAIエージェントから調査し、コード修正へつなげられます。
claude mcp add --transport http sentry \
https://mcp.sentry.dev/mcp「SentryのこのIssueを調査して原因を特定 → 修正 → テスト」という流れは、Claude Code × MCPの価値が最も分かりやすいユースケースのひとつです。
5. Figma MCP｜デザインからコードへ
Figmaファイルのコンポーネント、変数、レイアウトなどの構造化されたデザイン情報をClaude Codeへ渡せます。
単なるスクリーンショットではなく、Figma内部のデザインコンテキストを使えるのが大きな特徴です。
現在のFigma MCPでは、対応する環境・権限でFigmaキャンバスへ直接コンテンツを作成・更新する機能も提供されています。
https://mcp.figma.com/mcp6. Supabase MCP｜DBとバックエンドを自然言語で扱う
Supabaseプロジェクトへ接続し、データベース、Edge Functions、ドキュメント、デバッグ情報などをAIから扱えます。
Supabase公式では、プロジェクト単位へのスコープやread-only設定も用意されています。
データベースMCPは非常に強力です。 最初から本番データへの広い書き込み権限を与えず、対象プロジェクトと機能を絞って利用するのがおすすめです。
7. Playwright MCP｜ブラウザ操作とE2Eテスト
MicrosoftのPlaywrightを使い、Claude CodeなどのAIエージェントへブラウザ操作能力を追加します。
Playwright MCPは、アクセシビリティスナップショットを利用してWebページを理解し、クリック・入力・フォーム操作などを行えます。
npx @playwright/mcp@latest「実装 → ブラウザで確認 → エラー検出 → 再修正」というAI開発ループを作りたい場合に非常に強力です。
8. Linear MCP｜AIとタスク管理をつなぐ
LinearのIssue、Project、CommentなどをAIエージェントから検索・作成・更新できます。
claude mcp add --transport http linear-server \
https://mcp.linear.app/mcp仕様からIssueを作る、作業完了後にステータスを更新する、といった「コードの外側の開発業務」までAIへ広げられます。
9. Cloudflare MCP｜インフラ・セキュリティまでAIへ
Cloudflareは、自社サービス向けの複数のリモートMCPサーバーを提供しています。
Cloudflareアカウントの設定を確認したり、開発・セキュリティ・パフォーマンス関連の情報をAIから扱ったりできます。
Cloudflareは2026年7月時点で、新しいMCP仕様に対応したStreamable HTTPベースの接続を推奨しています。
10. Stripe MCP｜決済APIをAI開発へ
Stripe APIとAIエージェントを接続し、Stripeのドキュメント検索やAPI操作を支援する公式MCPです。
https://mcp.stripe.comサブスクリプションや決済機能を実装するSaaSでは、Stripeの最新仕様を確認しながら開発できるメリットがあります。
結局、どのMCPから入れるべき？
利用するMCPは、普段の開発スタックによって変わります。
GitHub + Vercel + Sentry + Playwright。実装からデプロイ、本番エラー、E2Eまでをつなぎます。
Notion + Figma + GitHub + Linear。仕様・デザイン・コード・タスクを横断します。
Supabase + Vercel + Stripe + Sentry。DB・配信・決済・監視をまとめて扱います。
Notionを開く、GitHubを見る、Vercelログを見る、Sentryを確認する。 これまで人間が何度もサービス間を移動していた部分をClaude Codeへ集約できるところに、MCPの大きな価値があります。
MCPを大量に入れる前に知っておきたいこと
権限管理は重要になる。
MCPはAIへ新しい能力を与える仕組みです。 便利さと同時に、AIがアクセスできるデータや操作範囲も増えます。
- 公式または信頼できるMCPサーバーを優先する
- 本番環境ではread-onlyから始める
- 必要のない書き込み権限を与えない
- APIキーやトークンをGitへ保存しない
- プロジェクト単位でアクセス範囲を絞る
- AIが実行する変更をレビューする
- 不要になったMCPは無効化する
MCPが増えると、Claude Codeはどう変わる？
Claude Code単体では、主にコードベースとローカル開発環境を扱います。
MCPを組み合わせると、その範囲は大きく広がります。
Notionで仕様を読む → Figmaでデザインを確認 → GitHubでIssueを確認 → コードを実装 → Playwrightでテスト → Vercelでデプロイ確認 → Sentryで本番エラー確認
という開発フローを、1つのAIエージェント中心で進められるようになります。
ClaudeやGPTが頭脳だとすれば、MCPは外部サービスへ接続する神経や手足に近い存在です。 今後のAI開発環境では、モデル性能と同じくらい「どのツールへ接続できるか」が重要になっていくでしょう。
Claude Code × MCPをもっと知る
出典：Anthropic、Notion、GitHub、Vercel、Sentry、Figma、Supabase、Microsoft Playwright、Linear、Cloudflare、Stripe各公式ドキュメント。機能・接続方法・提供状況は記事執筆時点の情報です。
