只需三行代码即可将任何 React 应用连接到 MCP 服务器

此内容已使用自动机器翻译服务进行翻译，仅供您参考及阅读便利。其中可能包含错误、遗漏，或与原始英文版本存在理解方面的细微差别。如有疑问，请参考原始英文版本。

您可以一键在 Cloudflare 上部署远程模型上下文协议（MCP）服务器。不相信我们？点击下面的按钮。

本指南帮助您从一个支持最新 MCP 标准的远程 MCP 服务器开始，这也是在 Cloudflare 上部署数千台远程 MCP 服务器的原因，包括来自Atlassian、Linear、PayPal 等公司的服务器。

但是部署服务器只是等式的一半——我们还希望简化构建和部署远程 MCP 客户端的工作，客户端可以连接到这些服务器，从而实现由 AI 驱动的新服务集成。为此，我们打造了 use-mcp —— 一个用于连接远程 MCP 服务器的 React 库；我们很高兴将其贡献给 MCP 生态系统，让更多开发者能够构建远程 MCP 客户端。

今天，我们将开放两个工具源代码，让开发人员能够轻松构建和部署 MCP 客户端：

1. use-mcp — React 库只需 3 行代码即可连接到任何远程 MCP 服务器，并自动处理传输、身份验证和会话管理。我们很高兴能将这个库贡献给 MCP 生态系统，让更多开发人员能够构建远程 MCP 客户端。

2. The AI Playground — Cloudflare 的 AI 聊天界面 平台，使用多个 LLM 模型与远程 MCP 服务器交互，并支持最新的 MCP 标准，您现在可以自行部署。

无论是构建 AI 聊天机器人、支持代理，还是公司内部界面，您都可以利用这些工具将 AI 代理和应用通过 MCP 连接到外部服务。

准备好开始了吗？点击如下按钮，部署您自己的 Cloudflare AI Playground 实例，查看运行情况。

use-mcp 是一个 React 库，它抽离了构建 MCP 客户端的所有复杂性。在任意 React 应用中添加 useMCP() hook，以连接用户可与之交互的远程 MCP 服务器。

以下是连接到远程 MCP 服务器所需添加的所有代码：

mport { useMcp } from 'use-mcp/react'
function MyComponent() {
  const { state, tools, callTool } = useMcp({
    url: 'https://mcp-server.example.com'
  })
  return <div>Your actual UI code</div>
}

只需指定 URL，即可立即连接。

在幕后，use-mcp 处理传输协议(Streamable HTTP 和 Server-Sent Events)、身份验证流和会话管理。它还包括许多功能，以帮助您构建可靠、可扩展且可生产生产的 MCP 客户端。

网络可靠性不应该影响用户体验。 use-mcp 通过一个退避时间表来管理连接重试和重新连接，以确保您的客户端可以在发生网络问题期间恢复连接，并在中断的地方继续连接。该钩子公开实时连接状态（“连接中”、“就绪”、“失败”），允许您构建响应式 UI 以随时通知用户，而无需您编写任何自定义连接处理逻辑。

const { state } = useMcp({ url: 'https://mcp-server.example.com' })

if (state === 'connecting') {
  return <div>Establishing connection...</div>
}
if (state === 'ready') {
  return <div>Connected and ready!</div>
}
if (state === 'failed') {
  return <div>Connection failed</div>
}

许多 MCP 服务器要求某种形式的身份验证才能进行工具调用。use-mcp 支持 OAuth 2.1 并处理整个 OAuth 流程。它将用户重定向到登录页面，允许他们授予访问权限，安全地存储 OAuth 提供商返回的访问令牌，并将其用于所有后续对服务器的请求。该库还为用户提供了撤销访问权限和清除存储凭据的方法。这为您提供了一个完整的身份验证系统，使您无需编写任何逻辑即可安全地连接到远程 MCP 服务器。

const { clearStorage } = useMcp({ url: 'https://mcp-server.example.com' })

// Revoke access and clear stored credentials
const handleLogout = () => {
  clearStorage() // Removes all stored tokens, client info, and auth state
}

当您连接到 MCP 服务器时，use-mcp 会获取其公开的工具。如果服务器添加了新功能，您的应用无需更改任何代码即可看到它们。每个工具都提供有关其所需输入和功能的类型安全的元数据，以便您的客户端可以自动验证用户输入并进行正确的工具调用。

为了帮助您对 MCP 集成进行故障排除，use-mcp 会公开一个日志数组，其中包含 debug、info、warn 和 error 级别的结构化消息，每个级别都带有时间戳。您可以使用 debug 选项启用详细的日志记录，以跟踪工具调用、身份验证流程、连接状态更改和错误。这种实时可见性使得在开发和生产期间诊断问题变得更加容易。

MCP 正在迅速发展，最近已有传输机制更新，授权变化即将来临。use-mcp 同时支持 Server-Sent Events （SSE）和较新的 Streamable HTTP 传输，当 MCP 服务器支持时会自动检测并升级到更新的协议。

随着 MCP 规范的不断发展，我们将根据最新标准不断更新库。同时保持向后兼容性。我们也很高兴能向 MCP 项目 贡献 use-mcp ，使其在更广泛社区的帮助下成长。

在 use-mcp 的 示例目录 中，您将看到一个使用 use-mcp hook 构建的最小化 MCP Inspector 。 .输入任何 MCP 服务器 URL 以测试连接、查看可用工具，并通过调试日志监控交互。如果想要构建自己的 MCP 客户端，或者用于调试 MCP 服务器的连接，这是一个很好的起点。

我们最初构建 AI Playground 的目的是为用户提供一个聊天界面，用于测试 Workers AI 支持的不同 AI 模型。随后，我们增加了 MCP 支持，使其可以用作远程 MCP 客户端，连接并测试 MCP 服务器。今天，我们将开放操练场的源代码，为您提供内置 MCP 客户端的完整聊天界面，以便您可以自行部署和自定义来满足自己的需求。

操练场内置对最新的 MCP 标准的支持(包括 Streamable HTTP 和 Server-Sent Events 传输方法)、允许用户登录和授予权限的 OAuth 身份验证流程，以及支持不记名令牌身份验证，以直接 MCP 服务器连接。

AI Playground 建立在 Workers AI 之上，允许您访问在 Cloudflare 网络上运行的一整套大型语言模型（LLM），结合 Agents SDK 和用于 MCP 服务器连接的 use-mcp 库。

AI Playground 使用 use-mcp 库来管理与远程 MCP 服务器的连接。操练场启动时，它会使用 const{tools: mcpTools} = useMcp() 初始化 MCP 连接系统，这可以从连接的服务器访问所有工具。起初，此列表为空，因为其未连接到任何 MCP 服务器，但是一旦建立与远程 MCP 服务器的连接，就会自动发现这些工具并填充到列表中。

一旦建立连接，操练场就可以立即访问 MCP 服务器公开的任何工具。use-mcp 库处理所有协议通信和工具发现，并维护连接状态。如果 MCP 服务器要求身份验证，则操练场通过专用回调页面处理 OAuth 流，该页面使用 use-mcp 中的 onMcpAuthorization 来完成身份验证过程。

当用户发送聊天消息时，操练场会从 use-mcp hook 中获取 mcpTools 并直接传递给 Workers AI，使模型能够了解哪些功能可用并根据需要调用。

const stream = useChat({
  api: "/api/inference",
  body: {
    model: params.model,
    tools: mcpTools, // Tools from connected MCP servers
    max_tokens: params.max_tokens,
    system_message: params.system_message,
  },
})

为了监控和调试 MCP 服务器连接，我们在操练场添加了一个“调试日志”接口。这会显示有关 MCP 服务器连接的实时信息，包括连接状态、身份验证状态和任何连接错误。

在聊天交互期间，调试界面将显示 Playground 和 MCP 服务器之间交换的原始消息，包括工具调用及其结果。因此，您能够监控发送到 MCP 服务器的 JSON 恶意有效负载、返回的原始响应，并跟踪工具调用是成功还是失败。这对构建远程 MCP 服务器的任何人都特别有帮助，因为您可以查看工具与不同语言模型集成时的运行情况。

MCP 发展如此迅速的原因之一在于，它是一个由社区驱动的开源项目。我们很高兴能将 use-mcp 库贡献给 MCP 生态系统，以让更多开发人员能够构建远程 MCP 客户端。

如果您正在寻找 MCP 客户端或 MCP 服务器示例以供开始使用，请查看 Cloudflare AI GitHub 存储库，获取可部署和修改的工作示例。包括完整的 AI Playground 源代码、若干使用不同认证和授权提供商的远程 MCP 服务器，以及 MCP Inspector。

我们也在构建公开的 Cloudflare MCP 服务器，并欢迎贡献力量以帮助改进它们。

无论您是在构建首款 MCP 服务器，将 MCP 集成到现有应用，还是在为更广泛的生态系统做出贡献，我们都欢迎您给我们留言。如有任何疑问、反馈或合作想法，可以发送电子邮件至 1800-mcp@cloudflare.com 联系我们。