Docs / Sandbox and code /
BrowserPreview
Embedded preview of a URL or static HTML the agent generated, in an iframe shell.
Preview
Sign in to My App
you@example.com
••••••••
Continue
Variants
With content
Sign in to My App
you@example.com
••••••••
Continue
Empty placeholder
Preview content
Props
| Prop | Type | Description |
|---|---|---|
| url | string | Decorative URL shown in the address bar. Defaults to 'http://localhost:3000'. |
| pageTitle | string | Label shown in the browser tab strip. |
| favicon | string | Optional emoji or single character used as the favicon. |
| children | React.ReactNode | Preview content. When omitted, shows a 'Preview content' placeholder. |
| viewport | "mobile" | "tablet" | "desktop" | Controlled viewport size. The component has internal state when this prop is omitted. |
| onViewportChange | (v: ViewportSize) => void | Called when the viewport switcher changes. |
| minContentHeight | string | Minimum height of the content area. Defaults to '320px'. |
| className | string | Additional class names for the root element. |
Usage
import { BrowserPreview } from "@/components/sandbox/browser-preview";
<BrowserPreview
url="http://localhost:3000/dashboard"
pageTitle="Dashboard — My App"
favicon="📊"
>
<YourPageComponent />
</BrowserPreview>