Agent browser framePro

A small browser the agent drives while you watch, with take over and hand back.

Markdown

On this page

ProThe agent shops while you watch: each address types itself. Take over, then hand back.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/agent-browser-frame

Usage

tsx

import { AgentBrowserFrame } from "@/components/ui/chatcn/pro/agent-browser-frame"

<AgentBrowserFrame mode="agent" url={step.url} onTakeOver={takeOver} onHandBack={handBack}>
  <img src={step.screenshot} alt="" className="size-full" />
  <AgentCursor x={step.x} y={step.y} action={step.action} />
</AgentBrowserFrame>

Change url while the agent drives and the address bar types it out: select all, type, Enter. The page holds off your pointer while the agent drives and says how to take over; the inner edge is the accent while the agent drives and ink while you do. Compose the cursor, marks or an iframe inside.

Examples

States

ProConnecting, waiting for you, you driving, disconnected, and ended with long text.

Props

Prop	Type	Notes
`mode`	`"connecting" \| "agent" \| "paused" \| "user" \| "idle" \| "ended" \| "error"`	Who has the browser
`url`	`string`	Typed out on change while the agent drives
`tabs`, `activeTab`	`{ id, title, url?, loading? }[]`	The agent's tab carries its pointer
`loading`	`boolean \| number`	Indeterminate or 0 to 1
`typeUrl`, `typeMs`	`boolean`, `number`	Typing on, ms per character (capped under 1 s)
`pressed`	`"back" \| "forward" \| "reload"`	Shows the button the agent used
`pausedReason`, `errorText`	`ReactNode`	Why it waits, what broke
`onTakeOver`, `onHandBack`, `onReconnect`	`() => void`	Control
`onBack`, `onForward`, `onReload`	`() => void`	Yours in `user` and `idle`

Accessibility

Status changes are announced politely: Watching, Waiting for you, You are driving.
The pointer shield is hidden from assistive tech; Take over stays in the toolbar for keyboard users.

Motion

Typing runs at up to 28 ms a character and finishes within a second; it is off under reduced motion.
Control rings and overlays fade in 200 ms.