All Systems Operational
Powered By
profound-logo
profound-logoProfound CMS
⌘K
Admin

Json And Claude Code

Building Schemas with Claude Code and JSON Builder

Claude Code Workflow

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 quickly.

The manual process is as follows

To launch 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 need to be deleted and added again.


Prompting Claude for the JSON Workflow

If we use Claude Code for visual Tailwind CSS/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 into the code editor.

Just ask Claude for the appropriate JSON for the components you want to create a schema for, whether it is 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,
Continue Reading
Previous‹QuickstartNextComponent Zod Pull›

Hybrid

Setup Hybrid CMS ProjectParametric Pages with ComponentsTypes of ComponentsSetup server sent events (SSE) content refetchSetup admin panel proxyStatic Rendering with Edit Mode SupportScripting in Template BuilderGetting Started Hybrid

Headless

Quick startSplit Screen JSON Component Builder with LLMComponent Zod Pull

MCP

MCP with Claude Code / Codex

Feature

Documentation Site TemplateFeature Template BuilderTranslation ServiceOrganizations & Website Heirarchy

Motivation

Our Approch

Terminology

'Hybrid' vs 'Headless'
...
"footer": FooterBlock,
};

Ask Claude to implement the block’s React/CSS and give us JSON for the schema definition. 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"
}

We paste this into the Schema Editor “Import Code” tab. It should look like this below.

After that, create the block that uses the schema mcp_feature_block and reference that block using the template builder on the page.


Summary

This is a custom Claude + Profound CMS workflow.