Open MCP Client：网页版MCP客户端，快速连接任意MCP服务-首席AI分享圈

🚀邀请体验：中国首家 AI IDE 智能编程软件 Trae 中文版下载，不限量使用 DeepSeek-R1 和 Doubao-pro!

综合介绍

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

Open MCP Client：网页版MCP客户端，快速连接任意MCP服务-1

功能列表

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

使用帮助

如何开始使用 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。可以通过 Composio 等平台获取。登录 Composio 官网，创建或选择一个 MCP 服务器，复制其 URL（格式通常为 https://example.com/mcp）。
步骤 3：连接服务器
在网页版界面上，找到 URL 输入框（通常在页面显眼位置），粘贴你复制的 MCP 服务器 URL。点击“连接”按钮，系统会尝试建立连接。成功后，几秒内会加载出聊天界面。
步骤 4：开始聊天
连接成功后，在输入框中输入消息，例如“今天天气如何？”或“帮我写代码”，然后发送。服务器会实时返回回复，界面会显示对话内容，操作简单直观。

2. 本地部署和集成

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

步骤 1：克隆 GitHub 仓库
在终端运行以下命令，将项目下载到本地：

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

然后进入项目目录：

cd open-mcp-client

步骤 2：配置根目录环境变量
在项目根目录下创建 .env 文件：

touch .env

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

LANGSMITH_API_KEY=lsv2_...

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

步骤 3：配置 Agent 环境变量
进入 agent 文件夹：

cd agent
touch .env

在 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

启动后，访问 http://localhost:3000，即可看到本地界面。

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

主要功能的详细操作

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