Rag MCP Frontend

🚀 AI MCP代理-反应前端

用于AI MCP代理的现代React+TypeScript+Tailwind CSS前端。

✨ 特性

• 🎨 漂亮的UI 使用顺风CSS
• ⚡ 实时流媒体 使用服务器发送事件的响应
• 🔧 MCP服务器管理 -从UI添加/删除服务器
• 💬 对话记忆 -跨消息维护上下文
• 🎯 模式切换 -代理模式与仅RAG模式
• 📱 响应式设计 -适用于所有设备

🛠️ 技术栈

• 反应19 -UI库
• TypeScript -类型安全
• Tailwind CSS -造型
• 维特 -构建工具
• ESLint -代码质量

🚀 快速开始

1.安装依赖项

npm install

2.启动后端

在单独的终端中：

cd ../mcp-server
./start_server.sh

后端将运行在：http://localhost:8000

3.启动前端

npm run dev

前端将运行在：http://localhost:5173

4.打开浏览器

导航到： http://localhost:5173

📁 项目结构

src/
├── components/
│   ├── ChatMessage.tsx    # Message bubble component
│   ├── ChatInput.tsx      # Input field with send button
│   └── MCPManager.tsx     # MCP server management modal
├── services/
│   └── api.ts             # API client for backend
├── App.tsx                # Main application component
├── App.css                # Additional styles
├── index.css              # Tailwind CSS imports
└── main.tsx               # Entry point

🎯 用法

与AI聊天

1. 在输入框中键入您的消息
2. 按Enter键或单击“发送”
3. 实时观看响应流
4. 工具使用情况将显示为徽章

管理MCP服务器

1. 点击“🔧 标题中的“MCP服务器”按钮
2. 填写服务器名称和URL
3. 点击“➕ 添加服务器“
4. 服务器立即可用！

切换模式

• 代理模式：使用所有MCP工具+RAG
• RAG模式：仅使用知识库（更快）

🔌 API集成

前端连接到在端口8000上运行的FastAPI后端。

使用的关键端点：

• GET /health -健康检查
• POST /api/chat/stream -流媒体聊天
• GET /api/mcp-servers -列出服务器
• POST /api/mcp-servers -添加服务器
• DELETE /api/mcp-servers/{name} -删除服务器

🎨 样式

此项目使用Tailwind CSS进行样式设置。主要特点：

• 渐变背景
• 流畅的动画
• 响应式设计
• 自定义调色板
• 现代UI组件

🧪 发展

运行开发服务器

npm run dev

为生产而建

npm run build

预览生产版本

npm run preview

Lint代码

npm run lint

🔧 配置

Vite配置

编辑 vite.config.ts 更改：

• 端口（默认值：5173）
• 代理服务器设置
• 构建选项

顺风配置

编辑 tailwind.config.js 自定义：

• 颜色
• 字体
• 间距
• 动画

API URL

编辑 src/services/api.ts 更改后端URL：

const API_BASE_URL = 'http://localhost:8000';

📊 演出

• 初始加载：~100KB（gzip压缩）
• 延迟加载以获得最佳性能
• 使用React高效地重新渲染
• 流媒体即时反馈

🐛 故障排除

后端连接问题

确保后端正在运行：

cd ../mcp-server
./start_server.sh

检查后端是否可访问：http://localhost:8000/health

CORS错误

后端为所有来源启用了CORS。如果您仍然看到错误：

1. 检查后端是否正在运行
2. 验证中的API URL src/services/api.ts
3. 查看浏览器控制台了解详细信息

造型问题

如果顺风风格不起作用：

# Reinstall dependencies
rm -rf node_modules
npm install

# Restart dev server
npm run dev

🎉 功能展示

实时流媒体

响应在生成时逐字显示，提供即时反馈。

刀具跟踪

当代理使用工具（如数学运算或RAG）时，您将看到显示使用了哪些工具的徽章。

美丽的动画

• 消息的滑入动画
• 键入指示器的反弹动画
• 所有交互的平滑过渡

响应式设计

完美适用于：

• 桌面（1920px+）
• 笔记本电脑（1366px+）
• 平板电脑（768像素+）
• 手机（375px+）

📝 后续步骤

• \[\]添加语音输入/输出
• \[\]添加文件上传支持
• \[\]添加对话导出
• \[\]添加暗模式
• \[\]添加键盘快捷键
• \[\]添加消息编辑
• \[\]添加对话搜索

🤝 贡献

这是AI MCP代理后端的前端。贡献：

1. 分叉存储库
2. 创建要素分支
3. 进行更改
4. 彻底测试
5. 提交拉取请求

📄 许可证

与主要的AI MCP Agent项目相同。

______________________________________________________________________

内置❤️ 使用React、TypeScript和Tailwind CSS