MCP Chat Ui

MCP聊天界面

基于网络的聊天界面，用于使用React和模型上下文协议（MCP）构建的AI驱动的人力资源助理。此应用程序提供与MCP服务器的实时通信，以处理员工信息查询、人力资源政策查询和员工管理操作。

目录

• 概述
• 特性
• 建筑
• 类别图
• 安装
• 用法
• 项目结构
• 技术
• API和消息协议

概述

MCP聊天UI是一个实时对话界面，通过WebSocket连接到MCP（模型上下文协议）服务器。该应用程序使用户能够：

• 从数据库中查询员工信息
• 询问有关人力资源政策（休假、福利、远程工作等）的问题
• 执行员工管理操作
• 通过RAG（检索增强生成）支持接收AI驱动的响应
• 跟踪用于生成响应的工具/服务

特性

核心功能

• 实时通信：与MCP服务器进行基于WebSocket的双向通信
• 消息历史记录：使用时间戳完成对话跟踪
• 连接状态：WebSocket连接状态的视觉指示器
• 处理指示器：响应生成过程中的“AI正在思考…”动画
• 消息来源：显示每个响应使用了哪些工具/服务
• 快捷操作：用于常见查询的预配置按钮
• 自动滚动：自动滚动到最新消息
• 错误处理：优雅的错误显示和连接管理

快速操作按钮

• 列出所有员工
• 查询休假政策
• 查询401k福利
• 创建新员工
• 查询远程工作策略

建筑

系统架构

graph TB
    subgraph "Frontend React Application"
        A[User Interface]
        B[React Components]
        C[WebSocket Service]
    end

    subgraph "Communication Layer"
        D[WebSocket Connection Port 5173 - 8082]
    end

    subgraph "Backend - MCP Server"
        E[MCP ServerPort 8082]
        F[Tool Handler]
        G[AI Processing]
    end

    subgraph "Data Sources"
        H[Employee Database]
        I[Policy Documents]
        J[HR Systems]
    end

    A --> B
    B --> C
    C --> D
    D --> E
    E --> F
    F --> G
    G --> H
    G --> I
    G --> J

    style A fill:#e1f5ff
    style E fill:#ffe1e1
    style D fill:#fff4e1

数据流图

sequenceDiagram
    participant User
    participant ChatWindow
    participant WebSocketService
    participant MCPServer
    participant DataSources

    User->>ChatWindow: Types message & clicks Send
    ChatWindow->>WebSocketService: sendMessage(text, user_id, conversation_id)
    WebSocketService->>MCPServer: WebSocket message (JSON)

    MCPServer->>DataSources: Query data sources
    DataSources-->>MCPServer: Return results

    MCPServer->>WebSocketService: Status: "processing"
    WebSocketService->>ChatWindow: Update UI (show typing indicator)

    MCPServer->>WebSocketService: Response with sources & metadata
    WebSocketService->>ChatWindow: Display message
    ChatWindow->>User: Show AI response with sources

组件层次结构

graph TD
    A[App.js
Root Component] --> B[ChatWindow.js
Main Container]

    B --> C[Header Section
Connection Status]
    B --> D[Messages Container
Scroll Area]
    B --> E[Quick Actions
Button Group]
    B --> F[Message Form
Input + Send]

    D --> G1[Message Component 1]
    D --> G2[Message Component 2]
    D --> G3[Message Component N]

    G1 --> H[ToolIndicator
Sources Display]
    G2 --> H
    G3 --> H

    B -.-> I[WebSocketService
Singleton Service]

    style A fill:#ff6b6b
    style B fill:#4ecdc4
    style I fill:#ffe66d

状态管理流程

stateDiagram-v2
    [*] --> Disconnected
    Disconnected --> Connecting : connect()
    Connecting --> Connected : WebSocket open
    Connecting --> Disconnected : Connection failed

    Connected --> Processing : User sends message
    Processing --> Connected : Response received
    Processing --> Error : Error occurred
    Error --> Connected : Retry

    Connected --> Disconnected : disconnect() or connection lost
    Disconnected --> [*]

    note right of Processing
        isProcessing = true
        Shows typing indicator
        Disables input
    end note

    note right of Connected
        isConnected = true
        isProcessing = false
        Can send messages
    end note

安装

先决条件

• Node.js（v14或更高版本）
• npm或纱线
• 在上运行MCP服务器 ws://localhost:8082/ws/chat

设置

1. 克隆存储库：

git clone 
cd mcp-chat-ui

1. 安装依赖项：

npm install

1. 启动开发服务器：

npm run dev

1. 打开浏览器并导航到：

http://localhost:5173

用法

运行应用程序

# Development mode with hot reload
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

发送消息

1. 在输入框中键入您的消息
2. 点击“发送”或按Enter键
3. 等待带有来源归因的AI响应
4. 通过工具指示器查看使用了哪些工具

快捷操作

单击任何快速操作按钮发送预配置的查询：

• “列出所有员工”
• “休假政策是什么？”
• “告诉我401k福利”
• “我想创建一个新员工”
• “远程工作政策是什么？”

项目结构

mcp-chat-ui/
├── public/
│   └── index.html              # HTML entry point
├── src/
│   ├── main.js                 # React initialization
│   ├── App.js                  # Root component
│   ├── App.css                 # Global styles
│   ├── components/
│   │   ├── ChatWindow.js       # Main chat container (state management)
│   │   ├── ChatWindow.css      # Chat window styling
│   │   ├── Message.js          # Individual message display
│   │   ├── Message.css         # Message styling
│   │   ├── ToolIndicator.js    # Tool usage indicator
│   │   └── ToolIndicator.css   # Tool indicator styling
│   └── services/
│       └── websocketService.js # WebSocket client (singleton)
├── package.json                # Dependencies and scripts
├── vite.config.js              # Vite build configuration
└── README.md                   # This file

关键文件

技术

前端堆栈

• 反应18.2.0 -基于组件的UI库
• 快速4.0.0 -快速构建工具和开发服务器
• JavaScript（ES6+） -带模块的现代JavaScript
• CSS3 -组件范围样式
• Websocket API -原生浏览器WebSocket支持

开发工具

• @vitejs/插件反应 -对Vite的React支持
• esb构建 -使用JSX的快速JavaScript打包器
• ESLint -代码质量和linting

架构模式

• 基于组件的体系结构 -模块化React组件
• 单例模式 -单个WebSocketService实例
• 观察者模式 -事件驱动的消息处理
• 状态管理 -反应钩子（useState、useEffect、useRef）
• 服务层 -通过服务分离关注点

API和消息协议

WebSocket端点

ws://localhost:8082/ws/chat

客户端→ 服务器消息格式

{
  "message": "List all employees",
  "user_id": "hr_user",
  "conversation_id": "default"
}

服务器→ 客户端响应格式

{
  "type": "response",
  "response": "Here are all employees: ...",
  "sources": [
    {
      "tool": "employee_database",
      "description": "Employee information system"
    }
  ],
  "metadata": {
    "tool_calls_used": 1
  }
}

服务器→ 客户端状态格式

{
  "type": "status",
  "status": "processing"
}

消息类型

配置

开发服务器

• 端口：5173（Vite默认值）
• 热模块重新加载：已启用
• 自动打开浏览器：禁用（手动）

WebSocket配置

在中更新WebSocket URL src/services/websocketService.js:

connect() {
  this.socket = new WebSocket('ws://localhost:8082/ws/chat');
  // ...
}

贡献

1. 分叉存储库
2. 创建要素分支： git checkout -b feature-name
3. 提交您的更改： git commit -m 'Add feature'
4. 推到分支： git push origin feature-name
5. 提交拉取请求

许可证

该项目根据MIT许可证获得许可。

支持

对于问题、疑问或贡献，请在GitHub存储库上打开问题。

______________________________________________________________________

基于React+Vite构建|基于模型上下文协议