mcpField
O
open-mcp-client

open-mcp-client

github.com/mdhelaluddinbiswas框架与 SDK183 周前更新
代码仓库

关于 open-mcp-client

open-mcp-client 是由 LangGraph Agent 和 CopilotKit 前端组成的客户端应用。Agent 连接 MCP 服务并调用其工具，前端负责界面和状态同步。

主要功能

  1. 01LangGraph Agent 连接 MCP 服务
  2. 02调用 MCP 服务提供的工具
  3. 03CopilotKit 前端
  4. 04界面与状态同步
  5. 05前端和 Agent 可分开或一同运行

适用场景

  1. 01为连接 MCP 的 Agent 构建界面
  2. 02将 Agent 与前端分开开发和调试
  3. 03在本地一同运行前端与 Agent

MCP 相关

LangGraph Agent 连接 MCP 服务并调用其工具。

详细介绍

https://github.com/user-attachments/assets/f72e1f7d-3c84-4429-a465-23dff3d3bd63

快速开始

设置环境变量：

touch .env

在根目录的 .env 中添加以下内容：

LANGSMITH_API_KEY=lsv2_...

接下来，在 agent 文件夹内创建另一个 .env 文件：

cd agent
touch .env

在 agent/.env 中添加以下内容：

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

开发

我们建议在不同的终端中分别运行前端和 Agent，以便调试错误和日志：

# Terminal 1 - Frontend
pnpm run dev-frontend

# Terminal 2 - Agent
pnpm run dev-agent

或者，你可以使用以下命令同时运行两个服务：

pnpm run dev

然后，在浏览器中打开 http://localhost:3000。

架构

代码库分为两个主要部分：

  1. /agent 文件夹 – 连接到 MCP 服务并调用其工具的 LangGraph Agent。
  2. /app 文件夹 – 使用 CopilotKit 实现 UI 和状态同步的前端应用。

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。