AI导哈

聊天界面工具

MCP Chat UI 是一个基于 TypeScript/React 的聊天界面工具，用于通过 WebSocket 与代理和 MCP 工具交互，支持快速开发、扩展和实验。

  • by djavu77
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 djavu77/chat-mcp

使用说明

MCP聊天界面

Types/React聊天UI，用于通过WebSocket与代理和MCP工具进行交互。 这个项目不仅仅是一个聊天UI，它是一个构建模型上下文协议（MCP）服务器并通过与它们聊天轻松测试其功能的样板。 该架构支持使用MCP代理和工具进行快速开发、扩展和交互式实验。

https://github.com/user-attachments/assets/ce39f244-9d77-4d29-b6e2-1119063653b8

代理和LLM集成

代理使用 OpenAI代理SDK 与MCP无缝集成。当前实施使用 OpenRouter 访问各种LLM以获取代理响应。OpenRouter通过统一的API提供对多种人工智能模型的访问，包括OpenAI、Anthropic、Google和许多其他人工智能模型。这种灵活性允许您根据需要尝试不同的大型语言模型。

特性

  • 与人工智能代理和工具实时聊天
  • 可扩展工具系统（通过询问Copilot注册新工具）
  • 在聊天过程中，用户可以查看所有工具调用及其参数和响应，以进行调试
  • 图表渲染和数据可视化
  • 对AI Canvas实现进行编码，允许用户通过提供自然语言描述（如Gemini Canvas）来创建设计和交互式可视化。例如，用户可以说“可视化插入排序算法”，系统将生成并显示该算法的交互式视觉表示。'
  • Google身份验证集成
  • Vite热装快速开发

入门指南

先决条件

  • Node.js（建议使用v18+）
  • npm

环境设置

  1. 复制 .env.template 到 .env:
    cp .env.template .env
  2. 设置您的 OPENROUTER_API_KEY 在 .env 文件以启用OpenRouter LLM功能。您可以从获取API密钥 OpenRouter.
  3. （可选）设置 GOOGLE_CLIENT_ID 在 .env 以启用聊天UI的Google身份验证。

再进行

# In project root
npm install
cd client
npm install

# or

npm run install_all

运行开发服务器

# In project root
npm run dev
open http://localhost:5173/

开始生产构建

# In project root
npm run start
open http://localhost:3000/

检查MCP服务器

# In project root
npm run inspect

注册新的MCP工具

您只需询问Copilot即可添加新的服务器端工具：

使用名称注册新工具 my_tool_name，输入参数 param1: string, param2: number，输出字段 result: string

Copilot将为您生成文件和代码。看 .github/copilot-instructions.md 了解全部细节。

注册外部MCP服务器

您可以通过编辑添加新的外部MCP服务器 mcp.json 项目根目录中的文件。在此文件中列出您的服务器配置，以便在聊天UI中进行选择。

示例 mcp.json

{
  "mcpServers": {
    "playwright": {
      "description": "Playwright MCP",
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--headless", "--isolated"]
    },
    "memory": {
      "description": "Server Memory MCP",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-memory"]
    }
  }
}

项目结构

  • client/ --React UI，按功能（聊天、图表、常用、UI）组织
  • src/server/ --WebSocket服务器、代理/工具编排
  • src/tools/ --MCP工具（自动注册）
  • src/agents/ --代理逻辑
  • .github/copilot-instructions.md --AI代理指令和约定

关于

该项目展示了一个用于代理/工具工作流的灵活、可扩展的聊天UI， 并作为构建和交互式测试MCP服务器和工具的样板。 开发人员的生产力由Copilot和快速扩展的明确约定提供支持。

相关 MCP