Skip to content

Graph Builder

Sketch the projects your workspace needs and the connections between them, and the builder generates the commands that scaffold exactly what you drew. Copy them, run them, and you have a working workspace.

Drag components from the palette onto the canvas, drag from a component’s right edge to another to connect them, and edit each component’s properties on the right. The generated commands at the bottom update with every change — hit Copy to take the whole script.

Loading the graph builder…

Each component on the canvas maps to a generator, and each connection to the connection generator. The commands are emitted in dependency order: the workspace first, then the projects, then the components they host, then the connections wiring them together.

A website always gets Cognito authentication added straight after it, since ts#website leaves that to a follow-up generator.

An infra project is added at the end — ts#infra or terraform#project, matching your IaC choice. Every generated project vends constructs for it to instantiate, so this is what you deploy. Because it owns that name, no component on the canvas can be called infra.

Use Vertical / Horizontal in the toolbar to swap which way the graph flows — the connection points move to the top and bottom edges of each component, and the layout is transposed to match.

Drag the canvas background to pan around, and drag a component to reposition it. Shift-click to select several components and move them as a group. Click a connection to select it, then press Delete to remove it (or use the ✕ on the connection itself).

The palette lists every project and component type that can take part in a connection, and you can only draw the connections the plugin supports — so a graph that validates is a graph that scaffolds.

Three rules are worth knowing:

  • Components share a host project. An agent and an MCP server are added to a project rather than being projects of their own. Give them the same host project name to put them in one project, or different names for one project each.
  • Some connections constrain their endpoints. Connecting an agent to another agent requires the target to use the a2a protocol, for instance. Where a property setting would break a connection you have drawn, the builder says so against the component and the connection.
  • Drawing a connection can adjust the target. Connecting a website to an agent switches that agent to the ag-ui protocol, and connecting an agent to another agent switches the target to a2a — the protocols those connections are built on. A property you have set yourself is never changed.