AI导哈

聊天应用

一款集成了多种模型上下文协议（MCP）服务器的现代聊天应用，具有响应式React前端和Node.js/Express后端。

  • by abhignakumar
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 abhignakumar/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

  2. 安装依赖项：

    npm install

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

    GOOGLE_API_KEY=your_google_api_key

  4. 启动开发服务器：

    npm run dev

前端设置

  1. 导航至前端目录：

    cd frontend

  2. 安装依赖项：

    npm install

  3. 启动开发服务器：

    npm run dev

  4. 打开您的浏览器以 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

🖼️ 视频演示

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

相关 MCP