mcp

Sobre o mcp

A integração do MCP json-render serve interfaces de usuário (UIs) do json-render como Aplicativos MCP interativos dentro de clientes compatíveis com MCP, como Claude, ChatGPT, Cursor e VS Code. No lado do servidor, o createMcpApp() constrói um McpServer completo que registra uma ferramenta render-ui e um recurso HTML ui://; a descrição da ferramenta incorpora o prompt do catálogo para que o modelo saiba como emitir especificações de UI válidas, e o recurso HTML é um aplicativo React de arquivo único agrupado com Vite.

O fluxo de renderização ocorre dentro de um iframe. o hook do cliente useJsonRenderApp() conecta-se ao host por meio de postMessage e retorna spec, loading, connected, error e callServerTool, que uma pequena visualização React alimenta no JSONUIProvider e Renderer. O HTML do iframe independente é produzido agrupando o aplicativo React com Vite e vite-plugin-singlefile para que tudo seja entregue em um único arquivo.

Além do ponto de entrada principal, a API do servidor expõe registerJsonRenderTool e registerJsonRenderResource para conectar o json-render a um servidor existente, enquanto a API do cliente adiciona buildAppHtml. O documento inclui configuração de cliente pronta para uso para o Cursor via .cursor/mcp.json e para o Claude Desktop, e lista os conjuntos de instalação para o servidor (@json-render/mcp, @json-render/core, @modelcontextprotocol/sdk), o iframe do cliente (@json-render/react, @json-render/shadcn, react, react-dom) e as ferramentas de compilação. Ele se encaixa ao construir servidores MCP que precisam apresentar interfaces de usuário interativas e orientadas a componentes, em vez de saída de texto simples.

Perguntas frequentes

Quais clientes MCP ele visa?

Claude, ChatGPT, Cursor, VS Code e outros clientes compatíveis com MCP que podem hospedar Aplicativos MCP.

O que o createMcpApp() configura?

Um McpServer completo que registra uma ferramenta render-ui e um recurso HTML ui://. A descrição da ferramenta contém o prompt do catálogo para que o modelo possa gerar especificações válidas.

Como o HTML do iframe é construído?

Agrupando o aplicativo React em um único arquivo HTML autossuficiente usando Vite em conjunto com vite-plugin-singlefile.

Qual hook do cliente renderiza as especificações?

useJsonRenderApp() conecta-se ao host por meio de postMessage e retorna spec, loading, connected, error e callServerTool para que a visualização React os renderize.

Quais pacotes são necessários para o servidor?

@json-render/mcp, @json-render/core e @modelcontextprotocol/sdk. O cliente do iframe também usa @json-render/react, @json-render/shadcn, react e react-dom.