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

# Craft Agent

> Create and test automation workflows in real-time with live browser preview

## What is Craft Agent

Craft Agent is an intelligent workflow builder that lets you **create automation workflows while watching them execute in real-time**. Build, test, and refine your automation steps with instant visual feedback through a live browser preview.

<CardGroup cols={3}>
  <Card title="Live Browser Preview" icon="eye" color="#0285c7">
    Watch your steps execute in real-time as you build your workflow
  </Card>

  <Card title="Test Before Deploy" icon="flask" color="#16a34a">
    Run and validate each step individually before activation
  </Card>

  <Card title="Full Control" icon="sliders" color="#dc2626">
    Pause or stop execution at any point while testing
  </Card>
</CardGroup>

***

## Core Features

### 🎯 Build Workflows with Live Chat

Chat naturally with the Craft Agent to create your automation steps. Simply describe what you want to accomplish, and watch as the system builds your workflow step by step.

<img src="https://mintcdn.com/notaai/5UKDTUYlR3j5_NHJ/images/craftflow/home.png?fit=max&auto=format&n=5UKDTUYlR3j5_NHJ&q=85&s=c052129541e9ce12818c5cab878a877a" alt="Chat interface for building workflows" width="3012" height="1580" data-path="images/craftflow/home.png" />

<Tip>
  Try saying things like "Navigate to the login page" or "Click the submit
  button" - the Craft Agent understands natural language.
</Tip>

***

### 🖥️ Live Browser Preview

Every step you create can be executed instantly with a live browser preview. See exactly what happens in real-time before committing to your workflow.

<img src="https://mintcdn.com/notaai/UrG3kT2Jq82RuGvp/images/craftflow/live.png?fit=max&auto=format&n=UrG3kT2Jq82RuGvp&q=85&s=abfea54293a8445e517005292df42080" alt="Live browser preview panel showing real-time execution" width="1908" height="920" data-path="images/craftflow/live.png" />

**What you'll see:**

* Real-time browser interactions
* Visual feedback for each action
* Page states after each step
* Element highlighting during execution

<Note>
  The live preview runs in an actual browser environment, so what you see is
  exactly what will happen in production.
</Note>

***

### ⏯️ Execution Controls

Control how your workflow runs with simple, intuitive controls.

<CardGroup cols={3}>
  <Card title="Run" icon="play" color="#16a34a">
    Execute your workflow step-by-step or all at once
  </Card>

  <Card title="Pause" icon="pause" color="#eab308">
    Pause execution to inspect the current browser state
  </Card>

  <Card title="Stop" icon="stop" color="#dc2626">
    Stop the workflow and reset to the beginning
  </Card>
</CardGroup>

<AccordionGroup>
  <Accordion title="When should I use Pause?">
    Use pause when you want to inspect what's happening at a specific point in
    your workflow. This is helpful for debugging or understanding page states.
  </Accordion>

  <Accordion title="What happens when I stop a workflow?">
    Stopping a workflow immediately halts execution and resets the browser to
    the initial state. Your steps remain saved and ready to run again.
  </Accordion>
</AccordionGroup>

***

### ✅ Workflow Activation

Once you've tested all your steps and you're happy with the results, activate your workflow to make it production-ready.

**The activation process:**

**1. Review Your Steps**

All your tested steps are combined into a single workflow.

<img src="https://mintcdn.com/notaai/UrG3kT2Jq82RuGvp/images/craftflow/preview-step.png?fit=max&auto=format&n=UrG3kT2Jq82RuGvp&q=85&s=0bed109bc20520c197c86805588d51f1" alt="Review all workflow steps before activation" width="1073" height="716" data-path="images/craftflow/preview-step.png" />

**2. Activate the Workflow**

Click the activate button to make your workflow live.

<img src="https://mintcdn.com/notaai/UrG3kT2Jq82RuGvp/images/craftflow/active.png?fit=max&auto=format&n=UrG3kT2Jq82RuGvp&q=85&s=2242b7c008e8405c70c2d99f090b534a" alt="Activate workflow button" width="1634" height="923" data-path="images/craftflow/active.png" />

**3. Workflow is Ready**

Your activated workflow can now run automatically.

<img src="https://mintcdn.com/notaai/UrG3kT2Jq82RuGvp/images/craftflow/workflow-active.png?fit=max&auto=format&n=UrG3kT2Jq82RuGvp&q=85&s=226fb631d4c683936c3bca66f3b7248b" alt="Workflow ready and active" width="1596" height="262" data-path="images/craftflow/workflow-active.png" />

<Check>Your workflow is now active and ready to use!</Check>

<Warning>
  Make sure to test all steps with the live preview before activating. Once
  activated, the workflow will run automatically.
</Warning>

***

## How It Works

### Step-by-Step Workflow Creation

**1. Create Steps Through Chat**

Use natural language to describe each action you want to automate. Craft Agent translates your instructions into executable steps.

**2. Test with Live Preview**

Run each step individually and watch it execute in the live browser preview. Make sure everything works as expected.

**3. Control Execution**

Use the pause and stop controls to manage your testing. Inspect page states, debug issues, and refine your steps.

**4. Activate When Ready**

Once all steps are tested and working perfectly, activate your workflow to combine them into a complete automation.

***

## Common Use Cases

<CardGroup cols={2}>
  <Card title="Web Automation" icon="robot">
    Automate repetitive web tasks like form filling, data entry, and navigation
  </Card>

  <Card title="Testing Workflows" icon="vial">
    Create end-to-end tests and validate user journeys
  </Card>

  <Card title="Monitoring" icon="bell">
    Monitor websites for changes or specific conditions
  </Card>
</CardGroup>

***

## Tips for Success

<AccordionGroup>
  <Accordion title="Always test steps individually" icon="lightbulb">
    Before activating your workflow, run each step one by one using the live preview. This helps catch issues early and ensures everything works smoothly.
  </Accordion>

  <Accordion title="Use the pause feature for debugging" icon="magnifying-glass">
    When something doesn't work as expected, use the pause button to stop
    mid-execution and inspect what's happening in the browser.
  </Accordion>

  <Accordion title="Watch the live preview carefully" icon="eye">
    The live preview shows you exactly what's happening. Look for visual cues like
    element highlights, page changes, and loading states.
  </Accordion>

  <Accordion title="Refine steps before activation" icon="pen-to-square">
    You can edit, reorder, or delete steps before activation. Use this flexibility to perfect your workflow.
  </Accordion>
</AccordionGroup>

***

## Understanding Workflow States

Your workflow can be in different states depending on what you're doing:

<CardGroup cols={2}>
  <Card title="Building" icon="hammer" color="#6366f1">
    Adding and editing steps through chat
  </Card>

  <Card title="Testing" icon="flask" color="#0ea5e9">
    Running steps with live preview active
  </Card>

  <Card title="Paused" icon="pause" color="#f59e0b">
    Execution temporarily stopped for inspection
  </Card>

  <Card title="Active" icon="circle-check" color="#10b981">
    Workflow is activated and ready to run
  </Card>
</CardGroup>

***

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="Can I edit a workflow after activation?">
    Yes. Edit steps, retest with live preview, then reactivate when ready.
  </Accordion>

  <Accordion title="What happens if a step fails during testing?">
    The execution stops, and you'll see an error message in the live preview. You
    can then edit the step and try again.
  </Accordion>

  <Accordion title="How many steps can I add to a workflow?">
    There's no fixed limit, but we recommend keeping workflows focused and
    breaking complex automations into multiple workflows for better
    maintainability.
  </Accordion>

  <Accordion title="Can I see what the browser is doing in real-time?">
    Absolutely! The live browser preview shows everything happening in real-time,
    including page loads, clicks, form fills, and more.
  </Accordion>

  <Accordion title="Do I need to know coding to use the Craft Agent?">
    No! The Craft Agent uses natural language chat, so you can create workflows just by
    describing what you want in plain English.
  </Accordion>

  <Accordion title="What's the difference between pausing and stopping?">
    Pausing temporarily halts execution so you can inspect the current state. Stopping completely ends the execution and resets the browser.
  </Accordion>
</AccordionGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Create Your First Workflow" icon="rocket" href="https://app.trynota.ai/">
    Jump in and start building your first automation
  </Card>

  <Card title="Get Support" icon="life-ring" href="https://trynotaai.slack.com/archives/C08KMP8RTEJ">
    Need help? Our team is here for you
  </Card>
</CardGroup>

<Check>
  Ready to build powerful automations? Start creating your Craft Agent workflow
  today!
</Check>