Vercel の json-render で Claude の MCP Apps UI を作ってみた

1. カタログ定義 ──── どのコンポーネントが使えるか（Zodスキーマで定義）
      ↓
2. JSON スペック生成 ── LLM がカタログに沿って UI 仕様を JSON で出力
      ↓
3. レンダリング ──── Renderer がスペックをコンポーネントツリーに変換して描画

┌──────────────┐  ①カタログをプロンプトに変換  ┌───────────────┐
│ json-render  │ ──────────────────────────►  │  LLM          │
│ カタログ定義  │                               │ (Claude等)    │
└──────────────┘                               └───────┬───────┘
                                                       │ ②JSONスペックを生成
                                                       ▼
┌──────────────┐  ③ render-ui ツール結果       ┌───────────────┐
│ MCP Apps     │ ◄──── postMessage ────────── │  Host         │
│ iframe内のUI  │                               │ (Claude Desktop) │
└──────────────┘                               └───────────────┘
       │
       ▼ ④ Renderer がスペックを shadcn/ui コンポーネントに変換
  ┌──────────────────┐
  │ インタラクティブUI  │
  │ (テーブル, カード等) │
  └──────────────────┘

import { createMcpApp } from "@json-render/mcp";

const server = await createMcpApp({
  name: "json-render Example",
  version: "1.0.0",
  catalog,  // コンポーネントカタログ
  html,     // Vite でバンドルしたシングル HTML
});

git clone https://github.com/vercel-labs/json-render.git
cd json-render
pnpm install

# 依存パッケージを順にビルド
pnpm --filter @json-render/core build
pnpm --filter @internal/react-state build
pnpm --filter @json-render/react build
pnpm --filter @json-render/shadcn build
pnpm --filter @json-render/mcp build

# MCP サンプルをビルド
pnpm --filter example-mcp build

$ ls -la examples/mcp/dist/index.html
-rw-r--r-- 1 user user 983067 Mar 18 17:38 dist/index.html

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

cd examples/mcp
pnpm start
# MCP server listening on http://localhost:3001/mcp

{
  "root": "card-1",
  "elements": {
    "card-1": {
      "type": "Card",
      "props": { "title": "売上ダッシュボード" },
      "children": ["metric-1", "metric-2", "table-1"]
    },
    "metric-1": {
      "type": "Metric",
      "props": { "label": "今月の売上", "value": "¥12,500,000", "format": "currency" },
      "children": []
    },
    "metric-2": {
      "type": "Metric",
      "props": { "label": "前月比", "value": "+15%", "format": "percent" },
      "children": []
    },
    "table-1": {
      "type": "Table",
      "props": {
        "columns": ["商品名", "売上", "数量"],
        "rows": [
          ["商品A", "¥5,000,000", "500"],
          ["商品B", "¥4,200,000", "380"],
          ["商品C", "¥3,300,000", "290"]
        ]
      },
      "children": []
    }
  }
}

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";

export const catalog = defineCatalog(schema, {
  components: {
    ...shadcnComponentDefinitions,  // 36個の shadcn/ui コンポーネント定義
  },
  actions: {},
});

import { createMcpApp } from "@json-render/mcp";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import fs from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";
import { catalog } from "./src/catalog.js";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

function loadHtml(): string {
  const htmlPath = path.join(__dirname, "dist", "index.html");
  if (!fs.existsSync(htmlPath)) {
    throw new Error(
      `Built HTML not found at ${htmlPath}. Run 'pnpm build' first.`,
    );
  }
  return fs.readFileSync(htmlPath, "utf-8");
}

async function startStdio() {
  const html = loadHtml();
  const server = await createMcpApp({
    name: "json-render Example",
    version: "1.0.0",
    catalog,
    html,
  });
  await server.connect(new StdioServerTransport());
}

import { useState, useEffect } from "react";
import { App as McpApp } from "@modelcontextprotocol/ext-apps";
import { JSONUIProvider, Renderer, defineRegistry } from "@json-render/react";
import { shadcnComponents } from "@json-render/shadcn";
import type { Spec } from "@json-render/core";
import { catalog } from "./catalog";

// カタログに対応する実コンポーネントを登録
const { registry } = defineRegistry(catalog, {
  components: {
    ...shadcnComponents,  // shadcn/ui の実コンポーネント
  },
});

function McpAppView() {
  const [spec, setSpec] = useState<Spec | null>(null);

  useEffect(() => {
    const app = new McpApp({ name: "json-render", version: "1.0.0" });

    // ツール結果（JSONスペック）を受け取ってパースする
    app.ontoolresult = (result) => {
      const parsed = parseSpec(result);
      if (parsed) setSpec(parsed);
    };

    // ホストのテーマ（ダーク/ライト）に自動追従
    app.onhostcontextchanged = (ctx) => applyHostContext(ctx);

    app.connect();
  }, []);

  if (!spec) return <div>Loading...</div>;

  return (
    <JSONUIProvider registry={registry} initialState={spec.state ?? {}}>
      <Renderer spec={spec} registry={registry} />
    </JSONUIProvider>
  );
}

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { viteSingleFile } from "vite-plugin-singlefile";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss(), viteSingleFile()],
  build: {
    outDir: "dist",
    rollupOptions: {
      input: "index.html",
    },
  },
});

HTML/CSS/JSを手書き → registerApp() でリソース登録 → ツール定義を手書き

カタログ定義（Zod） → createMcpApp() 1行 → LLM が自動で UI を生成

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";

// 必要なコンポーネントだけ選択
const { Card, Table, Badge, Metric, Button } = shadcnComponentDefinitions;

export const catalog = defineCatalog(schema, {
  components: { Card, Table, Badge, Metric, Button },
  actions: {
    export_report: { description: "Export dashboard to PDF" },
  },
});