MCP Chat Demo

🚀 MCP 聊天演示项目

本项目是一个聊天应用程序示例，展示了如何与模型上下文协议（MCP）服务器进行集成，为开发者提供了与 MCP 服务器交互的参考。

🚀 快速开始

克隆仓库

git clone https://github.com/yourusername/mcp-chat-demo.git
cd mcp-chat-demo

安装依赖项

npm install

启动开发服务器

npm run dev

✨ 主要特性

• 可连接到本地或远程 MCP 服务器，灵活适应不同的使用场景。
• 具备实时聊天界面，带来流畅的交流体验。
• 支持 MCP 工具和资源，拓展功能丰富。
• 拥有消息历史记录，方便回顾聊天内容。
• 具备错误处理和重新连接逻辑，保障应用的稳定性。

📦 安装指南

克隆项目

git clone https://github.com/yourusername/mcp-chat-demo.git
cd mcp-chat-demo

安装依赖

npm install

启动服务

npm run dev

📚 详细文档

项目结构

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

🔧 技术细节

技术栈