Home

Skill

MCP Tools

mcp

vercel-labs/json-render

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.

...Expand all

Updated time August 27, 2026

# mcp # typescript # react # MCP ToolsWeb Development # json-render # ui-rendering

About mcp

The json-render MCP integration serves json-render UIs as interactive MCP Apps inside MCP-capable clients such as Claude, ChatGPT, Cursor, and VS Code. On the server side, createMcpApp() builds a full McpServer that registers a render-ui tool plus a ui:// HTML resource; the tool description embeds the catalog prompt so the model knows how to emit valid UI specs, and the HTML resource is a Vite-bundled single-file React app.

The rendering flow runs inside an iframe. The client hook useJsonRenderApp() connects to the host over postMessage and returns spec, loading, connected, error, and callServerTool, which a small React view feeds into JSONUIProvider and Renderer. The self-contained iframe HTML is produced by bundling the React app with Vite and vite-plugin-singlefile so everything ships in a single file.

Beyond the main entry point, the server API exposes registerJsonRenderTool and registerJsonRenderResource for wiring json-render onto an existing server, while the client API adds buildAppHtml. The document includes ready-to-use client configuration for Cursor via .cursor/mcp.json and for Claude Desktop, and lists the install sets for the server (@json-render/mcp, @json-render/core, @modelcontextprotocol/sdk), the client iframe (@json-render/react, @json-render/shadcn, react, react-dom), and build tooling. It fits when building MCP servers that need to present interactive, component-driven UIs rather than plain text output.

FAQ

Which MCP clients does it target?

Claude, ChatGPT, Cursor, VS Code, and other MCP-capable clients that can host MCP Apps.

What does createMcpApp() set up?

A full McpServer that registers a render-ui tool and a ui:// HTML resource. The tool description carries the catalog prompt so the model can generate valid specs.

How is the iframe HTML built?

By bundling the React app into a single self-contained HTML file using Vite together with vite-plugin-singlefile.

Which client hook renders the specs?

useJsonRenderApp() connects to the host over postMessage and returns spec, loading, connected, error, and callServerTool for the React view to render.

What packages are required for the server?

@json-render/mcp, @json-render/core, and @modelcontextprotocol/sdk. The iframe client additionally uses @json-render/react, @json-render/shadcn, react, and react-dom.

View on GitHub