Split Screen JSON Component Builder with LLM

Спершу під’єднайтеся до нашого сервера MCP

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

Ви можете почати користуватися інструментами й компонентами, щоб масово створювати документи/блоки/компоненти та швидко публікувати вебсайти.

Далі наведено ручний процес

Щоб запустити редактор схеми Zod JSON.

• Перейдіть до панелі адміністратора CMS
• Натисніть + Create schema
• Введіть відповідний валідований опис схеми у форматі JSON
• Застосуйте зміни

Для подальших змін схему доведеться видалити та додати знову.

Запити до Claude для робочого процесу JSON

Якщо ми використовуємо Claude Code для внесення візуальних змін у TailwindCSS/CSS/React, то можемо також попросити його правильно оновити JSON за допомогою сервера MCP або надавши вам JSON, який потрібно вставити в редактор коду.

Просто попросіть Claude надати відповідний JSON для компонентів, для яких ви хочете створити схему, незалежно від того, чи це гібридне рішення, чи лише безголовий CMS.

Приклад

Ми додаємо нову можливість сервера MCP, і щоб продемонструвати її, створюємо новий hero-блок.

Спочатку ми змінимо наш реєстр, щоб використати новий блок

const registry = {
  "navbar": NavbarBlock,
  ...
  // додано новий блок
  "McpFeatureBlock": McpFeatureDisplayBlock,
  ...
  "footer": FooterBlock,
};

Попросіть Claude реалізувати React/CSS для блока та надати нам JSON для визначення схеми. Це має виглядати так.

"McpFeatureBlock": {
  "label": "Сервер MCP",
  "title": "Дозвольте агентам ШІ працювати з вашим CMS безпосередньо",
  "description": "Profound CMS постачається з вбудованим сервером MCP. Під’єднайте Claude, Cursor або будь-якого агента, сумісного з MCP, і дозвольте йому читати сторінки, оновлювати блоки та публікувати контент — без жодного додаткового клейового коду.",
  "features": ["McpFeatureItem"],
  "cta_label": "Переглянути документацію MCP",
  "cta_href": "/docs/mcp"
}

Вставте це до редактора JSON у конструкторі схем. Нижче показано, як це має виглядати.

Порада: Віддаєте перевагу Zod? Перемкніть редактор із JSON на Zod у верхній частині панелі та вставте схему Zod — конструктор виведе ті самі поля. Зручно, якщо ви вже моделюєте дані за допомогою Zod в інших частинах застосунку.

Після цього створіть блок, який використовує схему mcp_feature_block, і підключіть цей блок у шаблоні сторінки.

Підсумок

Це кастомний робочий процес Claude + Profound CMS.