Split Screen JSON Component Builder with LLM

Önce MCP sunucumuza bağlanın.

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

Belgeleri/blokları/bileşenleri toplu olarak oluşturmak ve web sitelerini hızla yayınlamak için araçları ve bileşenleri kullanmaya başlayabilirsiniz.

Aşağıda manuel süreç yer almaktadır.

Zod JSON şema düzenleyicisini başlatmak için:

• CMS Yönetici paneline gidin
• • Şema oluştur'a tıklayın
• Şemanın uygun, doğrulanmış JSON açıklamasını girin
• Değişiklikleri uygulayın

Sonraki değişiklikler için, şemanın silinip yeniden eklenmesi gerekecektir.

JSON iş akışı için Claude'u yönlendirme

Görsel TailwindCSS/CSS/React değişiklikleri için Claude Code'u kullanırsak, ayrıca bir MCP sunucusu aracılığıyla veya kod düzenleyicisine yapıştırmanız için gereken JSON'u sağlayarak JSON'u doğru şekilde güncellemesini isteyebiliriz.

İster hibrit ister yalnızca Headless CMS olsun, şemasını oluşturmak istediğiniz bileşenler için uygun JSON'u Claude'dan istemeniz yeterlidir.

Örnek

Yeni bir MCP sunucusu özelliği ekliyor ve bunu göstermek için yeni bir hero bloğu ekliyoruz.

Önce, kayıt dizinimizi yeni bir bloğu kullanacak şekilde değiştireceğiz.

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

Claude'dan bloğun React/CSS'ini uygulamasını ve şema tanımı için bize JSON sağlamasını isteyin. Şu şekilde görünmelidir.

"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"
}

Bunu şema oluşturucudaki JSON düzenleyicisine yapıştırın. Aşağıda gösterildiği gibi görünmelidir.

İpucu: Zod'u mu tercih ediyorsunuz? Panelin üst kısmındaki düzenleyiciyi JSON'dan Zod'a değiştirin ve bunun yerine bir Zod şeması yapıştırın — oluşturucu aynı alanları türetecektir. Uygulamanızın başka yerinde zaten Zod ile veri modeliyorsanız kullanışlıdır.

Bunun ardından, mcp_feature_block şemasını kullanan bloğu oluşturun ve sayfada şablon oluşturucu aracılığıyla o bloğa referans verin.

Özet

Bu, özel bir Claude + Profound CMS iş akışıdır.