> For the complete documentation index, see [llms.txt](https://docs.codemate.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.codemate.ai/cora/configuration/browser-agent.md).

# Browser Agent

### Overview

The Browser Tool lets CORA take control of a real browser session. Once enabled, you can tell CORA to open your local frontend, click buttons, fill forms, scroll pages, extract content, and interact with any web interface exactly as a user would, but driven by your instructions.

<figure><img src="/files/vwluQ8q256zucAQMmyM2" alt=""><figcaption></figcaption></figure>

Common use cases:

* **Start your frontend and test it** tell CORA to run `npm run dev`, open `localhost:3000`, and interact with the UI on your behalf.
* **UI automation** navigate flows, trigger states, and verify behavior without writing test scripts.
* **Web scraping** instruct CORA to visit a page and extract structured data.
* **Visual debugging** CORA takes screenshots at each step so you can see exactly what it sees.

***

### Enabling the browser tool

1. Open **CORA** in your editor.
2. Click the **Settings** icon in the CORA panel.
3. Toggle **Enable browser tool** on.

CORA will now have access to a browser session for any task that requires it.

***

### Settings

#### Viewport size

Controls the browser window dimensions CORA uses when taking screenshots and interacting with pages.

| Option        | Dimensions | Best for                     |
| ------------- | ---------- | ---------------------------- |
| Small Desktop | 900 × 600  | Default most desktop layouts |

You can adjust this to match the viewport your app is designed for useful when testing responsive breakpoints.

#### Screenshot quality

Controls the fidelity of screenshots CORA captures at each browser step.

| Setting           | Trade-off                          |
| ----------------- | ---------------------------------- |
| Low               | Fewer tokens, faster responses     |
| **75% (default)** | Balanced clarity and token usage   |
| High              | Maximum clarity, higher token cost |

Increase quality if CORA is misreading fine UI details. Lower it if you're running long browser sessions and want to reduce token consumption.

***

### Remote browser connection (CDP)

By default, CORA launches a local browser session automatically. If you want CORA to connect to an **existing Chrome instance** instead for example, a browser already authenticated to a service, or a remote browser in a CI environment you can connect over the **Chrome DevTools Protocol (CDP)**.

#### Enable remote connection

1. In CORA Settings, toggle **Use remote browser connection** on.
2. Enter your CDP host in the field provided.
3. Click **Test Connection**. CORA will attempt to connect and confirm the session is reachable.

If you leave the field empty, CORA will auto-discover any Chrome instances running locally with remote debugging enabled.

### Example workflows

#### Start and test a local frontend

```
Start the dev server with `npm run dev`, then open localhost:3000,
click the Login button, and tell me if the form renders correctly.
```

CORA will run the dev server, open the browser, navigate to the page, interact with it, and report back with screenshots at each step.

#### Scrape a page

```
Go to https://example.com/pricing and extract all plan names and prices
into a JSON array.
```

#### Automate a UI flow

```
Open localhost:3000, sign in with test@example.com / password123,
navigate to the dashboard, and click "Create new project".
```