React AI Web Preview

Live iframe preview with navigation controls. Build interactive AI-generated UIs with React, Next.js, and TypeScript, featuring URL navigation and console logging for shadcn/ui applications.

AI Elements

Radix UI

Trying to implement AI Elements?

Join our Discord community for help from other developers.

Live iframe preview with navigation controls for AI-generated UIs using React, Next.js, and TypeScript. UI generation without preview is useless. Users need to see what the AI actually built, not just trust a description. This free open source shadcn/ui component provides safe iframe embedding for your conversational AI applications using Vercel AI SDK in JavaScript frameworks.

Interactive web preview

Live iframe with navigation controls:

Loading component...

'use client';import { Button } from '@/components/ui/button';import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from '@/components/ui/collapsible';import { Input } from '@/components/ui/input';import {  Tooltip,  TooltipContent,  TooltipProvider,  TooltipTrigger,} from '@/components/ui/tooltip';import { cn } from '@/lib/utils';import { ChevronDownIcon } from 'lucide-react';import type { ComponentProps, ReactNode } from 'react';import { createContext, useContext, useState } from 'react';export type WebPreviewContextValue = {  url: string;  setUrl: (url: string) => void;  consoleOpen: boolean;  setConsoleOpen: (open: boolean) => void;};const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);const useWebPreview = () => {  const context = useContext(WebPreviewContext);  if (!context) {    throw new Error('WebPreview components must be used within a WebPreview');  }  return context;};export type WebPreviewProps = ComponentProps<'div'> & {  defaultUrl?: string;  onUrlChange?: (url: string) => void;};export const WebPreview = ({  className,  children,  defaultUrl = '',  onUrlChange,  ...props}: WebPreviewProps) => {  const [url, setUrl] = useState(defaultUrl);  const [consoleOpen, setConsoleOpen] = useState(false);  const handleUrlChange = (newUrl: string) => {    setUrl(newUrl);    onUrlChange?.(newUrl);  };  const contextValue: WebPreviewContextValue = {    url,    setUrl: handleUrlChange,    consoleOpen,    setConsoleOpen,  };  return (    <WebPreviewContext.Provider value={contextValue}>      <div        className={cn(          'flex size-full flex-col rounded-lg border bg-card',          className        )}        {...props}      >        {children}      </div>    </WebPreviewContext.Provider>  );};export type WebPreviewNavigationProps = ComponentProps<'div'>;export const WebPreviewNavigation = ({  className,  children,  ...props}: WebPreviewNavigationProps) => (  <div    className={cn('flex items-center gap-1 border-b p-2', className)}    {...props}  >    {children}  </div>);export type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {  tooltip?: string;};export const WebPreviewNavigationButton = ({  onClick,  disabled,  tooltip,  children,  ...props}: WebPreviewNavigationButtonProps) => (  <TooltipProvider>    <Tooltip>      <TooltipTrigger asChild>        <Button          className="h-8 w-8 p-0 hover:text-foreground"          disabled={disabled}          onClick={onClick}          size="sm"          variant="ghost"          {...props}        >          {children}        </Button>      </TooltipTrigger>      <TooltipContent>        <p>{tooltip}</p>      </TooltipContent>    </Tooltip>  </TooltipProvider>);export type WebPreviewUrlProps = ComponentProps<typeof Input>;export const WebPreviewUrl = ({  value,  onChange,  onKeyDown,  ...props}: WebPreviewUrlProps) => {  const { url, setUrl } = useWebPreview();  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {    if (event.key === 'Enter') {      const target = event.target as HTMLInputElement;      setUrl(target.value);    }    onKeyDown?.(event);  };  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {    onChange?.(event);  };  // Use defaultValue for uncontrolled input when no onChange is provided  if (!onChange && !value) {    return (      <Input        className="h-8 flex-1 text-sm"        defaultValue={url}        onKeyDown={handleKeyDown}        placeholder="Enter URL..."        {...props}      />    );  }  return (    <Input      className="h-8 flex-1 text-sm"      onChange={handleChange}      onKeyDown={handleKeyDown}      placeholder="Enter URL..."      value={value ?? url}      {...props}    />  );};export type WebPreviewBodyProps = ComponentProps<'iframe'> & {  loading?: ReactNode;};export const WebPreviewBody = ({  className,  loading,  src,  ...props}: WebPreviewBodyProps) => {  const { url } = useWebPreview();  return (    <div className="flex-1">      <iframe        className={cn('size-full', className)}        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"        src={(src ?? url) || undefined}        title="Preview"        {...props}      />      {loading}    </div>  );};export type WebPreviewConsoleProps = ComponentProps<'div'> & {  logs?: Array<{    level: 'log' | 'warn' | 'error';    message: string;    timestamp: Date;  }>;};export const WebPreviewConsole = ({  className,  logs = [],  children,  ...props}: WebPreviewConsoleProps) => {  const { consoleOpen, setConsoleOpen } = useWebPreview();  return (    <Collapsible      className={cn('border-t bg-muted/50 font-mono text-sm', className)}      onOpenChange={setConsoleOpen}      open={consoleOpen}      {...props}    >      <CollapsibleTrigger asChild>        <Button          className="flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50"          variant="ghost"        >          Console          <ChevronDownIcon            className={cn(              'h-4 w-4 transition-transform duration-200',              consoleOpen && 'rotate-180'            )}          />        </Button>      </CollapsibleTrigger>      <CollapsibleContent        className={cn(          'px-4 pb-4',          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in'        )}      >        <div className="max-h-48 space-y-1 overflow-y-auto">          {logs.length === 0 ? (            <p className="text-muted-foreground">No console output</p>          ) : (            logs.map((log, index) => (              <div                className={cn(                  'text-xs',                  log.level === 'error' && 'text-destructive',                  log.level === 'warn' && 'text-yellow-600',                  log.level === 'log' && 'text-foreground'                )}                key={`${log.timestamp.getTime()}-${index}`}              >                <span className="text-muted-foreground">                  {log.timestamp.toLocaleTimeString()}                </span>{' '}                {log.message}              </div>            ))          )}          {children}        </div>      </CollapsibleContent>    </Collapsible>  );};

The React component provides URL navigation bar, iframe sandbox for safe preview, and optional console logging. Built with TypeScript for type safety and designed for seamless integration in your JavaScript projects.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ai.json

bunx shadcn@latest add https://www.shadcn.io/registry/ai.json

Usage

import {
  WebPreview,
  WebPreviewNavigation,
  WebPreviewUrl,
  WebPreviewBody,
} from "@/components/ai/web-preview";

<WebPreview defaultUrl="https://example.com">
  <WebPreviewNavigation>
    <WebPreviewUrl />
  </WebPreviewNavigation>
  <WebPreviewBody />
</WebPreview>;

Why iframe instead of opening new tabs?

New tabs kill the workflow in React applications. Users lose context switching back and forth. Plus generated URLs are often temporary—bookmark a v0 link and it's dead in 24 hours in Next.js projects.

Embedded preview keeps everything in one place in TypeScript components. Users can test the generated interface, navigate around, and provide feedback without losing their conversation context in AI chat applications using JavaScript frameworks.

Usage with AI SDK

Generate and preview UI in real-time in React applications:

"use client";

import {
  WebPreview,
  WebPreviewNavigation,
  WebPreviewUrl,
  WebPreviewBody,
} from "@/components/ai/web-preview";
import {
  PromptInput,
  PromptInputTextarea,
  PromptInputSubmit,
} from "@/components/ai/prompt-input";
import { Loader } from "@/components/ai/loader";
import { useState } from "react";

export default function UIGenerator() {
  const [previewUrl, setPreviewUrl] = useState("");
  const [prompt, setPrompt] = useState("");
  const [isGenerating, setIsGenerating] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!prompt.trim()) return;

    setIsGenerating(true);
    try {
      const response = await fetch("/api/generate-ui", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prompt }),
      });

      const data = await response.json();
      setPreviewUrl(data.url);
      setPrompt("");
    } catch (error) {
      console.error("Generation failed:", error);
    } finally {
      setIsGenerating(false);
    }
  };

  return (
    <div className="flex flex-col h-full max-w-6xl mx-auto p-6">
      <div className="flex-1 mb-4">
        {isGenerating ? (
          <div className="flex flex-col items-center justify-center h-full">
            <Loader size={32} />
            <p className="mt-4 text-muted-foreground">Generating your UI...</p>
          </div>
        ) : previewUrl ? (
          <WebPreview defaultUrl={previewUrl} className="h-full">
            <WebPreviewNavigation>
              <WebPreviewUrl />
            </WebPreviewNavigation>
            <WebPreviewBody />
          </WebPreview>
        ) : (
          <div className="flex items-center justify-center h-full border-2 border-dashed rounded-lg">
            <p className="text-muted-foreground">
              Your generated UI will appear here
            </p>
          </div>
        )}
      </div>

      <PromptInput onSubmit={handleSubmit}>
        <PromptInputTextarea
          value={prompt}
          onChange={(e) => setPrompt(e.currentTarget.value)}
          placeholder="Describe the UI you want to create..."
          disabled={isGenerating}
        />
        <PromptInputSubmit
          status={isGenerating ? "streaming" : "ready"}
          disabled={!prompt.trim() || isGenerating}
        />
      </PromptInput>
    </div>
  );
}

Backend route for UI generation:

// app/api/generate-ui/route.ts
export async function POST(req: Request) {
  const { prompt } = await req.json();

  // Your UI generation logic here
  // This could use v0, CodeSandbox API, or custom generation

  // For demo, return a static URL
  const generatedUrl = `https://your-preview-service.com/preview/${Date.now()}`;

  return Response.json({
    url: generatedUrl,
    prompt,
  });
}

Examples

Preview with console logging

Debug generated UIs with console output:

Loading component...

'use client';import { Button } from '@/components/ui/button';import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from '@/components/ui/collapsible';import { Input } from '@/components/ui/input';import {  Tooltip,  TooltipContent,  TooltipProvider,  TooltipTrigger,} from '@/components/ui/tooltip';import { cn } from '@/lib/utils';import { ChevronDownIcon } from 'lucide-react';import type { ComponentProps, ReactNode } from 'react';import { createContext, useContext, useState } from 'react';export type WebPreviewContextValue = {  url: string;  setUrl: (url: string) => void;  consoleOpen: boolean;  setConsoleOpen: (open: boolean) => void;};const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);const useWebPreview = () => {  const context = useContext(WebPreviewContext);  if (!context) {    throw new Error('WebPreview components must be used within a WebPreview');  }  return context;};export type WebPreviewProps = ComponentProps<'div'> & {  defaultUrl?: string;  onUrlChange?: (url: string) => void;};export const WebPreview = ({  className,  children,  defaultUrl = '',  onUrlChange,  ...props}: WebPreviewProps) => {  const [url, setUrl] = useState(defaultUrl);  const [consoleOpen, setConsoleOpen] = useState(false);  const handleUrlChange = (newUrl: string) => {    setUrl(newUrl);    onUrlChange?.(newUrl);  };  const contextValue: WebPreviewContextValue = {    url,    setUrl: handleUrlChange,    consoleOpen,    setConsoleOpen,  };  return (    <WebPreviewContext.Provider value={contextValue}>      <div        className={cn(          'flex size-full flex-col rounded-lg border bg-card',          className        )}        {...props}      >        {children}      </div>    </WebPreviewContext.Provider>  );};export type WebPreviewNavigationProps = ComponentProps<'div'>;export const WebPreviewNavigation = ({  className,  children,  ...props}: WebPreviewNavigationProps) => (  <div    className={cn('flex items-center gap-1 border-b p-2', className)}    {...props}  >    {children}  </div>);export type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {  tooltip?: string;};export const WebPreviewNavigationButton = ({  onClick,  disabled,  tooltip,  children,  ...props}: WebPreviewNavigationButtonProps) => (  <TooltipProvider>    <Tooltip>      <TooltipTrigger asChild>        <Button          className="h-8 w-8 p-0 hover:text-foreground"          disabled={disabled}          onClick={onClick}          size="sm"          variant="ghost"          {...props}        >          {children}        </Button>      </TooltipTrigger>      <TooltipContent>        <p>{tooltip}</p>      </TooltipContent>    </Tooltip>  </TooltipProvider>);export type WebPreviewUrlProps = ComponentProps<typeof Input>;export const WebPreviewUrl = ({  value,  onChange,  onKeyDown,  ...props}: WebPreviewUrlProps) => {  const { url, setUrl } = useWebPreview();  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {    if (event.key === 'Enter') {      const target = event.target as HTMLInputElement;      setUrl(target.value);    }    onKeyDown?.(event);  };  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {    onChange?.(event);  };  // Use defaultValue for uncontrolled input when no onChange is provided  if (!onChange && !value) {    return (      <Input        className="h-8 flex-1 text-sm"        defaultValue={url}        onKeyDown={handleKeyDown}        placeholder="Enter URL..."        {...props}      />    );  }  return (    <Input      className="h-8 flex-1 text-sm"      onChange={handleChange}      onKeyDown={handleKeyDown}      placeholder="Enter URL..."      value={value ?? url}      {...props}    />  );};export type WebPreviewBodyProps = ComponentProps<'iframe'> & {  loading?: ReactNode;};export const WebPreviewBody = ({  className,  loading,  src,  ...props}: WebPreviewBodyProps) => {  const { url } = useWebPreview();  return (    <div className="flex-1">      <iframe        className={cn('size-full', className)}        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"        src={(src ?? url) || undefined}        title="Preview"        {...props}      />      {loading}    </div>  );};export type WebPreviewConsoleProps = ComponentProps<'div'> & {  logs?: Array<{    level: 'log' | 'warn' | 'error';    message: string;    timestamp: Date;  }>;};export const WebPreviewConsole = ({  className,  logs = [],  children,  ...props}: WebPreviewConsoleProps) => {  const { consoleOpen, setConsoleOpen } = useWebPreview();  return (    <Collapsible      className={cn('border-t bg-muted/50 font-mono text-sm', className)}      onOpenChange={setConsoleOpen}      open={consoleOpen}      {...props}    >      <CollapsibleTrigger asChild>        <Button          className="flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50"          variant="ghost"        >          Console          <ChevronDownIcon            className={cn(              'h-4 w-4 transition-transform duration-200',              consoleOpen && 'rotate-180'            )}          />        </Button>      </CollapsibleTrigger>      <CollapsibleContent        className={cn(          'px-4 pb-4',          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in'        )}      >        <div className="max-h-48 space-y-1 overflow-y-auto">          {logs.length === 0 ? (            <p className="text-muted-foreground">No console output</p>          ) : (            logs.map((log, index) => (              <div                className={cn(                  'text-xs',                  log.level === 'error' && 'text-destructive',                  log.level === 'warn' && 'text-yellow-600',                  log.level === 'log' && 'text-foreground'                )}                key={`${log.timestamp.getTime()}-${index}`}              >                <span className="text-muted-foreground">                  {log.timestamp.toLocaleTimeString()}                </span>{' '}                {log.message}              </div>            ))          )}          {children}        </div>      </CollapsibleContent>    </Collapsible>  );};

Features

Iframe-based preview with sandbox security in React applications
URL navigation bar with keyboard support for TypeScript components
Optional console logging for debugging in JavaScript frameworks
Responsive container adapting to content in Next.js projects
Context-based state management for sub-components
Loading states for async content
Keyboard navigation (Enter to navigate)
Safe iframe sandboxing with controlled permissions
Perfect for AI-generated UIs, conversational AI interfaces, and AI chat applications
Free open source component built for Next.js with shadcn/ui design system and AI Elements
Optimized for Vercel AI SDK streaming and AI-generated interfaces

API Reference

WebPreview

Container component managing preview state.

Prop	Type	Default	Description
`defaultUrl`	`string`	`""`	Initial URL to load
`onUrlChange`	`(url: string) => void`	-	Callback when URL changes
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	Standard div attributes

WebPreviewNavigation

Navigation bar container.

Prop	Type	Description
`className`	`string`	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	Standard div attributes

WebPreviewNavigationButton

Navigation control button with tooltip.

Prop	Type	Description
`tooltip`	`string`	Tooltip text on hover
`className`	`string`	Additional CSS classes
`...props`	`ComponentProps<typeof Button>`	Button component props

WebPreviewUrl

URL input field with Enter key navigation.

Prop	Type	Description
`value`	`string`	URL value (overrides context)
`onChange`	`ChangeEventHandler`	Input change handler
`onKeyDown`	`KeyboardEventHandler`	Keyboard event handler
`...props`	`ComponentProps<typeof Input>`	Input component props

WebPreviewBody

Iframe container for preview content.

Prop	Type	Description
`src`	`string`	URL to load (overrides context)
`loading`	`ReactNode`	Loading indicator overlay
`className`	`string`	Additional CSS classes
`...props`	`IframeHTMLAttributes<HTMLIFrameElement>`	Iframe attributes

WebPreviewConsole

Collapsible console for log output.

Prop	Type	Description
`logs`	`Array<{level, message, timestamp}>`	Console log entries
`className`	`string`	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	Standard div attributes

Keyboard interactions

Key	Description
`Enter`	Navigate to URL in input field
`Tab`	Move focus between navigation elements

Web preview gotchas that will frustrate you

CORS headers break everything: Generated URLs often block iframe embedding in React applications. X-Frame-Options: DENY kills your preview instantly. Check headers before embedding or users see blank frames in TypeScript components.

Sandbox restrictions are strict: Want to test localStorage in JavaScript implementations? Add allow-same-origin. Need forms? Add allow-forms. Too restrictive and features break, too loose and security suffers in Next.js projects.

Generated content timeouts: v0 URLs expire, CodeSandbox links die, temp hosting vanishes in React applications. Cache the actual HTML content, not just URLs, or previews become 404 graveyards.

Mobile viewport chaos: Desktop-generated UIs look broken on mobile in TypeScript frameworks. iPhone users see horizontal scrollbars everywhere. Test responsive behavior or add viewport controls.

HTTPS/HTTP mixed content: Secure sites can't load HTTP iframes in JavaScript applications. Generated content on HTTP breaks on HTTPS sites. Force HTTPS or provide fallback messaging in React projects.

Memory leaks with dynamic content: Switching between many generated previews without cleanup crashes browsers in Next.js implementations. Dispose of previous iframe content properly.

Integration with other components

WebPreview works seamlessly with PromptInput for generation requests in React applications. Use alongside Loader for generation states in Next.js projects. Combine with Tool to show generation steps. This free open source component integrates seamlessly with modern JavaScript frameworks.

React AI Web Preview

Interactive web preview

Installation

Usage

Why iframe instead of opening new tabs?

Usage with AI SDK

Examples

Preview with console logging

Features

API Reference

WebPreview

WebPreviewNavigation

WebPreviewNavigationButton

WebPreviewUrl

WebPreviewBody

WebPreviewConsole

Keyboard interactions

Web preview gotchas that will frustrate you

Integration with other components

Questions developers actually ask

On this page

React AI Web Preview

Reactai/web-preview

Reactai/web-preview

Is the iframe sandbox secure?

How do I handle CORS errors?

Can I preview local HTML content?

How do I capture console output from the iframe?

How do I test different screen sizes?

On this page