mcp

О mcp

Интеграция json-render MCP предоставляет интерфейсы json-render в виде интерактивных приложений MCP внутри клиентов, поддерживающих MCP, таких как Claude, ChatGPT, Cursor и VS Code. На стороне сервера функция createMcpApp() создает полноценный McpServer, который регистрирует инструмент render-ui и ресурс ui:// HTML; описание инструмента включает каталог prompt, чтобы модель знала, как генерировать допустимые спецификации UI, а HTML-ресурс представляет собой одностраничное React-приложение, собранное с помощью Vite.

Процесс рендеринга выполняется внутри iframe. Клиентский хук useJsonRenderApp() подключается к хосту через postMessage и возвращает spec, loading, connected, error и callServerTool, которые передаются в небольшой React-представление для использования в JSONUIProvider и Renderer. Самодостаточный HTML-файл iframe создается путем сборки React-приложения с помощью Vite и vite-plugin-singlefile, чтобы всё содержимое было упаковано в один файл.

Помимо основного точки входа, серверный 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) и инструментов сборки. Это решение подходит для создания MCP-серверов, которым необходимо предоставлять интерактивные UI на основе компонентов, а не просто текстовый вывод.

Часто задаваемые вопросы

Какие клиенты MCP поддерживаются?

Claude, ChatGPT, Cursor, VS Code и другие клиенты, поддерживающие MCP и способные хостить приложения MCP.

Что делает функция createMcpApp()?

Создает полноценный McpServer, который регистрирует инструмент render-ui и ресурс ui:// HTML. Описание инструмента содержит каталог prompt, чтобы модель могла генерировать допустимые спецификации.

Как собирается HTML-код iframe?

С помощью сборки React-приложения в один самодостаточный HTML-файл с использованием Vite и плагина vite-plugin-singlefile.

Какой клиентский хук отвечает за рендеринг спецификаций?

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.