mcp

關於 mcp

json-render MCP 整合將 json-render UI 作為互動式 MCP 應用，整合到支援 MCP 的客戶端（如 Claude、ChatGPT、Cursor 和 VS Code）中。在伺服器端，createMcpApp() 構建了一個完整的 McpServer，註冊了一個 render-ui 工具以及一個 ui:// HTML 資源；工具描述中嵌入了目錄提示詞（catalog prompt），以便模型知道如何生成有效的 UI 規範，而 HTML 資源是一個由 Vite 打包的單檔案 React 應用。

渲染流程在 iframe 內執行。客戶端鉤子 useJsonRenderApp() 透過 postMessage 與主機連線，並返回 spec、loading、connected、error 和 callServerTool，這些值被一個小型 React 檢視傳遞給 JSONUIProvider 和 Renderer。自包含的 iframe HTML 是透過使用 Vite 和 vite-plugin-singlefile 打包 React 應用生成的，以便所有內容都包含在單個檔案中。

除了主入口點外，伺服器 API 提供了 registerJsonRenderTool 和 registerJsonRenderResource，用於將 json-render 整合到現有伺服器中；而客戶端 API 增加了 buildAppHtml。文件包含了用於 Cursor 的 .cursor/mcp.json 客戶端配置示例以及用於 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() 設定了什麼？

一個完整的 McpServer，它註冊了一個 render-ui 工具和一個 ui:// HTML 資源。工具描述中攜帶了目錄提示詞，以便模型能夠生成有效的規範。

iframe HTML 是如何構建的？

透過使用 Vite 結合 vite-plugin-singlefile 將 React 應用打包為單個自包含的 HTML 檔案。

哪個客戶端鉤子負責渲染規範？

useJsonRenderApp() 透過 postMessage 與主機連線，並返回 spec、loading、connected、error 和 callServerTool，供 React 檢視進行渲染。

伺服器需要哪些軟體包？

@json-render/mcp、@json-render/core 和 @modelcontextprotocol/sdk。iframe 客戶端額外使用 @json-render/react、@json-render/shadcn、react 和 react-dom。