• コード
  • データ
  • モデル
  • 人間

AIでコードとBuilderのスキーマを同期する方法

一度Builderと接続すれば、AIエージェントがCMSモデルを読み取り、データ構造に完全に適合したコードを生成できるようになります。

このページについてAIに聞く

すぐに答え

AIを使ってどのようにコードとBuilderのスキーマを同期しますか?

AIがBuilder MCPを使用することで、CMSから最新のモデル定義を直接取得します。これにより、AIエージェントはBuilderモデルで定義された正確なフィールド名や型に基づいたフロントエンドコードを記述できます。手動でコピーすることなく、ヘッドレスCMSの構造に一致したコードが得られます。

すべての更新が反映される場所

同期によって実現すること

AIがBuilderモデルにアクセスできるようになると、以下のタスクを実行できます。

コード

型安全なフロントエンドコード

AIがモデルスキーマを読み取り、正しいフィールド名を使用したコードを生成します。コンポーネント内でのプロパティ参照エラーに悩まされることはありません。

データ

正確なデータマッピング

エージェントが取得した正確なフィールド定義を使用して、CMSデータをUIコンポーネントにマッピングします。フロントエンドに常に正しいコンテンツが表示されるようになります。

モデル

モデルの検出

AIがBuilderインスタンス内で現在アクティブなモデルを特定します。どのスキーマがコードから利用可能かを正確に把握します。

人間

手動でのスキーマ更新

BuilderのUIでフィールド型を変更した場合、AIにその変更を認識させるために新しいプロンプトを投げる必要があります。AIがBuilder側の変更を自動的に検知して反映することはありません。

ワークフロー

リクエストを受けたAIの動作

AIは、コードエディタとCMSの間のギャップを埋めるために、以下のプロセスを実行します。

  1. モデルの検索

    AIがBuilderアカウント内を確認し、設定されているコンテンツモデルを把握します。これにより、データ構造のコンテキストを理解します。

    list_builder_models
  2. アクティブなスキーマの特定

    エージェントはリストを絞り込み、現在プロジェクトで使用している特定のモデルを見つけ出します。不要なデータに惑わされるのを防ぎます。

    search_active_models
  3. フィールド定義の抽出

    特定のモデルから、フィールド名や型などの詳細な情報を取得します。このデータに基づいてコードが書き込まれます。

    get_model_schema
  4. 一致するコードの生成

    取得したスキーマを使用して、フロントエンドのロジックやTypeScriptのインターフェースを生成します。生成されるコードは、CMSの構造と完全に一致します。

    get_model_schema

試してみる

以下のプロンプトをコピーして開始してください

これらのプロンプトを使用して、エージェントによる同期プロセスを開始できます。

出発点

これらは開始用のフレーズです。実際のBuilderプロジェクトで使用しているモデル名に書き換えて使用してください。

Builder Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_BqALflagL8xNOmjaZGHvPIxPB3BCwZBh8bTcwCPe/mcp

Claude Desktop

以下の手順で数秒で接続できます。

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Builder capabilities are ready to use.
設定 · claude_desktop_config.jsonコピー
{
  "mcpServers": {
    "builder-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_BqALflagL8xNOmjaZGHvPIxPB3BCwZBh8bTcwCPe/mcp"
    }
  }
}
チャットにコピー04
  • 利用可能なモデルを確認するために、すべてのBuilderモデルをリストアップしてください。

  • 「Product」モデルのスキーマを見つけて、そのTypeScriptインターフェースを書いてください。

  • Builder内のアクティブなモデルを確認し、私の「Blog」コンポーネントに一致するモデルを教えてください。

  • 「HeroBanner」モデルのスキーマを取得し、そのフィールドを使用したReactコンポーネントを作成してください。

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

ここから始める

一度接続すれば、あとは指示するだけ

下のリンクをクリックしてBuilderアカウントを連携してください。認証情報は暗号化されて安全に保持され、すぐにAIへの指示を開始できます。

BuilderをAIに接続する

FAQ

動作に関する詳細

  • 01

    AIがBuilderのモデルを変更することはできますか?

    いいえ。AIができるのはスキーマの読み取りのみです。Builder内のフィールドやモデルを作成、削除、または変更することはできません。

  • 02

    Builderでフィールドを変更した際、AIはコードを自動的に更新しますか?

    いいえ。AIは指示があった時にのみスキーマを確認します。CMSで変更を加えた後は、エージェントにスキーマを再読み込みするよう指示する必要があります。

  • 03

    AIはすべてのモデルを把握していますか?

    利用可能なツールを使用して指示されたモデルは見つけることができますが、明示的に探すよう指示しない限り、モデルの存在を自動的に知ることはありません。

  • 04

    CursorやVS Codeでも使用できますか?

    はい。使用しているクライアントがMCPに対応したエディタであれば、問題なく動作します。

  • 05

    毎回BuilderのAPIキーを入力する必要がありますか?

    いいえ。一度Vinkiusを通じて接続すれば、エージェントはMCP経由で継続的にアクセスできます。

  • Builderについて他に質問がありますか? Builder Connectorの全機能を見る

『Builder』を Claude、Cursor、ChatGPT などに接続