> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pinkfish.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Agent Mode

> Design, test, and ship workflows on an infinite canvas — with an AI coding agent that builds alongside you and live execution visible at every step.

**Agent Mode** is Pinkfish's node-based workflow editor. Describe what you want in natural language and the coding agent builds it, or drop nodes onto the canvas yourself. Either way, you get a visual representation of every trigger, tool call, branch, and loop — plus real-time execution feedback, per-node outputs, version history, and a monitor for every past run.

Agent Mode is the successor to [Guided Mode](/guided-editor/overview). Guided Mode walks you through a step-by-step workflow form; Agent Mode hands you an infinite canvas and an AI collaborator. Use Agent Mode for anything beyond the simplest single-step automation — it's strictly more expressive.

<Frame>
  <img src="https://mintcdn.com/pinkfishai/cnfyuOtM5sAuJTli/images/agentic-editor/overview/editor-populated.png?fit=max&auto=format&n=cnfyuOtM5sAuJTli&q=85&s=e52097d4b5086152d1daa3c53194aacd" alt="Agent Mode editor showing a four-node weather-email workflow the coding agent built from a natural-language prompt — Start → Get SF Weather → Format Email Body → Send Weather Email." width="1440" height="900" data-path="images/agentic-editor/overview/editor-populated.png" />
</Frame>

## The three panels

Every workflow in Agent Mode has the same layout:

<CardGroup cols={3}>
  <Card title="Chat (left)" icon="comments" href="/agentic-editor/chat">
    The coding agent that builds, edits, and explains your workflow on demand.
  </Card>

  <Card title="Canvas (center)" icon="diagram-project" href="/agentic-editor/canvas">
    The infinite node-graph where your workflow lives. Drag, connect, inspect.
  </Card>

  <Card title="Right pane (tabs)" icon="table-columns" href="/agentic-editor/editor-tabs">
    Workflow, Result, Interface, Code, and Log — pin and rearrange the tabs you care about.
  </Card>
</CardGroup>

The right pane can be [split](/agentic-editor/split-view) to show two tabs side-by-side — great for keeping the canvas and the output in view while you iterate.

## Editor vs. Monitor

Agent Mode has two view modes, switched from the top of the editor:

* **Editor** — the authoring experience described above.
* **Monitor** — the run-history view. Replaces the chat panel with a list of past runs and the canvas with a read-only execution view. See [Monitor tab](/agentic-editor/monitor).

You'll spend most of your time in Editor while building, and flip to Monitor to audit, debug, or watch live runs.

## Build a workflow in 30 seconds

<Steps>
  <Step title="Create a workflow">
    From the Workflows library, click **New Agentic Workflow**. An empty canvas opens with a single Manual trigger and the coding agent chat ready on the left.
  </Step>

  <Step title="Describe what you want">
    Type a prompt like *"When a Gmail email arrives with 'invoice' in the subject, extract the amount and add a row to my Google Sheet"*. Press Enter.
  </Step>

  <Step title="Let the agent build">
    The agent adds a Gmail trigger, a parsing node, and a Google Sheets node, wired together. It explains what it did in the chat.
  </Step>

  <Step title="Run it">
    Click **Run Workflow** in the tab bar. The canvas lights up with live node status. Check the Result tab for the final output.
  </Step>

  <Step title="Release">
    Once a run succeeds in live mode, click **Release** to promote the draft into a versioned snapshot that the live Gmail trigger now uses.
  </Step>
</Steps>

## The full feature set

### Canvas & nodes

<CardGroup cols={2}>
  <Card title="Canvas" icon="diagram-project" href="/agentic-editor/canvas">
    Pan, zoom, connect, undo — the mechanics of the infinite workspace.
  </Card>

  <Card title="Adding nodes" icon="square-plus" href="/agentic-editor/adding-nodes">
    The palette browser with Nodes, Triggers, and Interface tabs.
  </Card>

  <Card title="Node types" icon="cubes" href="/agentic-editor/node-types">
    Every executable, control-flow, and special node you can place.
  </Card>

  <Card title="Triggers" icon="bolt" href="/agentic-editor/triggers">
    Manual, API, schedule, email, app triggers, and events.
  </Card>

  <Card title="Interface builder" icon="window-maximize" href="/agentic-editor/interface">
    Give your workflow a user-facing form and results page.
  </Card>

  <Card title="Sticky notes & canvas" icon="note-sticky" href="/agentic-editor/sticky-notes-and-canvas">
    Annotate and personalize the canvas.
  </Card>
</CardGroup>

### Working with the right pane

<CardGroup cols={2}>
  <Card title="Editor tabs" icon="table-columns" href="/agentic-editor/editor-tabs">
    Workflow, Result, Interface, Code, and Log.
  </Card>

  <Card title="Split view" icon="object-group" href="/agentic-editor/split-view">
    Show two tabs side-by-side for faster debugging.
  </Card>
</CardGroup>

### Running, iterating, shipping

<CardGroup cols={2}>
  <Card title="Running a workflow" icon="play" href="/agentic-editor/running">
    Manual runs, input dialogs, batch runs, auto-heal.
  </Card>

  <Card title="Mock mode & pinning" icon="thumbtack" href="/agentic-editor/mock-mode-and-pinning">
    Iterate without burning real tool calls or re-running expensive steps.
  </Card>

  <Card title="Releases & versions" icon="rocket" href="/agentic-editor/releases">
    Promote drafts to live, compare versions, restore history, publish as a template.
  </Card>

  <Card title="Monitor" icon="chart-line" href="/agentic-editor/monitor">
    Inspect every past run — inputs, outputs, logs, agent reasoning.
  </Card>
</CardGroup>

### Workflow administration

<CardGroup cols={2}>
  <Card title="Actions menu" icon="ellipsis-vertical" href="/agentic-editor/actions-menu">
    Share, duplicate, tag, describe, and configure resources.
  </Card>

  <Card title="Coding agent chat" icon="comments" href="/agentic-editor/chat">
    The AI-powered authoring surface.
  </Card>
</CardGroup>

## Real-time collaboration

Multiple editors can be in the same workflow simultaneously. You'll see other users' avatars in the header and their live cursors on the canvas as they work. Edits sync in real-time — no "someone else is editing" errors, no merge conflicts.

See [Canvas — Collaborating on the canvas](/agentic-editor/canvas#collaborating-on-the-canvas) for what's shared in real time (cursors, node dragging, presence) versus what stays local (selections, edits, zoom).

## Agent Mode vs. Guided Mode

|                | Agent Mode                                 | [Guided Mode](/guided-editor/overview) |
| -------------- | ------------------------------------------ | -------------------------------------- |
| Editor         | Infinite node canvas                       | Sequential step form                   |
| Authoring      | Natural-language chat + visual             | Fill-in-the-blank                      |
| Control flow   | Full (if/else, loops, parallel, approvals) | Linear steps                           |
| Sub-workflows  | Yes                                        | No                                     |
| Best for       | Anything beyond a single-step automation   | Very simple linear flows               |
| Expressiveness | Strictly more expressive                   | Simpler to scan at a glance            |

Most new workflows should use Agent Mode. Guided Mode remains supported for existing workflows and for the simplest use cases.

## Where to start

<CardGroup cols={2}>
  <Card title="I'm new — build my first workflow" icon="play" href="/agentic-editor/chat">
    Open the chat and describe what you want.
  </Card>

  <Card title="I want to understand the canvas" icon="diagram-project" href="/agentic-editor/canvas">
    The visual mechanics: dragging, connecting, zooming.
  </Card>

  <Card title="I need to browse node types" icon="cubes" href="/agentic-editor/node-types">
    The full catalog of what you can place.
  </Card>

  <Card title="I want to run and debug" icon="play" href="/agentic-editor/running">
    Executions, mock mode, monitor.
  </Card>
</CardGroup>
