Live preview
Most AI code tools show you a static render or a sandboxed iframe. Coframe Agent gives you a real headless browser — the same engine your visitors use — streaming directly into the preview panel.
What makes it different
Section titled “What makes it different”| Capability | Coframe Agent | Typical AI tool |
|---|---|---|
| Rendering engine | Real Chromium (Kernel Browser) | Sandboxed iframe or static render |
| JavaScript execution | Full — frameworks, SPAs, animations all work | Limited or none |
| Interaction | Click, scroll, hover, fill forms | View-only or limited |
| Network requests | Real — API calls, auth, third-party scripts | Blocked or mocked |
| Viewport | Any size, mobile emulation included | Fixed |
How it works
Section titled “How it works”Behind the scenes, Coframe Agent manages a Kernel Browser session — a real Chromium instance running in the cloud. The browser is:
- Created on demand when you open or need a preview.
- Connected via CDP (Chrome DevTools Protocol) so the agent can navigate, inspect, and take screenshots programmatically.
- Streamed to your panel as a live video feed with full interactivity.
This is the same technology that lets the agent see the result of its changes, catch visual regressions, and verify interactions work — not just that the HTML compiles.
Multiple preview surfaces
Section titled “Multiple preview surfaces”The preview panel can switch between three surfaces:
| Surface | When to use it |
|---|---|
| Browser | The default — see the full page as visitors would. |
| Storybook | Isolated component view for design system work. Runs a real Storybook dev server in the sandbox. |
| Raw | Direct iframe for lightweight previewing without the full browser. |
Switching is instant — the underlying sessions persist, so you don’t lose state when you toggle.
Interacting with the preview
Section titled “Interacting with the preview”The live preview is fully interactive:
- Click buttons and links to verify navigation and CTAs.
- Fill out forms to check validation and submissions.
- Scroll and resize to test responsive behavior.
- Open menus and modals to verify dynamic UI elements.
- Watch animations play in real time.
Because it’s a real browser, anything that works on your production site works in the preview — including third-party scripts, analytics, and auth flows.
Agent + preview feedback loop
Section titled “Agent + preview feedback loop”The agent doesn’t just write code blindly. It uses the preview to:
- Verify each change looks correct after applying it.
- Navigate to the right section of the page to confirm context.
- Take screenshots when it needs to reason about layout or spacing.
- Detect errors in the browser console and fix them proactively.
This tight feedback loop means fewer “it compiles but looks wrong” moments.