Split Screen JSON Component Builder with LLM

First connect to our MCP server

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

You can start using tools and components to mass create documents/blocks/components and publish websites fast.

Following is the manual process

To spin up the zod json Schema editor.

• Head to the CMS Admin panel
• Click + Create schema
• Enter the appropriate validated json description of the schema
• Apply the changes

For subsequent changes, the schema will be needed to be deleted and re added again.

Prompting Claude for the json Workflow

If we use claude code for visual tailwindCSS/CSS/React changes then we can also ask it to update the json correctly using an MCP server or by giving you the json you need to paste in the code editor.

Just ask Claude for the appropriate json for the components you want to create a schema for, be it Hybrid or just a Headless CMS.

Example

We’re adding a new MCP server feature and to display that we’re adding a new hero block.

First we’ll change our registry to use a new Block

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

Ask claude to implement the block’s React/CSS and give us json for the schema defition. It should look like this.

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

Paste it into the JSON editor in the schema builder. It should look like this below.

Tip: Prefer Zod? Toggle the editor from JSON to Zod at the top of the panel and paste a Zod schema instead — the builder will derive the same fields. Handy if you already model data with Zod elsewhere in your app.

After that, create the block that uses the Schema mcp_feature_block and reference that block using the template builder in the page.

Summary

This is a custom Claude + Profound CMS workflow.