AI 的飛速發(fā)展正在重塑前端開發(fā)的邊界。除了生成 UI、編寫代碼，AI 現(xiàn)在具備了更強的“執(zhí)行能力”——而 MCP，正是實現(xiàn)這一能力的關(guān)鍵技術(shù)。

2024 年 11 月，Anthropic 提出了 MCP（Model Context Protocol），一個開放協(xié)議，旨在為 AI 模型提供標(biāo)準(zhǔn)化的接口，用于調(diào)用外部工具與數(shù)據(jù)源，從而生成更準(zhǔn)確、更具上下文理解的響應(yīng)。

如果說大模型是大腦，那么 MCP 就是它的“手腳”。它為 AI 模型提供與世界交互的通道。

近期，Cloudflare 推出了 useMcp 庫，將 MCP 與 React 無縫連接，只需三行代碼即可完成接入。這意味著，前端開發(fā)者現(xiàn)在可以像調(diào)用本地函數(shù)一樣，遠程觸發(fā) AI 能力與后端服務(wù)。

什么是 MCP？

MMCP（Model Context Protocol） 是一種為 AI 模型設(shè)計的標(biāo)準(zhǔn)化協(xié)議，目標(biāo)是簡化與外部服務(wù)集成的復(fù)雜性。它就像 AI 的“USB-C 接口”，統(tǒng)一了模型調(diào)用外部工具的方式。

一句話總結(jié)：MCP 讓 AI 能“點擊按鈕”一樣地調(diào)用真實世界的服務(wù)與工具。

想象你在用一個 AI 聊天機器人，它不僅能回答問題，還能查數(shù)據(jù)庫、發(fā)郵件、搜索網(wǎng)頁、下單訂票。AI 如何完成這些動作？這正是 MCP 的作用 —— 它把各種后端服務(wù)抽象成“工具”，AI 則通過一套統(tǒng)一協(xié)議來調(diào)用這些工具，完成任務(wù)。

什么是 useMcp？

useMcp 是 Cloudflare 開源的 React Hooks 庫，用于將任意 React 應(yīng)用連接到遠程 MCP Server。它封裝了底層協(xié)議細節(jié)，包括連接管理、OAuth 認證、工具發(fā)現(xiàn)、工具調(diào)用等。

Github：https://github.com/modelcontextprotocol/use-mcp

它的優(yōu)勢包括：

• 簡潔：三行代碼即可完成接入；
• 自動化連接管理：支持自動重連、重試；
• OAuth 支持：兼容生產(chǎn)環(huán)境的身份驗證流程；
• 類型定義：完整 TypeScript 類型，增強開發(fā)體驗；
• 調(diào)試功能：詳細日志輸出，便于排查問題。

如何使用 useMcp？

當(dāng)調(diào)用 useMcp() 時，它在后臺做了很多事：

1. 連接 MCP Server，并檢測其支持的傳輸協(xié)議（優(yōu)先使用 streamable HTTP）
2. 若需認證，自動跳轉(zhuǎn) OAuth 頁面，回調(diào)后提取 Token
3. 獲取服務(wù)器公開的工具清單（名稱、參數(shù)、描述等）
4. 暴露 state（連接狀態(tài)）、tools（工具元數(shù)據(jù)）、callTool()（工具調(diào)用函數(shù)）等對象供組件使用

基本使用

• 安裝包：首先在項目中安裝 use-mcp 包

npm install use-mcp

• 導(dǎo)入Hooks：在 React 組件中導(dǎo)入 useMcp：

import { useMcp } from 'use-mcp/react';

• 初始化連接：在 React 組件內(nèi)調(diào)用 useMcp，傳入配置參數(shù)對象。常用的參數(shù)包括：

url：MCP 服務(wù)器地址（必填）

clientName：OAuth 注冊客戶端名稱

callbackUrl：回調(diào)地址，默認為 /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：當(dāng)前連接狀態(tài)，如 connecting、ready、failed 等
• tools：來自 MCP Server 的工具列表，每項包含名稱、參數(shù)結(jié)構(gòu)、描述等
• error：出錯信息
• log：按照日志級別收集的事件信息數(shù)組（需啟用 debug 才填充詳細日志）。
• callTool(name, args)：調(diào)用指定工具，返回異步結(jié)果
• retry：手動重連
• disconnect：手動斷開
• authenticate：觸發(fā)認證
• clearStorage：清理憑證

身份驗證

如果使用 OAuth 認證，需要在應(yīng)用中配置一個回調(diào)路由，將 OAuth 提供商返回的代碼傳遞給 useMcp。例如，在 React Router 中創(chuàng)建一個 /oauth/callback 路由，在該組件中調(diào)用 onMcpAuthorization()：

import { onMcpAuthorization } from 'use-mcp/react';

function OauthCallback() {
  useEffect(() => {
    onMcpAuthorization()
  }, [])
  
  return <div>正在重定向...</div>;
}

并在路由中注冊：

<Route path="/oauth/callback" element={<OAuthCallback />} />

這樣，用戶完成授權(quán)后頁面會自動處理令牌并關(guān)閉窗口。

使用返回值

useMcp 返回的 state 表示連接狀態(tài)，可能的值包括：

可以根據(jù)狀態(tài)動態(tài)調(diào)整 AI：

if (state === 'failed') {
  return <div>連接失敗: {error}<button oniClick={retry}>重試</button></div>;
}
if (state !== 'ready') {
  return <div>連接中...</div>;
}

連接成功后，可從 tools 數(shù)組獲取可用工具，通過 callTool(name, args) 調(diào)用它們：

const handleClick = async () => {
  const result = await callTool('search', { query: 'MCP 是什么？' })
  console.log(result)
}

如果連接失敗，可以調(diào)用 retry() 進行手動重連，或調(diào)用 authenticate() 彈出授權(quán)窗口。退出登錄時可調(diào)用 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>狀態(tài)：{state}</h2>
      <p>工具列表：{tools.map(t => t.name).join(', ') || '暫無'}</p>
      <button onClick={handleCall}>調(diào)用 search 工具</button>
      <button onClick={clearStorage}>退出登錄</button>
    </div>
  );
}

React + MCP 能做什么？

useMcp 的本質(zhì)是讓前端調(diào)用 MCP Server 上的工具。這些工具可以：

• 調(diào)用 AI 能力：如問答、翻譯、摘要、多輪對話等；
• 查詢結(jié)構(gòu)化數(shù)據(jù)：如數(shù)據(jù)庫查詢、搜索、報告生成等；
• 觸發(fā)遠程操作：如創(chuàng)建任務(wù)、發(fā)郵件、控制后端系統(tǒng)等；
• 執(zhí)行智能計劃：結(jié)合 Agent 生成動態(tài)操作序列；
• 增強前端交互：如表單智能推薦、輸入糾錯、操作建議等。

小結(jié)

從“生成文字”到“執(zhí)行動作”，AI 的邊界正在擴展。前端開發(fā)者將成為智能代理（Agent）觸達用戶的重要接口。而 useMcp 正是這一變革的關(guān)鍵橋梁。

三行代碼接入，調(diào)用真實世界的工具。

React + AI，會是什么？無限可能！