Live Preview
See your running application side-by-side with the AI chat.
Overview
The Preview tab shows your app inside an <iframe> on the right panel. Point it at any URL — typically a local dev server — and use it as visual context while the agent edits code.
URL Bar
Type any URL and press Enter. The field is persisted per session (session-prefs.json). If the iframe hasn't signalled load within 10 seconds, a retry panel appears with the failing URL.
The default URL is http://localhost:3000.
Viewport Modes
Popover on the toolbar:
- Responsive — Fills the panel.
- Mobile — 390 × 844.
- Tablet — 768 × 1024.
- Desktop — 1440 × 900.
Non-responsive modes support a custom width × height input and a rotate button (swaps dimensions). When the fixed viewport is larger than the panel, the content is scaled down to fit and the current scale is shown in the dimension label at the bottom.
Reload
The refresh button clears and re-assigns iframe.src so the preview reloads cleanly after a code change the dev server didn't hot-swap.
Terminal Toggle
The terminal icon on the right of the toolbar opens a node-pty terminal below the preview. See the Terminal page.
Element Selection → Screenshot
See Screenshots for the element picker.