概要
**ReactからMCPサーバーへ、認証もツール呼び出しも簡単に。**
詳細内容
## [ブラウザから MCP サーバーに接続する use-mcp React フック](https://azukiazusa.dev/blog/use-mcp-react-hook/)
**ReactからMCPサーバーへ、認証もツール呼び出しも簡単に。**
`use-mcp`は、ブラウザで動作するReactアプリケーションをModel Context Protocol (MCP)サーバーに接続するために作られたカスタムフックです。このフックを利用することで、開発者はAIシステムが提供するツールの呼び出しや、複雑なOAuth認証フローの実装を極めて簡単に行うことができます。
`useMcp`フックは、接続先のサーバーURLを指定するだけで、サーバーとの接続状態、利用可能なツールの一覧、そしてツールを実行するための関数を返します。これにより、サーバー側で定義されたツールの入力スキーマを元に動的なUIを生成し、ユーザーが入力した引数と共にツールを安全に呼び出すことが可能です。
さらに、多くのMCPサーバーで必須となるOAuth 2.1認証プロセスも完全にサポート。ユーザーを認証ページへリダイレクトし、コールバックを処理して認証トークンを取得・保存するまでの一連の流れを、数行のコードで実装できます。取得したトークンはブラウザのlocalStorageに保存され、次回以降のアクセスでは自動的に認証が行われます。このライブラリは、Reactを使ったフロントエンド開発において、MCPベースのAIバックエンドとの連携を大幅に簡素化します。