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

🔧 技術細節

技術棧