Compare commits

..
Author SHA1 Message Date
Chris Tate 61a7717c3e usage with agents 2026-01-12 00:21:08 -06:00
10 changed files with 51 additions and 369 deletions
+16 -22
View File
@@ -55,13 +55,13 @@ agent-browser find role button click --name "Submit"
### Core Commands
```bash
agent-browser open <url> # Navigate to URL (aliases: goto, navigate)
agent-browser open <url> # Navigate to URL
agent-browser click <sel> # Click element
agent-browser dblclick <sel> # Double-click element
agent-browser focus <sel> # Focus element
agent-browser type <sel> <text> # Type into element
agent-browser fill <sel> <text> # Clear and fill
agent-browser press <key> # Press key (Enter, Tab, Control+a) (alias: key)
agent-browser press <key> # Press key (Enter, Tab, Control+a)
agent-browser keydown <key> # Hold key down
agent-browser keyup <key> # Release key
agent-browser hover <sel> # Hover element
@@ -69,14 +69,14 @@ agent-browser select <sel> <val> # Select dropdown option
agent-browser check <sel> # Check checkbox
agent-browser uncheck <sel> # Uncheck checkbox
agent-browser scroll <dir> [px] # Scroll (up/down/left/right)
agent-browser scrollintoview <sel> # Scroll element into view (alias: scrollinto)
agent-browser scrollintoview <sel> # Scroll element into view
agent-browser drag <src> <tgt> # Drag and drop
agent-browser upload <sel> <files> # Upload files
agent-browser screenshot [path] # Take screenshot (--full for full page)
agent-browser pdf <path> # Save as PDF
agent-browser snapshot # Accessibility tree with refs (best for AI)
agent-browser eval <js> # Run JavaScript
agent-browser close # Close browser (aliases: quit, exit)
agent-browser close # Close browser
```
### Get Info
@@ -129,9 +129,9 @@ agent-browser find nth 2 "a" text
### Wait
```bash
agent-browser wait <selector> # Wait for element to be visible
agent-browser wait <ms> # Wait for time (milliseconds)
agent-browser wait --text "Welcome" # Wait for text to appear
agent-browser wait <selector> # Wait for element
agent-browser wait <ms> # Wait for time
agent-browser wait --text "Welcome" # Wait for text
agent-browser wait --url "**/dash" # Wait for URL pattern
agent-browser wait --load networkidle # Wait for load state
agent-browser wait --fn "window.ready === true" # Wait for JS condition
@@ -253,10 +253,6 @@ AGENT_BROWSER_SESSION=agent1 agent-browser click "#btn"
# List active sessions
agent-browser session list
# Output:
# Active sessions:
# -> default
# agent1
# Show current session
agent-browser session
@@ -397,17 +393,15 @@ agent-browser uses a client-daemon architecture:
The daemon starts automatically on first command and persists between commands for fast subsequent operations.
**Browser Engine:** Uses Chromium by default. The daemon also supports Firefox and WebKit via the Playwright protocol.
## Platforms
| Platform | Binary | Fallback |
|----------|--------|----------|
| macOS ARM64 | Native Rust | Node.js |
| macOS x64 | Native Rust | Node.js |
| Linux ARM64 | Native Rust | Node.js |
| Linux x64 | Native Rust | Node.js |
| Windows x64 | Native Rust | Node.js |
| macOS ARM64 | Native Rust | Node.js |
| macOS x64 | Native Rust | Node.js |
| Linux ARM64 | Native Rust | Node.js |
| Linux x64 | Native Rust | Node.js |
| Windows | - | Node.js |
## Usage with AI Agents
@@ -442,15 +436,15 @@ Core workflow:
For Claude Code, a [skill](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/best-practices) provides richer context:
```bash
cp -r node_modules/agent-browser/skills/agent-browser .claude/skills/
cp -r node_modules/agent-browser/skills/browsing-web .claude/skills/
```
Or download:
```bash
mkdir -p .claude/skills/agent-browser
curl -o .claude/skills/agent-browser/SKILL.md \
https://raw.githubusercontent.com/vercel-labs/agent-browser/main/skills/agent-browser/SKILL.md
mkdir -p .claude/skills/browsing-web
curl -o .claude/skills/browsing-web/SKILL.md \
https://raw.githubusercontent.com/vercel-labs/agent-browser/main/skills/browsing-web/SKILL.md
```
## License
+1 -1
View File
@@ -4,7 +4,7 @@ version = 4
[[package]]
name = "agent-browser"
version = "0.4.3"
version = "0.4.0"
dependencies = [
"libc",
"serde",
+1 -1
View File
@@ -1,6 +1,6 @@
[package]
name = "agent-browser"
version = "0.4.3"
version = "0.4.0"
edition = "2021"
description = "Fast browser automation CLI for AI agents"
license = "Apache-2.0"
+1 -90
View File
@@ -212,44 +212,6 @@ pub fn parse_command(args: &[String], flags: &Flags) -> Result<Value, ParseError
// === Wait ===
"wait" => {
// Check for --url flag: wait --url "**/dashboard"
if let Some(idx) = rest.iter().position(|&s| s == "--url" || s == "-u") {
let url = rest.get(idx + 1).ok_or_else(|| ParseError::MissingArguments {
context: "wait --url".to_string(),
usage: "wait --url <pattern>",
})?;
return Ok(json!({ "id": id, "action": "waitforurl", "url": url }));
}
// Check for --load flag: wait --load networkidle
if let Some(idx) = rest.iter().position(|&s| s == "--load" || s == "-l") {
let state = rest.get(idx + 1).ok_or_else(|| ParseError::MissingArguments {
context: "wait --load".to_string(),
usage: "wait --load <state>",
})?;
return Ok(json!({ "id": id, "action": "waitforloadstate", "state": state }));
}
// Check for --fn flag: wait --fn "window.ready === true"
if let Some(idx) = rest.iter().position(|&s| s == "--fn" || s == "-f") {
let expr = rest.get(idx + 1).ok_or_else(|| ParseError::MissingArguments {
context: "wait --fn".to_string(),
usage: "wait --fn <expression>",
})?;
return Ok(json!({ "id": id, "action": "waitforfunction", "expression": expr }));
}
// Check for --text flag: wait --text "Welcome"
if let Some(idx) = rest.iter().position(|&s| s == "--text" || s == "-t") {
let text = rest.get(idx + 1).ok_or_else(|| ParseError::MissingArguments {
context: "wait --text".to_string(),
usage: "wait --text <text>",
})?;
// Use getByText locator to wait for text to appear
return Ok(json!({ "id": id, "action": "wait", "selector": format!("text={}", text) }));
}
// Default: selector or timeout
if let Some(arg) = rest.get(0) {
if arg.parse::<u64>().is_ok() {
Ok(json!({ "id": id, "action": "wait", "timeout": arg.parse::<u64>().unwrap() }))
@@ -259,7 +221,7 @@ pub fn parse_command(args: &[String], flags: &Flags) -> Result<Value, ParseError
} else {
Err(ParseError::MissingArguments {
context: "wait".to_string(),
usage: "wait <selector|ms|--url|--load|--fn|--text>",
usage: "wait <selector|ms>",
})
}
}
@@ -1128,57 +1090,6 @@ mod tests {
assert_eq!(cmd["maxDepth"], 3);
}
// === Wait ===
#[test]
fn test_wait_selector() {
let cmd = parse_command(&args("wait #element"), &default_flags()).unwrap();
assert_eq!(cmd["action"], "wait");
assert_eq!(cmd["selector"], "#element");
}
#[test]
fn test_wait_timeout() {
let cmd = parse_command(&args("wait 5000"), &default_flags()).unwrap();
assert_eq!(cmd["action"], "wait");
assert_eq!(cmd["timeout"], 5000);
}
#[test]
fn test_wait_url() {
let cmd = parse_command(&args("wait --url **/dashboard"), &default_flags()).unwrap();
assert_eq!(cmd["action"], "waitforurl");
assert_eq!(cmd["url"], "**/dashboard");
}
#[test]
fn test_wait_load() {
let cmd = parse_command(&args("wait --load networkidle"), &default_flags()).unwrap();
assert_eq!(cmd["action"], "waitforloadstate");
assert_eq!(cmd["state"], "networkidle");
}
#[test]
fn test_wait_load_missing_state() {
let result = parse_command(&args("wait --load"), &default_flags());
assert!(result.is_err());
assert!(matches!(result.unwrap_err(), ParseError::MissingArguments { .. }));
}
#[test]
fn test_wait_fn() {
let cmd = parse_command(&args("wait --fn window.ready"), &default_flags()).unwrap();
assert_eq!(cmd["action"], "waitforfunction");
assert_eq!(cmd["expression"], "window.ready");
}
#[test]
fn test_wait_text() {
let cmd = parse_command(&args("wait --text Welcome"), &default_flags()).unwrap();
assert_eq!(cmd["action"], "wait");
assert_eq!(cmd["selector"], "text=Welcome");
}
// === Unknown command ===
#[test]
+6 -9
View File
@@ -1,6 +1,6 @@
{
"name": "agent-browser",
"version": "0.4.3",
"version": "0.4.0",
"description": "Headless browser automation CLI for AI agents",
"type": "module",
"main": "dist/daemon.js",
@@ -15,16 +15,13 @@
},
"scripts": {
"prepare": "husky",
"version:sync": "node scripts/sync-version.js",
"version": "npm run version:sync && git add cli/Cargo.toml",
"build": "tsc",
"build:native": "npm run version:sync && cargo build --release --manifest-path cli/Cargo.toml && node scripts/copy-native.js",
"build:linux": "npm run version:sync && docker compose -f docker/docker-compose.yml run --rm build-linux",
"build:macos": "npm run version:sync && (cargo build --release --manifest-path cli/Cargo.toml --target aarch64-apple-darwin & cargo build --release --manifest-path cli/Cargo.toml --target x86_64-apple-darwin & wait) && cp cli/target/aarch64-apple-darwin/release/agent-browser bin/agent-browser-darwin-arm64 && cp cli/target/x86_64-apple-darwin/release/agent-browser bin/agent-browser-darwin-x64",
"build:windows": "npm run version:sync && docker compose -f docker/docker-compose.yml run --rm build-windows",
"build:all-platforms": "npm run version:sync && (npm run build:linux & npm run build:windows & wait) && npm run build:macos",
"build:native": "cargo build --release --manifest-path cli/Cargo.toml && node scripts/copy-native.js",
"build:linux": "docker compose -f docker/docker-compose.yml run --rm build-linux",
"build:macos": "(cargo build --release --manifest-path cli/Cargo.toml --target aarch64-apple-darwin & cargo build --release --manifest-path cli/Cargo.toml --target x86_64-apple-darwin & wait) && cp cli/target/aarch64-apple-darwin/release/agent-browser bin/agent-browser-darwin-arm64 && cp cli/target/x86_64-apple-darwin/release/agent-browser bin/agent-browser-darwin-x64",
"build:windows": "docker compose -f docker/docker-compose.yml run --rm build-windows",
"build:all-platforms": "(npm run build:linux & npm run build:windows & wait) && npm run build:macos",
"build:docker": "docker build -t agent-browser-builder -f docker/Dockerfile.build .",
"release": "npm run version:sync && npm run build && npm run build:all-platforms && npm publish",
"start": "node dist/daemon.js",
"dev": "tsx src/daemon.ts",
"typecheck": "tsc --noEmit",
-43
View File
@@ -1,43 +0,0 @@
#!/usr/bin/env node
/**
* Syncs the version from package.json to all other config files.
* Run this script before building or releasing.
*/
import { readFileSync, writeFileSync } from "fs";
import { dirname, join } from "path";
import { fileURLToPath } from "url";
const __dirname = dirname(fileURLToPath(import.meta.url));
const rootDir = join(__dirname, "..");
// Read version from package.json (single source of truth)
const packageJson = JSON.parse(
readFileSync(join(rootDir, "package.json"), "utf-8")
);
const version = packageJson.version;
console.log(`Syncing version ${version} to all config files...`);
// Update Cargo.toml
const cargoTomlPath = join(rootDir, "cli/Cargo.toml");
let cargoToml = readFileSync(cargoTomlPath, "utf-8");
const cargoVersionRegex = /^version\s*=\s*"[^"]*"/m;
const newCargoVersion = `version = "${version}"`;
if (cargoVersionRegex.test(cargoToml)) {
const oldMatch = cargoToml.match(cargoVersionRegex)?.[0];
if (oldMatch !== newCargoVersion) {
cargoToml = cargoToml.replace(cargoVersionRegex, newCargoVersion);
writeFileSync(cargoTomlPath, cargoToml);
console.log(` Updated cli/Cargo.toml: ${oldMatch} -> ${newCargoVersion}`);
} else {
console.log(` cli/Cargo.toml already up to date`);
}
} else {
console.error(" Could not find version field in cli/Cargo.toml");
process.exit(1);
}
console.log("Version sync complete.");
@@ -1,5 +1,5 @@
---
name: agent-browser
name: browsing-web
description: Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
---
+19 -100
View File
@@ -111,47 +111,6 @@ interface SnapshotData {
refs?: Record<string, { role: string; name?: string }>;
}
/**
* Convert Playwright errors to AI-friendly messages
*/
function toAIFriendlyError(error: unknown, selector: string): Error {
const message = error instanceof Error ? error.message : String(error);
// Handle strict mode violation (multiple elements match)
if (message.includes('strict mode violation')) {
// Extract count if available
const countMatch = message.match(/resolved to (\d+) elements/);
const count = countMatch ? countMatch[1] : 'multiple';
return new Error(
`Selector "${selector}" matched ${count} elements. ` +
`Run 'snapshot' to get updated refs, or use a more specific CSS selector.`
);
}
// Handle element not found
if (
message.includes('waiting for') &&
(message.includes('to be visible') || message.includes('Timeout'))
) {
return new Error(
`Element "${selector}" not found or not visible. ` +
`Run 'snapshot' to see current page elements.`
);
}
// Handle element not interactable
if (message.includes('intercepts pointer events') || message.includes('not visible')) {
return new Error(
`Element "${selector}" is not interactable (may be hidden or covered). ` +
`Try scrolling it into view or check if a modal/overlay is blocking it.`
);
}
// Return original error for unknown cases
return error instanceof Error ? error : new Error(message);
}
/**
* Execute a command and return a response
*/
@@ -425,15 +384,11 @@ async function handleClick(command: ClickCommand, browser: BrowserManager): Prom
// Support both refs (@e1) and regular selectors
const locator = browser.getLocator(command.selector);
try {
await locator.click({
button: command.button,
clickCount: command.clickCount,
delay: command.delay,
});
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
await locator.click({
button: command.button,
clickCount: command.clickCount,
delay: command.delay,
});
return successResponse(command.id, { clicked: true });
}
@@ -441,18 +396,14 @@ async function handleClick(command: ClickCommand, browser: BrowserManager): Prom
async function handleType(command: TypeCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector);
try {
if (command.clear) {
await locator.fill('');
}
await locator.pressSequentially(command.text, {
delay: command.delay,
});
} catch (error) {
throw toAIFriendlyError(error, command.selector);
if (command.clear) {
await locator.fill('');
}
await locator.pressSequentially(command.text, {
delay: command.delay,
});
return successResponse(command.id, { typed: true });
}
@@ -605,22 +556,14 @@ async function handleSelect(command: SelectCommand, browser: BrowserManager): Pr
const locator = browser.getLocator(command.selector);
const values = Array.isArray(command.values) ? command.values : [command.values];
try {
await locator.selectOption(values);
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
await locator.selectOption(values);
return successResponse(command.id, { selected: values });
}
async function handleHover(command: HoverCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector);
try {
await locator.hover();
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
await locator.hover();
return successResponse(command.id, { hovered: true });
}
@@ -700,42 +643,26 @@ async function handleWindowNew(
async function handleFill(command: FillCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector);
try {
await locator.fill(command.value);
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
await locator.fill(command.value);
return successResponse(command.id, { filled: true });
}
async function handleCheck(command: CheckCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector);
try {
await locator.check();
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
await locator.check();
return successResponse(command.id, { checked: true });
}
async function handleUncheck(command: UncheckCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector);
try {
await locator.uncheck();
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
await locator.uncheck();
return successResponse(command.id, { unchecked: true });
}
async function handleUpload(command: UploadCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector);
const files = Array.isArray(command.files) ? command.files : [command.files];
try {
await locator.setInputFiles(files);
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
await locator.setInputFiles(files);
return successResponse(command.id, { uploaded: files });
}
@@ -744,21 +671,13 @@ async function handleDoubleClick(
browser: BrowserManager
): Promise<Response> {
const locator = browser.getLocator(command.selector);
try {
await locator.dblclick();
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
await locator.dblclick();
return successResponse(command.id, { clicked: true });
}
async function handleFocus(command: FocusCommand, browser: BrowserManager): Promise<Response> {
const locator = browser.getLocator(command.selector);
try {
await locator.focus();
} catch (error) {
throw toAIFriendlyError(error, command.selector);
}
await locator.focus();
return successResponse(command.id, { focused: true });
}
+3 -11
View File
@@ -95,20 +95,12 @@ export class BrowserManager {
const page = this.getPage();
// Build locator with exact: true to avoid substring matches
let locator: Locator;
// Parse the selector and create locator
if (refData.name) {
locator = page.getByRole(refData.role as any, { name: refData.name, exact: true });
return page.getByRole(refData.role as any, { name: refData.name });
} else {
locator = page.getByRole(refData.role as any);
return page.getByRole(refData.role as any);
}
// If an nth index is stored (for disambiguation), use it
if (refData.nth !== undefined) {
locator = locator.nth(refData.nth);
}
return locator;
}
/**
+3 -91
View File
@@ -24,8 +24,6 @@ export interface RefMap {
selector: string;
role: string;
name?: string;
/** Index for disambiguation when multiple elements have same role+name */
nth?: number;
};
}
@@ -131,7 +129,7 @@ const STRUCTURAL_ROLES = new Set([
function buildSelector(role: string, name?: string): string {
if (name) {
const escapedName = name.replace(/"/g, '\\"');
return `getByRole('${role}', { name: "${escapedName}", exact: true })`;
return `getByRole('${role}', { name: "${escapedName}" })`;
}
return `getByRole('${role}')`;
}
@@ -163,60 +161,12 @@ export async function getEnhancedSnapshot(
return { tree: enhancedTree, refs };
}
/**
* Track role+name combinations to detect duplicates
*/
interface RoleNameTracker {
counts: Map<string, number>;
/** Maps role+name key to array of ref IDs that use it */
refsByKey: Map<string, string[]>;
getKey(role: string, name?: string): string;
getNextIndex(role: string, name?: string): number;
trackRef(role: string, name: string | undefined, ref: string): void;
/** Get all role+name keys that have duplicates */
getDuplicateKeys(): Set<string>;
}
function createRoleNameTracker(): RoleNameTracker {
const counts = new Map<string, number>();
const refsByKey = new Map<string, string[]>();
return {
counts,
refsByKey,
getKey(role: string, name?: string): string {
return `${role}:${name ?? ''}`;
},
getNextIndex(role: string, name?: string): number {
const key = this.getKey(role, name);
const current = counts.get(key) ?? 0;
counts.set(key, current + 1);
return current;
},
trackRef(role: string, name: string | undefined, ref: string): void {
const key = this.getKey(role, name);
const refs = refsByKey.get(key) ?? [];
refs.push(ref);
refsByKey.set(key, refs);
},
getDuplicateKeys(): Set<string> {
const duplicates = new Set<string>();
for (const [key, refs] of refsByKey) {
if (refs.length > 1) {
duplicates.add(key);
}
}
return duplicates;
},
};
}
/**
* Process ARIA snapshot: add refs and apply filters
*/
function processAriaTree(ariaTree: string, refs: RefMap, options: SnapshotOptions): string {
const lines = ariaTree.split('\n');
const result: string[] = [];
const tracker = createRoleNameTracker();
// For interactive-only mode, we collect just interactive elements
if (options.interactive) {
@@ -229,43 +179,31 @@ function processAriaTree(ariaTree: string, refs: RefMap, options: SnapshotOption
if (INTERACTIVE_ROLES.has(roleLower)) {
const ref = nextRef();
const nth = tracker.getNextIndex(roleLower, name);
tracker.trackRef(roleLower, name, ref);
refs[ref] = {
selector: buildSelector(roleLower, name),
role: roleLower,
name,
nth, // Always store nth, we'll use it for duplicates
};
let enhanced = `- ${role}`;
if (name) enhanced += ` "${name}"`;
enhanced += ` [ref=${ref}]`;
// Only show nth in output if it's > 0 (for readability)
if (nth > 0) enhanced += ` [nth=${nth}]`;
if (suffix && suffix.includes('[')) enhanced += suffix;
result.push(enhanced);
}
}
// Post-process: remove nth from refs that don't have duplicates
removeNthFromNonDuplicates(refs, tracker);
return result.join('\n') || '(no interactive elements)';
}
// Normal processing with depth/compact filters
for (const line of lines) {
const processed = processLine(line, refs, options, tracker);
const processed = processLine(line, refs, options);
if (processed !== null) {
result.push(processed);
}
}
// Post-process: remove nth from refs that don't have duplicates
removeNthFromNonDuplicates(refs, tracker);
// If compact mode, remove empty structural elements
if (options.compact) {
return compactTree(result.join('\n'));
@@ -274,22 +212,6 @@ function processAriaTree(ariaTree: string, refs: RefMap, options: SnapshotOption
return result.join('\n');
}
/**
* Remove nth from refs that ended up not having duplicates
* This keeps single-element locators simple (no unnecessary .nth(0))
*/
function removeNthFromNonDuplicates(refs: RefMap, tracker: RoleNameTracker): void {
const duplicateKeys = tracker.getDuplicateKeys();
for (const [ref, data] of Object.entries(refs)) {
const key = tracker.getKey(data.role, data.name);
if (!duplicateKeys.has(key)) {
// Not a duplicate, remove nth to keep locator simple
delete refs[ref].nth;
}
}
}
/**
* Get indentation level (number of spaces / 2)
*/
@@ -301,12 +223,7 @@ function getIndentLevel(line: string): number {
/**
* Process a single line: add ref if needed, filter if requested
*/
function processLine(
line: string,
refs: RefMap,
options: SnapshotOptions,
tracker: RoleNameTracker
): string | null {
function processLine(line: string, refs: RefMap, options: SnapshotOptions): string | null {
const depth = getIndentLevel(line);
// Check max depth
@@ -356,22 +273,17 @@ function processLine(
if (shouldHaveRef) {
const ref = nextRef();
const nth = tracker.getNextIndex(roleLower, name);
tracker.trackRef(roleLower, name, ref);
refs[ref] = {
selector: buildSelector(roleLower, name),
role: roleLower,
name,
nth, // Always store nth, we'll clean up non-duplicates later
};
// Build enhanced line with ref
let enhanced = `${prefix}${role}`;
if (name) enhanced += ` "${name}"`;
enhanced += ` [ref=${ref}]`;
// Only show nth in output if it's > 0 (for readability)
if (nth > 0) enhanced += ` [nth=${nth}]`;
if (suffix) enhanced += suffix;
return enhanced;