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。