MCP Apps integration for json-render. Use when building MCP servers that render interactive UIs in Claude, ChatGPT, Cursor, or VS Code, or when integrating json-render with the Model Context Protocol.

@json render/mcp MCP Apps integration that serves json render UIs as interactive MCP Apps inside Claude, ChatGPT, Cursor, VS Code, and other MCP capable clients. Quick Start Server (Node.js) Client (React, inside iframe) Architecture 1. createMcpApp() creates an McpServer that registers a render ui tool and a ui:// HTML resource 2. The tool description includes the catalog prompt so the LLM knows how to generate valid specs 3. The HTML resource is a Vite bundled single file React app with json render renderers 4. Inside the iframe, useJsonRenderApp() connects to the host via postMessage and renders specs Server API createMcpApp(options) main entry, creates a full MCP server registerJsonRenderTool(server, options) register a json render tool on an existing server registerJsonRenderResource(server, options) register the UI resource Client API ( @json render/mcp/app ) useJsonRenderApp(options?) React hook, returns { spec, loading, connected, error, callServerTool } buildAppHtml(options) generate HTML from bundled JS/CSS Building the iframe HTML Bundle the React app into a single self contained HTML file using Vite + vite plugin singlefile : Client Configuration Cursor ( .cursor/mcp.json ) Claude Desktop Dependencies