3行のコードで、ReactアプリケーションをMCPサーバーに接続します

このコンテンツは自動機械翻訳サービスによる翻訳版であり、皆さまの便宜のために提供しています。原本の英語版と異なる誤り、省略、解釈の微妙な違いが含まれる場合があります。ご不明な点がある場合は、英語版原本をご確認ください。

ワンクリックで、Cloudflareにリモートモデルコンテキストプロトコル（MCP）サーバーをデプロイできます。信じられませんか？下のボタンをクリックしてください。

これにより、最新のMCP標準をサポートするリモートMCPサーバーが利用可能になります。これが、Atlassian、Linear、PayPalなどの企業のサーバーを含む、数千のリモートMCPサーバーがCloudflareにデプロイされている理由です。

しかし、サーバーのデプロイは方程式の半分に過ぎません。私たちは、これらのサーバーに接続して新しいAIによるサービス統合を可能にする、リモートMCPクライアントの構築とデプロイも、同じくらい簡単にしたいと考えました。そこで、私たちはリモートMCPサーバーに接続するためのReactライブラリである use-mcp を構築しました。これをMCPエコシステムに貢献して、より多くの開発者がリモートMCPクライアントを構築できるようにしたのです。

本日、MCPクライアントの構築とデプロイを簡単に行える2つのツールをオープンソース化します。

use-mcp — わずか3行のコードで任意のリモートMCPサーバーに接続し、トランスポート、認証、セッション管理を自動的に処理するReactライブラリ。このライブラリをMCPエコシステムに貢献して、より多くの開発者がリモートMCPクライアントを構築できるようになることを嬉しく思います。
AI Playgroundは、多くのLLMモデルを使用してリモートMCPサーバーと対話するCloudflareのAIチャットインターフェースプラットフォームであり、最新のMCP標準をサポートしており、ご自身でデプロイできるようになりました。

AIを活用したチャットボット、サポートエージェント、社内インターフェースのいずれを構築している場合でも、これらのツールを活用し、MCP経由でAIエージェントとアプリケーションを外部サービスに接続することができます。

導入をご希望ですか？下のボタンをクリックして、CloudflareのAI Playgroundのインスタンスをデプロイして、動作を確認してください。

use-mcp：リモートMCPクライアント構築用のReactライブラリ

use-mcpは、MCPクライアント構築の複雑さをすべて抽象化するReactライブラリです。useMCP()フックをReactアプリケーションに追加し、ユーザーが操作できるリモートMCPサーバーに接続します。

リモートMCPサーバーに接続するために追加する必要があるコードはすべて以下の通りです：

mport { useMcp } from 'use-mcp/react'
function MyComponent() {
  const { state, tools, callTool } = useMcp({
    url: 'https://mcp-server.example.com'
  })
  return <div>Your actual UI code</div>
}

URLを指定するだけで、瞬時に接続できます。

舞台裏では、use-mcpがトランスポートプロトコル（Streamable HTTPとServer-Sent Eventsの両方）、認証フロー、セッション管理を処理します。また、信頼性が高くスケーラブルで本番環境に対応したMCPクライアントの構築を支援する機能も数多く備えています。

接続管理

ネットワークの信頼性がユーザー体験に影響を与えるべきではありません。use-mcpは接続のリトライと再接続をバックオフスケジュールで管理し、ネットワークの問題が発生しているときにクライアントが接続を回復して、中断した場所から続行できるようにします。フックは、リアルタイムの接続状態（「接続中」、「準備完了」、「失敗」）を公開し、カスタム接続処理ロジックを記述することなく、ユーザーに情報を提供し続ける応答性の高いUIを構築することができます。

const { state } = useMcp({ url: 'https://mcp-server.example.com' })

if (state === 'connecting') {
  return <div>Establishing connection...</div>
}
if (state === 'ready') {
  return <div>Connected and ready!</div>
}
if (state === 'failed') {
  return <div>Connection failed</div>
}

認証と認可

多くのMCPサーバーは、ツールを呼び出すために何らかの形で認証を必要とします。use-mcpはOAuth 2.1をサポートし、OAuthフロー全体を処理します。ユーザーをログインページにリダイレクトして、アクセスを許可し、OAuthプロバイダーから返されるトークンを安全に保存し、サーバーに向けたこれ以降のすべてのリクエストに使用します。このライブラリでは、ユーザーがアクセス権を取り消す、または保存された認証情報を削除する方法も提供しています。これにより、ロジックを記述することなく、リモートMCPサーバーに安全に接続できる完全な認証システムが得られます。

const { clearStorage } = useMcp({ url: 'https://mcp-server.example.com' })

// Revoke access and clear stored credentials
const handleLogout = () => {
  clearStorage() // Removes all stored tokens, client info, and auth state
}

動的ツール検出

MCPサーバーに接続すると、use-mcpは公開されているツールを取得します。サーバーが新しい機能を追加した場合、アプリはコードを変更せずにそれを認識できます。各ツールは、必要な入力や機能に関する型安全なメタデータを提供するため、クライアントはユーザーの入力を自動的に検証し、適切なツールを呼び出すことができます。

デバッグと監視機能

MCP統合のトラブルシューティングを支援するために、use-mcpは、debug、info、warn、Errorレベルで構造化されたメッセージを含むログ配列を公開し、それぞれにタイムスタンプを付けます。デバッグオプションで詳細なロギングを有効にし、ツール呼び出し、認証フロー、接続状態の変更、エラーを追跡できます。このリアルタイムの可視性により、開発時や本番環境の問題を診断しやすくなります。

将来への備えと後方互換性

MCPは急速に進化しており、トランスポートメカニズムが最近更新され、今後の認可も変更される予定です。use-mcpは、Server-Sent Events（SSE）と新しいStreamable HTTPトランスポートの両方をサポートし、MCPサーバーでサポートされている場合、自動的に検出して新しいプロトコルにアップグレードします。

MCP仕様が進化し続けるにつれて、後方互換性を維持しながら、最新の標準に合わせてライブラリを更新していきます。私たちは、use-mcpをMCPプロジェクトに貢献できることをうれしく思っています。これにより、より広範なコミュニティからの支援を受け、さらにはMCPプロジェクトの成長が可能になります。

CPインスペクター、use-mcpで構築

use-mcpのサンプルディレクトリに、 use-mcp フックで構築された最小限の MCPインスペクターが表示されます。 .任意のMCPサーバーのURLを入力して、接続をテストし、利用可能なツールを表示し、デバッグログでインタラクションを監視します。これは、独自のMCPクライアントを構築したり、MCPサーバーへの接続をデバッグするために使用できるものとして、最適な出発点となります。

AI Playgroundのオープンソース化

当社は当初、Workers AIがサポートしているさまざまなAIモデルをテストするためのチャットインターフェースをユーザーに提供するためにAI Playgroundを構築しました。その後、MCPのサポートを追加したため、MCPサーバーに接続し、テストするためのリモートMCPクライアントとして使用できるようになりました。本日、私たちはplaygroundをオープンソース化し、MCPクライアントが組み込まれた完全なチャットインターフェースを提供します。これにより、ご自身でデプロイし、ニーズに合わせてカスタマイズすることができます。

Playgroundには、Streamable HTTPとServer-Sent Eventsの両方のトランスポートメソッド、ユーザーにサインインして権限を付与することができるOAuth認証フロー、および直接MCPサーバー接続のためのトークン認証のサポートなど、最新のMCP規格のサポートが組み込まれています。

AI Playgroundの仕組み

AI Playgroundは、Workers AI上に構築されており、Agents SDKとuse-mcpライブラリを組み合わせて、Cloudflareのネットワーク上で動作する大規模言語モデル（LLM）のフルカタログにアクセスできます。

AI Playgroundは、use-mcpライブラリを使用して、リモートMCPサーバーへの接続を管理します。playgroundが起動すると、MCP接続システムを const{tools: mcpTools} = useMcp() で初期化することで、接続されたサーバーからすべてのツールにアクセスできるようになります。最初は、このリストはどのMCPサーバーにも接続されていないため空になりますが、リモートMCPサーバーへの接続が確立されると、ツールは自動的に検出され、リストに入力されます。

一度接続されると、playgroundはMCPサーバーが公開するすべてのツールにすぐにアクセスできます。 use-mcpライブラリは、すべてのプロトコル通信とツール検出を処理し、接続状態を維持します。MCPサーバーが認証を必要とする場合、playgroundは、 use-mcp から onMcpAuthorization を使用して認証プロセスを完了する専用のコールバックページを通過するOAuthフローを処理します。

ユーザーがチャットメッセージを送信すると、playgroundは use-mcp フックから mcpTools を取得し、直接Workers AIに渡すことで、モデルは利用可能な機能を把握し、必要に応じて呼び出すことができます。

const stream = useChat({
  api: "/api/inference",
  body: {
    model: params.model,
    tools: mcpTools, // Tools from connected MCP servers
    max_tokens: params.max_tokens,
    system_message: params.system_message,
  },
})

デバッグと監視

MCPサーバーへの接続を監視およびデバッグするために、プレイグラウンドにDebug Logインターフェースを追加しました。これにより、接続ステータス、認証状態、接続エラーなど、MCPサーバー接続に関するリアルタイムの情報が表示されます。

チャットの対話中は、プレイグラウンドとMCPサーバー間で交換された生のメッセージ（ツールの呼び出しとその結果を含む）がデバッグインターフェースに表示されます。これにより、MCPサーバーに送信される悪意のあるペイロード、返された生の応答を監視し、ツールの呼び出しが成功したか失敗したかを追跡することができます。これは、異なる言語モデルと統合したときにツールがどのように動作しているかを確認できるため、リモートMCPサーバーを構築する方にとって特に有用です。

MCPエコシステムへの貢献

MCPがこれほど急速に進化した理由の1つは、オープンソースプロジェクトであることと、コミュニティが支えている理由の1つです。私たちは、より多くの開発者がリモートMCPクライアントを構築できるように、use-mcpライブラリをMCPエコシステムに貢献できることを嬉しく思っています。

まずは、Cloudflare AI GitHubのリポジトリでデプロイおよび変更可能な実例をご確認ください。これには、AI Playgroundの完全なソースコード、異なる認証・認可プロバイダーを使用する多数のリモートMCPサーバー、MCPインスペクターが含まれます。

Cloudflare MCPサーバーを公開し、より良いものにするための貢献を歓迎します。

初めてのMCPサーバーを構築する、既存のアプリケーションにMCPを統合する、より広範なエコシステムに貢献する、といったことを行っている方について、ぜひご意見をお聞かせください。ご質問、フィードバック、コラボレーションのアイデアがございましたら、[email protected]までメールでご連絡ください。

Cloudflare ブログ