JSON และ Claude Code

เริ่มจากเชื่อมต่อกับเซิร์ฟเวอร์ MCP ของเรา

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

คุณสามารถเริ่มใช้เครื่องมือและคอมโพเนนต์เพื่อสร้างเอกสาร/บล็อก/คอมโพเนนต์จำนวนมากและเผยแพร่เว็บไซต์ได้อย่างรวดเร็ว

ต่อไปนี้คือกระบวนการแบบทำด้วยตนเอง

เพื่อเปิดใช้งานตัวแก้ไข Zod JSON Schema

• ไปที่แผงผู้ดูแล CMS
• คลิก + Create schema
• ใส่คำอธิบาย JSON ของสคีมาที่ผ่านการตรวจสอบแล้วให้เหมาะสม
• ใช้การเปลี่ยนแปลง

สำหรับการเปลี่ยนแปลงครั้งถัดไป จำเป็นต้องลบสคีมาและเพิ่มใหม่อีกครั้ง

การพรอมพ์ Claude สำหรับเวิร์กโฟลว์ JSON

หากเราใช้ Claude Code เพื่อปรับเปลี่ยนด้านภาพของ TailwindCSS/CSS/React เราก็สามารถขอให้มันอัปเดต JSON ให้ถูกต้องได้เช่นกัน โดยใช้งานผ่านเซิร์ฟเวอร์ MCP หรือให้ JSON ที่คุณต้องนำไปวางในตัวแก้ไขโค้ด

เพียงขอให้ Claude จัดเตรียม JSON ที่เหมาะสมสำหรับคอมโพเนนต์ที่คุณต้องการสร้างสคีมา ไม่ว่าจะเป็นแบบไฮบริดหรือแค่ Headless CMS

ตัวอย่าง

เรากำลังเพิ่มคุณสมบัติใหม่ให้กับเซิร์ฟเวอร์ MCP และเพื่อแสดงสิ่งนั้น เรากำลังเพิ่มฮีโร่บล็อกใหม่

ขั้นแรกเราจะปรับ registry ของเราให้ใช้บล็อกใหม่

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