Xây dựng lược đồ với Claude Code và trình dựng JSON
Trước tiên hãy kết nối với máy chủ MCP của chúng tôi
claude mcp add --transport http Profound http://107.21.107.99:8081/mcp
Bạn có thể bắt đầu sử dụng các công cụ và thành phần để tạo hàng loạt tài liệu/khối/thành phần và xuất bản trang web nhanh chóng.
Quy trình thủ công như sau
Để khởi chạy trình chỉnh sửa lược đồ JSON của Zod.
Đối với các thay đổi sau này, bạn sẽ cần xóa lược đồ và thêm lại.
Nếu chúng ta dùng Claude Code để thay đổi giao diện TailwindCSS/CSS/React thì chúng ta cũng có thể yêu cầu nó cập nhật JSON chính xác thông qua máy chủ MCP hoặc cung cấp cho bạn JSON cần dán vào trình soạn thảo mã.
Chỉ cần yêu cầu Claude cung cấp JSON phù hợp cho các thành phần mà bạn muốn tạo lược đồ, dù là Hybrid hay chỉ là Headless CMS.
Chúng tôi đang thêm một tính năng máy chủ MCP mới và để hiển thị điều đó, chúng tôi sẽ thêm một hero block mới.
Đầu tiên chúng tôi sẽ thay đổi registry để sử dụng một Block mới
const registry = {
"navbar": NavbarBlock,
...
// khối mới được thêm vào
"McpFeatureBlock": McpFeatureDisplayBlock,
...
"footer": FooterBlock,
};
Hãy yêu cầu Claude triển khai React/CSS cho block và cung cấp JSON cho định nghĩa lược đồ. Nó sẽ trông như thế này.
"McpFeatureBlock": {
"label": "Máy chủ MCP",
"title": "Để các tác nhân AI làm việc trực tiếp với CMS của bạn",
"description": "Profound CMS cung cấp sẵn một máy chủ MCP gốc. Kết nối Claude, Cursor hoặc bất kỳ tác nhân tương thích MCP nào và để nó đọc trang, cập nhật khối và xuất bản nội dung — không cần viết mã tích hợp tùy chỉnh.",
"features": ["McpFeatureItem"],
"cta_label": "Đọc tài liệu MCP",
"cta_href": "/docs/mcp"
}
Dán nó vào trình soạn thảo JSON trong trình tạo lược đồ. Nó sẽ giống như bên dưới.
Mẹo: Thích Zod hơn? Hãy chuyển trình soạn thảo từ JSON sang Zod ở trên cùng của bảng và dán một lược đồ Zod thay thế — trình dựng sẽ suy ra cùng các trường. Rất tiện nếu bạn đã mô hình hóa dữ liệu bằng Zod ở nơi khác trong ứng dụng.
Sau đó, tạo block sử dụng Lược đồ mcp_feature_block và tham chiếu block đó bằng trình tạo mẫu trên trang.
Đây là một quy trình làm việc Claude + Profound CMS tùy chỉnh.