AI 的飞速发展正在重塑前端开发的边界。除了生成 UI、编写代码，AI 现在具备了更强的“执行能力”——而 MCP，正是实现这一能力的关键技术。
2024 年 11 月，Anthropic 提出了 MCP（Model Context Protocol），一个开放协议，旨在为 AI 模型提供标准化的接口，用于调用外部工具与数据源，从而生成更准确、更具上下文理解的响应。
如果说大模型是大脑，那么 MCP 就是它的“手脚”。它为 AI 模型提供与世界交互的通道。
近期，Cloudflare 推出了 useMcp 库，将 MCP 与 React 无缝连接，只需三行代码即可完成接入。这意味着，前端开发者现在可以像调用本地函数一样，远程触发 AI 能力与后端服务。
什么是 MCP？
MMCP（Model Context Protocol） 是一种为 AI 模型设计的标准化协议，目标是简化与外部服务集成的复杂性。它就像 AI 的“USB-C 接口”，统一了模型调用外部工具的方式。
一句话总结：MCP 让 AI 能“点击按钮”一样地调用真实世界的服务与工具。
想象你在用一个 AI 聊天机器人，它不仅能回答问题，还能查数据库、发邮件、搜索网页、下单订票。AI 如何完成这些动作？这正是 MCP 的作用 —— 它把各种后端服务抽象成“工具”，AI 则通过一套统一协议来调用这些工具，完成任务。
什么是 useMcp？
useMcp 是 Cloudflare 开源的 React Hooks 库，用于将任意 React 应用连接到远程 MCP Server。它封装了底层协议细节，包括连接管理、OAuth 认证、工具发现、工具调用等。
Github：https://github.com/modelcontextprotocol/use-mcp
它的优势包括：
- 简洁：三行代码即可完成接入；
- 自动化连接管理：支持自动重连、重试；
- OAuth 支持：兼容生产环境的身份验证流程；
- 类型定义：完整 TypeScript 类型，增强开发体验；
- 调试功能：详细日志输出，便于排查问题。
如何使用 useMcp？
当调用 useMcp() 时，它在后台做了很多事：
- 连接 MCP Server，并检测其支持的传输协议（优先使用 streamable HTTP）
- 若需认证，自动跳转 OAuth 页面，回调后提取 Token
- 获取服务器公开的工具清单（名称、参数、描述等）
- 暴露 state（连接状态）、tools（工具元数据）、callTool()（工具调用函数）等对象供组件使用
基本使用
- 安装包：首先在项目中安装 use-mcp 包
npm install use-mcp
- 导入Hooks：在 React 组件中导入 useMcp：
import { useMcp } from 'use-mcp/react';- 初始化连接：在 React 组件内调用 useMcp，传入配置参数对象。常用的参数包括：
- url：MCP 服务器地址（必填）
- clientName：OAuth 注册客户端名称
- callbackUrl：回调地址，默认为 /oauth/callback
- autoReconnect：是否启用断线重连
- debug：是否输出日志
const {
state, tools, error,
callTool, retry,
authenticate, clearStorage
} = useMcp({
url: 'https://mcp-server.com',
clientName: 'MyApp',
autoReconnect: true,
debug: true
})useMcp 的返回对象包括：
- state：当前连接状态，如 connecting、ready、failed 等
- tools：来自 MCP Server 的工具列表，每项包含名称、参数结构、描述等
- error：出错信息
- log：按照日志级别收集的事件信息数组（需启用 debug 才填充详细日志）。
- callTool(name, args)：调用指定工具，返回异步结果
- retry：手动重连
- disconnect：手动断开
- authenticate：触发认证
- clearStorage：清理凭证
身份验证
如果使用 OAuth 认证，需要在应用中配置一个回调路由，将 OAuth 提供商返回的代码传递给 useMcp。例如，在 React Router 中创建一个 /oauth/callback 路由，在该组件中调用 onMcpAuthorization()：
复制import { onMcpAuthorization } from 'use-mcp/react';
function OauthCallback() {
useEffect(() => {
onMcpAuthorization()
}, [])
return <div>正在重定向...</div>;
}并在路由中注册：
复制<Route path="/oauth/callback" element={<OAuthCallback />} />这样，用户完成授权后页面会自动处理令牌并关闭窗口。
使用返回值
useMcp 返回的 state 表示连接状态，可能的值包括：
状态 | 描述 |
discovering | 正在发现服务器 |
authenticating | 正在进行身份验证 |
connecting | 正在建立连接 |
loading | 正在加载数据 |
ready | 连接成功 |
failed | 连接失败 |
可以根据状态动态调整 AI：
复制if (state === 'failed') {
return <div>连接失败: {error}<button oniClick={retry}>重试</button></div>;
}
if (state !== 'ready') {
return <div>连接中...</div>;
}连接成功后，可从 tools 数组获取可用工具，通过 callTool(name, args) 调用它们：
复制const handleClick = async () => {
const result = await callTool('search', { query: 'MCP 是什么？' })
console.log(result)
}如果连接失败，可以调用 retry() 进行手动重连，或调用 authenticate() 弹出授权窗口。退出登录时可调用 clearStorage() 清空本地 token。
完整例子
复制import React from'react';
import { useMcp } from'use-mcp/react';
exportdefaultfunction AIExample() {
const { state, tools, callTool, retry, clearStorage } = useMcp({
url: 'https://your-mcp-server.com',
clientName: 'DemoApp',
debug: true,
autoReconnect: true
});
const handleCall = async () => {
const res = await callTool('search', { query: 'React + MCP 有什么用？' });
alert(JSON.stringify(res, null, 2));
};
if (state === 'connecting') return<p>连接中...</p>;
if (state === 'failed') return<p>连接失败 <button onClick={retry}>重试</button></p>;
return (
<div>
<h2>状态：{state}</h2>
<p>工具列表：{tools.map(t => t.name).join(', ') || '暂无'}</p>
<button onClick={handleCall}>调用 search 工具</button>
<button onClick={clearStorage}>退出登录</button>
</div>
);
}React + MCP 能做什么？
useMcp 的本质是让前端调用 MCP Server 上的工具。这些工具可以：
- 调用 AI 能力：如问答、翻译、摘要、多轮对话等；
- 查询结构化数据：如数据库查询、搜索、报告生成等；
- 触发远程操作：如创建任务、发邮件、控制后端系统等；
- 执行智能计划：结合 Agent 生成动态操作序列；
- 增强前端交互：如表单智能推荐、输入纠错、操作建议等。
小结
从“生成文字”到“执行动作”，AI 的边界正在扩展。前端开发者将成为智能代理（Agent）触达用户的重要接口。而 useMcp 正是这一变革的关键桥梁。
三行代码接入，调用真实世界的工具。
React + AI，会是什么？无限可能！
