Split Screen JSON Component Builder with LLM

Primeiro conecte-se ao nosso servidor MCP

claude mcp add --transport http Profound http://107.21.107.99:8081/mcp

Você pode começar a usar ferramentas e componentes para criar em massa documentos/blocos/componentes e publicar sites rapidamente.

A seguir está o processo manual

Para iniciar o editor de esquemas Zod JSON.

• Acesse o painel de administração do CMS
• Clique em + Criar esquema
• Insira a descrição JSON apropriada e validada do esquema
• Aplique as alterações

Para alterações posteriores, será necessário excluir o esquema e adicioná-lo novamente.

Criando prompts para Claude para o fluxo de trabalho JSON

Se usarmos o Claude Code para alterações visuais em TailwindCSS/CSS/React, também podemos pedir que ele atualize o JSON corretamente usando um servidor MCP ou fornecendo o JSON que você precisa colar no editor de código.

Basta pedir ao Claude o JSON apropriado para os componentes para os quais você deseja criar um esquema, seja híbrido ou apenas um CMS headless.

Exemplo

Estamos adicionando um novo recurso de servidor MCP e, para exibi-lo, estamos adicionando um novo bloco hero.

Primeiro vamos alterar nosso registro para usar um novo bloco

const registry = {
  "navbar": NavbarBlock,
  ...
  // novo bloco adicionado
  "McpFeatureBlock": McpFeatureDisplayBlock,
  ...
  "footer": FooterBlock,
};

Peça ao Claude para implementar o React/CSS do bloco e nos fornecer o JSON para a definição do esquema. Deve ficar assim.

"McpFeatureBlock": {
  "label": "Servidor MCP",
  "title": "Deixe agentes de IA trabalharem diretamente no seu CMS",
  "description": "O Profound CMS oferece um servidor MCP nativo. Conecte Claude, Cursor ou qualquer agente compatível com MCP e permita que ele leia páginas, atualize blocos e publique conteúdo — sem necessidade de código personalizado.",
  "features": ["McpFeatureItem"],
  "cta_label": "Leia a documentação do MCP",
  "cta_href": "/docs/mcp"
}

Cole-o no editor JSON no construtor de esquemas. Ele deve ficar como abaixo.

Dica: Prefere Zod? Alterne o editor de JSON para Zod no topo do painel e cole um esquema Zod — o construtor derivará os mesmos campos. Prático se você já modela dados com Zod em outra parte do seu aplicativo.

Depois disso, crie o bloco que usa o esquema mcp_feature_block e faça referência a esse bloco usando o construtor de templates na página.

Resumo

Este é um fluxo de trabalho personalizado Claude + Profound CMS.