Split Screen JSON Component Builder with LLM

Maak eerst verbinding met onze MCP-server

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

Je kunt tools en componenten gaan gebruiken om in bulk documenten/blokken/componenten te maken en websites snel te publiceren.

Hieronder volgt het handmatige proces

Zo start je de Zod JSON-schemabewerker.

• Ga naar het CMS-beheerpanel
• Klik op + Create schema
• Voer de juiste gevalideerde JSON-beschrijving van het schema in
• Pas de wijzigingen toe

Voor latere wijzigingen moet het schema worden verwijderd en opnieuw worden toegevoegd.

Claude aansturen voor de JSON-workflow

Als we Claude Code gebruiken voor visuele TailwindCSS/CSS/React-wijzigingen, kunnen we het ook vragen de JSON correct bij te werken via een MCP-server of door je de JSON te geven die je in de code-editor moet plakken.

Vraag Claude gewoon om de juiste JSON voor de componenten waarvoor je een schema wilt maken, of het nu hybride is of puur een headless CMS.

Voorbeeld

We voegen een nieuwe MCP-serverfunctie toe en om dat te tonen voegen we een nieuw hero-blok toe.

Eerst passen we ons register aan om een nieuw blok te gebruiken

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

Vraag Claude om de React/CSS van het blok te implementeren en ons JSON voor de schema-definitie te geven. Het zou er zo uit moeten zien.

"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": "/docs/mcp"
}

Plak het in de JSON-editor in de schemabuilder. Het zou er ongeveer zo uitzien.

Tip: Heeft Zod je voorkeur? Schakel de editor bovenaan het paneel van JSON naar Zod en plak in plaats daarvan een Zod-schema — de builder leidt dezelfde velden af. Handig als je elders in je app al met Zod-modelleert.

Maak daarna het blok dat het schema mcp_feature_block gebruikt en verwijs naar dat blok via de templatebuilder in de pagina.

Samenvatting

Dit is een aangepaste Claude + Profound CMS-workflow.