mcpField
M
MCP Chat Demo

MCP Chat Demo

本地服务
github.com/ehartyeAI 与智能体1100 周前更新
代码仓库

关于 MCP Chat Demo

MCP Chat Demo 是一个展示如何将聊天应用接入 MCP 服务的示例项目，采用 React 和 TypeScript。它支持连接本地或远程 MCP 服务，并在聊天界面中使用工具与资源。

主要功能

  1. 01连接本地或远程 MCP 服务
  2. 02实时聊天界面
  3. 03支持 MCP 工具与资源
  4. 04保存消息历史
  5. 05错误处理与重新连接

适用场景

  1. 01演示聊天应用集成 MCP 服务
  2. 02在聊天中使用 MCP 工具和资源

MCP 相关

该应用可连接本地或远程 MCP 服务，并在聊天界面中使用其工具与资源。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

暂未收录安装方式

我们还没有获取到这个服务的安装包或远程地址，请按项目 README 中的说明安装。

代码仓库

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。

详细介绍

MCP 聊天演示

一个示例聊天应用，展示如何与 Model Context Protocol（MCP）服务集成。

项目结构

mcp-chat-demo/
├── package.json
├── README.md
├── .gitignore
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── components/
│   │   ├── Chat.tsx
│   │   ├── MessageList.tsx
│   │   ├── MessageInput.tsx
│   │   └── MCPConnection.tsx
│   ├── lib/
│   │   ├── mcp-client.ts
│   │   └── types.ts
│   └── styles/
│       └── main.css
└── public/
    └── index.html

设置说明

  1. 克隆仓库：
git clone https://github.com/yourusername/mcp-chat-demo.git
cd mcp-chat-demo
  1. 安装依赖：
npm install
  1. 启动开发服务器：
npm run dev

功能

  • 连接本地或远程 MCP 服务
  • 实时聊天界面
  • 支持 MCP 工具和资源
  • 消息历史记录
  • 错误处理和重新连接逻辑

技术栈

  • React 18
  • TypeScript
  • Vite
  • TailwindCSS
  • MCP TypeScript SDK

评论

支持 Markdown

第一次接触 MCP？

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

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