# 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".
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.codemate.ai/cora/configuration/browser-agent.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.