4,870 文字
今日の動画では、Claude Codeと MCP サーバーを組み合わせる方法について見ていきます。MCP サーバーとは何かご存じない方のために、説明動画へのリンクを下の説明欄に載せています。ここに表示されているのは「AGI」と名付けた模擬サーバーですが、Brave サーバーが稼働中で、このMCP サーバーに接続されています。これによりBrave検索APIを使用して、Brave検索エンジンから情報を取得できるようになっています。
これをClaude Codeと組み合わせると非常に強力なツールになります。まず最初に、どのように使用できるか、その威力を示す例から始めましょう。その後、自分自身でサーバーを作成する方法を段階的に説明し、そのサーバーをClaude Codeに追加する方法を紹介します。
では例から始めましょう。プロンプトを用意して、これらのMCPサーバーをClaude Codeでどのように活用できるか見ていきます。
こちらがプロンプトです：「Claude 3.7の拡張思考APIについて検索し、最も関連性の高いURLをスクレイピングするスクリプトを作成。そのスクリプトを実行してClaude 3.7についての情報を取得し、3.7 APIを使用するためのPythonコードを書く」
基本的に、まず検索を行います。Braveサーバーを使って検索することを明示する必要はありません。サーバーを説明して接続したので、Claude Codeはこれを使用する必要があることを認識しています。拡張思考APIのドキュメントを検索し、Brave検索で見つかったURLをスクレイピングするスクリプトを書きます。Claude Codeではファイルサーバーにアクセスできるので、Pythonコードを書いて実行できます。このスクリプトを実行してURLから情報を抽出し、それをコンテキストとしてClaude 3.7 APIを実行するPythonコードを作成します。
では実行してみましょう。スピニングしています。最初の処理として…少し見逃しましたが、Braveサーバーに接続しました。「Claude 3.7 extended thinking API documentation」というクエリを入力し、いくつかの結果が得られました。公式ドキュメントが見つかりました。これは私たちが必要としているものです。
次に、APIからこの情報をスクレイピングするスクリプトを作成します。「scrape_claude.py」を作成しました。正しいURLがあります。このファイル編集を適用してよいですか？はい、適用します。
次に、このスクリプトを実行して情報を収集してみましょう。エラーが発生しましたが、Claudeがこのエラーを確認し、修正しようとしています。Python 3を実行する必要があります。requestsモジュールがないようなので、インストールする必要があります。VMを作成する必要があります。
できました！URLをスクレイピングして、ドキュメントを見つけ、コードを追加しました。まだ処理中です。これを保存するか、コンテキストとしてメモリに保存するか検討しています。
APIの提案が示されました。予算トークンを有効にし、ストリーミングトークンを設定しています。コードの詳細には触れませんが、Brave検索を使って見つけたドキュメントとスクレイピングした情報が、API実行に十分だと信じましょう。
READMEファイルも作成されました。READMEは求めていませんでしたが、GitHubにプッシュする場合は問題ありません。
タスクが完了したようです。テストしてみましょう。Claude Codeが「claude_thinking.py」コードを取り上げて実行しようとしています。エラーがあれば表示されます。いくつかのエラーがありました。「thinking_type field required」というエラーです。
ドキュメントを使って修正してみましょう。「Max tokensはthinking tokensより大きくなければならない」というエラーも出ていますね。max_tokensをthinking_budget_tokensの2倍に設定しました。
完璧です！レスポンスが返ってきました。思考ブロックがあります。「二次方程式を解く必要がある」という高度な処理を行っています。ステップバイステップで説明しています。すべて完璧です。「Claude 3.7 API が正常に動作しました。以下は実行結果です」という内容が表示されています。
これがいかに強力かがわかります。Anthropic Claude 3.7 APIドキュメントについて全く知らない状態から、プロンプト実行、必要な情報の収集、スクレイピング、コード作成、デバッグを伴う実行まで行いました。これは非常に効率的な方法です。
カーソルに移動すると、ここにコードがあります。必要に応じて調整できます。トークン数を変更するなど、自分のものにすることができます。
これはすべて、MCP サーバーを介してClaude CodeにBrave検索APIを接続できたことで可能になりました。これは良い例だと思いますが、次のステップでは独自のサーバーを作成してみましょう。何か考えて、一緒に実装していきます。
視覚的に理解しやすくするために、Fluxイメージモデルを実行できるサーバーを作ってみましょう。Replicateからモデルを選びます。APIの実行方法に関する情報が必要なので、ReplicateとFlux Devモデルのドキュメントを集めておきます。
Cursorに移動して、FluxのAPIの動作に関するドキュメントを貼り付けました。また、Claudeのドキュメントから「Your First MCP Server」に関する情報も見つけました。これもドキュメントとして追加しておきます。サーバー構築時にCursorがこれを使用できるようにするためです。
また、Replicate APIトークンを含むENVファイルも用意しています。これで十分だと思います。コンテキストとしてFluxのドキュメントを追加します。ENVファイルも追加しておきましょう。
以前からサーバーの設定があるので、構造はすでに知っています。Braveサーバーの構造をベースに、ドキュメントも参考にしながら、Cursorに手伝ってもらいFluxサーバーを作成しましょう。
シンプルなプロンプトを考えましょう：「Flux APIを使用して画像を生成するMCPサーバーを作成したい。セットアップを手伝ってくれませんか？」
プロジェクト構造ができました。これを「servers」ディレクトリに配置します。package.json、tsconfig.json、index.ts、types.tsが必要です。まずtypes.tsファイルを作成し、次にindex.tsを作成しましょう。
実装してみて、これだけで十分かどうか確認しましょう。まず「flux-server」を追加し、index.tsを追加します。package.jsonとtsconfig.jsonも追加しました。
「flux-server」ディレクトリに移動して「npm install」を実行します。問題なく完了しました。次に「npm run build」を実行します。問題ありませんね。
次にClaude側で何か設定が必要です。ターミナルを開いて「claude mcp add flux-server」を実行し、トークンを指定します（このトークンは後で無効にします）。flux-serverディレクトリのindex.jsファイルを指定します。
サーバーが追加されました。「claude mcp list」を実行すると、Braveサーバー、Fluxサーバー、模擬AGIサーバーがあることがわかります。接続されているか確認しましょう。Claudeを実行すると、Fluxサーバーが接続されていることが表示されます。
しかし、実際に機能するのでしょうか？試してみましょう。「日本の盆栽の画像が必要です」というようなプロンプトを試します。
Fluxサーバーを呼び出しています。プロンプトに何か追加されています。URLが返されました。このURLをコピーできますが、別のことをやってみましょう。「このURLを表示するHTMLコードを作成する」というプロンプトを試します。
HTMLファイルができました。開いてみると、画像が表示されています。うまく機能しています。
構造があれば、Fluxサーバーを追加するのがいかに簡単かがわかります。これでBraveサーバーの検索とFluxサーバーを組み合わせることができ、様々なツールを統合して小さなアプリを作成し始めることができます。
何か面白いものを作ってみましょう。検索とFluxサーバーを組み合わせて画像生成を行います。「米国の関税状況に関する最新ニュースを検索し、その情報から現在の世論を表す画像を生成するプロンプトを作成し、HTMLコードでその画像を表示する」というプロンプトを使ってみましょう。
三つの操作が必要です。まずトランプの関税に関する情報を検索し、それからプロンプトを生成します。うまく機能しているようです。URLを取得しました。最後に、これを表示するためのコードを書く必要があります。
これは良い例だと思います。これらのサーバーをすべて組み合わせることができました。HTMLファイルを開いてみましょう。素晴らしいですね！米中貿易戦争と関税に関する画像が表示されています。テキストも含まれていますが、それは要求していませんでした。最新状況の要約も表示されています。
別の例も作りました。今日のテストで、ビットコイン価格のアニメーションを作成しました。ビットコインのリアルタイム価格を表示する素敵なアニメーションです。このアプリは1秒ごとにAPIをピングしてリアルタイムのビットコイン価格を追跡しています。
これは、Claude Codeのような強力なシステムにさらにツールを追加していくことでどれほど強力になるかを示しています。これらのツールはMCPサーバーと呼ばれますが、できることはまだまだあります。GitHubと接続したり、他のツールを追加したりすることができます。
MCP（Model Context Protocol）のGitHubページを見ると、多くのサードパーティーサーバーやリファレンスサーバーがあります。ウェブクローラー、ブラウザベースのサーバー、Cloudflareなど、事前に構築されたサーバーが多数あります。
これらをClaude Codeのような既存の強力なツールと組み合わせると、可能性は無限です。Airtable、Eleven Labsなども使用できます。あなたのユースケースに最適な形でClaude Codeをカスタマイズできます。
強力なのは、コードとファイルシステムアクセス、コード実行機能を、情報取得、画像生成、音声生成ができるサーバーと組み合わせることができる点です。これは非常に有望なエージェンティックワークフローになりつつあります。
これについての最後の動画ではないでしょう。今後の方向性を示す良い例だと思います。ぜひMCPサーバーをClaude Codeに実装してみることをお勧めします。サーバーについてよくわからない場合は、他の動画をご覧ください。
長い動画ではありませんでしたが、これについて少し説明できたと思います。Claude Codeを試したい方全員がアクセスできることを願っています。まだの方は待機リストに登録して、テストを始めてください。
今日はこれで以上です。楽しんでいただけたなら、ぜひこの動画にいいねをして、また次回お会いしましょう。
コメント