# Browser

Drives a real browser with Playwright using a snapshot-and-selector pattern to complete web tasks.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



<DocsBaseSwitcher base="flue" agent="browser-agent" />

<AgentPreview
  agent="browser-agent"
  framework="flue"
  inputFields="[
  {
    name: &#x22;task&#x22;,
    label: &#x22;Task&#x22;,
    placeholder:
      &#x22;Go to news.ycombinator.com and list the top 3 story titles.&#x22;,
    type: &#x22;textarea&#x22;,
  },
]"
/>

## Summary [#summary]

The **Browser Agent** completes tasks on the live web by driving a real Chromium
browser. It uses a snapshot-and-selector loop — the model sees a stable list of
interactive elements instead of brittle CSS — to navigate, click, and type. Reach
for it to automate flows, scrape interactive pages, or test UIs.

## Install [#install]

```bash
npx shadcn@latest add @agentcn/flue/browser-agent
```

## Composition [#composition]

```text
agents/
└── browser-agent.ts    # Agent with the four browser tools
tools/
└── browser.ts          # browser_goto / snapshot / click / type
lib/
└── browser.ts          # Shared Playwright page + snapshot helper
```

## Customization [#customization]

* **Use hosted browsers.** Set `BROWSER_CDP_URL` to run against Browserbase or a
  remote Chrome.
* **Richer snapshots.** Extend `lib/browser.ts` to include roles, ARIA, or
  bounding boxes.
* **Add actions.** Add tools for scrolling, file uploads, or screenshots.
* **Swap the model.** Change the `model` field on the agent.