AI导哈

MCP客户端工具

一个轻量级的React钩子，用于连接到模型上下文协议（MCP）服务器，简化AI系统的认证和工具调用。

  • by pdhoward
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 pdhoward/mcpclient

使用说明

MCP客户端

  • 使用MCP 一个轻量级的React钩子，用于连接到模型上下文协议（MCP）服务器。简化了实施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

suabase连接

https://supabase.com/ui

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

CloudFlare验证机器人程序 https://blog.cloudflare.com/verified-bots-with-cryptography/

休谟的Vapi表现声

https://dashboard.vapi.ai/

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

ai-sdk与gtoc Grok 4直播 @aisdk

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

这是一个使用Vercel AI SDK的模型上下文协议SDK客户端代码的示例实现，它简化了在浏览器中处理LLM聊天。结账 如何在这里快速制作自己的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/检查器

研究

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

模块文档

  • 会话管理器（使用会话管理器） 目的：管理WebRTC连接生命周期（连接、断开连接、音频播放）并提供数据通道。

为什么分离：WebRTC连接涉及复杂的设置（例如，获取临时密钥、创建RTCPeerConnection、处理音频流），这些设置是隔离的，以避免混淆MetaAgent。这种抽象使其可用于需要WebRTC的其他组件。

崩溃可能性：如果仅在此处使用WebRTC，则可以部分内联到MetaAgent中，但这将使MetaAgent更难维护和测试。保持其独立性可以提高模块化程度。

  • HandleServerEvent（使用HandleServerEvent） 目的：处理OpenAI实时API中的各种ServerEvent类型，更新transcriptItems、sessionStatus或selectedAgentName。

Why Separate：处理多种事件类型（例如消息、转录、函数调用）的复杂性证明了使用专用钩子的合理性。它封装了业务逻辑，并减少了MetaAgent将事件连接到处理程序的责任。

潜在的崩溃：嵌入MetaAgent会使组件膨胀，产生大量的switch语句，降低可读性和可测试性。部分崩溃（例如，将特定于转录的逻辑移动到useTranscript）是可能的，但需要重组useTranscript来处理原始ServerEvents。

  • 使用转录（转录上下文） 目的：管理转录项目状态，并为消息和面包屑提供更新功能。

Why Separate：使用React Context允许跨组件共享转录项（例如，如果另一个组件需要访问）。它还集中了状态管理，使MetaAgent专注于UI和编排。

潜在崩溃：如果转录项仅在MetaAgent中使用，则状态和更新函数可以移动到MetaAgent或自定义挂钩中，从而消除上下文。然而，这假设没有其他组件需要转录项，随着应用程序的增长，转录项可能不会成立。

  • 消息处理程序（使用消息处理程序） 目的：处理传出的客户端事件（例如，发送用户文本、取消助理语音）和模拟消息。

Why Separate：隔离发送WebRTC消息的逻辑，确保MetaAgent不会直接与dataChannel交互以发送事件。这种抽象支持可重用性并简化了测试。

崩溃可能性：可以内联到MetaAgent中，但这会将UI逻辑与事件发送逻辑混合在一起，降低清晰度。钩子的小尺寸使其成为轻量级的抽象。

  • Agent会话（使用Agent会话） 目的：使用特定于代理的设置（例如，说明、工具、语音）配置OpenAI实时API会话。

为什么分离：会话配置与UI呈现或事件处理是一个不同的问题，逻辑（例如，构造Session.update事件）足够复杂，需要隔离。

崩溃潜力：嵌入MetaAgent将添加更多useEffect逻辑，使组件更难阅读。与MessageHandler进行部分合并（因为两者都处理sendClientEvent）是可能的，但除非精心构造，否则会降低清晰度。

  • Mapped消息（使用Mapped消息） 目的：将转录项和日志事件转换为对话和日志格式，供人工智能代理使用。

为什么分离：转换逻辑特定于代理需求，可以在其他地方重用。它避免了用数据映射混淆MetaAgent。

崩溃可能性：如果日志和对话仅在MetaAgent中使用，而不由其他组件使用，则可以内联完成映射。然而，保持其独立性支持未来的可扩展性（例如，如果其他组件需要映射的数据）。

相关 MCP