Split Screen JSON Component Builder with LLM

Opret først forbindelse til vores MCP-server

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

Du kan begynde at bruge værktøjer og komponenter til hurtigt at masseoprette dokumenter/blokke/komponenter og udgive websites.

Den manuelle proces er som følger

Sådan starter du Zod JSON Schema-editoren.

• Gå til CMS-administratorpanelet
• Klik på + Create schema
• Indtast den passende validerede JSON-beskrivelse af skemaet
• Anvend ændringerne

Ved efterfølgende ændringer skal skemaet slettes og tilføjes igen.

Sådan prompt'er du Claude til JSON-workflowet

Hvis vi bruger Claude Code til visuelle TailwindCSS/CSS/React-ændringer, kan vi også bede den om at opdatere JSON'en korrekt ved hjælp af en MCP-server eller ved at give dig den JSON, du skal indsætte i kodeeditoren.

Bed blot Claude om den passende JSON til de komponenter, du vil oprette et skema til, uanset om det er Hybrid eller blot et headless CMS.

Eksempel

Vi tilføjer en ny MCP-serverfunktion, og for at vise den tilføjer vi en ny hero-blok.

Først ændrer vi vores registry til at bruge en ny blok

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

Bed Claude om at implementere blokkens React/CSS og give os JSON til skemadefinitionen. Det skal se sådan ud.

"McpFeatureBlock": {
  "label": "MCP-server",
  "title": "Lad AI-agenter arbejde direkte i dit CMS",
  "description": "Profound CMS leveres med en native MCP-server. Forbind Claude, Cursor eller enhver MCP-kompatibel agent, og lad den læse sider, opdatere blokke og udgive indhold — ingen specialkodning nødvendig.",
  "features": ["McpFeatureItem"],
  "cta_label": "Læs MCP-dokumentationen",
  "cta_href": "/docs/mcp"
}

Indsæt det i JSON-editoren i skemabyggeren. Det bør se sådan ud nedenfor.

Tip: Foretrækker du Zod? Skift editoren fra JSON til Zod øverst i panelet og indsæt i stedet et Zod-skema — builderen udleder de samme felter. Praktisk, hvis du allerede modellerer data med Zod andetsteds i din app.

Derefter skal du oprette blokken, der bruger skemaet mcp_feature_block, og referere den blok via skabelonbyggeren på siden.

Resumé

Dette er et brugerdefineret Claude + Profound CMS-workflow.