mcp

mcp について

json-render MCP インテグレーションは、Claude、ChatGPT、Cursor、VS Code などの MCP 対応クライアント内で、json-render UI をインタラクティブな MCP アプリとして提供します。サーバー側では、createMcpApp() が render-ui ツールと ui:// HTML リソースを登録する完全な McpServer を構築します。ツールの説明にはカタログプロンプトが埋め込まれており、モデルが有効な UI 仕様を生成する方法を理解できるようになっています。また、HTML リソースは Vite でバンドルされた単一ファイルの React アプリです。

レンダリングフローは iframe 内で実行されます。クライアントフック useJsonRenderApp() は postMessage を介してホストに接続し、spec、loading、connected、error、および callServerTool を返します。これらは小さな React ビューによって JSONUIProvider と Renderer に渡されます。自己完結型の iframe HTML は、React アプリを Vite および vite-plugin-singlefile でバンドルすることで生成され、すべてのコンポーネントが単一ファイルに含まれて配布されます。

メインのエントリポイントに加え、サーバー API は既存のサーバーに json-render を接続するための registerJsonRenderTool と registerJsonRenderResource を公開しています。一方、クライアント API には buildAppHtml が追加されています。ドキュメントには、.cursor/mcp.json を介した Cursor 用および Claude Desktop 用のすぐに使用可能なクライアント設定が含まれており、サーバーのインストールセット（@json-render/mcp、@json-render/core、@modelcontextprotocol/sdk）、クライアント iframe のインストールセット（@json-render/react、@json-render/shadcn、react、react-dom）、およびビルドツールの一覧が記載されています。これは、プレーンテキスト出力ではなくインタラクティブでコンポーネント駆動の UI を提示する必要がある MCP サーバーを構築する際に適しています。

よくある質問

どの MCP クライアントを対象としていますか？

Claude、ChatGPT、Cursor、VS Code、および MCP アプリをホストできるその他の MCP 対応クライアント。

createMcpApp() は何を設定しますか？

render-ui ツールと ui:// HTML リソースを登録する完全な McpServer です。ツールの説明にはカタログプロンプトが含まれており、モデルが有効な仕様を生成できるようになっています。

iframe HTML はどのように構築されますか？

Vite と vite-plugin-singlefile を組み合わせて React アプリを単一の自己完結型 HTML ファイルにバンドルすることで構築されます。

どのクライアントフックが仕様をレンダリングしますか？

useJsonRenderApp() は postMessage を介してホストに接続し、React ビューがレンダリングするための spec、loading、connected、error、および callServerTool を返します。

サーバーに必要なパッケージは何ですか？

@json-render/mcp、@json-render/core、および @modelcontextprotocol/sdk です。iframe クライアントにはさらに @json-render/react、@json-render/shadcn、react、および react-dom が使用されます。