Split Screen JSON Component Builder with LLM

Pertama sambungkan ke server MCP kami

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

Anda dapat mulai menggunakan alat dan komponen untuk membuat dokumen/blok/komponen secara massal dan memublikasikan situs web dengan cepat.

Berikut adalah proses manual

Untuk menjalankan editor Skema Zod JSON.

• Buka panel Admin CMS
• Klik + Create schema
• Masukkan deskripsi json tervalidasi yang sesuai dari skema tersebut
• Terapkan perubahan

Untuk perubahan berikutnya, skema perlu dihapus dan ditambahkan kembali.

Memberi Prompt kepada Claude untuk Alur Kerja json

Jika kita menggunakan claude code untuk perubahan visual tailwindCSS/CSS/React maka kita juga dapat memintanya memperbarui json dengan benar menggunakan server MCP atau dengan memberikan json yang perlu Anda tempelkan di editor kode.

Cukup minta Claude json yang sesuai untuk komponen yang ingin Anda buatkan skema, baik Hybrid maupun hanya Headless CMS.

Contoh

Kami menambahkan fitur server MCP baru dan untuk menampilkannya kami menambahkan blok hero baru.

Pertama kami akan mengubah registry kami untuk menggunakan Block baru

const registry = {
  "navbar": NavbarBlock,
  ...
  // new block added
  "McpFeatureBlock": McpFeatureDisplayBlock,
  ...
  "footer": FooterBlock,
};

Minta claude mengimplementasikan React/CSS blok tersebut dan memberikan json untuk definisi skemanya. Seharusnya terlihat seperti ini.

"McpFeatureBlock": {
  "label": "MCP Server",
  "title": "Let AI agents work your CMS directly",
  "description": "Profound CMS ships a native MCP server. Connect Claude, Cursor, or any MCP-compatible agent and let it read pages, update blocks, and publish content — no custom glue code needed.",
  "features": ["McpFeatureItem"],
  "cta_label": "Read the MCP docs",
  "cta_href": "/docs/mcp"
}

Tempelkan ke editor JSON di builder skema. Seharusnya terlihat seperti di bawah ini.

Tip: Lebih suka Zod? Alihkan editor dari JSON ke Zod di bagian atas panel dan tempelkan skema Zod sebagai gantinya — builder akan menurunkan bidang yang sama. Praktis jika Anda sudah memodelkan data dengan Zod di tempat lain dalam aplikasi Anda.

Setelah itu, buat blok yang menggunakan Skema mcp_feature_block dan referensikan blok tersebut menggunakan builder template di halaman.

Ringkasan

Ini adalah alur kerja Claude + Profound CMS kustom.