Graph Builder

ワークスペースに必要なプロジェクトとそれらの間の接続をスケッチすると、ビルダーが描いた内容を正確に構築するコマンドを生成します。それらをコピーして実行すれば、動作するワークスペースが完成します。

パレットからキャンバスにコンポーネントをドラッグし、コンポーネントの右端から別のコンポーネントにドラッグして接続し、右側で各コンポーネントのプロパティを編集します。下部に生成されるコマンドは変更のたびに更新されます — Copy をクリックしてスクリプト全体を取得してください。

Loading the graph builder…

仕組み

キャンバス上の各コンポーネントはジェネレーターにマッピングされ、各接続は接続ジェネレーターにマッピングされます。コマンドは依存関係の順序で出力されます：最初にワークスペース、次にプロジェクト、それらがホストするコンポーネント、そしてそれらを結び付ける接続の順です。

ウェブサイトには常にCognito 認証が直後に追加されます。ts#website はそれをフォローアップジェネレーターに任せているためです。

最後に infra プロジェクトが追加されます — ts#infra または terraform#project のいずれかで、IaC の選択に合わせます。生成されたすべてのプロジェクトはインスタンス化するためのコンストラクトを提供するため、これがデプロイするものになります。この名前を所有しているため、キャンバス上のコンポーネントは infra という名前を使用できません。

ツールバーの Vertical / Horizontal を使用してグラフの流れる方向を切り替えます — 接続ポイントが各コンポーネントの上下の端に移動し、レイアウトがそれに合わせて転置されます。

キャンバスの背景をドラッグしてパンし、コンポーネントをドラッグして位置を変更します。Shift キーを押しながらクリックして複数のコンポーネントを選択し、グループとして移動します。接続をクリックして選択し、Delete を押して削除します（または接続自体の ✕ を使用します）。

パレットには接続に参加できるすべてのプロジェクトとコンポーネントタイプがリストされており、プラグインがサポートする接続のみを描画できます — したがって、検証されるグラフは構築されるグラフです。

知っておくべき3つのルールがあります：

コンポーネントはホストプロジェクトを共有します。 エージェントと MCP サーバーは、独自のプロジェクトではなく、プロジェクト_に_追加されます。同じホストプロジェクト名を指定すると1つのプロジェクトに配置され、異なる名前を指定するとそれぞれ1つのプロジェクトに配置されます。
一部の接続はエンドポイントを制約します。 たとえば、エージェントを別のエージェントに接続するには、ターゲットが a2a プロトコルを使用する必要があります。プロパティ設定が描画した接続を壊す場合、ビルダーはコンポーネントと接続に対してそれを示します。
接続を描画するとターゲットが調整されることがあります。 ウェブサイトをエージェントに接続すると、そのエージェントは ag-ui プロトコルに切り替わり、エージェントを別のエージェントに接続すると、ターゲットは a2a に切り替わります — これらの接続が構築されているプロトコルです。自分で設定したプロパティは決して変更されません。