> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agentastic.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Give agents browser control with browser-use
> Install the browser-use skill to let Claude Code or Codex navigate, inspect, and interact with Agentastic's built-in browser from the terminal.
Agentastic's built-in browser can be driven programmatically by AI agents via `dev browser` commands. The browser-use skill is a markdown document that you install into your agent's skill directory — once it is there, the agent knows what commands are available and how to use them. With the skill active, the agent can open pages, snapshot the DOM, click elements, fill forms, read console errors, check cookies and storage, and verify UI state, all without leaving the terminal. For more on the browser itself, see the [browser feature overview](/features/browser).
## Quick install
Run these two commands to create the skills directory and download the skill file:
```bash theme={null}
mkdir -p ~/.claude/skills/browser-use
curl -fsSL https://agentastic.dev/skills/browser-use.md \
-o ~/.claude/skills/browser-use/SKILL.md
```
```bash theme={null}
mkdir -p ~/.codex/skills/browser-use
curl -fsSL https://agentastic.dev/skills/browser-use.md \
-o ~/.codex/skills/browser-use/SKILL.md
```
After installing, ask your agent to use the skill:
> "Use browser-use to open localhost:3000, snapshot the page, and verify the new header."
## Alternative: Use the hosted skill URL
Instead of downloading the file, you can point your agent directly at the hosted skill URL. This approach always gives the agent the latest version of the skill:
```
https://agentastic.dev/skills/browser.md
```
Tell your agent:
> "Read [https://agentastic.dev/skills/browser.md](https://agentastic.dev/skills/browser.md) to learn how to use the browser, then check the UI at localhost:3000."
For Claude Code, you can also pre-authorize `dev browser` commands in your project's `.claude/settings.json` so the agent does not have to ask for permission each time:
```json theme={null}
{
"permissions": {
"allow": ["Bash(dev browser *)"]
}
}
```
## Add the skill to a project
For team projects, commit the skill file directly into the repository so every agent that works on the project picks it up automatically:
```bash theme={null}
mkdir -p .claude/skills/browser
curl -o .claude/skills/browser/SKILL.md https://agentastic.dev/skills/browser.md
```
When the skill file is present at `.claude/skills/browser/SKILL.md`, Claude Code uses auto-discovery to load it. The `description` field in the file tells the agent when to activate — so when you ask it to "check the UI" or "test the login page", it loads the skill without any extra instructions from you.
The project-level skill is the right choice for most teams. It is checked into git and shared with everyone who works on the project. Use the hosted URL when you want to give an agent browser capabilities quickly without committing any files.
## What the agent can do
The browser skill teaches agents 70+ commands across these categories:
| Category | Commands |
| ------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **Navigate** | `navigate`, `back`, `forward`, `reload` |
| **Inspect** | `snapshot`, `screenshot`, `highlight` |
| **Interact** | `click`, `dblclick`, `fill`, `type`, `press`, `keydown`, `keyup`, `hover`, `focus`, `check`, `uncheck`, `select`, `scroll` |
| **Wait** | `wait selector`, `wait text`, `wait url`, `wait load` |
| **Query** | `get url/title/text/html/value/attr/count/box/styles`, `is visible/enabled/checked` |
| **Find** | `find role/text/label/placeholder/testid/alt/title/first/last/nth` |
| **Console** | `console list`, `console errors`, `console clear`, `errors list` |
| **Dialogs** | `dialog accept`, `dialog dismiss` |
| **Cookies** | `cookies get`, `cookies set`, `cookies clear` |
| **Storage** | `storage get`, `storage set`, `storage clear` |
| **State** | `state save`, `state load` |
| **Frames** | `frame select`, `frame main` |
| **Tabs** | `list`, `open`, `close`, `focus_tab`, `tab new/list/switch/close` |
| **Injection** | `addinitscript`, `addscript`, `addstyle` |
| **Downloads** | `download wait` |
See the [Browser CLI reference](/reference/dev-browser) for detailed documentation on every command.
## Usage examples
Ask: *"Open localhost:3000 in the browser and check if the new header shows up."*
The agent runs:
```bash theme={null}
dev browser navigate "http://localhost:3000"
dev browser wait load
dev browser snapshot
dev browser is visible ".new-header"
dev browser get text ".new-header h1"
```
Ask: *"Test the signup form at localhost:3000/signup with a fake user."*
The agent runs:
```bash theme={null}
dev browser navigate "http://localhost:3000/signup"
dev browser wait load
dev browser snapshot
dev browser fill "@e2" "Jane Doe"
dev browser fill "@e3" "jane@example.com"
dev browser fill "@e4" "Password123!"
dev browser click "@e5"
dev browser wait url "/welcome" --timeout 5000
dev browser get title
dev browser console errors
```
Element references like `@e2` come from the snapshot output — the agent reads them and uses them to target specific elements on the page.
Ask: *"Check what cookies and local storage the site is setting."*
The agent runs:
```bash theme={null}
dev browser navigate "http://localhost:3000"
dev browser wait load
dev browser cookies get
dev browser storage get local
dev browser storage get session
```
Ask: *"The button on the homepage looks broken, check what CSS is applied."*
The agent runs:
```bash theme={null}
dev browser navigate "http://localhost:3000"
dev browser wait load
dev browser snapshot
dev browser get styles "@e5" "display,padding,margin,background-color,border"
dev browser get box "@e5"
dev browser is visible "@e5"
```
Ask: *"Click the delete button and accept the confirmation."*
The agent pre-configures the dialog response before triggering the action:
```bash theme={null}
dev browser dialog accept
dev browser click "@e7"
dev browser wait text "Deleted successfully"
```
Ask: *"Reload the page and check for any console errors."*
The agent runs:
```bash theme={null}
dev browser reload
dev browser wait load
dev browser console errors
dev browser errors list
```
## Scope options
Choose where to install the skill based on who should have access to it:
| Location | Who gets it | Best for |
| ----------------------------------------------- | --------------------------- | -------------------------------- |
| `.claude/skills/browser/SKILL.md` | Any agent in this project | Project-specific browser testing |
| `~/.claude/skills/browser/SKILL.md` | Any agent on your machine | All your projects |
| URL: `https://agentastic.dev/skills/browser.md` | Any agent you share it with | Quick setup, always up-to-date |
## Customizing the skill
You can extend the downloaded skill file with project-specific notes. Add them at the end of the file so the agent loads them alongside the standard instructions:
```markdown theme={null}
## Project-specific notes
- Dev server runs on port 5173 (Vite)
- Login credentials for testing: user@test.com / test1234
- The app uses React Router — always `wait url` after navigation
- Prefer `data-testid` attributes: use `find testid "submit-btn"` instead of CSS selectors
```
## Compatibility
| Agent | Support level |
| ------------ | --------------------------------------------------------------------------------------- |
| Claude Code | Full support — auto-discovery and auto-invocation |
| Other agents | Can read the skill file as context via URL; may need manual `dev browser` command usage |
The `dev browser` commands work from any terminal session inside Agentastic, regardless of which agent is running. The `AGENTASTIC_SOCKET_PATH` environment variable is injected automatically into every Agentastic terminal — agents do not need any additional setup to connect.