Mcpclient

MCP 客户端

• 使用 MCP 用于连接 Model Context Protocol（MCP）服务的轻量级 React hook。为实现 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 AGENTS https://openai.github.io/openai-agents-js/guides/voice-agents/

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

• Agent 生产化 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/

---

Vapi 与 Hume 的富有表现力的语音

https://dashboard.vapi.ai/

---

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

---

ai sdk 和 gtoc Grok 4 已在 @aisdk 上线

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

---

这是一个示例实现，展示如何将 Model Context Protocol SDK 的客户端代码与 Vercel AI SDK 搭配使用，从而简化在浏览器中处理大模型聊天的过程。查看如何快速创建自己的 MCP 服务

工作原理

1. 通过界面使用 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。

为何单独拆分：处理多种事件类型（例如消息、转录文本、函数调用）的复杂性足以证明需要专门的 hook。它封装了业务逻辑，让 MetaAgent 只需将事件连接到处理器，减轻其职责。

可合并的可能性：内联到 MetaAgent 会使组件因包含大量 switch 语句而变得臃肿，降低可读性和可测试性。也可以部分合并（例如，将转录文本相关逻辑移到 useTranscript），但需要重构 useTranscript，使其能够处理原始 ServerEvent。

• useTranscript（TranscriptContext） 用途：管理 transcriptItems 状态，并提供用于更新消息和面包屑的函数。

为何单独拆分：使用 React Context 可以让多个组件共享 transcriptItems（例如，其他组件也需要访问该状态时）。它还集中管理状态，让 MetaAgent 专注于 UI 和编排。

可合并的可能性：如果只有 MetaAgent 使用 transcriptItems，可以将状态和更新函数移至 MetaAgent 或自定义 hook，从而移除 context。不过，这一做法的前提是没有其他组件需要 transcriptItems，而随着应用扩展，这一前提可能不再成立。

• MessageHandler（useMessageHandler） 用途：处理发出的客户端事件（例如发送用户文本、取消助手语音）和模拟消息。

为何单独拆分：它隔离了发送 WebRTC 消息的逻辑，确保 MetaAgent 不会直接通过 dataChannel 发送事件。此抽象支持复用，并简化测试。

可合并的可能性：可以内联到 MetaAgent，但这会将 UI 逻辑与事件发送逻辑混在一起，降低清晰度。该 hook 规模较小，是一种轻量级抽象。

• AgentSession（useAgentSession） 用途：使用 Agent 专属设置（例如指令、工具、语音）配置 OpenAI Realtime API 会话。

为何单独拆分：会话配置是区别于 UI 渲染和事件处理的独立关注点，其逻辑（例如构造 session.update 事件）也足够复杂，适合单独隔离。

可合并的可能性：内联到 MetaAgent 会增加更多 useEffect 逻辑，使组件更难阅读。也可以与 MessageHandler 部分合并（因为两者都涉及 sendClientEvent），但除非经过精心设计，否则会降低清晰度。

• MappedMessages（useMappedMessages） 用途：将 transcriptItems 和 loggedEvents 转换为 Conversation 和 logs 格式，以供 AI Agent 使用。

为何单独拆分：此转换逻辑针对 Agent 的需求，并可能在其他地方复用。将其拆分可避免 MetaAgent 因数据映射而变得臃肿。

可合并的可能性：如果只有 MetaAgent 使用 logs 和 conversation，而其他组件不使用，可以直接在组件内完成映射。不过，保持单独拆分有助于未来扩展（例如，其他组件需要使用映射后的数据）。