Agents
Web Preview
A small browser for what the agent built, with device widths.
Web Preview is a compact browser for previewing pages an agent builds or deploys: an address bar, reload, open-in-new-tab, and desktop, tablet and mobile widths that ease between sizes.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/web-preview.jsonThe CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/web-preview.
Usage
import { WebPreview } from "@/components/ui/web-preview";
<WebPreview url={deployUrl} />API reference
WebPreview
| Prop | Type | Default | Description |
|---|---|---|---|
| url · onUrlChange | string | — | Address. |
| children | ReactNode | — | Render instead of an iframe. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: web preview component · iframe preview react · responsive preview ui · v0 style preview · shadcn ai web preview