Claude CodeにMCPを導入する方法

TL;DR

プロジェクト直下の設定ファイルに公式ドキュメントのサーバー情報と必要な認証情報を記述し、Claude Codeから読み込ませます。接続後はデータベース操作、決済管理、コード探索、資料検索、ブラウザー試験、記事作成を用途別のMCPに任せられます。

Transcript

はい、どうもしです。今回はですね、私が 開発でよく使うMCPサーバーを8個紹介 していきたいと思います。ま、最近はAI コーディングね、例えばカーソル、 クロードコード、CデEXとかを使って 開発するのがね、終了になってきたと思う んですけども、ま、その中にMCB サーバー導入するだけで開発効率が5倍と か10倍とか、ま、それくらいの恩恵を 受けることができますので、ま、今回私が よく使うもの順に紹介していきたいなと 思います。で、そういったMCPサーバー プラスクロードコードのサブエージェント ですね。え、こちらをうまく導入すると MTPサーバーをうまく扱えるようなサブ エージェントを動かしながら開発できます ので、ま、さらに飛躍的に開発効率上げる ことはできますので、ま、そういったこと ... Read More

Key Insights

• MCPの基本的な導入方法は、プロジェクト直下の「.mcp.json」に公式資料から取得したサーバー設定を記述し、Claude Codeからそのファイルを指定して起動することである。
• Supabase MCPは、実際のデータベースからテーブル構造やカラム、保存データを取得でき、コードが存在しないスキーマを参照するような不整合の発見に利用できる。
• Supabase MCPは、RLSが有効かどうかの確認や設定作成にも対応し、データベース関数や新規ユーザー登録時の処理、トリガーの作成にも利用できる。
• Stripe MCPは、ダッシュボード上の商品や取引履歴を検索し、新しい商品を作成できる一方、紹介された環境でサブスク設定を行うにはStripe CLIの導入が必要だった。
• Serena MCPは、大規模なコードベースから関連箇所を探索し、決済ポータル、フロントエンド統合、バックエンド処理、履歴表示などの実装状況を横断的に確認できる。
• Context7 MCPは、Next.js、Supabase、shadcn/ui、Tailwind CSS、Better Authなどの資料を検索し、現在の実装との比較や開発ルールの作成に利用できる。
• Playwright MCPは、ローカル環境をブラウザーで開いて画面操作やスクロール、ボタン操作を自動実行し、スクリーンショットを使った動作確認やUI改善を支援する。
• MCPをサブエージェントやカスタムスラッシュコマンドと組み合わせる方法は、コード探索、データベース修正、セキュリティ確認、UI検証などの役割を分離する手段である。
• 🎬 このチャンネルの他の動画:
  • AIツールでYouTube風アプリを開発する方法
  • Claude CodeでUI案を量産する方法
  • Next.jsにClerk認証を導入する方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Claude CodeにMCPを導入する方法は？

プロジェクト直下に「.mcp.json」を作成し、利用するMCPの公式ドキュメントに掲載されたJSON形式のサーバー設定を記述します。その後、Claude Codeをターミナルから起動する際に設定ファイルを指定します。起動後に「/mcp」を実行し、対象サーバーに緑のチェックマークが付けば接続完了です。

Q: Supabase MCPでデータベース構造を確認する方法は？

Supabase MCPを接続した状態で、確認したいテーブル名を示し、現在の構造やカラムを質問します。MCPがSupabase内でSQLを実行し、実際のスキーマを取得するため、コードだけを読む場合よりも現状を直接確認できます。テーブル名やカラム名の変更がコードへ反映されていない場合の不整合確認にも使えます。

Q: Supabase MCPでセキュリティ設定を確認する方法は？

対象テーブルのRLSが有効かどうかをSupabase MCPに確認させます。紹介された使い方では、RLSの状態確認だけでなく設定作成も可能とされており、手作業が難しい部分の確認に利用されています。ただし、認証にはSupabaseのアカウント設定画面で発行したアクセストークンを設定する必要があります。

Q: Stripe MCPで商品を作成する方法は？

StripeプロジェクトのシークレットキーをMCP設定へ記述して接続し、商品名や価格などの条件を指定して作成を依頼します。MCPから既存商品や取引履歴を検索することも可能です。紹介中には商品作成が実行されましたが、サブスクリプション設定ではStripe CLIがローカル環境に未導入だったためエラーになりました。

Q: Serena MCPで大規模なコードを探索する方法は？

Serena MCPを利用するサブエージェントとカスタムスラッシュコマンドを用意し、確認したい機能や実装箇所を引数として指定します。紹介例では、Stripeのカスタマーポータル実装を調べ、ポータルセッション、フロントエンド統合、バックエンド処理、履歴表示の有無をコードベース全体から探索しています。

Q: Context7 MCPで最新ドキュメントを参照する方法は？

Context7のダッシュボードでAPIキーを発行してMCPを設定し、対象ライブラリやフレームワークの資料を検索するよう指示します。取得した資料は、現在の実装が適切かどうかの確認や、開発ルールの作成に利用できます。掲載されていない資料は、GitHubリポジトリを登録して参照対象に加える方法も紹介されています。

Q: Playwright MCPでWebアプリをテストする方法は？

開発中のアプリをローカル環境で起動し、Playwright MCPに対象のURLと確認内容を伝えます。MCPは専用ブラウザーを開き、スクロールや決済ボタンの操作などを自動実行できます。さらに画面のスクリーンショットを保存できるため、機能確認だけでなく、画面状態を基にしたUI改善にも利用できます。

Q: MCPをサブエージェントと組み合わせる方法は？

Claude用ディレクトリの配下にエージェント定義のMarkdownファイルを作り、その役割と使用するMCPを記述します。必要に応じてコマンド用ディレクトリにもMarkdownファイルを置き、カスタムスラッシュコマンドから呼び出します。起動しない場合は、サブエージェントも立ち上げるよう明示する方法が紹介されています。

Summary & Key Takeaways

• MCPを導入する基本手順は、プロジェクト直下に「.mcp.json」を作り、公式ドキュメントから取得したJSON形式のサーバー設定を記述することです。Claude Codeでは設定ファイルを指定して起動し、「/mcp」で接続状況を確認します。緑のチェックマークが表示されれば、その設定に含まれるMCPを利用できます。

• バックエンドと決済では、Supabase MCPとStripe MCPが紹介されています。Supabase MCPはテーブル構造や実データ、RLS設定、関数、トリガーを確認・作成できます。Stripe MCPは商品や取引履歴の検索、商品の作成、関連資料の検索に使えますが、紹介された環境ではサブスクリプション設定にStripe CLIが必要でした。

• 開発支援では、Serena MCPが大規模なコードベースの探索、Context7が最新資料の検索、Playwright MCPがブラウザー操作と画面試験を担います。さらにNotion MCPを使えば、開発で得た知識を記事やメモとして保存できます。カスタムスラッシュコマンドや独立したコンテキストを持つサブエージェントとの併用も紹介されています。