vercel-labs__json-render/examples/mcp

MCP App Example

A json-render MCP App that serves interactive shadcn/ui-based UIs directly inside Claude, ChatGPT, Cursor, VS Code, and other MCP-capable clients.

Setup

pnpm install
pnpm build

Usage

With Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "json-render": {
      "command": "npx",
      "args": ["tsx", "examples/mcp/server.ts", "--stdio"]
    }
  }
}

With Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "json-render": {
      "command": "npx",
      "args": ["tsx", "/absolute/path/to/examples/mcp/server.ts", "--stdio"]
    }
  }
}

HTTP Transport

pnpm start
# Server listens on http://localhost:3001/mcp

Stdio Transport

pnpm start:stdio

How It Works

1. The Vite build bundles the React app (with shadcn components and useJsonRenderApp hook) into a single self-contained HTML file
2. The MCP server registers a render-ui tool with the catalog prompt as its description
3. When the LLM calls the tool, it generates a json-render spec constrained to the catalog
4. The host renders the bundled HTML in a sandboxed iframe
5. The iframe receives the spec via the MCP Apps protocol and renders it with json-render