Split Screen JSON Component Builder with LLM

Kõigepealt loo ühendus meie MCP serveriga

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

Saad hakata tööriistu ja komponente kasutama, et hulgikorras dokumente/plokke/komponente luua ja veebisaite kiiresti avaldada.

Allpool on käsitsi protsess.

Zod JSON-skeemiredaktori käivitamiseks.

• Mine CMS-i halduspaneeli
• Klõpsa nuppu + Create schema
• Sisesta skeemi sobiv valideeritud JSON-kirjeldus
• Rakenda muudatused

Järgnevate muudatuste tegemiseks tuleb skeem kustutada ja uuesti lisada.

Claude'ilt JSON-töövoo küsimine

Kui kasutame visuaalsete tailwindCSS-i/CSS-i/Reacti muudatuste jaoks Claude Code'i, saame temalt ka paluda, et ta uuendaks JSON-i õigesti MCP serveri kaudu või annaks sulle JSON-i, mille saad kleepida koodiredaktorisse.

Lihtsalt küsi Claudelt sobivat JSON-i nende komponentide jaoks, millele soovid skeemi luua, olgu see hübriid- või puhas Headless CMS.

Näide

Lisame uue MCP serveri funktsiooni ja selle esiletõstmiseks lisame uue kangelase ploki.

Kõigepealt muudame oma registrit, et kasutada uut plokki.

const registry = {
  "navbar": NavbarBlock,
  ...
  // uus plokk lisatud
  "McpFeatureBlock": McpFeatureDisplayBlock,
  ...
  "footer": FooterBlock,
};

Palume Claudel ploki Reacti/CSS-i implementeerida ja anda meile JSON skeemi definitsiooni jaoks. See peaks välja nägema selline.

"McpFeatureBlock": {
  "label": "MCP server",
  "title": "Lase tehisintellekti agentidel sinu CMS-iga otse töötada",
  "description": "Profound CMS sisaldab omaloomingulist MCP serverit. Ühenda Claude, Cursor või mis tahes MCP-ga ühilduv agent ja lase tal lugeda lehti, uuendada plokke ning avaldada sisu — lisakoodi pole vaja.",
  "features": ["McpFeatureItem"],
  "cta_label": "Loe MCP dokumentatsiooni",
  "cta_href": "/docs/mcp"
}

Kleebi see skeemilooja JSON-redaktorisse. See peaks allpool välja nägema järgmine.

Nõuanne: Eelistad Zodi? Lülita redaktor paneeli ülaservas JSON-ilt Zod-ile ja kleebi selle asemel Zodi skeem — ehitaja tuletab samad väljad. Mugav, kui modelleerid andmeid mujal oma rakenduses juba Zodiga.

Pärast seda loo plokk, mis kasutab skeemi mcp_feature_block, ja viita sellele plokile lehel mallilooja abil.

Kokkuvõte

See on kohandatud Claude'i ja Profound CMS-i töövoog.