Split Screen JSON Component Builder with LLM

Anslut först till vår MCP-server

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

Du kan börja använda verktyg och komponenter för att masskapa dokument/block/komponenter och publicera webbplatser snabbt.

Nedan följer den manuella processen

Så här startar du redigeraren för Zod JSON-scheman.

• Gå till CMS-administrationspanelen
• Klicka på + Create schema
• Ange den korrekta validerade JSON-beskrivningen av schemat
• Verkställ ändringarna

För senare ändringar måste schemat tas bort och läggas till igen.

Ge Claude instruktioner för JSON-arbetsflödet

Om vi använder Claude Code för visuella ändringar i TailwindCSS/CSS/React kan vi också be den uppdatera JSON korrekt genom att använda en MCP-server eller genom att ge dig den JSON du behöver klistra in i kodredigeraren.

Be bara Claude om den lämpliga JSON:en för de komponenter du vill skapa ett schema för, oavsett om det är Hybrid eller bara ett headless CMS.

Exempel

Vi lägger till en ny MCP-serverfunktion och för att visa den lägger vi till ett nytt hero-block.

Först ändrar vi vårt register så att det använder ett nytt block.

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

Be Claude implementera blockets React/CSS och ge oss JSON för schemadefinitionen. Den ska se ut så här.

"McpFeatureBlock": {
  "label": "MCP-server",
  "title": "Låt AI-agenter arbeta direkt i ditt CMS",
  "description": "Profound CMS levereras med en inbyggd MCP-server. Anslut Claude, Cursor eller valfri MCP-kompatibel agent och låt den läsa sidor, uppdatera block och publicera innehåll — ingen specialanpassad kopplingskod behövs.",
  "features": ["McpFeatureItem"],
  "cta_label": "Läs MCP-dokumentationen",
  "cta_href": "/docs/mcp"
}

Klistra in den i JSON-redigeraren i schemabyggaren. Den ska se ut så här nedan.

Tips: Föredrar du Zod? Växla redigeraren från JSON till Zod längst upp i panelen och klistra in ett Zod-schema i stället — byggaren härleder samma fält. Praktiskt om du redan modellerar data med Zod någon annanstans i din app.

Därefter skapar du blocket som använder schemat mcp_feature_block och refererar till det blocket via mallbyggaren på sidan.

Sammanfattning

Detta är ett anpassat arbetsflöde för Claude + Profound CMS.