MCP React UI服务器
这个例子使用React和React Router V7提供了一个完整的MCP（模型上下文协议）远程服务器，具有UI功能。该服务器提供基于文本和交互式的UI工具，可用于兼容MCP的客户端，如Claude Desktop。
🚀 特性
- MCP协议支持：使用4个交互式工具实现模型上下文协议
- 交互式UI工具：为任务状态和用户配置文件提供丰富的可视化
- React路由器7：带服务器端渲染的全栈路由
- 会话管理：处理多个并发MCP会话
- 用户界面资源：使用返回交互式UI
@mcp-ui/server而不是纯文本 - TypeScript：整个代码库的完全类型安全
- 顺风CSS 4：现代风格框架
🛠️ 技术栈
- 核心框架：React路由器7、React 19、TypeScript、Vite
- MCP集成:
@mcp-ui/server,@modelcontextprotocol/sdk - UI库：用于数据可视化的Recharts，用于样式设计的Tailwind CSS
- 服务器：集成React Router的Express.js
📋 MCP工具
服务器提供4个MCP工具：
get_user_profile-以文本形式返回用户数据get_tasks_status-返回所有团队成员的文本任务状态摘要show_task_status-显示交互式任务仪表板UI，其中包含：
- 团队任务状态可视化 - 团队成员缩放功能 - 带有工具提示的交互式图表
show_user_status-显示用户配置文件，包括：
- 性能指标和图表 - 任务完成统计 - 带有优先级指示器的已阻止任务 - 助推功能
🚀 入门指南
先决条件
- Node.js 18或更高版本
- pnpm包管理器
安装
- 克隆存储库
- 安装依赖项：
pnpm install发展
要在开发模式下运行服务器，请执行以下操作：
pnpm dev默认情况下，服务器将在端口80上启动（可通过以下方式配置 VITE_PORT 环境变量）。
生产
要在生产模式下构建和运行服务器，请执行以下操作：
pnpm build
pnpm start快速启动
在docker容器中构建并运行服务器：
docker build -t mcp-server-react-ui -f Dockerfile.app.prod . && docker run --rm -p 3001:3001 mcp-server-react-ui🔧 配置
环境变量
VITE_PORT-开发服务器的端口（默认值：3001）VITE_HMR_PORT-热模块更换端口（默认：与VITE_Port相同）
📁 项目结构
/mcp-server-react-ui/
├── express-server/
│ ├── index.ts # Main Express server
│ ├── handlers.ts # MCP request handlers
│ └── tools.ts # MCP tool definitions
├── react-router-server/
│ └── index.ts # React Router SSR setup
├── app/
│ ├── root.tsx # React Router root layout
│ ├── routes.ts # Route definitions
│ ├── routes/
│ │ ├── home.tsx # Home route
│ │ ├── task.tsx # Task status visualization route
│ │ └── user.tsx # User profile route
│ ├── graph/
│ │ └── graph.tsx # Task status graph component
│ └── user/
│ └── user.tsx # User profile component
├── public/ # Static assets (avatars)
├── package.json
├── vite.config.ts
├── react-router.config.ts🔍 核心概念
用户界面资源
服务器使用 createUIResource 从 @mcp-ui/server 返回交互式UI而不是纯文本：
const resourceBlock = createUIResource({
uri: `ui://task-manager/${Date.now()}` as `ui://${string}`,
content: { type: 'externalUrl', iframeUrl: pickerPageUrl },
encoding: 'text',
});会话管理
服务器实现基于会话的传输管理：
- 使用唯一的会话ID跟踪每个MCP会话
- 传输实例使用映射存储在内存中
- 每个会话都有自己的StreamableHTTPServerTransport实例
服务器端渲染
该应用程序使用React Router进行服务器端渲染：
- Express通过React-Router/Express与React Router集成
- UI路由在服务器上呈现，以获得更好的性能
📊 样品数据
任务状态工具使用示例sprint数据：
{
alice: { remaining: 12, toDo: 5, inProgress: 4, blocked: 3 },
bob: { remaining: 18, toDo: 11, inProgress: 4, blocked: 3 },
charlie: { remaining: 14, toDo: 6, inProgress: 5, blocked: 3 }
}🔌 集成点
- MCP客户端：通过以下方式连接
/mcp端点 - Claude桌面版：可以调用工具并显示UI资源
- React组件：渲染于
/task和/user路线 - UI组件：交互式图表和用户配置文件，并将消息传递给家长
🤝 贡献
欢迎投稿、想法和bug报告！请随时查看 问题 或者创建一个新的。
📄 许可证
此项目根据Apache许可证2.0获得许可-请参阅 许可证 文件以获取详细信息。
💡 关于MCP-UI
mcp-ui 将交互式web组件引入 模型上下文协议 （MCP）。它允许您直接从MCP服务器交付丰富、动态的UI资源，由客户端呈现，将AI交互提升到一个新的水平！
有关MCP-UI的更多信息，请访问 官方文件.
🚀 支持的主机
越来越多的MCP兼容客户端支持MCP-UI。功能支持因主机而异：