Split Screen JSON Component Builder with LLM

Stellen Sie zuerst eine Verbindung zu unserem MCP-Server her

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

Sie können Werkzeuge und Komponenten verwenden, um Dokumente/Blöcke/Komponenten in großer Zahl zu erstellen und Websites schnell zu veröffentlichen.

Im Folgenden finden Sie den manuellen Ablauf

So starten Sie den Zod-JSON-Schema-Editor.

• Gehen Sie zum CMS-Admin-Panel
• Klicken Sie auf + Schema erstellen
• Geben Sie die passende validierte JSON-Beschreibung des Schemas ein
• Übernehmen Sie die Änderungen

Für spätere Änderungen muss das Schema gelöscht und erneut hinzugefügt werden.

Claude für den JSON-Workflow auffordern

Wenn wir Claude Code für visuelle TailwindCSS-/CSS-/React-Änderungen verwenden, können wir ihn auch bitten, das JSON korrekt zu aktualisieren, indem er einen MCP-Server nutzt oder indem er Ihnen das JSON gibt, das Sie in den Code-Editor einfügen müssen.

Bitten Sie Claude einfach um das passende JSON für die Komponenten, für die Sie ein Schema erstellen möchten – sei es Hybrid oder nur ein Headless CMS.

Beispiel

Wir fügen eine neue MCP-Server-Funktion hinzu und um diese darzustellen, fügen wir einen neuen Hero-Block hinzu.

Zuerst ändern wir unser Registry, um einen neuen Block zu verwenden

const registry = {
  "navbar": NavbarBlock,
  ...
  // neuer Block hinzugefügt
  "McpFeatureBlock": McpFeatureDisplayBlock,
  ...
  "footer": FooterBlock,
};

Bitten Sie Claude, die React/CSS-Implementierung des Blocks zu erstellen und uns JSON für die Schema-Definition zu geben. Es sollte so aussehen.

"McpFeatureBlock": {
  "label": "MCP-Server",
  "title": "Lassen Sie KI-Agenten direkt an Ihrem CMS arbeiten",
  "description": "Profound CMS wird mit einem nativen MCP-Server ausgeliefert. Verbinden Sie Claude, Cursor oder jeden MCP-kompatiblen Agenten und lassen Sie ihn Seiten lesen, Blöcke aktualisieren und Inhalte veröffentlichen – ganz ohne benutzerdefinierten Glue Code.",
  "features": ["McpFeatureItem"],
  "cta_label": "Lesen Sie die MCP-Dokumentation",
  "cta_href": "/docs/mcp"
}

Fügen Sie das in den JSON-Editor im Schemabuilder ein. Es sollte wie unten aussehen.

Tipp: Sie bevorzugen Zod? Schalten Sie den Editor oben im Panel von JSON auf Zod um und fügen Sie stattdessen ein Zod-Schema ein – der Builder leitet daraus die gleichen Felder ab. Praktisch, wenn Sie Daten andernorts in Ihrer App bereits mit Zod modellieren.

Erstellen Sie danach den Block, der das Schema mcp_feature_block verwendet, und referenzieren Sie diesen Block über den Vorlagen-Builder auf der Seite.

Zusammenfassung

Dies ist ein benutzerdefinierter Claude- + Profound-CMS-Workflow.