Open MCP Client: cliente MCP basado en web para conectarse rápidamente a cualquier servicio MCP.

Introducción general

Abrir MCP Client 是一个开源工具，最大的亮点是提供网页版 MCP（Model Context Protocol）客户端，让用户无需安装即可连接任意 MCP 服务器进行聊天。它还支持将聊天功能嵌入自己的应用中。由 CopilotKit 团队开发，结合 LangChain 的 LangGraph 技术，项目部署在 Vercel 平台，代码托管于 GitHub，最近更新于 2025 年 3 月 10 日。无论是快速测试服务器，还是开发自定义 AI 交互功能，这个工具都简单实用，特别适合喜欢便捷体验的用户和开发者。

Lista de funciones

• 提供网页版 MCP 客户端，直接连接任意 MCP 服务器并实时聊天。
• 无需安装，通过浏览器即可使用网页版功能。
• 支持将聊天功能集成到用户自己的应用中。
• 使用 LangGraph 技术构建智能代理，连接服务器工具。
• 开源代码托管在 GitHub，支持查看和修改。
• 前端基于 CopilotKit，确保界面和状态同步。

Utilizar la ayuda

如何开始使用 Open MCP Client

Open MCP Client 有两种使用方式：一是通过网页版 MCP 客户端快速体验，二是本地部署并集成到应用中。以下是详细步骤，帮助你上手。

1. 使用网页版 MCP 客户端

网页版是 Open MCP Client 的核心特色，适合快速连接 MCP 服务器，无需任何安装。

• 步骤 1：访问网页版
  打开浏览器，输入地址：open-mcp-client.vercel.app。这是 CopilotKit 团队部署在 Vercel 上的官方网页版 MCP 客户端，随时可用。
• 步骤 2：获取 MCP 服务器 URL
  你需要一个有效的 MCP 服务器 URL。可以通过 Composición 等平台获取。登录 Composio 官网，创建或选择一个 MCP 服务器，复制其 URL（格式通常为 https://example.com/mcp).
• 步骤 3：连接服务器
  在网页版界面上，找到 URL 输入框（通常在页面显眼位置），粘贴你复制的 MCP 服务器 URL。点击“连接”按钮，系统会尝试建立连接。成功后，几秒内会加载出聊天界面。
• 步骤 4：开始聊天
  连接成功后，在输入框中输入消息，例如“今天天气如何？”或“帮我写代码”，然后发送。服务器会实时返回回复，界面会显示对话内容，操作简单直观。

2. 本地部署和集成

如果需要本地运行或将功能集成到项目中，可以按以下开发步骤操作。

• 步骤 1：克隆 GitHub 仓库
  Ejecute el siguiente comando en el terminal para descargar el proyecto localmente:

git clone https://github.com/CopilotKit/open-mcp-client.git

A continuación, vaya al directorio del proyecto:

cd open-mcp-client

• 步骤 2：配置根目录环境变量
  En el directorio raíz del proyecto, cree el archivo .env Documentación:

touch .env

打开文件，添加以下内容（替换为你的实际 API 密钥）：

LANGSMITH_API_KEY=lsv2_...

这个密钥用于连接 LangSmith 服务，可在 LangSmith 官网注册获取。

• 步骤 3：配置 Agent 环境变量
  entrar en agent Carpeta:

cd agent
touch .env

existe agent/.env 文件中添加：

OPENAI_API_KEY=sk-...
LANGSMITH_API_KEY=lsv2_...

OPENAI_API_KEY 从 OpenAI 官网获取，用于支持 LangGraph 代理功能。

• 步骤 4：安装依赖
  返回根目录，运行：

npm install

或使用 pnpm（推荐）：

pnpm install

安装 CopilotKit 和 LangGraph 等依赖。确保本地已安装 Node.js（建议版本 18 或以上）。

• 步骤 5：启动开发模式
  项目分为前端（/app）和代理（/agent）两部分，建议在两个终端分别运行：
• 终端 1（前端）：

  pnpm run dev-frontend
  

• 终端 2（代理）：

  pnpm run dev-agent
  

或用一个命令同时启动：

pnpm run dev

Tras el arranque, acceda a http://localhost:3000，即可看到本地界面。

• 步骤 6：测试连接和聊天
  在本地界面输入 MCP 服务器 URL（获取方式同网页版），点击连接。连接成功后，可以输入消息测试聊天功能。
• 步骤 7：集成到你的应用
  前端代码在 /app 文件夹，使用 CopilotKit 管理界面和状态同步。代理代码在 /agent 文件夹，基于 LangGraph 连接服务器。你可以复用这些代码，或参考 GitHub 的 README.md 修改集成方式。

主要功能的详细操作

• 网页版 MCP 客户端
  网页版是最大特色，只需输入 URL 即可连接。连接失败时，检查 URL 是否正确，或确认服务器是否在线。界面由 CopilotKit 驱动，操作流畅。
• Chat en directo
  无论网页版还是本地版，聊天界面都支持实时输入和显示回复。发送消息后，LangGraph 代理处理请求并调用服务器工具，结果会自动显示。
• 调试和自定义
  本地运行时，可用浏览器开发者工具（F12）查看日志和网络请求。代码开源，可修改 /app 中的前端样式，或调整 /agent 中的代理逻辑。

advertencia

• 网页版依赖网络，服务器响应速度可能受网络影响。
• 本地部署需正确配置 API 密钥，否则代理无法运行。
• 项目更新频繁，建议定期用 git pull 获取最新版本。

通过以上步骤，你可以充分利用网页版 MCP 的便捷性，或深度开发集成。