AI Web Preview
AI Web Preview
Overview
An embeddable web preview for AI and developer tools that renders a URL in an iframe with a navigation bar and a collapsible console area. Great for browsing references, rendering tool results, or showing generated pages inside your UI.
Installation
npx dedevs-ui@latest add ai-web-preview
Usage
"use client";
import { ChevronLeft, ChevronRight, RotateCcw, Terminal } from "lucide-react";
import {
AIWebPreview,
AIWebPreviewBody,
AIWebPreviewConsole,
AIWebPreviewNavigation,
AIWebPreviewNavigationButton,
AIWebPreviewUrl,
} from "@repo/ai/web-preview";
export default function Demo() {
return (
<AIWebPreview defaultUrl="https://example.com">
<AIWebPreviewNavigation>
<AIWebPreviewNavigationButton tooltip="Back" disabled>
<ChevronLeft className="h-4 w-4" />
</AIWebPreviewNavigationButton>
<AIWebPreviewNavigationButton tooltip="Forward" disabled>
<ChevronRight className="h-4 w-4" />
</AIWebPreviewNavigationButton>
<AIWebPreviewNavigationButton tooltip="Reload" onClick={() => location.reload()}>
<RotateCcw className="h-4 w-4" />
</AIWebPreviewNavigationButton>
<div className="mx-2 flex-1">
<AIWebPreviewUrl />
</div>
<AIWebPreviewNavigationButton tooltip="Console">
<Terminal className="h-4 w-4" />
</AIWebPreviewNavigationButton>
</AIWebPreviewNavigation>
<AIWebPreviewBody />
<AIWebPreviewConsole />
</AIWebPreview>
);
}Features
- Lightweight client component with iframe sandboxing
- Pluggable navigation actions via
AIWebPreviewNavigationButton - URL input with Enter-to-load via
AIWebPreviewUrl - Collapsible console panel for logs or diagnostics
- Tailwind-first styling, Shadcn UI primitives