# Canvas Navigation in Agent Mode

## Canvas Execution: Prompt to Plan

### 1. Prompt Parsing and Seed Discovery&#x20;

* **Trigger:** User enters a prompt and activates Neo in Agent Mode.
* **Process:** Neo analyzes the prompt for **key terms**, including:
  * Named entities (e.g., **“May 2025 Sales Report”**, **“Q2 Consumer Behavior Summary”**, **“Chimera GPU Whitepaper”**)
  * Goal-based language (e.g., “summarize”, “generate”, “compare”)

> This parsing is automatic. No special formatting is needed by the user — Neo extracts intent and targets naturally from conversational input.

* **Knowledgebase Usage (if enabled):**\
  Neo queries the **Knowledge Base** for any contextually matching documents. These documents are converted into “**seeds**” — key fragments of relevant data — which are used to **grow a context-aware Recipe**.<br>

<figure><img src="https://3690352926-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjTYyhELhBzd4Ov8Nl3WG%2Fuploads%2F49KhLtryS4WaaDR70oTR%2FKowledge_Base_Load.gif?alt=media&#x26;token=0ed86a2f-fb32-46e6-9fc6-77de7fb919ff" alt="" width="163"><figcaption><p>Agent Neo Scanning the enabled Knowledge Base<br> <br></p></figcaption></figure>

### 2. Knowledge Garden and Recipe Generation

* **Concept:** Neo builds a **Recipe**, a living execution plan made up of evolving subtasks.
* **With Knowledge Base Enabled:**
  * Extracted seeds are used to **enrich** the Recipe with domain-specific context.
  * Seeds are re-quoted inside the canvas so you can trace what context was used.
* **Without Knowledge Base:**
  * Neo builds a base-level Recipe using model knowledge, tools, and live search.
* **Additional Controls:**
  * You can **pause** an active Recipe at any time to temporarily halt execution.
  * You can also **duplicate** a Recipe to fork it into a new session for experimentation or comparison.

### 3. Task Planning and Tool Allocation

Once the Recipe is seeded:

* **Neo activates the Dispatcher.**\
  This allocator breaks down the Recipe into actionable subtasks and selects tools for each step.
* **Toolset Sampling:**\
  Based on your goal, Neo dynamically selects from tools such as:
  * Web Search
  * Code Generator
  * File Uploader
  * Chart Interpreter
  * Terminal (if enabled)
* **Live Plan Rendering:**\
  The Recipe and subtasks are visualized directly in the canvas. Each task node can be expanded to see:
  * Chosen Tool
  * Reasoning
  * Output
  * Follow-up tasks (auto-generated)

> If a task fails, Neo re-routes. It will adapt the Recipe and try alternative tools or updated phrasing — even mid-plan. The remaining steps to complete the task is estimated by Neo and displayed at the bottom of the recipe list

<figure><img src="https://3690352926-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjTYyhELhBzd4Ov8Nl3WG%2Fuploads%2FbdDreUnNJd7M1Ak6B8ME%2FRecipe_Execution.gif?alt=media&#x26;token=93d323cd-35cb-456c-a38d-3699adbe4058" alt="" width="233"><figcaption></figcaption></figure>

### 4. Execution Begins&#x20;

After the plan is finalized, the **Start** button launches execution.

* You can pause, stop, or adjust task inputs live.

> Neo continues refining the Recipe in real time, responding to results, user edits, and discovered context. This dynamic execution lets Neo outperform static agents that cannot re-plan.

## Common Node Types in Neo's Canvas

As Neo executes a task, it dynamically generates **node blocks** inside the canvas. Each node represents a specific action or tool usage within the current Recipe. Understanding these common node types helps you trace Neo’s reasoning and interact more effectively with ongoing or completed plans.

### 1. Gen Document Node

**Purpose:**\
Neo uses this node to draft written plans such as **roadmaps**, **task briefs**, and **multi-step strategies** based on the current Recipe context.

* **Features:**
  * Click the **down arrow** icon to expand or collapse the full document view (appears on the right side of the screen).
  * Documents are version-aware and update based on upstream changes in the Recipe.

> Tip: Review the Documents to provide more concise follow-ups with neo about edits.\
> You can also Right Click this node to directly add the contents to your Knowledge Base&#x20;

<figure><img src="https://3690352926-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjTYyhELhBzd4Ov8Nl3WG%2Fuploads%2FM9k8D68wd2tdjoljwinJ%2FGen_Document.gif?alt=media&#x26;token=43e18fc6-cb1f-4b4b-920d-dd5aab6553b4" alt="" width="563"><figcaption><p>Click the Down Arrow to expand contents on the right of screen</p></figcaption></figure>

### 2. Online Search Node

**Purpose:**\
Triggers a deep search across multiple platforms to gather external data necessary for informed task planning.

* **Features:**
  * Displays links and excerpts from search results.
  * Includes a **source toggle** to reveal or hide exact URLs and timestamps.
  * Neo may create multiple Online Search nodes per task if additional data is required.

> Example: Searching for “Chimera GPU specs” results in this node, which then influences downstream coding or writing steps.

<figure><img src="https://3690352926-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjTYyhELhBzd4Ov8Nl3WG%2Fuploads%2FR9A2wgV3bpLI62d0h8Zb%2FSearch_Tool_Node.gif?alt=media&#x26;token=90a30935-02f7-4efc-bfc0-9c777a82dfa6" alt=""><figcaption><p>Click the Toggle Button below the Node to view sources</p></figcaption></figure>

### 3. Gen Webpage Node

**Purpose:**\
This is Neo’s **code generation node**, typically used for writing websites, frontends, scripts, or downloadable source files. You can click the Down Arrow icon to review the code

<figure><img src="https://3690352926-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjTYyhELhBzd4Ov8Nl3WG%2Fuploads%2Fc4F4IXPlcCk5OWmSjpGk%2Fgen_webpage.gif?alt=media&#x26;token=b54e3493-d490-49ed-ad46-0557b82b5322" alt=""><figcaption><p>Click the Toggle Button to review Source Code similar to Gen Document Node</p></figcaption></figure>

**Features:**<br>

* Refine with Neo: Prompt Neo to edit anything rendered inside the node<br>
* Edit in Fullscreen: Opens an inline fullscreen editor

<figure><img src="https://3690352926-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjTYyhELhBzd4Ov8Nl3WG%2Fuploads%2F4M0ARJlBoFPKQ3AvunYr%2Fedit_webpage.gif?alt=media&#x26;token=4c3d807d-56e7-482e-8f92-ee2c695a1c5a" alt=""><figcaption><p>Easily Reposition and Edit Elements</p></figcaption></figure>

* Open in New Tab: Launches the code output in a sandboxed preview
* Download: Saves the raw code as a ZIP file

> This node is used extensively for technical recipes involving HTML, JS, CSS, Markdown, or static site builds.

### 4. All Task Coimplete Node

**Purpose:**\
Signals that Neo has finished executing all Recipe steps.

* **Features:**
  * Shows a **completion banner** inside the canvas.
  * Contains a **follow-up input dialog** so you can extend or refine the task without resetting the entire canvas.

> You can treat this as a checkpoint — review the output, save results, or continue iterating.

### 5. Ask User More Node

**Purpose:**\
Activated automatically when Neo detects that the user’s prompt is too vague, or context is insufficient to proceed.

* **Features:**
  * Contains a **clarification prompt** that Neo fills out.
  * Accepts direct text input and supports file uploads using the **paperclip icon**.
  * Can also be **manually triggered** by the user or agent for branching logic.

> This node helps ensure clarity, especially when multi-step tasks require exact requirements before continuing.

<figure><img src="https://3690352926-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjTYyhELhBzd4Ov8Nl3WG%2Fuploads%2FsNLRU7640iYjfe1uB8tw%2Fask_user_more.gif?alt=media&#x26;token=047aae0b-7b56-4be7-8dbe-92d9a8abfdee" alt="" width="344"><figcaption><p>You can call the Ask User More tool by a simple prompt</p></figcaption></figure>

## Recipe Nodes & Task Control

### What is a Recipe Node?

Recipe Nodes are the **elliptical step indicators** that appear between each major task block in the canvas. They represent the logical transition from one subtask to the next in Neo's active Recipe.

These nodes visually mark where Neo has paused to evaluate a result, shift context, or prepare for the next operation.

### Functionality

**Restart from this point:**\
Hover over the node and click the **Refresh icon** to reinitialize Neo’s planning from this specific step in the Recipe.

* **Contextual Rebuild:**\
  When restarted, Neo regenerates the Recipe forward from this node using the latest outputs, edits, or external file uploads, without needing to rerun previous steps.

> This is useful for correcting logic paths or introducing new information without discarding prior work.

### When to use it

* You want to re-test from a specific step onward
* You need to fix a failed task or broken output without starting over

<figure><img src="https://3690352926-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjTYyhELhBzd4Ov8Nl3WG%2Fuploads%2FN5MX6JwCrG1SqQmeksYV%2Frestart_task.gif?alt=media&#x26;token=b828ecff-2cde-43a4-9ceb-a0e5b7355314" alt=""><figcaption><p>Restart a Task from any Recipe Node </p></figcaption></figure>

> Neo’s dynamic planning engine will respect the prior flow while adapting downstream logic, preserving the fluidity of the Recipe.

## Downloading Agent Files

### Accessing the File Panel

After Neo completes any file-based task — such as generating documents, webpages, or analysis — all resulting files are stored under the **Files panel** in the left sidebar.

* **Click the `Files` button** (folder icon) to open the list of all downloadable items created during the current Recipe.

### Download Options

Once inside the Files panel, you have two options for retrieving Neo’s output:

### 1. Manual Review and Download

* **Browse the file tree** to see all available items by title.
* Each file is labeled with:
  * A unique name based on the content or task
  * A download count indicator (how many times it was revised or regenerated)
* Click on any filename to **download it individually**.

> Use this method when you want to preview or selectively download results.

### 2. Download All Files at Once

* Click the **Download All Files** icon (⇩) at the top-right of the Files panel.
* This will **bundle all generated files into a single `.zip` archive** and initiate an immediate download.

> Ideal for exporting full project outputs, such as multiple reports, bundled HTML+CSS+JS files, or full document packs.

<figure><img src="https://3690352926-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjTYyhELhBzd4Ov8Nl3WG%2Fuploads%2FUgoYbWL9Om9iB0fvhi17%2Fdownload_files.gif?alt=media&#x26;token=8ffccbb9-95ee-4d12-9033-0e581b6ddbed" alt=""><figcaption><p>Download All Files Button Located Beside "Files generated by the Agent" text</p></figcaption></figure>

## How to Create New Branches in the Same Canvas

* Click on the "New Branch" button.
* In the dialog box that appears at the bottom of the page, enter your new query or topic.

<figure><img src="https://3690352926-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjTYyhELhBzd4Ov8Nl3WG%2Fuploads%2FUZSier34VM9mXed3xp2P%2FOracle-%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97-%E5%BC%80%E5%90%AF%E6%96%B0%E5%88%86%E6%94%AF-new-branch.gif?alt=media&#x26;token=de99c89c-a8a5-4abe-bfbe-afb21e499fcf" alt=""><figcaption><p>You Can Host Multiple Branches in the Same Flow</p></figcaption></figure>

## Sharing a Flow&#x20;

### Using the Share Button

To collaborate on or showcase your current Flow, use the **`Share` button** located at the top-left of the Canvas.

* Click the `Share` button to generate a **unique Flow URL**.
* This link allows others to view or join the session.

<figure><img src="https://3690352926-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjTYyhELhBzd4Ov8Nl3WG%2Fuploads%2Fp85EY2lXUa7YedocuJbi%2Fshare_button.gif?alt=media&#x26;token=bbac9ac4-d4b4-456c-ad0e-5a4e7d39be31" alt=""><figcaption><p>Only Grant Edit Permissions to Users You Trust</p></figcaption></figure>

### Important Sharing Rules

* **Default Share Mode:**\
  By default, sharing a Flow will **only grant view access to replies** — the recipient can see what Neo generated, but **cannot edit or interact** with the Recipe.
* **Granting Edit Access:**\
  After someone has joined using the shared link, you can **manually assign edit permissions** from the member management dropdown. Edit permissions must be granted for a user to view the contents of a Flow, or else they will only see the replay of the Flow

> Only collaborators with edit access can modify task inputs, rerun nodes, or inject new files into the session.

### Swapping to Regular Mode&#x20;

If you don’t need full Agent execution, you can switch to **Regular Mode** to prompt a specific model directly. This is ideal for fast responses, brainstorming, and comparisons

### Available Modes in Regular Mode

**Regular (Prompt a Model)**\
Choose from available models (e.g., Claude, GPT, Gemini) and ask questions or generate text without triggering Agent Mode.

* **Online Search**\
  Send your prompt to a model with access to real-time web search. Choose which model will handle the query + summarization.
* **Image / Video**\
  Prompt any supported vision model for analysis, captioning, or enhancement suggestions.
* **Prompt Enhance**\
  Automatically rewrites your prompt to be more detailed, structured, or effective .
* **Comparison Mode**\
  Run the same prompt across multiple models side-by-side and compare their outputs in a unified view.

***

> Regular Mode is flexible, fast, and model-specific. Use it when you want direct control over how a prompt is handled—without planning or execution steps.

<figure><img src="https://3690352926-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjTYyhELhBzd4Ov8Nl3WG%2Fuploads%2FrIPEFMBRMmeA8KGtsQrY%2Fregular_mode_toggle.gif?alt=media&#x26;token=8f5078b0-96c9-43ca-8051-38c254c26cbd" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.flowith.io/agent-mode-neo/canvas-navigation-in-agent-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
