Mcp

Bridges json-render's declarative UI system with the Model Context Protocol so you can serve interactive interfaces inside Claude, ChatGPT, Cursor, and VS Code. The server side registers an MCP tool that accepts json-render specs and serves a bundled React app as an HTML resource. Inside the iframe, a React hook connects via postMessage to render the spec with your component catalog. Works with shadcn components out of the box. The setup is straightforward if you're already familiar with MCP servers and Vite bundling, though you're wiring together several pieces. Honestly most useful if you're already invested in json-render and want your UIs to work across MCP clients without rewriting them.

skills.sh installs: 5.9K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill mcp --agent claude-code

Installs into .claude/skills of the current project.

Files

@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)

import { createMcpApp } from "@json-render/mcp";
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import fs from "node:fs";

const catalog = defineCatalog(schema, {
  components: { ...shadcnComponentDefinitions },
  actions: {},
});

const server = createMcpApp({
  name: "My App",
  version: "1.0.0",
  catalog,
  html: fs.readFileSync("dist/index.html", "utf-8"),
});

await server.connect(new StdioServerTransport());

Client (React, inside iframe)

import { useJsonRenderApp } from "@json-render/mcp/app";
import { JSONUIProvider, Renderer } from "@json-render/react";

SKILL.md on GitHub

Details

Repository: github.com/vercel-labs/json-render
Categories: AI & Agent Building, Cloud & Infrastructure
First seen: May 16, 2026

Mcp