MCP Chat Application

MCP聊天应用

一个现代聊天应用程序，可与各种模型上下文协议（MCP）服务器集成，前端采用响应式的React框架，后端使用Node.js/Express。

🚀 功能

• 多用户支持每个用户都有自己的聊天会话
• MCP服务器集成连接到不同的MCP服务器，包括GitHub Copilot
• 谷歌通用人工智能（GenAI）集成利用谷歌的人工智能能力
• 实时聊天带有消息历史记录的交互式聊天界面
• 响应式设计采用现代网络技术为所有设备构建
• 安全的用户认证和令牌管理

🛠 技术栈

前端

• 使用TypeScript的React 19
• Vite，用于快速开发和构建
• 使用 TailwindCSS 进行样式设计
• Radix UI 组件
• 用于导航的React Router
• 用于API请求的Axios

后端

• 使用 Express 的 Node.js
• TypeScript
• Google GenAI SDK（谷歌通用人工智能软件开发工具包）
• 模型上下文协议（MCP）软件开发工具包（SDK）
• 为前端通信启用了CORS（跨源资源共享）

📦 安装

先决条件

• Node.js（v18或更高版本）
• npm 或 yarn
• 谷歌API密钥（用于生成式AI功能）

后端设置

1. 导航到服务器目录：

   cd server

1. 安装依赖项：

   npm install

1. 创建一个 .env 在服务器目录中存放您的配置文件：

   GOOGLE_API_KEY=your_google_api_key

1. 启动开发服务器：

   npm run dev

前端设置

1. 导航至前端目录：

   cd frontend

1. 安装依赖项：

   npm install

1. 启动开发服务器：

   npm run dev

1. 打开您的浏览器以 http://localhost:5173

🌟 使用方法

1. 输入用户名以开始新会话
2. 配置您的MCP服务器访问令牌
3. 创建一个新聊天
4. 开始与AI助手聊天

📂 项目结构

mcp-project/
├── frontend/               # Frontend React application
│   ├── src/
│   │   ├── components/     # React components
│   │   └── ...
│   ├── public/             # Static assets
│   └── package.json        # Frontend dependencies
│
├── server/                 # Backend server
│   ├── src/
│   │   ├── mcp-client.ts  # MCP client implementation
│   │   └── index.ts       # Main server file
│   └── package.json        # Backend dependencies
└── README.md              # This file

🖼️ 视频演示

点击下方缩略图观看视频。