mcp

@json-render/mcp

json-render UI を、Claude、ChatGPT、Cursor、VS Code などの MCP 対応クライアント内でインタラクティブな MCP Apps として提供する MCP Apps 統合機能です。

クイックスタート

サーバー（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());

クライアント（React、iframe 内）

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

function McpAppView({ registry }) {
  const { spec, loading, error } = useJsonRenderApp();
  if (error) return <div>Error: {error.message}</div>;
  if (!spec) return <div>Waiting...</div>;
  return (
    <JSONUIProvider registry={registry} initialState={spec.state ?? {}}>
      <Renderer spec={spec} registry={registry} loading={loading} />
    </JSONUIProvider>
  );
}

アーキテクチャ

1. createMcpApp() は、render-ui ツールと ui:// HTML リソースを登録する McpServer を作成します
2. ツールの説明にはカタログプロンプトが含まれており、LLM が有効な spec の生成方法を把握できます
3. HTML リソースは、json-render レンダラーを含む Vite バンドル済みの単一ファイル React アプリです
4. iframe 内では、useJsonRenderApp() が postMessage を介してホストに接続し、spec をレンダリングします

サーバー API

• createMcpApp(options) - メインエントリーポイント。完全な MCP サーバーを作成します
• registerJsonRenderTool(server, options) - 既存のサーバーに json-render ツールを登録します
• registerJsonRenderResource(server, options) - UI リソースを登録します

クライアント API（@json-render/mcp/app）

• useJsonRenderApp(options?) - React フック。{ spec, loading, connected, error, callServerTool } を返します
• buildAppHtml(options) - バンドル済みの JS/CSS から HTML を生成します

iframe HTML のビルド

Vite と vite-plugin-singlefile を使用して、React アプリを単一の自己完結型 HTML ファイルにバンドルします。

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

export default defineConfig({
  plugins: [react(), viteSingleFile()],
  build: { outDir: "dist" },
});

クライアント設定

Cursor（.cursor/mcp.json）

{
  "mcpServers": {
    "my-app": {
      "command": "npx",
      "args": ["tsx", "server.ts", "--stdio"]
    }
  }
}

Claude Desktop

{
  "mcpServers": {
    "my-app": {
      "command": "npx",
      "args": ["tsx", "/path/to/server.ts", "--stdio"]
    }
  }
}

依存関係

# Server
npm install @json-render/mcp @json-render/core @modelcontextprotocol/sdk

# Client (iframe)
npm install @json-render/react @json-render/shadcn react react-dom

# Build tools
npm install -D vite @vitejs/plugin-react vite-plugin-singlefile