fix: use correct unscoped agent-browser package name by jeffscottward · Pull Request #77 · affaan-m/everything-claude-code

jeffscottward · 2026-01-26T01:59:46Z

Summary

This PR fixes the agent-browser documentation to match the actual package API:

Package name: Changed from @anthropic-ai/agent-browser to agent-browser (Vercel Labs package)
Export name: Changed from AgentBrowser to BrowserManager (correct export)
API usage: Updated to show the actual CLI-based API with snapshot + refs system

Problem

The previous documentation showed a fictional semantic API:

import { AgentBrowser } from 'agent-browser'
const browser = new AgentBrowser()
await browser.click('the login button')  // This doesn't exist!

The actual agent-browser package from Vercel is primarily a CLI tool that uses element references, not semantic selectors.

Changes

Installation

npm install agent-browser → npm install -g agent-browser
Added agent-browser install step for Chromium

CLI Usage (Primary)

Shows the actual snapshot + refs workflow:

agent-browser open https://example.com
agent-browser snapshot -i  # Returns [ref=e1], [ref=e2], etc.
agent-browser click @e1
agent-browser fill @e2 "[email protected]"

Programmatic API (Advanced)

Shows the correct BrowserManager import for advanced use:

import { BrowserManager } from 'agent-browser'
const browser = new BrowserManager()
await browser.launch({ headless: true })

References

Fixes the CodeRabbit review comment about incorrect API usage.

🤖 Generated with Claude Code

Summary by CodeRabbit

Documentation
- Switched installation and usage guidance to the global CLI approach and updated examples.
- Renamed and expanded “Agent Browser” docs to emphasize CLI-driven scripting and shell-based interactions.
- Added examples for low-level control (screencast, mouse/keyboard events) and programmatic CLI usage.
- Clarified continuity with the “Agent Browser with Claude Code” guidance and skill availability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

The @anthropic-ai/agent-browser package does not exist on npm. The correct package is the unscoped 'agent-browser' from Vercel Labs (v0.7.6). Fixes the issue noted in PR affaan-m#75 review comment. Co-Authored-By: Claude Opus 4.5 <[email protected]>

coderabbitai · 2026-01-26T02:00:15Z

📝 Walkthrough

Walkthrough

Rewrote documentation and examples to favor a CLI-first approach for Agent Browser: installation now uses the global agent-browser CLI, examples switch from importing AgentBrowser to shell-based execSync usage, and advanced examples introduce BrowserManager and low-level screencast/input APIs in scripts.

Changes

Cohort / File(s)	Summary
Documentation & Examples `agents/e2e-runner.md`	Replaced scoped package install/imports with global `agent-browser` CLI usage; renamed sections (e.g., “Agent Browser Usage” → “Agent Browser in Scripts”); added CLI-driven examples (`agent-browser click` @e1``) and shell-based `execSync` snippets.
Programmatic / Advanced Examples `agents/e2e-runner.md` (advanced sections)	Swapped high-level `AgentBrowser` instance examples for `BrowserManager` and low-level APIs: added screencast (`startScreencast`) and input injection examples (`injectMouseEvent`, `injectKeyboardEvent`) and guidance for using Claude Code skills.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    participant DevScript as Dev Script (execSync)
    participant CLI as agent-browser CLI
    participant Manager as BrowserManager
    participant Browser as Headless Browser
    participant Model as Claude / Agent

    DevScript->>CLI: run CLI command (e.g., click `@e1`)
    CLI->>Manager: forward command / start session
    Manager->>Browser: perform action / start screencast
    Browser->>Manager: event / frame data
    Manager->>Model: send context / observations
    Model->>Manager: return decisions
    Manager->>Browser: inject input events
    Browser->>DevScript: output / screencast file

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I hopped through docs with a cheerful cheer,
The CLI now leads, the path is clear,
From imports to exec, I twitched my nose,
Screencasts and clicks in tidy rows,
A little hop forward — hooray, let’s go! 🥕

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: correcting references from the scoped package name '@anthropic-ai/agent-browser' to the correct unscoped package name 'agent-browser'.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@agents/e2e-runner.md`:
- Line 32: The file currently imports and uses AgentBrowser but the package
exports BrowserManager; update the import statement to import { BrowserManager }
instead of { AgentBrowser } and replace all usages of the AgentBrowser symbol
(constructor calls, type annotations, variables like agentBrowser, new
AgentBrowser(), method calls on that instance) with BrowserManager (e.g., const
browser = new BrowserManager()) so all references match the package API.

agents/e2e-runner.md

- Change AgentBrowser to BrowserManager (correct export name) - Update documentation to show actual CLI-based usage pattern - Add snapshot + refs system examples (the real agent-browser API) - Add programmatic BrowserManager API for advanced use cases - Show CLI wrapper approach for script integration The agent-browser package from Vercel is primarily a CLI tool, not a JavaScript library with semantic methods. This corrects the documentation to match the actual package API. Fixes CodeRabbit review comment about incorrect import/export. Co-Authored-By: Claude Opus 4.5 <[email protected]>

jeffscottward · 2026-01-26T02:23:02Z

Thanks for the detailed review @coderabbitai!

I've pushed a new commit that addresses the API mismatch issue. The fix goes beyond just renaming AgentBrowser to BrowserManager:

Updated the import to use BrowserManager (the correct export)
Replaced the fictional semantic API with the actual CLI-based workflow
Added the snapshot + refs system documentation (how agent-browser actually works)
Included the programmatic BrowserManager API for advanced use cases

The key insight is that agent-browser is primarily a CLI tool, not a JavaScript library with semantic methods like browser.click('the login button'). The actual API uses element references (@e1, @e2) from snapshot output.

Please re-review when you get a chance!

coderabbitai · 2026-01-26T02:25:06Z

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Read the updated e2e-runner.md file to review the changes
cat agents/e2e-runner.md

Length of output: 22400

🌐 Web query:

agent-browser npm package Vercel Labs BrowserManager API

💡 Result:

agent-browser is an npm package from vercel-labs that ships a CLI plus a small programmatic API centered around BrowserManager. It’s primarily a Playwright-backed browser manager used by the CLI, but you can import and use it directly. [1][2]

Install

Global CLI: npm install -g agent-browser then agent-browser install (downloads Chromium). [1]
In serverless, you can point it at a custom Chromium build via executablePath. [2]

`BrowserManager` (programmatic API)

Example usage shown in the project docs/readme: [1][2]

import { BrowserManager } from 'agent-browser';

const browser = new BrowserManager();
await browser.launch({ headless: true });
await browser.navigate('https://example.com');

// optional: stream frames (screencast)
await browser.startScreencast((frame) => {
  // frame.data: base64 image; frame.metadata: viewport info
}, { format: 'jpeg', quality: 80, maxWidth: 1280, maxHeight: 720 });

// optional: inject input
await browser.injectMouseEvent({ type: 'mousePressed', x: 100, y: 200, button: 'left' });
await browser.injectKeyboardEvent({ type: 'keyDown', key: 'Enter', code: 'Enter' });

await browser.stopScreencast();

Recent note

As of v0.7.1 (January 2026), the npm package includes native binaries for major platforms (fixing “No binary found” install issues). [3]

Sources: [1] [2] [3]

🌐 Web query:

agent-browser CLI commands snapshot refs `@e1` element references

💡 Result:

agent-browser uses snapshot refs to make element targeting deterministic:

Run a snapshot to get an accessibility-tree listing with refs:
- agent-browser snapshot (full tree)
- agent-browser snapshot -i (interactive only; recommended)
- Useful options: -c (compact), -d <n> (depth), -s "<css>" (scope to a selector), and --json (machine-readable output with a refs map). [1], [2]
The snapshot output includes elements like:
- ... [ref=e1], ... [ref=e2]
  You then reference that exact element by prefixing the ref with @ (e.g., @e1). [1], [3]

Common CLI commands that accept a selector/ref (<sel>) include:

agent-browser click @e2``
agent-browser fill @e3 "text"
agent-browser get text @e1``
(Also: hover, dblclick, etc.) [3], [4]

Important: Refs are tied to the most recent snapshot—after navigation or DOM changes, take a new snapshot to get updated refs. [2]

Sources: [1] [2] [3] [4]

@jeffscottward Excellent work on these corrections! 🎉

I've verified your changes against the official agent-browser documentation, and everything looks accurate:

✅ Correct Import: BrowserManager is indeed the right export from 'agent-browser'

✅ CLI-First Workflow: You're absolutely right that it's primarily a CLI tool. The snapshot + refs system is the core interaction model:

agent-browser snapshot -i produces interactive elements with refs
Elements are referenced as @e1, @e2, etc.
Commands like click @e1``, fill @e2` "text"` are the correct syntax

✅ Programmatic API: The BrowserManager API you documented is accurate:

launch(), navigate() for browser control
startScreencast() for viewport streaming
injectMouseEvent() and injectKeyboardEvent() for low-level events

✅ CLI via execSync: The approach of using execSync to call agent-browser commands from scripts is a practical pattern

This is a significant improvement over the previous version. The documentation now accurately reflects how agent-browser actually works, which will be much more useful for users trying to implement E2E testing.

Great attention to detail in catching and fixing the API mismatch!

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

675db95 feat: unify commands and skills (v1.2.0) ca584e2 fix: escape pipe in markdown table for markdownlint a44a055 fix: resolve ESLint errors and update tests for project-name fallback c9ef02b docs: add requirements section and hooks field warning 0c53ad8 Revert "docs: update shorthand to shortform terminology" c3430bd docs: add Traditional Chinese translation fbe2e56 docs: add simplified Chinese README 7c0bc25 feat: add comprehensive CI/CD pipeline 58a97c8 docs: update shorthand to shortform terminology 04ee208 docs: add plugin manifest validation notes e3a1306 fix: remove duplicate hooks declaration from plugin.json 81003b1 feat: use project name as session filename fallback 8996303 fix: prevent command injection in Prettier hook (affaan-m#102) 8894e1b docs: update README with skill-create and instinct commands 9bc587a feat: add skill-create and continuous-learning-v2 commands 0ced59a Merge pull request affaan-m#91 from Hor1zonZzz/fix/readme-rules-limitation 2563d1e Merge pull request affaan-m#92 from jhsong-musinsa/fix/plugin-manifest-validation 5dc1edb Merge pull request affaan-m#93 from pangerlkr/patch-3 2aac2d9 Create PLUGIN_SCHEMA_NOTES.md cdf987d fix: use explicit file paths for agents in plugin.json 384b255 docs: add note about rules limitation in plugin installation accbb47 feat: add proper header banner to shortform guide ff67b03 feat: add images and rename guides to the-shortform-guide.md and the-longform-guide.md 7fc5ef1 Merge pull request affaan-m#83 from msyahidin/claude/add-golang-support-frw0Z 779085e fix: add missing agents and hooks declarations to plugin.json 5e1835a Merge pull request affaan-m#81 from pangerlkr/patch-2 2abefe6 Merge pull request affaan-m#79 from pangerlkr/patch-1 4bca615 Merge pull request affaan-m#80 from lichengzhe/fix/stop-hook-shell-error a1f47f1 Merge pull request affaan-m#85 from roeiba/add-license-file 01ad21b docs: add missing MIT LICENSE file c6c32cd fix: add language labels to fenced code blocks for MD040 compliance 75e1e46 feat: add comprehensive Golang language support 2feac5a docs: add The Longform Guide to Everything Claude Code a0b84f7 Fix: Move Stop hook inline code to separate script file 1564213 docs: add The Shorthand Guide to Everything Claude Code 56ff5d4 fix: use correct unscoped agent-browser package name (affaan-m#77) 5c63fa9 feat: v1.1.0 release - session ID tracking, async hooks, new skills 5670fcd Fix plugin manifest validation errors (affaan-m#75) 1c9fa0b Add hooks.md to documentation index (affaan-m#40) 2bfd2fb feat: add cloud infrastructure security skill (affaan-m#44) fae9716 feat(agents): add database-reviewer agent with Supabase patterns (affaan-m#48) a2087a8 fix: remove unnecessary .sh hooks (affaan-m#41) b9b7831 fix: multiple community-reported issues 660e0d3 fix: security and documentation fixes a7bc5f2 revert: remove hooks declaration - auto-loaded by convention 22ad036 fix: add hooks declaration to plugin.json for proper hook loading 5230892 fix: remove version fields from marketplace.json 970f8bf feat: cross-platform support with Node.js scripts 4ec7a6b fix: remove version field to enable automatic plugin updates 0d438dd style: side-by-side guide layout matching profile README 7f4f622 feat: add star history chart and minimal badge bar c3f1594 fix: move session-end hooks from Stop to SessionEnd 19345df fix: remove duplicate hooks field from plugin.json 73bda1a fix: use ${CLAUDE_PLUGIN_ROOT} for hook script paths ecfbbd3 fix: use relative path './' for plugin source instead of GitHub object ee5affb fix: remove agents field temporarily to debug validation d362ae6 fix: use string format for repository field in plugin.json 9e8006c fix: use GitHub source object in marketplace.json 5010f82 feat: package as Claude Code plugin with marketplace distribution 4491f15 Clarify README description of the repository e6440d3 docs: restructure README to flow shorthand → longform guides together fa0928a Enhance README with update section and resources 2d6fd70 feat: add strategic-compact hook and update hooks.json with all hooks f96ef1e feat: add memory persistence hooks and context files 7d3ea0f feat: add strategic compact skill 6bf102d feat: add continuous learning skill with session examples 3c1e7d9 Clarify repository purpose and additional resources 62a80df Update README with image and guide link 6eefb41 Update README with guide reading reminder d7cf890 Fix formatting in README.md for guide link e57979c Update README with image and guide link 45959c3 Initial release: Complete Claude Code configuration collection REVERT: 69c0b1a Add link to Agent Skills specification website (affaan-m#160) REVERT: be229a5 Fix links in agent skills specification (affaan-m#159) REVERT: f232228 Split agent-skills-spec into separate authoring and client integration guides (affaan-m#148) REVERT: 0075614 Add doc-coauthoring skill and update example skills (affaan-m#134) REVERT: ef74077 Move example skills into dedicated folder and create minimal top-level folder structure (affaan-m#129) REVERT: 0f77e50 Update example skills and rename 'artifacts-builder' (affaan-m#112) REVERT: e5c6015 Add 'frontend-design' example skill (affaan-m#98) REVERT: c74d647 Clarify Claude Code installation in README.md (#20) REVERT: 0877bae Updates to README.md (affaan-m#9) REVERT: b118d29 Add Claude Claude instructions to the readme (#8) REVERT: 4d1e3f3 Add Claude Code Marketplace (affaan-m#5) REVERT: 9b61003 Small tweak to blog link (#7) REVERT: 10e0fbe Add initial Agent Skills Spec (#2) REVERT: ec84104 Add 3rd Party notices (affaan-m#4) REVERT: 67ada86 Adding more details to README (affaan-m#3) REVERT: 83291af Reorganize the example skills (affaan-m#1) REVERT: 37292f3 init repo git-subtree-dir: upstream/anthropics-skills git-subtree-split: 675db95

* fix: use correct unscoped agent-browser package name The @anthropic-ai/agent-browser package does not exist on npm. The correct package is the unscoped 'agent-browser' from Vercel Labs (v0.7.6). Fixes the issue noted in PR affaan-m#75 review comment. Co-Authored-By: Claude Opus 4.5 <[email protected]> * fix: correct agent-browser API to match actual package exports - Change AgentBrowser to BrowserManager (correct export name) - Update documentation to show actual CLI-based usage pattern - Add snapshot + refs system examples (the real agent-browser API) - Add programmatic BrowserManager API for advanced use cases - Show CLI wrapper approach for script integration The agent-browser package from Vercel is primarily a CLI tool, not a JavaScript library with semantic methods. This corrects the documentation to match the actual package API. Fixes CodeRabbit review comment about incorrect import/export. Co-Authored-By: Claude Opus 4.5 <[email protected]> --------- Co-authored-by: Claude Opus 4.5 <[email protected]>

coderabbitai bot reviewed Jan 26, 2026

View reviewed changes

agents/e2e-runner.md Outdated Show resolved Hide resolved

affaan-m merged commit 56ff5d4 into affaan-m:main Jan 26, 2026
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: use correct unscoped agent-browser package name#77

fix: use correct unscoped agent-browser package name#77
affaan-m merged 2 commits intoaffaan-m:mainfrom
jeffscottward:fix/agent-browser-package-name

jeffscottward commented Jan 26, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jan 26, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

jeffscottward commented Jan 26, 2026

Uh oh!

coderabbitai bot commented Jan 26, 2026

Install

`BrowserManager` (programmatic API)

Recent note

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

Uh oh!

Conversation

jeffscottward commented Jan 26, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Problem

Changes

Installation

CLI Usage (Primary)

Programmatic API (Advanced)

References

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jeffscottward commented Jan 26, 2026

Uh oh!

coderabbitai bot commented Jan 26, 2026

Install

BrowserManager (programmatic API)

Recent note

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

jeffscottward commented Jan 26, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 26, 2026 •

edited

Loading

`BrowserManager` (programmatic API)