use-mcp：React开发者的终极MCP连接解决方案

use-mcp：React开发者的终极MCP连接解决方案

【免费下载链接】use-mcp项目地址: https://gitcode.com/gh_mirrors/use/use-mcp

在AI应用开发领域，Model Context Protocol（MCP）正在成为连接AI模型与外部工具的标准协议。然而，对于React开发者来说，如何高效地将MCP服务器集成到应用中一直是个挑战。今天，我要介绍的use-mcp正是解决这一痛点的终极解决方案！🚀

什么是use-mcp？

use-mcp是一个轻量级的React Hook库，专门用于连接MCP（Model Context Protocol）服务器。它为React开发者提供了简单、直观的API，让你可以轻松地在React应用中集成各种AI工具、资源和提示模板。无论你是要构建智能聊天应用、AI助手还是其他AI驱动的功能，use-mcp都能帮你快速实现。

这个库的核心优势在于它的简单易用性——只需要几行代码，你就能让React应用具备与MCP服务器通信的能力！

为什么选择use-mcp？🤔

1. 一键式连接体验

use-mcp提供了自动化的连接管理，包括重连和重试机制。你不再需要手动处理复杂的连接逻辑，库会帮你搞定一切！

2. 完整的OAuth认证支持

内置的OAuth认证流程处理，支持弹窗和回退机制。无论你的MCP服务器使用哪种认证方式，use-mcp都能完美适配。

3. 全面的MCP功能支持

• 🔧工具调用：轻松调用MCP服务器提供的各种工具
• 📚资源访问：读取服务器资源内容
• 💬提示模板：使用服务器提供的预设提示
• 🔄实时更新：支持HTTP和SSE两种传输协议

4. TypeScript友好

完整的类型定义，提供出色的编辑器支持和类型检查，让你的开发体验更加顺畅。

快速开始指南 📦

安装步骤

npm install use-mcp # 或者 pnpm add use-mcp # 或者 yarn add use-mcp

基础用法示例

在你的React组件中，使用use-mcp Hook就像使用其他React Hook一样简单：

import { useMcp } from 'use-mcp/react' function MyAIComponent() { const { state, tools, resources, prompts, callTool, readResource, getPrompt } = useMcp({ url: 'https://your-mcp-server.com', clientName: 'My Awesome App' }) // 根据连接状态显示不同UI if (state === 'failed') { return <div>连接失败，请重试</div> } if (state !== 'ready') { return <div>正在连接AI服务...</div> } // 调用工具示例 const handleSearch = async () => { const result = await callTool('search', { query: 'React教程' }) console.log('搜索结果:', result) } return ( <div> <h3>可用工具 ({tools.length})</h3> <button onClick={handleSearch}>搜索</button> </div> ) }

核心功能深度解析 🔍

连接状态管理

use-mcp提供了7种连接状态，让你可以精确控制用户体验：

• discovering：正在发现服务器
• pending_auth：等待认证
• authenticating：认证中
• connecting：连接中
• loading：加载中
• ready：准备就绪
• failed：连接失败

OAuth认证配置

设置OAuth回调端点非常简单。如果你使用React Router：

// 在路由配置中添加回调页面 <Route path="/oauth/callback" element={<OAuthCallback />} />

回调组件只需要调用onMcpAuthorization()函数即可：

import { onMcpAuthorization } from 'use-mcp' function OAuthCallback() { useEffect(() => { onMcpAuthorization() }, []) return <div>认证中...</div> }

高级配置选项

use-mcp提供了丰富的配置选项，满足各种复杂需求：

const mcpConfig = { url: 'https://your-mcp-server.com', clientName: 'MyApp', clientUri: 'https://myapp.com', callbackUrl: '/custom/callback/path', autoReconnect: true, // 自动重连 autoRetry: 5000, // 5秒后重试 transportType: 'auto', // 自动选择传输协议 debug: true // 启用调试日志 }

实战应用场景 🎯

场景1：智能聊天应用

在聊天应用中集成AI工具，比如搜索、计算、翻译等功能：

const { callTool } = useMcp({ url: 'https://chat-mcp-server.com' }) // 用户发送消息时调用相应工具 const handleUserMessage = async (message: string) => { if (message.includes('搜索')) { const query = message.replace('搜索', '').trim() return await callTool('web_search', { query }) } if (message.includes('计算')) { const expression = message.replace('计算', '').trim() return await callTool('calculator', { expression }) } }

场景2：AI助手面板

创建一个集成了多种AI功能的控制面板：

const { tools, resources, prompts } = useMcp({ url: 'https://assistant-server.com' }) // 显示所有可用功能 return ( <div className="assistant-panel"> <div className="tools-section"> <h4>可用工具 ({tools.length})</h4> {tools.map(tool => ( <ToolCard key={tool.name} tool={tool} /> ))} </div> <div className="resources-section"> <h4>资源库 ({resources.length})</h4> {resources.map(resource => ( <ResourceItem key={resource.uri} resource={resource} /> ))} </div> </div> )

最佳实践建议 💡

1. 错误处理策略

const { state, error, retry } = useMcp(options) useEffect(() => { if (state === 'failed') { // 记录错误日志 console.error('MCP连接失败:', error) // 显示用户友好的错误信息 showNotification('连接AI服务失败，请检查网络后重试') // 提供重试按钮 setTimeout(() => retry(), 3000) // 3秒后自动重试 } }, [state, error, retry])

2. 性能优化

// 使用React.memo避免不必要的重渲染 const MemoizedAITools = React.memo(({ tools, callTool }) => ( <div> {tools.map(tool => ( <ToolButton key={tool.name} tool={tool} onClick={() => callTool(tool.name)} /> ))} </div> )) // 按需加载资源 const loadResourceOnDemand = async (resourceUri: string) => { const content = await readResource(resourceUri) // 处理资源内容 }

3. 测试策略

项目提供了完整的测试套件，位于test/目录。运行测试：

cd test && pnpm test # 运行无头测试 cd test && pnpm test:headed # 运行可视化测试 cd test && pnpm test:watch # 监视模式运行

项目架构与源码结构 📁

use-mcp采用了模块化的架构设计：

src/ ├── auth/ # 认证相关模块 │ ├── browser-provider.ts │ ├── callback.ts │ └── types.ts ├── react/ # React Hook实现 │ ├── useMcp.ts # 核心Hook实现 │ ├── index.ts # 导出入口 │ └── types.ts # 类型定义 └── utils/ # 工具函数 └── assert.ts

核心Hook实现在src/react/useMcp.ts文件中，这是一个848行的精心设计的React Hook，处理了所有复杂的连接、认证和状态管理逻辑。

开发环境搭建 🛠️

项目提供了完整的一键开发环境：

# 安装所有依赖 pnpm install:all # 启动开发环境 pnpm dev

这会同时启动：

• Inspector调试工具：http://localhost:5001
• Chat UI示例：http://localhost:5002
• Hono MCP服务器示例：http://localhost:5101
• Cloudflare Workers AI服务器：http://localhost:5102

社区与贡献 🤝

use-mcp是Model Context Protocol生态系统的一部分，采用了MIT开源协议。项目欢迎社区贡献，包括：

• 🐛 提交bug报告
• 💡 提出新功能建议
• 🔧 提交代码改进
• 📚 完善文档

总结 🎉

use-mcp为React开发者提供了连接MCP服务器的终极解决方案。它的主要优势包括：

✅简单易用：几行代码即可集成MCP功能 ✅功能全面：支持工具、资源、提示等所有MCP特性 ✅稳定可靠：内置重连、重试和错误处理机制 ✅类型安全：完整的TypeScript支持 ✅社区活跃：持续更新和维护

无论你是要构建AI聊天应用、智能助手还是其他AI驱动的React应用，use-mcp都能帮你节省大量开发时间，让你专注于业务逻辑而不是底层连接细节。

现在就开始使用use-mcp，让你的React应用轻松获得AI超能力吧！✨

【免费下载链接】use-mcp项目地址: https://gitcode.com/gh_mirrors/use/use-mcp