Agent Screen

Agent Screen frames a capture of an agent's screen, for agents that drive a browser or a desktop. The frame opens a larger viewer, where you can add your own controls, such as a button to take over.

It shows the image or video you pass. Connecting to the agent and keeping the capture current are your application's work, reported through status.

Installing agent-screen brings Dialog along as a registry dependency.

Status

live shows the capture. connecting shows a spinner and a message. offline shows a message and no capture. The frame can be opened only while live.

Media

Pass an image by default, or set mediaType to video. A video does not start by itself: the viewer gives it controls, and the frame shows a still.

Actions

actions are placed in the viewer's header. What they do is yours.

The frame is a button named "Open: " followed by the title, and the Open label is always visible, so opening does not depend on hover. The viewer is the Honest UI Dialog: it traps focus, closes on Escape, and returns focus to the frame.

alt is required. Describe what is on the screen, and update it as the screen changes if people rely on it. The connecting and offline messages are statuses.

import { AgentScreen } from "@/components/ai/agent-screen"

<AgentScreen
  title="Research agent's screen"
  status={session.status}
  src={session.captureUrl}
  alt={session.captureDescription}
  actions={<Button variant="secondary" size="sm" onClick={session.takeOver}>Take over</Button>}
/>

Connecting and offline

The two states with no capture.

AgentScreen

Accepts native div props beyond those listed.