The AI Platform

    Embedded Browser

    The embedded browser is a full Chromium browser that runs inside the app, right next to your chat. It lets you preview live web pages, share what you're seeing with a specialist, and jump straight from a UI element on the page to the source file that produced it. It pairs with the Code Editor panel to make the build-test-fix loop happen without ever leaving the conversation.

    When to Use It

    • Browse a localhost preview of an app a specialist is helping you build, then hand it elements to fix or improve.
    • Open a documentation page, blog post, or design reference alongside the chat without leaving the app.
    • Use Browser Extensions like password managers or accessibility tools inside the app's browser.
    • Send the URL or selected element straight into the chat as context the specialist can reason about.

    Open the Browser

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

    Every channel has a row of panel toggle buttons in the workspace heading at the top of the chat. Click the Browser (globe icon) to open it as a panel next to the chat. Click again to hide it.

    You can also open the Browser by clicking a link inside any chat message. After confirming the link-safety modal, the Browser panel opens and navigates to the URL automatically.

    The Browser Toolbar

    Across the top of the panel you'll find:

    • Back, Forward, Reload, Home. Standard browser navigation. Home resets to the default landing page (Google by default).
    • URL bar. Type a URL or search query and press Enter. The placeholder reads "Enter URL or search…".
    • Select Element (pointer icon, right side). Activates element-picking mode. See below.

    You can see the full toolbar in context above and in the build-test-fix loop screenshot below.

    Select Element

    This is what makes the embedded browser more than just a browser. Click the Select Element button, then click any element on the page. An action bar appears with three buttons:

    Element action bar with Send to Chat, Open in Editor, and Dismiss buttons

    • Send to Chat. Pastes the element's HTML snippet straight into the active chat input. You can then add your own question and send.
    • Open in Editor. Jumps to the source file that produced this element and opens it in the Code Editor panel at the right line. Requires a source map — usually available for development builds. The button is disabled when no source map is found.
    • Dismiss. Cancels the selection and hides the action bar.

    Send to Chat in Action

    The selected element's HTML pasted into the chat input with a follow-up question typed below it

    After you click Send to Chat, the element's HTML snippet appears as the first line of your chat input. Type your follow-up directly underneath — "make this a bit taller", "why is this off-center?", "add a label" — and send. The specialist sees the exact DOM node alongside your request and knows precisely which element you're talking about, without you having to describe it.

    You can also keep selecting more elements: each click on Send to Chat appends a new HTML snippet to the input, so you can stack multiple elements in a single message and ask the specialist to handle them together.

    The Build-Test-Fix Loop

    The browser, the Code Editor, and the chat are designed to work together. A typical session looks like this:

    1. Ask a specialist to build a feature in a project chat.
    2. The specialist edits 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 that localhost URL. The page renders alongside the chat.
    5. Spot something that's not right. Click Select Element, click the offending element, click Send to Chat.
    6. Ask the specialist to fix it. The specialist edits the source file, the dev server reloads, the browser reloads, you check again.
    7. Repeat until done — without ever switching apps, copying URLs, or pasting screenshots.

    Open external link confirmation modal showing the URL with Copy link and Open in browser buttons

    When you click an http or https link inside any chat message, the app shows an "Open external link?" confirmation modal before navigating. The modal displays the full URL with these actions:

    • Open in browser sends the URL to the embedded browser panel and switches focus to it.
    • Copy link copies the URL to your clipboard so you can paste it elsewhere.
    • Click outside the modal or press Escape to cancel.

    This stops links from auto-opening browser windows in your face and gives you a chance to read the URL before navigating. Links that aren't http or https (like javascript: or file: URLs) render as plain text and can't be clicked.

    Standalone Mode

    The browser panel is embedded next to the chat by default. On larger displays you can detach it into its own window if you want more horizontal space for the page and the chat side-by-side. The mode is sticky — if you close and reopen the panel, it remembers whether you wanted embedded or standalone last time.

    Browser Extensions

    You can install Chrome extensions that run inside the embedded browser — useful for password managers, accessibility tools, ad blockers, or any other extension your workflow depends on. See the Browser Extensions settings page for how to install and manage them.

    • Code Editor — the editor panel that pairs with the browser for the Open-in-Editor handoff.
    • Browser Extensions — install Chrome extensions inside the embedded browser.
    • Specialists — how specialists read your selected element and respond with code changes.
    • Channels Overview — the broader chat layout, including all panel toggles.