All Systems Operational
Powered By
profound-logo
profound-logoProfound CMS
⌘K
Admin

Json Und Claude Code

Erstellung von Schemata mit Claude Code und JSON-Builder

Continue Reading
Previous‹SchnellstartNextKomponente-Zod-Abruf›

Hybrid

Renderer-ProjektParametrisches RoutingKomponententypenSseAdmin Panel Proxy EinrichtenStatisches Rendering mit Edit-Modus-UnterstützungSkripterstellung im Template-BuilderCreate Profound Next

Kopflos

SchnellstartJson Und Claude CodeKomponente-Zod-Abruf

Mcp

Mcp

Cms Funktionen

Feat Docs TemplateFeat Vorlagen BuilderFeat TranslatorFeature-Organisation

Motivation

Unser Ansatz

Terminologie

Hybrid vs. Headless

Workflow für Claude Code

Stellen Sie zunächst eine Verbindung zu unserem MCP-Server her

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

Sie können sofort Werkzeuge und Komponenten verwenden, um massenhaft Dokumente/Blöcke/Komponenten zu erstellen und Websites schnell zu veröffentlichen.

Im Folgenden finden Sie den manuellen Prozess.

So starten Sie den Zod JSON-Schema-Editor.

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

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


Claude für den JSON-Workflow prompten

Wenn wir Claude Code für visuelle TailwindCSS/CSS/React-Anpassungen nutzen, können wir es auch darum bitten, das JSON korrekt zu aktualisieren – entweder über einen MCP-Server oder indem es Ihnen das JSON liefert, 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 für ein Headless CMS.


Beispiel

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

Zuerst ändern wir unsere Registry, damit ein neuer Block verwendet wird.

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

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

"McpFeatureBlock": {
  "label": "MCP-Server",
  "title": "Lassen Sie KI-Agenten direkt mit 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 maßgeschneiderten Glue-Code.",
  "features": ["McpFeatureItem"],
  "cta_label": "Lesen Sie die MCP-Dokumentation"

Wir fügen dies im Schema-Editor auf der Registerkarte „Code importieren“ ein. So sollte es unten aussehen.

Erstellen Sie danach den Block, der das Schema mcp_feature_block verwendet, und referenzieren Sie diesen Block mit dem Template-Builder auf der Seite.


Zusammenfassung

Dies ist ein individueller Workflow für Claude + Profound CMS.

,
"cta_href": "/docs/mcp"
}