Split Screen JSON Component Builder with LLM

Koble først til MCP-serveren vår

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

Du kan begynne å bruke verktøy og komponenter til å masseprodusere dokumenter/blokker/komponenter og publisere nettsteder raskt.

Følgende er den manuelle prosessen

Slik starter du Zod JSON-schema-editoren.

• Gå til CMS-adminpanelet
• Klikk på + Opprett skjema
• Skriv inn den passende validerte JSON-beskrivelsen av skjemaet
• Bruk endringene

For senere endringer må skjemaet slettes og legges til på nytt.

Gi Claude instruksjoner for JSON-arbeidsflyten

Hvis vi bruker Claude Code for visuelle tailwindCSS/CSS/React-endringer, kan vi også be den oppdatere JSON-en korrekt ved hjelp av en MCP-server eller ved å gi deg JSON-en du trenger for å lime inn i kodeeditoren.

Be bare Claude om den riktige JSON-en for komponentene du vil lage et skjema for, enten det er hybrid eller bare et headless CMS.

Eksempel

Vi legger til en ny MCP-serverfunksjon, og for å vise den legger vi til en ny hero-blokk.

Først endrer vi registeret vårt til å bruke en ny blokk

const registry = {
  "navbar": NavbarBlock,
  ...
  // ny blokk lagt til
  "McpFeatureBlock": McpFeatureDisplayBlock,
  ...
  "footer": FooterBlock,
};

Be Claude implementere blokkens React/CSS og gi oss JSON for skjema-definisjonen. Den bør se slik ut.

"McpFeatureBlock": {
  "label": "MCP-server",
  "title": "La KI-agenter jobbe direkte i CMS-et ditt",
  "description": "Profound CMS leveres med en innebygd MCP-server. Koble til Claude, Cursor eller en hvilken som helst MCP-kompatibel agent og la den lese sider, oppdatere blokker og publisere innhold — ingen tilpasset limkode nødvendig.",
  "features": ["McpFeatureItem"],
  "cta_label": "Les MCP-dokumentasjonen",
  "cta_href": "/docs/mcp"
}

Lim det inn i JSON-editoren i skjemabyggeren. Den skal se slik ut nedenfor.

Tips: Foretrekker du Zod? Veksle editoren fra JSON til Zod øverst i panelet og lim inn et Zod-skjema i stedet — byggeverktøyet vil avlede de samme feltene. Praktisk hvis du allerede modellerer data med Zod andre steder i appen din.

Etter det oppretter du blokken som bruker skjemaet mcp_feature_block og refererer til den blokken ved hjelp av malbyggeren på siden.

Sammendrag

Dette er en tilpasset arbeidsflyt for Claude + Profound CMS.