All Systems Operational
Powered By
profound-logo
profound-logoProfound CMS
⌘K
Admin

Json Y Claude Code

Creación de esquemas con Claude Code y el generador JSON

Continue Reading
Previous‹Inicio rápidoNextComponente Zod Pull›

Híbrido

Proyecto RenderizadorEnrutamiento ParamétricoTipos De ComponentesSseConfigurar Proxy Del Panel De AdministraciónRenderizado Estatico Con Soporte De Modo De EdicionProgramación en el generador de plantillasCreate Profound Next

Sin cabeza

Inicio rápidoJson Y Claude CodeComponente Zod Pull

Mcp

Mcp

Características Cms

Feat Docs TemplateCaracterística Constructor De PlantillasFuncionalidad TraductorFeat Organización

Motivación

Nuestro enfoque

Terminología

Hibrido Vs Headless

Flujo de trabajo de Claude Code

Primero conéctate a nuestro servidor MCP

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

Puedes empezar a utilizar herramientas y componentes para crear en masa documentos/bloques/componentes y publicar sitios web rápidamente.

A continuación se describe el proceso manual

Para iniciar el editor de esquemas Zod JSON.

  • Dirígete al panel de administración del CMS
  • Haz clic en + Crear esquema
  • Introduce la descripción JSON validada correspondiente del esquema
  • Aplica los cambios

Para cambios posteriores, será necesario eliminar el esquema y volver a añadirlo.

Cómo solicitar a Claude el flujo de trabajo en JSON

Si usamos Claude Code para los cambios visuales de TailwindCSS/CSS/React, también podemos pedirle que actualice el JSON correctamente utilizando un servidor MCP o proporcionándote el JSON que necesitas pegar en el editor de código.

Solo tienes que pedirle a Claude el JSON adecuado para los componentes de los que quieras crear un esquema, ya sea híbrido o simplemente un CMS sin cabeza.

Ejemplo

Estamos añadiendo una nueva funcionalidad del servidor MCP y, para mostrarla, estamos agregando un nuevo bloque hero.

Primero cambiaremos nuestro registro para usar un nuevo bloque

const registry = {
  "navbar": NavbarBlock,
  ...
  // new block added
  "McpFeatureBlock": McpFeatureDisplayBlock,
  ...
  "footer": FooterBlock,
};

Pídele a Claude que implemente el React/CSS del bloque y que nos proporcione el JSON para la definición del esquema. Debería verse así.

"McpFeatureBlock": {
  "label": "MCP Server",
  "title": "Let AI agents work your CMS directly",
  "description": "Profound CMS ships a native MCP server. Connect Claude, Cursor, or any MCP-compatible agent and let it read pages, update blocks, and publish content — no custom glue code needed.",
  "features": ["McpFeatureItem"],
  "cta_label": "Read the MCP docs",
  "cta_href":

Pegamos esto en la pestaña "Importar código" del editor de esquemas. Debería verse como se muestra a continuación.

Después de eso, crea el bloque que usa el esquema mcp_feature_block y referencia ese bloque mediante el creador de plantillas en la página.

Resumen

Este es un flujo de trabajo personalizado de Claude + Profound CMS.

"/docs/mcp"
}