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 विवरण दर्ज करें
• परिवर्तनों को लागू करें

आगे होने वाले परिवर्तनों के लिए, स्कीमा को हटाकर दोबारा जोड़ना आवश्यक होगा।

JSON वर्कफ़्लो के लिए Claude को प्रॉम्प्ट करना

यदि हम दृश्य TailwindCSS/CSS/React परिवर्तनों के लिए Claude Code का उपयोग करते हैं, तो हम उसे MCP सर्वर का उपयोग करके या आपको वह JSON देकर, जिसे आपको कोड एडिटर में पेस्ट करना है, JSON को सही ढंग से अपडेट करने के लिए भी कह सकते हैं।

बस Claude से उन कॉम्पोनेंट्स के लिए उपयुक्त JSON माँगें जिनके लिए आप स्कीमा बनाना चाहते हैं, चाहे वह हाइब्रिड हो या केवल हेडलेस CMS।

उदाहरण

हम एक नया MCP सर्वर फ़ीचर जोड़ रहे हैं और उसे प्रदर्शित करने के लिए एक नया हीरो ब्लॉक जोड़ रहे हैं।

सबसे पहले हम अपने रजिस्ट्री को बदलेंगे ताकि वह नया ब्लॉक उपयोग करे

const registry = {
  "navbar": NavbarBlock,
  ...
  // नया ब्लॉक जोड़ा गया
  "McpFeatureBlock": McpFeatureDisplayBlock,
  ...
  "footer": FooterBlock,
};

Claude से ब्लॉक का React/CSS लागू करने और हमें स्कीमा परिभाषा के लिए JSON देने के लिए कहें। यह कुछ ऐसा दिखना चाहिए।

"McpFeatureBlock": {
  "label": "MCP सर्वर",
  "title": "AI एजेंट्स को सीधे आपके 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 कार्यप्रवाह है।