mcp

Acerca de mcp

La integración de MCP json-render sirve interfaces de usuario (UI) de json-render como aplicaciones MCP interactivas dentro de clientes compatibles con MCP, como Claude, ChatGPT, Cursor y VS Code. En el lado del servidor, createMcpApp() construye un McpServer completo que registra una herramienta render-ui más un recurso HTML ui://; la descripción de la herramienta incrusta la instrucción del catálogo para que el modelo sepa cómo emitir especificaciones de interfaz válidas, y el recurso HTML es una aplicación React de un solo archivo empaquetada con Vite.

El flujo de renderizado se ejecuta dentro de un iframe. El gancho del cliente useJsonRenderApp() se conecta al host mediante postMessage y devuelve spec, loading, connected, error y callServerTool, que una pequeña vista de React alimenta en JSONUIProvider y Renderer. El HTML del iframe autocontenido se produce empaquetando la aplicación React con Vite y vite-plugin-singlefile para que todo se distribuya en un único archivo.

Además del punto de entrada principal, la API del servidor expone registerJsonRenderTool y registerJsonRenderResource para conectar json-render en un servidor existente, mientras que la API del cliente añade buildAppHtml. El documento incluye configuraciones de cliente listas para usar para Cursor a través de .cursor/mcp.json y para Claude Desktop, y enumera los conjuntos de instalación para el servidor (@json-render/mcp, @json-render/core, @modelcontextprotocol/sdk), el iframe del cliente (@json-render/react, @json-render/shadcn, react, react-dom) y las herramientas de compilación. Es adecuado al construir servidores MCP que necesitan presentar interfaces de usuario interactivas y basadas en componentes en lugar de salida de texto plano.

Preguntas frecuentes

¿A qué clientes de MCP apunta?

Claude, ChatGPT, Cursor, VS Code y otros clientes compatibles con MCP que puedan alojar aplicaciones MCP.

¿Qué configura createMcpApp()?

Un McpServer completo que registra una herramienta render-ui y un recurso HTML ui://. La descripción de la herramienta contiene la instrucción del catálogo para que el modelo pueda generar especificaciones válidas.

¿Cómo se construye el HTML del iframe?

Empaquetando la aplicación React en un único archivo HTML autocontenido utilizando Vite junto con vite-plugin-singlefile.

¿Qué gancho del cliente renderiza las especificaciones?

useJsonRenderApp() se conecta al host mediante postMessage y devuelve spec, loading, connected, error y callServerTool para que la vista de React los renderice.

¿Qué paquetes se requieren para el servidor?

@json-render/mcp, @json-render/core y @modelcontextprotocol/sdk. El cliente del iframe además utiliza @json-render/react, @json-render/shadcn, react y react-dom.