Web Preview for Radix UI

A browser inside the app: back, forward and reload, an address field, the page in a sandboxed frame, and a console under it that opens onto the page's logs.

Use it to show what generated code renders, a dev server's page or the HTML a model just wrote, beside the chat, where the reader can click through it and read its errors. For a still screenshot in a browser window on a landing page, use Safari: a mockup with no history and nothing to type into. In React, the toolbar is Buttons with Tooltips and an Input, the console a Collapsible, all from Radix UI.

Installation

Anatomy

WebPreview
├── WebPreviewNavigation
│   ├── WebPreviewNavigationButton   back, forward, reload, your own
│   └── WebPreviewUrl
├── WebPreviewBody                   the iframe, loading over it
└── WebPreviewConsole                the logs, colored by level

Usage

import {
  ArrowLeftIcon, ArrowRightIcon, RefreshCcwIcon,
} from "lucide-react";
import {
  WebPreview, WebPreviewBody, WebPreviewConsole, WebPreviewNavigation,
  WebPreviewNavigationButton, WebPreviewUrl,
} from "@/components/ui/web-preview";

<WebPreview className="h-96" defaultUrl="http://localhost:3000/">
  <WebPreviewNavigation>
    <WebPreviewNavigationButton action="back" tooltip="Go back">
      <ArrowLeftIcon aria-hidden="true" />
    </WebPreviewNavigationButton>
    <WebPreviewNavigationButton action="forward" tooltip="Go forward">
      <ArrowRightIcon aria-hidden="true" />
    </WebPreviewNavigationButton>
    <WebPreviewNavigationButton action="reload" tooltip="Reload">
      <RefreshCcwIcon aria-hidden="true" />
    </WebPreviewNavigationButton>
    <WebPreviewUrl />
  </WebPreviewNavigation>
  <WebPreviewBody />
  <WebPreviewConsole />
</WebPreview>

action gives a button its job in the preview's history: back and forward disable themselves at either end, and reload loads the page again. A button without one does what its handler says, like the first demo's open-in-a-new-tab and full-screen buttons.

Demos

Console

The page's own console.log, console.warn and uncaught errors land in WebPreviewConsole: a script in the page posts each one to its parent, and the demo adds it to logs. Warnings take the warning color and errors the destructive one, each with an icon, so the level doesn't rest on color alone. The console starts open here with defaultOpen; its trigger counts the lines.

Controlled

url and onUrlChange put the address in your state, so the list of pages beside the preview, the address field, the page's own links and Back all move the same address. A link in srcDoc HTML would open your own site's path in the frame, so the page posts the address it wants instead. Every address set from outside is a visit too: Back returns from it.

Loading

loading covers the frame while it's set: here a spinner while the model writes the next version of the page. It shows whatever you pass, for as long as you pass it, so set it from your own state, such as a tool call that hasn't finished. Press the sparkles to build another version.

AI SDK

A model builds a page through a tool: createPage here, whose output is the HTML. Give the HTML to WebPreviewBody as srcDoc once the call is done, and cover the frame while it runs.

const { messages } = useChat();

const page = messages
  .flatMap((message) => message.parts)
  .filter((part) => part.type === "tool-createPage")
  .at(-1);

return (
  <WebPreviewBody
    loading={
      page && page.state !== "output-available" ? <Spinner /> : undefined
    }
    srcDoc={page?.state === "output-available" ? page.output.html : undefined}
  />
);

When the tool starts a dev server in a sandbox instead, it returns the server's address: pass that as url, or as defaultUrl the first time, and leave srcDoc out.

Migrating from AI SDK Elements

If you added Web Preview from AI SDK Elements (opens in a new tab), your project has a components/ai-elements/web-preview.tsx. Install this one, import from @/components/ui/web-preview instead, and delete the old file. Every part keeps its name, and defaultUrl, onUrlChange, tooltip, loading and logs work as before. What differs:

• WebPreview takes url too, to control the address, and keeps a history: onUrlChange also fires on back and forward.
• WebPreviewNavigationButton takes action (back, forward, reload); without it, it does what your handler says, as before.
• WebPreviewBody takes srcDoc for HTML, and drops allow-same-origin from the sandbox for it. loading covers the frame instead of sitting under it.
• WebPreviewConsole is the Collapsible itself: open it with its own props, not a shared context. Times read hh:mm:ss on a 24-hour clock in every locale.

FAQ

API Reference