超强 useMCP() 钩子来了，三行代码搞定各种 MCP 服务器！
use-mcp 是一个 React 库，它大大简化了构建 MCP 客户端的所有复杂性。将 useMCP() 钩子添加到任何 React 应用程序中，即可连接到用户可以交互的远程 MCP 服务器。
仅需几行代码，你就能轻松连接各种远程 MCP 服务器：
复制
import { useMcp } from use-mcp/react
function MyComponent() {
const { state, tools, callTool } = useMcp({
url: https://mcp-server.example.com
})
return <div>Your UI code</div>
}1.2.3.4.5.6.7.8.
use-mcp 负责处理传输协议（Streamable HTTP 和 Server-Sent Events）、身份验证流和会话管理。它还包含大量功能，可帮助您构建可靠、可扩展和可投入生产的 MCP 客户端。
use-mcp 的特点🌐 支持 HTTP 和 SSE 传输协议📝 调试友好，支持全面的日志🧰 开发友好，内置编辑器辅助和类型检查的 TS 类型🔄 具有重新连接和重试功能的自动连接管理📦 提供简单的 React 钩子，轻松集成 MCP 服务器🔐 支持 popup 和 fallback 的 OAuth 身份验证流处理use-mcp 在线示例通过 https://inspector.use-mcp.dev/ 地址，你可以快速体验 use-mcp 的功能：
图片
1.安装 use-mcp
复制
npm install use-mcp
# or
pnpm add use-mcp
# or
yarn add use-mcp1.2.3.4.5.
2.使用 useMcp Hook
复制
function MyMcpComponent() {
const {
state,
tools,
error,
callTool,
retry,
authenticate,
clearStorage,
} = useMcp({
url: https://your-mcp-server.com,
clientName: My App,
autoReconnect: true,
})
}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.
通过 state 属性，我们就可以处理各种不同的状态。当失败时，引导用户手动重试。
复制
// Handle different states
if (state === failed) {
return (
<div>
<p>Connection failed: {error}</p>
<button onClick={retry}>Retry</button>
<button onClick={authenticate}>Authenticate Manually</button>
</div>
)
}
if (state !== ready) {
return <div>Connecting to AI service...</div>
}1.2.3.4.5.6.7.8.9.10.11.12.13.14.
当成功链接后，使用 tools 属性，就可以向用户展示当前 MCP 服务器所有可用的工具：
复制
return (
<div>
<h2>Available Tools: {tools.length}</h2>
<ul>
{tools.map(tool => (
<li key={tool.name}>{tool.name}</li>
))}
</ul>
<button onClick={handleSearch}>Search</button>
</div>
)1.2.3.4.5.6.7.8.9.10.11.
在以上代码中，点击 Search 按钮时，会调用 handleSearch 方法。在该方法内部，通过 useMcp 函数返回的 callTool 函数来调用当前 MCP 服务器所支持的服务。
复制
const handleSearch = async () => {
try {
const result = await callTool(search, { query: example search })
console.log(Search results:, result)
} catch (err) {
console.error(Tool call failed:, err)
}
}1.2.3.4.5.6.7.8.
要处理 OAuth 身份验证流程，您需要在应用程序中设置一个回调端点。
1.在 React Router 中设置 OAuth 回调
复制
// App.tsx with React Router
import { BrowserRouter as Router, Routes, Route } fromreact-router-dom
import { useEffect } fromreact
import { onMcpAuthorization } fromuse-mcp
function OAuthCallback() {
useEffect(() => {
onMcpAuthorization()
}, [])
return (
<div>
<h1>Authenticating...</h1>
<p>This window should close automatically.</p>
</div>
)
}
function App() {
return (
<Router>
<Routes>
<Route path="/oauth/callback" element={<OAuthCallback />} />
<Route path="/" element={<YourMainComponent />} />
</Routes>
</Router>
)
}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.
2.在 Next.js Pages Router 中设置 OAuth 回调
复制
// pages/oauth/callback.tsx
import { useEffect } fromreact
import { onMcpAuthorization } fromuse-mcp
exportdefaultfunction OAuthCallbackPage() {
useEffect(() => {
onMcpAuthorization()
}, [])
return (
<div>
<h1>Authenticating...</h1>
<p>This window should close automatically.</p>
</div>
)
}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.
如果你对 MCP 感兴趣，赶紧试试 use-mcp 这个功能超强的 React 库。
阅读剩余
THE END
