Circuitry Logo
Circuitry
Open Circuitry

Getting Started with Circuitry

Circuitry is an agentic studio — one app where you think, plan, direct, and communicate with AI from a smart whiteboard, and ship the result with a purpose-built editor for every job: a full IDE, a vector & UI design studio, spreadsheets, notebooks, terminals, and a visual automation platform — on desktop (macOS, Windows, Linux), web, and iPad.

This guide gets you oriented and walks you through your first workflow in a few minutes.

What Circuitry Is

Working with AI through a chat box alone hits a wall: you can't point at things, sketch what you mean, or see the shape of what's been built. Circuitry is a two-way visual interface — you show AI, and AI shows you — with every tool integrated in one studio, so there's no juggling apps, no saving and exporting, no dragging files into a chat window.

  • The Smart Whiteboard — handwriting becomes text as you write, sketches behave like diagrams you can rearrange like CAD, and a hand-drawn system converts into a running workflow. Write "Terminal", convert it, and a real terminal appears on the board. Start here.
  • A full agentic IDE — direct Claude, Codex, or Gemini with plan and diff approval, alongside a code editor with smart autocomplete, terminals, and remote development from iPad.
  • A Python notebook — CodeBook brings Jupyter-style cells with a persistent Python/JavaScript scope, agent cells, and breakpoint debugging.
  • A vector & UI design studio — draw with shape recognition, organize artboards and layers, and convert designs to HTML, SVG, or code.
  • A visual workflow platform — wire multi-agent systems, branch and loop, run branches in parallel, set breakpoints to debug, and connect any service with webhooks.
  • Built for teams — share any document with a link, collaborate live, and pair up with tab-follow and shared control — with AI in the loop.
  • Yours, everywhere — desktop, web, and iPad; cloud AI, free local models, or private on-device Apple Intelligence; export code in 13 languages.

It runs on your machine, so you stay in control — pipe images, files, databases, and AI through anything, and connect to thousands of services (hundreds in our plugin library, or define your own APIs). Use your own keys, secrets, and local models, or design, debug, and run agents in the cloud.

Want the full picture? The documentation home maps every capability with a jump to each guide.

Workflows

Workflows are Circuitry's automation canvas: drag nodes onto a board, connect them, and data flows from one to the next. Each node does one job — call an AI model, run code, branch on a condition, loop over rows, hit an API — and AI wizards help you fill them in (describe what you want in plain English and get working code in JavaScript or Python, conditions, or whole API integrations).

The rest of this page builds your first workflow. The other editors — code, design, sheets, terminals, 3D, and more — are covered in their own guides.

Two ways to run a workflow

  • In the editor — click Run and watch nodes light up as they execute, with live output and inline debugging. This is how you build and test.
  • As a remote workflow — the same workflow can run headless, with no editor open. Trigger it from a webhook so any service (or a schedule) fires it on demand, or run it on a Circuitry Server to execute on a more powerful machine — native Python, GPU acceleration, and parallel execution across multiple servers.

Quick Start

1. Sign Up or Sign In

Navigate to Circuitry and create a free account or sign in with your existing credentials.

2. Understanding the Interface

The editor consists of three main areas:

  • Left Sidebar: Contains all available nodes you can drag into your workflow
  • Canvas: The main area where you build and visualize your workflows
  • Right Panel: Settings and configuration for selected nodes
  • Top Toolbar: Contains workflow controls including:
    • AI Wizard for intelligent workflow generation
    • Tool selection (Select, Pan, Draw modes)
    • Undo/Redo for workflow changes
    • Node View Toggle: Choose whether new nodes appear expanded (⛶) or compact (▢)
    • Run, Code, and Save buttons for workflow execution and management

3. Create Your First Workflow

Step 1: Add Nodes

  • Drag a Start Node from the sidebar onto the canvas
  • Add an Agent Node to process data with AI

Step 2: Connect Nodes

  • Draw a connection by dragging from any edge of the Start node to any edge of the Agent node — connection points appear on all four sides, and the arrow routes itself automatically

Step 3: Configure the Start Node

  • Click on the Start node
  • Add test data in the right panel: 
    { "message": "Hello World" }

Step 4: Configure the Agent Node

  • Click on the Agent node
  • Set the prompt in the right panel: 
    Translate this to French: {{input.message}}

Step 5: Save Your Work

  • Your workflow auto-saves as you build

Step 6: Execute the Workflow

  • Click the Run button (▶️) in the top toolbar
  • Watch as nodes light up during execution
  • View the results in the Agent node output

Core Concepts

Nodes

Nodes are the building blocks of your workflows. Each node performs a specific function. Here are the main ones:

Core

  • Start Node: Entry point for your workflow
  • Agent Node: AI-powered processing using language models
  • Chat Node: Conversational AI with persistent memory — standalone or in a flow
  • Code Node: Run JavaScript or Python — locally or on a Circuitry Server — with breakpoint debugging
  • Action Node: Perform specific actions like HTTP requests and data transforms
  • Params Node: Interactive controls (sliders, toggles) to fine-tune a flow

Control flow

  • Condition Node: Branch your workflow based on conditions
  • Switch Node: Route down one of many paths — the multi-way Condition
  • Loop Node: Iterate over arrays or repeat operations
  • Fork Node: Split execution into parallel branches
  • Join Node: Merge parallel branches back together
  • Wait Node: Pause for a duration or until a specific time
  • Set Variable Node: Capture a value under a name for reuse later

Data & knowledge

  • Database Node: Read and write SQLite, Postgres, MySQL, Supabase and more
  • DataGrid Node: Spreadsheet for viewing and editing tabular data
  • Vector Store Node: A knowledge base your agents can read from (RAG)
  • MCP Node: Connect agents to external tool servers

Media & visualization

  • Vision Node: OCR, describe, extract, or classify images
  • ImgOps Node: Resize, convert, watermark, and generate icon sets
  • ToVec Node: Convert images into scalable vector graphics
  • 3D Node: Create and display 3D scenes and animations
  • Web Node: Display HTML/CSS content with AI-powered generation

Integration & docs

  • Plugin Node: Instant API integrations via the Plugin Wizard
  • Sticky Notes: Annotate and document your workflows

See the full Node Reference for every node type and its configuration.

Connections

Connections define the flow of data between nodes. Every node has connection points on all four sides — drag from any edge of one node to any edge of the next, and the arrow routes to the nearest sensible side automatically. Flows read top-to-bottom by default; press V to switch between vertical and horizontal flow layouts.

Execution

When you execute a workflow:

  1. Execution begins at the Start node
  2. Data flows through connections to subsequent nodes
  3. Each node processes its input and produces output
  4. Visual feedback shows the current execution state
  5. Results are displayed in real-time

Next Steps

Now that you understand the basics, explore these topics:

Need Help?

  • Check our FAQ for common questions
  • Contact us with anything else