Split Screen JSON Component Builder with LLM

Claude Code と JSON ビルダーでスキーマを構築する

まず、私たちの 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 も正しく更新するよう指示できます。

作成したいコンポーネントがハイブリッドであれヘッドレス CMS であれ、スキーマ用の適切な JSON を Claude に依頼するだけです。

例

新しい MCP サーバー機能を追加し、それを表示するために新しいヒーローブロックを追加します。

まず、レジストリを新しいブロックを使うように更新します。

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

ブロックの React/CSS 実装とスキーマ定義の JSON を Claude に依頼します。次のようになります。

"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 ワークフローです。

Previous‹Quick start NextComponent Zod Pull›