Kanshō/Browser preview

Browser preview

Framed web preview with URL bar and viewport switcher for inspecting pages the agent is building.

Included in the single kansho full pack. Components are not offered as separate installs.

Controlled viewport switcher

🤖Agent Dashboard
http://localhost:3000/samples/agent-dashboard

Agent Dashboard

Agent execution platform — preview

Dashboard
Sessions
Settings
Logs

No content slot

Preview
http://localhost:3000
Preview content

Component documentation

Browser Preview

components/sandbox/browser-preview.tsx

Purpose

Frames caller content in decorative browser chrome and a switchable responsive viewport.

Appropriate use

Use to compare a preview at mobile, tablet, and desktop widths without leaving the documentation or sandbox surface.

Example

components/sandbox/browser-preview.tsx has a representative live example in the "Controlled viewport switcher" section on /components/browser-preview.

States

Viewport values are mobile, tablet, and desktop; selection can be controlled or internal, content is optional, and minimum height is configurable.

API and props

BrowserPreview accepts url, pageTitle, favicon, children, viewport, onViewportChange, onReload, minContentHeight, and className.

Dependencies

Direct imports are React, Lucide icons, and cn.

Accessibility

The viewport choices form a named radio group with roving Left/Right focus; reload is a named button only when onReload is supplied, and viewport-width motion is removed for reduced-motion preferences.

Limitations

It does not render a real browser, navigate the URL, emulate device features, or reload content without a host callback.

Source

Source: components/sandbox/browser-preview.tsx.

Full pack

components/sandbox/browser-preview.tsx is documented at /components/browser-preview and installs only through the single Kansho full pack; no individual component install is offered.