AI导哈

React MCP-UI集成工具

一个展示如何在React + Vite + TypeScript应用中集成MCP-UI SDK的概念验证工具，具有模块化架构、数据管理和测试功能。

  • by sebastianmartinez-tech
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 sebastianmartinez-tech/mcp-ui-poc

使用说明

MCP UI PoC con-React+Vite

展示如何集成SDK的POC @mcp-ui/client 在用Vite和TypeScript构建的React应用程序中。数据来自 JSON占位符 并分层组织(api, services, hooks, components, pages, types, utils)保持明确的责任。

主要特征

  • 🎯 MCP-UI资源呈现 <UIResourceRenderer /> 显示交互式HTML内容。
  • 🧱 分层模块化架构，用于分离数据访问、域逻辑和UI。
  • 🔁 使用React Query和 HttpClient 基于自己 fetch 控制错误。
  • 📊 记录MCP-UI资源发布的通知/意图的行动日志。
  • ✅ 服务、挂钩和MCP组件的额外单元和集成测试。
  • 🌐 端点MCP(/api/mcp)准备好执行无服务器功能（例如Vercel），与 mode=html|remote.

可用脚本

npm install      # Instala dependencias
npm run dev      # Inicia el servidor de desarrollo
npm run build    # Genera build de producción
npm run preview  # Vista previa del build
npm run test     # Ejecuta la suite de tests (unitarios + integración)

## Endpoint MCP (Serverless)

El repositorio incluye `api/mcp.ts`, una función Node que reutiliza la lógica de servicios para construir
recursos MCP-UI. Con ella puedes desplegar la PoC en plataformas como Vercel:

1. Construye el frontend (`npm run build`). El resultado quedará en `dist/`.
2. Vercel detectará automáticamente `/api/mcp.ts` y expondrá `https://tu-app.vercel.app/api/mcp?postId=1`.
   Añade `mode=remote` para obtener la variante `remote-dom`.
3. Si deseas consumir este endpoint desde el frontend, configura `VITE_MCP_ENDPOINT` apuntando a tu
   dominio y úsalo en tu capa de datos.

文件夹结构

src/
├── api/                  # Adaptadores HTTP contra servicios externos
├── components/           # Componentes de UI reutilizables
├── hooks/                # Hooks específicos de la aplicación
├── pages/                # Vistas de alto nivel
├── services/             # Lógica de dominio y orquestación de datos
├── types/                # Definiciones de tipos compartidos
└── utils/                # Utilidades y helpers puros

建议的下一步

  • 为服务和挂钩添加单元/集成测试。
  • 用资源扩展演示 remote-dom MCP-UI软件开发工具包。
  • 连接发出动态资源的实际MCP服务器。

相关 MCP