Mcpclient

MCP クライアント

• USE MCP Model Context Protocol（MCP）サーバーに接続するための軽量な React フックです。MCP 標準を実装する AI システムの認証とツール呼び出しを簡素化します。

https://github.com/modelcontextprotocol/use-mcp

https://blog.cloudflare.com/connect-any-react-application-to-an-mcp-server-in-three-lines-of-code/

• OpenAI エージェント https://openai.github.io/openai-agents-js/guides/voice-agents/

https://x.com/OpenAIDevs/status/1929950678799266253

• エージェントの本番運用 https://github.com/NirDiamant/agents-towards-production

---

Supabase 接続

https://supabase.com/ui

https://supabase.com/ui/docs/getting-started/introduction

---

CloudFlare 認証済みボットプログラム https://blog.cloudflare.com/verified-bots-with-cryptography/

---

Hume による Vapi の表現力豊かな音声

https://dashboard.vapi.ai/

---

公開 API https://github.com/public-apis/public-apis

---

ai sdk と gtoc Grok 4 が @aisdk で利用可能

𝚒𝚖𝚙𝚘𝚛𝚝 { 𝚐𝚎𝚗𝚎𝚛𝚊𝚝𝚎𝚃𝚎𝚡𝚝 } 𝚏𝚛𝚘𝚖 '𝚊𝚒' 𝚌𝚘𝚗𝚜𝚝 { 𝚝𝚎𝚡𝚝 } = 𝚊𝚠𝚊𝚒𝚝 𝚐𝚎𝚗𝚎𝚛𝚊𝚝𝚎𝚃𝚎𝚡𝚝({ 𝚖𝚘𝚍𝚎𝚕: '𝚡𝚊𝚒/𝚐𝚛𝚘𝚔-𝟺', 𝚙𝚛𝚘𝚖𝚙𝚝: 'T𝚑𝚎 𝚊𝚗𝚜𝚠𝚎𝚛 𝚝𝚘 𝚕𝚒𝚏𝚎' })

---

これは、ブラウザーでの LLM チャット処理を簡素化する Vercel AI SDK を使った、Model Context Protocol SDK のクライアントコードの実装例です。こちらで独自の MCP サーバーをすばやく作成する方法をご覧ください

仕組み

1. UI を通じて SSE で MCP サーバーに接続します（SSE を使った MCP サーバーの作成方法はこちらをご覧ください）。
2. システムが利用可能なツールを自動的に検出します
3. ツールを使うよう指示します

はじめに

# Install dependencies
npm install

# Run the development server
npm run dev

続いて http://localhost:3000 にアクセスします。

検査

npx @modelcontextprotocol/inspector

調査

https://component-playground-eight.vercel.app/

プロジェクト管理 https://github.com/ln-dev7/circle

SBA サプライヤーポータル https://www.industrynet.com/madeinamerica/ https://www.thomasnet.com/suppliers/madeinamerica https://i5services-20596380.hs-sites.com/made-in-america

モジュールのドキュメント

• SessionManager (useSessionManager) 目的：WebRTC 接続のライフサイクル（接続、切断、音声再生）を管理し、dataChannel を提供します。

分離する理由：WebRTC 接続には複雑なセットアップ（例：一時キーの取得、RTCPeerConnection の作成、音声ストリームの処理）が伴います。これを分離することで、MetaAgent が煩雑になるのを防ぎます。この抽象化により、WebRTC を必要とする他のコンポーネントでも再利用できます。

統合できる可能性：WebRTC をここでのみ使用する場合は、MetaAgent に部分的にインライン化できますが、MetaAgent の保守やテストが難しくなります。分離したままにすることで、モジュール性が高まります。

• HandleServerEvent (useHandleServerEvent) 目的：OpenAI Realtime API の幅広い ServerEvent タイプを処理し、transcriptItems、sessionStatus、または selectedAgentName を更新します。

分離する理由：複数のイベントタイプ（例：メッセージ、文字起こし、関数呼び出し）を処理する複雑さを考えると、専用のフックが適しています。ビジネスロジックをカプセル化し、MetaAgent の役割をイベントとハンドラーの接続だけに限定できます。

統合できる可能性：MetaAgent にインライン化すると、大きな switch 文がコンポーネントに追加され、可読性とテスト容易性が低下します。一部を統合する（例：文字起こし固有のロジックを useTranscript に移す）ことは可能ですが、その場合は生の ServerEvent を処理できるように useTranscript を再構成する必要があります。

• useTranscript (TranscriptContext) 目的：transcriptItems の状態を管理し、メッセージやブレッドクラムの更新関数を提供します。

分離する理由：React Context を使うことで、transcriptItems をコンポーネント間で共有できます（例：別のコンポーネントからアクセスする必要がある場合）。また、状態管理を一元化することで、MetaAgent が UI とオーケストレーションに専念できます。

統合できる可能性：transcriptItems が MetaAgent でのみ使用される場合、状態と更新関数を MetaAgent またはカスタムフックに移し、コンテキストをなくすことができます。ただし、これは他のコンポーネントが transcriptItems を必要としないことを前提としており、アプリの成長に伴ってその前提が成り立たなくなる可能性があります。

• MessageHandler (useMessageHandler) 目的：クライアントから送信するイベント（例：ユーザーのテキスト送信、アシスタントの発話のキャンセル）とシミュレーションメッセージを処理します。

分離する理由：WebRTC メッセージを送信するロジックを分離することで、MetaAgent がイベント送信のために dataChannel を直接操作しないようにします。この抽象化により再利用性が高まり、テストも簡素化されます。

統合できる可能性：MetaAgent にインライン化できますが、UI ロジックとイベント送信ロジックが混在し、明確さが損なわれます。このフックは小規模で、軽量な抽象化として機能します。

• AgentSession (useAgentSession) 目的：エージェント固有の設定（例：指示、ツール、音声）を使って OpenAI Realtime API セッションを構成します。

分離する理由：セッション構成は UI のレンダリングやイベント処理とは別の関心事であり、そのロジック（例：session.update イベントの構築）は分離する価値があるほど複雑です。

統合できる可能性：MetaAgent にインライン化すると useEffect ロジックが増え、コンポーネントが読みにくくなります。MessageHandler と部分的に統合すること（どちらも sendClientEvent を扱うため）は可能ですが、慎重に構成しないと明確さが損なわれます。

• MappedMessages (useMappedMessages) 目的：transcriptItems と loggedEvents を、AI エージェントで利用する可能性のある Conversation 形式と logs 形式に変換します。

分離する理由：変換ロジックはエージェントの要件に特化しており、他の場所で再利用される可能性があります。これにより、MetaAgent がデータのマッピングで煩雑になるのを防ぎます。

統合できる可能性：logs と conversation が MetaAgent でのみ使用され、他のコンポーネントでは使われない場合は、マッピングをインラインで行えます。ただし、分離しておくことで、将来の拡張性（例：他のコンポーネントがマッピング済みデータを必要とする場合）を確保できます。