The AI Platform

    Code Editor

    The Code Editor is a VS Code-style editor that runs inside the app, attached to the active chat. It's where files appear when a specialist writes or edits code, where you read the diff yourself, and where the embedded browser hands off when you click "Open in Editor" on a page element.

    When to Use It

    • Watch a specialist's code edits arrive in real time as they answer your message.
    • Read or tweak a file the specialist just wrote without opening a separate IDE.
    • Jump from a rendered element in the embedded browser straight to the source line that produced it.
    • Pair it with the browser for a real build-test-fix loop inside the chat.

    Open the Code Editor

    Chat workspace heading toolbar with Chat, Code, and Browser toggle buttons

    Every channel has a row of panel toggle buttons in the workspace heading. Click the Code (square code icon) to open the editor as a panel next to the chat. Click again to hide it.

    The editor scope is per-conversation. Each chat gets its own editor state — open files, cursor positions, undo history. Switching channels switches editor context.

    Editor Panel

    Code editor panel attached to the chat showing a TypeScript file from the conversation

    The editor is scoped to a single channel — its open files, cursor positions, and undo history all belong to that conversation. When the channel is part of a project with linked repositories or local folders, the editor reads from that project's source tree, and any edits a specialist makes during the conversation appear in the panel automatically.

    Open a File from the Browser

    The embedded browser's Open in Editor action is the most direct way to navigate from a rendered UI back to the source. Pick an element on the page, click Open in Editor, and the Code panel opens (or focuses if it's already open) with the source file loaded and the cursor on the line that produced that element.

    This handoff requires a source map. For most dev servers (Vite, Next.js, Webpack with source maps enabled) it works out of the box. The button is disabled when no source map is found for the selected element.

    Edit Files Yourself

    You can edit files directly in the panel — type, save, and the change is committed to the chat's working tree. This is a quick way to make a manual fix or tweak a specialist's edit without going back to chat to ask.

    When worktrees are enabled, your edits live on the chat's branch alongside whatever the specialist has been doing. The chat's turn counter and snapshot history track every change, so you can see what the specialist did, what you did, and roll back if needed.

    Standalone Mode

    The Code panel is embedded next to the chat by default. If your window is narrower than 900px, the editor opens in a standalone window instead so you have enough room to read code. On wider windows you can also detach the editor manually if you want more horizontal space. The mode is sticky per conversation — if you detach it, it stays detached the next time you open that chat.

    Language Servers

    For code intelligence — autocompletion, go-to-definition, diagnostics, find-references — install Language Server Protocol providers from the Language Servers settings page. Servers run locally and give specialists deeper understanding of your codebase too.

    Language Servers require the desktop app with LSP support enabled.

    The Build-Test-Fix Loop

    The editor and the embedded browser are designed to work together for the iterative loop most coding sessions involve:

    1. Ask a specialist to build a feature in a project chat.
    2. The specialist writes files. You see them appear in the Code panel.
    3. Your dev server (or the specialist's npm run dev) serves the app on localhost.
    4. Open the Browser panel to the dev server URL.
    5. Click Select Element on something that's wrong, Open in Editor to jump to the source.
    6. Ask the specialist to fix it, the dev server reloads, the browser reloads, you check again.
    7. Repeat until done.

    The whole loop happens inside the chat. No app switching, no copying URLs or screenshots.

    • Embedded Browser — the browser panel that pairs with the editor and hands off via Select Element.
    • Projects — link repositories and folders so the editor has files to show.
    • Git Worktrees — give every chat its own isolated branch.
    • Language Servers — install LSP providers for code intelligence.
    • Specialists — how specialists read and write code in this panel.