Browser session

Shows what the agent did in a browser, the page's responses, and the outcome inside its reply.

Loading preview…

Install

  1. 1

    Run this command in your Tailwind CSS project. It adds components/ai/browser-session-default.tsx and installs its dependencies.

    $ npx shadcn@latest add https://gradientdeck.com/ai-components/r/browser-session-default.json

Usage & API

Example

browser-session-default.tsx
import { BrowserSession } from "@/components/ai/browser-session-default"

<BrowserSession
  site="…"
  steps={[]}
  status="running"
/>

Props BrowserSession

PropType & descriptionRequired
sitestringRequired
stepsBrowserStep[]Required
status"running" | "complete" | "failed"Required
summarystringA brief result shown when the session is collapsed.Optional
urlstringOptional link to the page the agent worked on.Optional
defaultOpenbooleanOptional

Dependencies

  • React
  • Tailwind CSS
  • lucide-react
Implementation notes

Browser session takes site, steps, status, and optional summary, url and defaultOpen. A step has id, label, status and optional detail. The header button toggles the list. Collapsed, a running visit shows the latest step whose status is running, or the last step, or Opening the page if there is nothing to show. A finished collapsed visit shows summary if you passed it, otherwise that same current label, otherwise No actions recorded. Open, every step is a row: a spinner, an alert, or a check, then label, then detail when it exists. Failed status on the session and failed status on a step are independent. A session can be running while one earlier step is already failed, if that is the array you pass.

Choosing a layout

Use the session when the agent opened a real site and the reply should say what it clicked and what the page said back. detail is the place for that observation: a settings label it found, a confirmation the page showed, a URL it landed on. summary is the one line a collapsed, finished visit leaves behind, so the thread can stay short. Open the list when the path matters. Keep a failed step's detail, because a stopped visit with only a status icon does not say which action failed.

Use the action log when you know the upcoming actions and want them visible before they run. pending is that future row. The session list does not have a pending status. Its steps are done, running or failed, and a step you have not started yet simply is not in the array. Do not use either layout for a web search. Search results are pages the agent found, not clicks inside one product. A tool call can record a browser tool's raw payload when you need the arguments, but it will not read as a visit.

What is the difference between summary and a step's detail?

detail belongs to one step and is shown under that step's label when the session is open. summary is a single line for the whole visit, shown only when the session is collapsed and status is not running. A running collapsed session ignores summary and shows the current step label instead. Leave summary out and a finished collapsed session falls back to the last step's label.

How do I show steps the agent has not taken yet?

Use the action log and set those events to pending. The action stays visible and detail stays hidden. The session variant has no pending value. Omit steps you have not started, then append them, usually first as running and later as done or failed.

Tool call3 variants

Shows a tool the agent called, with its arguments, status and result. Use it inside a reply wherever the agent acts.

Web search2 variants

The query the agent searched for, a loading state while it runs, then the results with their sites.

Terminal2 variants

A shell command the agent ran, as one line in its reply: the last few lines tail underneath while it runs, then the result, with the full output when opened.