Workflows

1. Plan a new feature and hand it off to an agent

Goal: Build a canvas that describes a new feature, then pass it to Claude Code (or another agent) to generate an implementation plan.

Setup

• A Plan0 project with the Application Development template applied.
• Claude Code (or another MCP-capable agent) connected via MCP.

Steps

1. Sketch the UI layer.

   Press A on the canvas. Add a Group with type Page. Inside it, add:

   • A Form Component named "Sign-up form".
   • Three Form Field Items: "Email", "Password", "Confirm password".

2. Sketch the backend.

   Add a Backend Service Group. Inside it, add:

   • An Endpoint Component named "POST /auth/register".
   • An Entity Component named "User".

3. Connect them.

   Draw a Connection from the Form Component to the Endpoint Component — this expresses the dependency.

4. Mark them ready.

   Select all the blocks you want the agent to work on. Right-click → Set status → Ready for implementation.

5. Hand off to the agent.

   Open your agent and send the following prompt (or trigger it via Quick Prompts):

   Connect to Plan0 via MCP. Call list-connected-projects, then get-project-settings and get-current-canvas-building-blocks with detailLevel: "skeleton". Generate a prioritized implementation plan for all building blocks marked "Ready for implementation".

What the agent sees

// list-connected-projects{"projectName": "My App","versions": ["Main", "v2 — serverless"],"activeVersionName": "Main"}// get-project-settings{"componentTypes": [...],"statuses": [...],"prompts": [...]}// get-current-canvas-building-blocks (detailLevel: "skeleton"){"buildingBlocks": [  {    "id": "shape:abc",    "name": "Sign-up form",    "structuralType": "component",    "semanticType": "form",    "status": "ready-for-implementation"  },  {    "id": "shape:def",    "name": "POST /auth/register",    "structuralType": "component",    "semanticType": "endpoint-component",    "status": "ready-for-implementation"  }]}

The agent uses this context to generate a plan scoped to exactly what you've described on the canvas — no guessing about the scope or structure.

2. Iterate with Versions to compare two approaches

Goal: Explore an alternative architecture in a separate Version without touching the current plan.

Setup

• An existing project on Main with a working canvas.

Steps

1. Create a new version.

   Open the version switcher (bottom toolbar) → New version → name it "v2 — serverless".

2. Sketch the alternative.

   In this version, replace the Backend Service Group with an Infrastructure Group. Add a Cron Job and Webhooks Component instead of a traditional service layer.

3. Let the agent explore it.

   Ask the agent to switch to the new version and evaluate the approach:

   Switch to the "v2 — serverless" version of this project and describe the trade-offs of this architecture compared to the current Main version.

   The agent will call switch-version and then get-current-canvas-building-blocks with detailLevel: "skeleton" to compare.

4. Compare and decide.

   Switch back to Main manually (version switcher). Review both versions.

5. Promote the winner.

   If v2 is better: open the version switcher → … on Main → Replace with → choose "v2 — serverless".

   Main now contains the new approach.

What the agent sees

// switch-version{"versionId": "page:abc","projectName": "My App"}// get-current-canvas-building-blocks (detailLevel: "skeleton"){"buildingBlocks": [  {    "id": "shape:ghi",    "name": "Cron Job",    "structuralType": "component",    "semanticType": "cron-component",    "status": "not-implemented"  },  {    "id": "shape:jkl",    "name": "Webhooks",    "structuralType": "component",    "semanticType": "webhooks-component",    "status": "not-implemented"  }]}

Since version switching is per-user, your collaborators stay on Main while you explore.

3. Track implementation with Statuses and Suggestions

Goal: Use statuses and template-driven suggestions to track implementation progress and catch structural gaps.

Setup

• A project with the Application Development template.
• Building blocks already on the canvas from a planning session.

Steps

1. Triage blocks.

   Go through each Component on the canvas:

   • Blocks that need more detail → Refinement required (amber)
   • Blocks fully specified → Ready for implementation (blue)

2. Generate an implementation plan for ready blocks.

   Open the Quick Prompts panel and trigger "Create implementation plan for ready building blocks" (global scope).

   This prompt asks your agent to generate a prioritized plan for every block with the "Ready for implementation" status.

3. Act on Suggestions.

   Look for orange Suggestion badges on Components. A common example: an Infrastructure Component without a Security Item.

   Click the badge to see the advisory, then add the missing Item or dismiss the suggestion if it doesn't apply.

4. Update statuses as work progresses.

   As your agent or team implements blocks, update their status:

   • Work started → Work in progress (violet)
   • Done → Done (green)

5. Use "Grill me on this" to refine unclear blocks.

   Right-click a block that's still fuzzy → Quick Prompts → Grill me on this.

   The interpolated prompt includes the block's name, type, description, and status — the agent will ask targeted questions to help you sharpen it.

What the agent sees

When triggered via get-current-canvas-building-blocks, the agent gets the status of every block and can filter to only those that are actionable:

// get-current-canvas-building-blocks (detailLevel: "skeleton"){"buildingBlocks": [  {    "id": "shape:mno",    "name": "POST /auth/register",    "structuralType": "component",    "semanticType": "endpoint-component",    "status": "ready-for-implementation"  }]}

This loop — plan → status → agent → update → plan — keeps the canvas and the codebase in sync throughout the project.