Split Screen JSON Component Builder with LLM

Najpierw połącz się z naszym serwerem MCP

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

Możesz zacząć korzystać z narzędzi i komponentów, aby masowo tworzyć dokumenty/bloki/komponenty i szybko publikować witryny.

Poniżej przedstawiono proces ręczny

Aby uruchomić edytor schematów Zod JSON.

• Przejdź do panelu administracyjnego CMS
• Kliknij + Utwórz schemat
• Wprowadź odpowiedni zweryfikowany opis schematu w JSON-ie
• Zastosuj zmiany

Przy kolejnych zmianach konieczne będzie usunięcie schematu i ponowne dodanie go.

Wywoływanie Claude'a dla przepływu pracy JSON

Jeśli używamy Claude Code do wizualnych zmian w TailwindCSS/CSS/React, możemy także poprosić go o prawidłowe zaktualizowanie JSON-a za pomocą serwera MCP albo o dostarczenie JSON-a, który trzeba wkleić do edytora kodu.

Po prostu poproś Claude'a o odpowiedni JSON dla komponentów, dla których chcesz utworzyć schemat – niezależnie od tego, czy jest to rozwiązanie hybrydowe, czy tylko Headless CMS.

Przykład

Dodajemy nową funkcję serwera MCP i aby ją zaprezentować, dodajemy nowy blok hero.

Najpierw zmienimy nasz rejestr, aby używał nowego bloku

const registry = {
  "navbar": NavbarBlock,
  ...
  // dodano nowy blok
  "McpFeatureBlock": McpFeatureDisplayBlock,
  ...
  "footer": FooterBlock,
};

Poproś Claude'a o zaimplementowanie React/CSS bloku i dostarczenie JSON-a dla definicji schematu. Powinno wyglądać to tak.

"McpFeatureBlock": {
  "label": "Serwer MCP",
  "title": "Pozwól agentom AI obsługiwać Twój CMS bezpośrednio",
  "description": "Profound CMS dostarcza natywny serwer MCP. Połącz Claude'a, Cursor lub dowolnego agenta zgodnego z MCP i pozwól mu odczytywać strony, aktualizować bloki oraz publikować treści — bez potrzeby własnego kodu integracyjnego.",
  "features": ["McpFeatureItem"],
  "cta_label": "Przeczytaj dokumentację MCP",
  "cta_href": "/docs/mcp"
}

Wklej to do edytora JSON w kreatorze schematów. Powinno wyglądać jak poniżej.

Wskazówka: Wolisz Zod? Przełącz edytor z JSON na Zod u góry panelu i wklej zamiast tego schemat Zod — kreator wyprowadzi te same pola. Przydatne, jeśli modelujesz dane w Zodzie gdzie indziej w aplikacji.

Następnie utwórz blok korzystający ze schematu mcp_feature_block i odwołaj się do niego za pomocą kreatora szablonów na stronie.

Podsumowanie

To niestandardowy przepływ pracy Claude + Profound CMS.