React MCP客户端
一个现代的React TypeScript应用程序，用于与模型上下文协议（MCP）服务器交互，具有与Azure OpenAI集成的AI聊天功能、多语言支持和高级数据可视化。
✨ 主要特点
- 🤖 人工智能聊天：与Azure OpenAI集成的交互式界面
- 🌍 多语言支持：英语、法语和荷兰语，具有特定语言的聊天存储
- 📊 数据可视化：自动图表（条形图、饼图、折线图）和交互式表格
- 💾 手动保存/导入：对话可以手动保存和导入（JSON、TXT、MD）
- 🍞 吐司通知：用于用户反馈的现代吐司系统
- 🔍 Azure搜索集成：Azure认知搜索的RAG功能
- 📈 Excel导出：带格式和元数据的专业Excel导出
- 🐛 调试跟踪：用于故障排除的全面跟踪功能
🎬 演示视频
查看React MCP客户端在智能查询处理和数据可视化方面的运行情况：
https://github.com/user-attachments/assets/c06299ae-9ed7-42bc-a93f-4879ca464a8a
_该演示展示了智能查询处理、自动数据可视化和多语言聊天功能。_
🆕 最新功能
最近添加的内容：
- 自定义插件支持 -定义自定义逻辑以通过可配置插件访问数据库或API
- 高级JSON查看器 -具有展开/折叠功能和智能格式化的交互式数据可视化工具
- 增强的AI响应跟踪 -每个AI响应现在都包含详细的元数据：
- 使用的令牌数量（提示+完成） - 预计成本明细 - 加工过程中使用的工具 - AI模型信息
🛠️ 技术栈
- 前端：React 18+TypeScript、Vite、CSS模块
- 人工智能集成：Azure OpenAI、Azure搜索
- 图表：用于数据可视化的Recharts库
- 出口：用于Excel生成的XLSX库
- 国际化：带有浏览器语言检测的react-i18next
📋 快速开始
先决条件
- Node.js 16+
- Azure OpenAI帐户和API密钥
- 后端API服务器正在运行（默认端口5000）
安装
- 克隆并安装
git clone
cd react-mcp-client
npm install- 环境设置
创建 .env 文件：
VITE_AOAI_ENDPOINT=https://your-openai-resource.openai.azure.com/openai/deployments/your-model/chat/completions?api-version=2023-05-15
VITE_AOAI_APIKEY=your-azure-openai-api-key
VITE_MCP_SERVER_URL=http://localhost:9090
# Optional - for RAG capabilities
AZURE_SEARCH_ENDPOINT=https://your-search-service.search.windows.net
AZURE_SEARCH_APIKEY=your-search-admin-key
AZURE_SEARCH_INDEX=your-index-name- 启动开发服务器
npm run dev- 打开浏览器：导航到
http://localhost:5174
🏗️ 项目架构
src/
├── components/
│ ├── App.tsx # Main app & session management
│ ├── Chat/Chat.tsx # Chat interface & data visualization
│ ├── Toast/ # Toast notification system
│ ├── DataVisualization/ # Chart rendering & table components
│ └── LanguageSelector.tsx # Multi-language support
├── config/
│ └── api.ts # Centralized API endpoints & versioning
├── services/
│ ├── azureOpenAI.ts # Azure OpenAI integration
│ ├── azureSearch.ts # Azure Search/RAG capabilities
│ ├── mcpServer.ts # MCP server communication
│ └── chatService.ts # Business logic & parameter extraction
├── i18n/
│ └── locales/ # Translation files (en, fr, nl)
└── hooks/
└── useToast.ts # Toast notification hook🎯 运作原理
Frontend (React) → Vite Proxy (/api/v1/*) → Backend API (5000) → Data Processing → UI Rendering- 用户输入：用户通过React聊天界面提交查询
- 人工智能处理：Azure OpenAI分析意图并生成函数调用
- 参数提取：智能提取日期、阈值、类别、供应商
- API通信：前端呼叫版本化
/api/v1/*通过Vite代理访问端点 - 数据处理：智能格式化（摘要与详细数据）
- 可视化：具有导出功能的自动图表/表格渲染
💡 使用示例
聊天查询
- “显示最近的销售数据”→ 应用30天日期范围，渲染图表
- “哪些产品库存低？”→ 提取阈值，过滤数据
- “本月类别表现”→ 自动应用日期过滤器，显示细分
数据导出
- 手动保存：单击💾 将聊天保存到本地存储的按钮
- 导入：单击📥 导入对话（JSON/TXT/MD）
- Excel导出：将数据表导出为格式化的Excel文件
语言支持
- 切换🇺🇸 英语，🇫🇷 法国人，🇳🇱 荷兰的
- 每种语言都有单独的聊天记录
- 所有UI元素已完全翻译
🐛 故障排除
常见问题
Azure OpenAI连接
- 验证
.env文件正确VITE_AOAI_ENDPOINT和VITE_AOAI_APIKEY - 确保终结点URL包含API版本的完整路径
后端API问题
- 检查后端API服务器是否正在端口5000上运行
- 验证Vite代理配置
vite.config.js - 验证服务器是否以预期的JSON格式返回数据
数据可视化
- 确保图表数据具有数值和类别
- 检查浏览器控制台是否存在渲染错误
语言/存储问题
- 检查浏览器本地存储中的语言特定密钥
- 翻译文件应加载到浏览器网络选项卡中
📄 许可证
MIT许可证-有关详细信息，请参阅许可证文件。
🔗 资源
🛡️ 免责声明
该项目是在个人设备和个人时间内独立开发的。\ 它与EPAM Systems或其任何客户的知识产权无关、不受其认可或源自其知识产权。\ 所有示例、配置和数据都是通用的，仅用于演示和教育目的。
______________________________________________________________________
内置于❤️ 使用React+TypeScript+MCP