Web preview
A browser frame for a generated page, with reload and desktop, tablet and phone widths.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/web-preview.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/web-preview.json
Usage & API
Example
import { WebPreview } from "@/components/ai/web-preview"
<WebPreview
url="…"
device={device}
onDeviceChange={() => {}}
loadKey={1}
onReload={() => {}}
/>Props WebPreview
| Prop | Type & description | Required |
|---|---|---|
url | string | Required |
device | Device | Required |
onDeviceChange | (device: Device) => void | Required |
loadKey | numberBumped each reload; the page re-mounts. | Required |
loading | boolean | Optional |
onReload | () => void | Required |
className | stringFrame styling. Pass your own (for example a fixed height and no border) when the preview fills a split view. | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Browser frame is the only variant. The toolbar starts with three decorative dots from the small breakpoint up, then Back, Forward (also hidden on the narrow toolbar), Reload, the address, and the three device icons. The sample address is kettle-and-crow.preview.app. The page inside is a one-page site for Kettle & Crow, a Leeds roaster: a subscription hero that mentions Thursday delivery, three origins (Ethiopia Guji, Colombia Huila, Kenya Nyeri), a three-step how-it-works strip, and a footer. The caption under the frame names the device and its target width. The sample puts the frame on the right of a thread titled Kettle & Crow site. That thread is hidden below the medium breakpoint, so the preview can stand alone. The opening turns ask for a subscription-led landing page and then for the Thursday line. A field labelled Ask for a change appends the person's text, answers that the preview has reloaded, and calls the same reload path. Sending is disabled while a reload is already running.
Choosing a layout
Use it when the thing to judge is a page at more than one width, and the person is going to ask for another change after seeing it. A generated marketing page, a layout pass, or a check that the nav still works on a phone belongs here. Keep device, loadKey and loading in your state. On each reply that changes the page, increment loadKey and set loading for as long as the refresh should read as a reload. The sample holds loading for about three quarters of a second.
An artifact panel is the closer sibling when the person also needs the source, a version list, and copy or download. The preview frame has none of those. A code block is the closer sibling when the result is source to read, not a page to resize. An artifact card can point at a page from inside the reply, but it only opens something else. It does not show desktop, tablet and phone. Weather, itinerary and the other rich cards are for answers with their own shape. They are not a browser.
Why can the caption say 1280px when the frame is clearly narrower?
The caption prints the device's target size, the px field on desktop, tablet or phone. The box itself is the smaller of the measured width and that device's cap. Tablet caps at 400 pixels and phone at 236, and desktop simply uses whatever width the column has. The landing page reflows from that drawn width, not from the number in the caption.
Do Back and Forward navigate?
No. Both buttons are disabled. Reload is the only toolbar action that does anything, and it calls onReload so you can bump loadKey and flash the loading bar. The address is text, not an input and not a link. There is no history stack inside the frame.