Code IDE Tour

Every kind of work has its proper surface. In Circuitry you think on the whiteboard, design in the Designer, and run pipelines on the workflow board — and when the work is project code, the right surface is a proper IDE. Nothing less does the job.

So open a project — File → Open Project ⌘⇧O, or New Project ⌘⇧N — and Circuitry becomes exactly that: a full agentic IDE, reshaped around your codebase with a file browser, git version control, real editors for your files, and a coding agent one click away. If you know editors like VS Code, you'll be at home in minutes. And what joins this surface to all the others is the AI chat assistant: the same conversation that edits your code can work on every other aspect of the project — the sketches, the designs, the pipelines — each on the surface it belongs to.

The project workspace

• File browser — the left panel becomes your project tree: browse, open, and manage the project's files; open files are marked so you can see at a glance what's already in your tabs.
• Git version control — a source-control panel tracks your working tree: see changes, stage, commit, and manage branches without leaving the studio.
• Editors for many file types — code with syntax highlighting and intelligent completions, plus viewers and editors for markdown, HTML, images, PDFs, data files, and more. Every file opens as a tab; split the view to work side by side.

Markdown and HTML, with live split previews

Markdown and HTML files get a split view — source on one side, the rendered result on the other:

The HTML split view is wired in both directions:

• Hover the rendered page and the matching code is selected in the editor ( inspect mode — a Chrome-style element picker).
• Hover the code and the related element highlights on the design ( hover select).

You read the page the way you read code, and the code the way you see the page.

The chat agent

Press the chat icon in the app header and Circuitry's dedicated chat agent opens beside your work. It's the same two-way channel every Circuitry editor shares: select anything — code, a file, a design element — and ask the chat to edit, change, or review "this". It knows what's selected and in which file, so you point instead of describing. When it edits your code, the changes land as approve / reject markers in the editor — nothing is silently applied. Here the agent has reworked a project file: every hunk carries its own Accept / Reject buttons, the review bar tallies what's pending with Accept All / Reject All, and the chat's file card shows the same change counts. Note the picker at the top of the chat — this conversation is powered by the Claude Code CLI:

The agent runs on whatever intelligence suits you:

• Cloud frontier models — the latest hosted models.
• Local models — private, on your own machine. See Local AI Models.
• CLI coding agents — drive tools like Claude Code, Gemini CLI, or Codex through the same chat.

And if you'd rather work directly in a coding assistant, switch the chat to CLI mode and talk straight to the tool itself — same pane, no translation layer. See Coding Agent for the full setup.

A tour of the controls

Keyboard shortcuts below use Cmd — that's Ctrl on Windows and Linux.

Top toolbar

The toolbar stays out of the way until there's something to act on — unsaved changes, a pending AI edit, or a storage connection.

• Accept All / Reject All — when an agent or AI edit is pending, a review bar appears on the left with change stats and these two buttons. The proposed changes are shown as a diff right in the editor; nothing is final until you decide.
• Revert — Revert discards your unsaved changes and restores the file's saved content. Appears only while the file is modified.
• Save — Save writes the buffer back to the local or remote file (⌘S). Disabled when there's nothing to save.
• Connection readout — text on the right shows where the file lives when it's opened through a storage connection or the Circuitry Server.

Status bar

Always present along the bottom of the editor.

• Language readout — the detected language driving syntax highlighting, alongside the file size and an amber Modified marker while there are unsaved changes.
• AI inline completion toggle — a small sparkle-plus-Tab-key glyph. When it's on, ghost-text suggestions appear as you type and ⇥ accepts them; click to switch inline AI off or back on. Visible for every language.

Markdown and HTML extras

• — Preview toggles between the rendered page and the source.
• Split view — a two-column button places source and live preview side by side, with the two-way hover sync described above.
• — Refresh preview re-renders the HTML preview; an amber dot warns when the source isn't in a renderable state and the preview is stale.
• AUTO / MAN — toggles HTML preview auto-refresh; in manual mode the preview updates only when you press refresh.

In the editor itself

• Ghost text — inline AI drafts the next few lines in faint text; ⇥ accepts, keep typing to ignore. See Inline AI.
• Inline prompt — press ⌘K and describe the change you want at the cursor; the edit comes back as a reviewable diff.
• Breakpoints — JavaScript, TypeScript, and Python files support line breakpoints for debug runs.
• Vim keybindings — optional modal editing across editors and terminals, so you can code and navigate many nodes and files without leaving the home row. Toggled with ⌘⇧V once enabled in Settings → Code Editing. See Vim Mode.

Editing code that lives on the canvas

Code and Agent nodes in a workflow carry the same editor. Open a node's code and it docks beside the canvas with its own header:

• Language dropdown — switches the code node's language.
• — Run this node executes just the linked node.
• — Prompt Wizard (agent nodes) drafts or refines the node's prompt using upstream output.
• — Configure opens the node's settings panel.
• The footer has the same AI inline completion toggle, with a reminder that ⌘K opens inline AI.

Press — Expand editor — for a distraction-free fullscreen surface with its own tools: AI Wizard to generate code from a description, Run for this node, Run All for the whole workflow, Save, Copy code, zoom controls (Cmd −, Cmd 0, Cmd +), and Exit fullscreen (Esc).

Keyboard

Works with the rest of the studio

The IDE is one surface of one studio — your code lives beside the boards that plan it and the agents that build it:

• Circuitry as an Agentic IDE — the why and the workflow
• Full IDE: Code Editor — editor features in depth
• Inline AI — completions and the inline prompt
• Coding Agent — models, CLIs, and setup
• Agent Chat in Split-Screen — pairing chat with a document
• Terminal Tour — the shell beside your code