星战科技xingzhan.cloud
返回市场
React-MCP客户端

React-MCP客户端

作者：Darko-Martinovic3 星标更新：2025-11-05
安装使用来源：spider==github.com

项目介绍

React MCP 客户端

一个现代的React TypeScript应用程序，用于与模型上下文协议（MCP）服务器交互，具有集成Azure OpenAI的AI驱动聊天、多语言支持和高级数据可视化功能。

✨ 主要特性

  • 🤖 AI驱动的聊天：与Azure OpenAI集成的交互界面
  • 🌍 多语言支持：英语、法语和荷兰语，带有特定语言的聊天存储
  • 📊 数据可视化：自动图表（条形图、饼图、折线图）和交互式表格
  • 💾 手动保存/导入：对话可以手动保存和导入（JSON、TXT、MD）
  • 🍞 Toast通知：现代Toast系统用于用户反馈
  • 🔍 Azure搜索集成：通过Azure认知搜索实现RAG能力
  • 📈 Excel导出：带有格式和元数据的专业Excel导出
  • 🐛 调试跟踪：全面的跟踪功能用于故障排除

🎬 演示视频

观看React MCP客户端在智能查询处理和数据可视化方面的表现：

https://github.com/user-attachments/assets/c06299ae-9ed7-42bc-a93f-4879ca464a8a

演示展示了智能查询处理、自动数据可视化和多语言聊天功能。

🆕 最新功能

最近添加的功能：

  1. 自定义插件支持 - 定义自定义逻辑以通过可配置插件访问您的数据库或API
  2. 高级JSON查看器 - 带有展开/折叠功能和智能格式化的交互式数据可视化器
  3. 增强的AI响应跟踪 - 每个AI响应现在包括详细的元数据：
    • 使用的令牌数量（提示+完成）
    • 成本估算分解
    • 处理过程中使用的工具
    • AI模型信息

🛠️ 技术栈

  • 前端：React 18 + TypeScript，Vite，CSS模块
  • AI集成：Azure OpenAI，Azure搜索
  • 图表：Recharts库用于数据可视化
  • 导出：XLSX库用于Excel生成
  • 国际化：react-i18next，带浏览器语言检测

📋 快速开始

先决条件

  • Node.js 16+
  • Azure OpenAI账户和API密钥
  • 在9090端口运行的MCP服务器
  • 在5002端口运行的代理服务器

安装

  1. 克隆并安装

    git clone <repository-url>
cd react-mcp-client
npm install

  2. 环境设置 创建.env文件：

    VITE_AOAI_ENDPOINT=https://your-openai-resource.openai.azure.com/openai/deployments/your-model/chat/completions?api-version=22023-05-15
VITE_AOAI_APIKEY=your-azure-openai-api-key
VITE_MCP_SERVER_URL=http://localhost:9090

# 可选 - 用于RAG能力
AZURE_SEARCH_ENDPOINT=https://your-search-service.search.windows.net
AZURE_SEARCH_APIKEY=your-search-admin-key
AZURE_SEARCH_INDEX=your-index-name

  3. 启动应用

    # 启动代理服务器（处理前端 ↔ MCP通信）
node search-proxy.cjs

# 启动开发服务器
npm run dev

  4. 打开浏览器：导航到http://localhost:5174

🏗️ 项目架构

src/
├── components/
│   ├── App.tsx                 # 主应用及会话管理
│   ├── Chat/Chat.tsx          # 聊天界面及数据可视化
│   ├── Toast/                 # Toast通知系统
│   ├── DataVisualization/     # 图表渲染及表格组件
│   └── LanguageSelector.tsx   # 多语言支持
├── services/
│   ├── azureOpenAI.ts         # Azure OpenAI集成
│   ├── azureSearch.ts         # Azure搜索/RAG能力
│   ├── mcpServer.ts           # MCP服务器通信
│   └── chatService.ts         # 业务逻辑及参数提取
├── i18n/
│   └── locales/              # 翻译文件（en, fr, nl）
└── hooks/
    └── useToast.ts           # Toast通知钩子

🎯 工作原理

前端（React）→ Vite代理(/api/*) → 代理服务器（5002）→ MCP服务器（9090）→ 数据处理 → UI渲染
  1. 用户输入：用户通过React聊天界面提交查询
  2. AI处理：Azure OpenAI分析意图并生成函数调用
  3. 参数提取：智能提取日期、阈值、类别、供应商
  4. 代理通信：前端调用/api端点，通过5002端口的search-proxy.cjs代理
  5. MCP通信：代理服务器与9090端口的MCP服务器通信
  6. 数据处理：智能格式化（摘要与详细数据）
  7. 可视化：自动图表/表格渲染，并具备导出功能

💡 使用示例

聊天查询

  • "显示最近的销售数据" → 应用30天日期范围，渲染图表
  • "哪些产品库存低？" → 提取阈值，过滤数据
  • "本月分类表现" → 自动应用日期过滤，展示细分

数据导出

  • 手动保存：点击💾按钮将聊天保存到localStorage
  • 导入：点击📤导入对话（JSON/TXT/MD）
  • Excel导出：将数据表导出为格式化的Excel文件

语言支持

  • 切换语言：🇺🇸 英语，🇫🇷 法语，🇳🇱 荷兰语
  • 每种语言维护独立的聊天历史
  • 所有UI元素完全翻译

🐛 故障排除

常见问题

Azure OpenAI连接

  • 验证.env文件中的VITE_AOAI_ENDPOINT和VITE_AOAI_APIKEY是否正确
  • 确保端点URL包含完整的路径和API版本

MCP服务器问题

  • 检查MCP服务器是否在9090端口运行
  • 检查代理服务器是否在5002端口运行
  • 验证代理能否到达MCP服务器端点
  • 验证服务器返回的数据是否符合预期的JSON格式

数据可视化

  • 确保数据具有数值和类别以供图表使用
  • 检查浏览器控制台是否有渲染错误

语言/存储问题

  • 检查浏览器localStorage中是否有特定语言的键
  • 翻译文件应在浏览器网络标签中加载

🚀 可用脚本

  • npm run dev - 启动开发服务器
  • npm run build - 构建生产环境
  • npm run preview - 预览生产构建
  • npm run lint - 运行代码质量检查

📄 许可

MIT许可 - 查看LICENSE文件获取详情。

🔗 资源

🛡️ 免责声明

该项目是在个人设备和个人时间上独立开发的。 它未与EPAM Systems及其客户有任何关联、认可或衍生关系。 所有示例、配置和数据都是通用的，仅用于演示和教育目的。

使用React + TypeScript + MCP构建 ❤️