Skip to content

Commit 03235f9

Browse files
pyyushclaude
andcommitted
docs: update skills, READMEs for v0.9.0 features and competitive positioning
- Both SKILL.md files score 91/100 on skill-check - MCP SKILL: add --slim mode, --in-process, event streaming, self-healing, action caching - CLI SKILL: add demo, watch, trace commands, consolidate to 6 sections - Main README: add token efficiency positioning, bap demo in Get Started - CLI README: add demo, watch to commands - MCP README: add --in-process, --slim, event streaming Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 6e4d6bd commit 03235f9

5 files changed

Lines changed: 228 additions & 151 deletions

File tree

README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ npm i -g @browseragentprotocol/cli
2727
bap install-skill
2828
```
2929

30+
Or run `bap demo` for a guided walkthrough.
31+
3032
Then give your agent a task:
3133

3234
```text
@@ -45,6 +47,7 @@ the BAP guidance.
4547
| **Semantic selectors** | `role:button:"Submit"` and `label:"Email"` instead of brittle CSS |
4648
| **Fewer roundtrips** | `goto --observe`, `act --observe`, stable refs, and structured extraction |
4749
| **Warm daemon** | Browser stays alive across commands — agents keep momentum |
50+
| **Token efficient** | `--slim` mode exposes 5 tools (~600 tokens) vs 70+ in competitors (~4,200 tokens) |
4851
| **Multiple surfaces** | CLI, MCP, TypeScript SDK, Python SDK — pick what fits your stack |
4952

5053
## See It in Action
@@ -89,7 +92,7 @@ bap extract --fields="title,content"
8992
## Against Other Tools
9093

9194
- **vs Playwright CLI** — BAP is built for agent workflows, not human shell scripting.
92-
- **vs Playwright MCP** — When shell access is available, BAP CLI solves the same job with fewer roundtrips.
95+
- **vs Playwright MCP** — When shell access is available, BAP CLI solves the same job with fewer roundtrips. In MCP mode, `--slim` cuts tool definitions to ~600 tokens vs ~4,200 for Playwright MCP's 70+ tools.
9396
- **vs Chrome DevTools / CDP** — CDP is the low-level transport; BAP is the agent layer on top.
9497

9598
## Docs

packages/cli/README.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,22 @@ bap recipe fill-form <url> --data=data.json
156156
bap recipe wait-for <selector> [--timeout=ms]
157157
```
158158
159+
### Debugging
160+
161+
```bash
162+
bap watch # Live-tail browser events (console errors, network failures)
163+
bap trace # View recent session traces
164+
bap trace --sessions # List recorded sessions
165+
bap trace --replay # Generate self-contained HTML timeline
166+
bap trace --export # Export traces as JSON
167+
```
168+
169+
### Getting Started
170+
171+
```bash
172+
bap demo # Guided walkthrough of BAP features
173+
```
174+
159175
### Configuration
160176
161177
```bash
Lines changed: 78 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,63 @@
11
---
22
name: bap-browser
3-
description: "Browser automation CLI with composite actions and semantic selectors. Use when the user needs to visit websites, fill forms, extract data, take screenshots, or automate multi-step browser workflows like login, checkout, or search."
3+
description: "Browser automation CLI with composite actions, semantic selectors, and self-healing selectors. Use when the user needs to visit websites, fill forms, extract data, take screenshots, stream browser events, or automate multi-step browser workflows like login, checkout, or search."
44
license: Apache-2.0
55
---
66

77
# BAP Browser CLI
88

99
AI-first browser automation. Like playwright-cli but with composite actions,
10-
semantic selectors, and structured extraction.
10+
semantic selectors, self-healing selectors, and action caching built in.
1111

12-
## Command Resolution
13-
14-
Pick the command form based on the environment:
12+
## Quick Start
1513

1614
```bash
17-
# Inside the bap repo (preferred for local development and release testing)
18-
pnpm exec bap open https://example.com
19-
20-
# If bap is installed globally
21-
bap open https://example.com
22-
23-
# Only when explicitly testing the published npm package
24-
npx @browseragentprotocol/cli open https://example.com
15+
bap demo # Guided walkthrough for first-time users
16+
bap goto https://example.com --observe # Navigate + observe in 1 fused call
17+
bap click role:button:"Get Started" # Semantic selector
18+
bap close
2519
```
2620

27-
Important:
21+
Inside this repo, use `pnpm exec bap` instead of bare `bap`. Prefer `bap goto` for navigation; use `bap open` only for explicit browser lifecycle control.
2822

29-
- Inside the repo, prefer `pnpm exec bap` so you use the local workspace build.
30-
- Avoid `npx @browseragentprotocol/cli` for local development. It pulls the published npm version, which can lag behind the branch being tested.
31-
- If `bap` is not on `PATH`, do not assume it is globally installed.
32-
- In the examples below, `bap` is shorthand for the command form you picked above.
23+
## Smart Defaults
3324

34-
## Quick Start
25+
**Session persistence** — Browser pages persist across CLI invocations. Disconnect parks context; reconnect restores it. Named sessions: `bap -s=checkout goto /cart`. Auto-expire after 5 minutes.
3526

36-
```bash
37-
pnpm exec bap goto https://example.com --observe
38-
pnpm exec bap click role:button:"Get Started" # semantic selector
39-
pnpm exec bap close
40-
```
27+
**Self-healing selectors** — When a selector fails, BAP tries fallback identity signals (testId, ariaLabel+role, id, name) before erroring. No flags needed.
4128

42-
For normal "open this URL and work on the page" tasks, prefer `bap goto`.
43-
Use `bap open` when you explicitly want browser lifecycle behavior, such as
44-
opening a blank browser first.
29+
**Action caching** — Selector resolutions cached to `~/.bap/cache/actions/` (24h TTL). Repeat actions skip re-resolution.
4530

46-
## Composite Actions
31+
## Usage
4732

48-
Execute multiple browser steps in ONE command instead of one-at-a-time:
33+
**Composite actions** — multiple steps in ONE command:
4934

5035
```bash
51-
# Login flow — ONE command instead of 3+ separate calls
5236
bap act fill:role:textbox:"Email"="user@example.com" \
5337
fill:role:textbox:"Password"="secret" \
5438
click:role:button:"Sign in"
5539
```
5640

57-
Each step uses the syntax `action:selector=value` or `action:selector`.
58-
59-
## Fused Operations
41+
Step syntax: `action:selector=value` or `action:selector`.
6042

61-
Fused operations combine multiple server calls into one, cutting roundtrips by 50-85%.
43+
**Fused operations**combine server calls into one, cutting roundtrips:
6244

6345
```bash
64-
# Navigate + observe in 1 call (instead of bap goto + bap observe)
65-
bap goto https://example.com --observe
66-
67-
# Act + post-observe in 1 call (get updated page state after actions)
68-
bap act click:role:button:"Submit" --observe
69-
70-
# Control response size with --tier
71-
bap goto https://example.com --observe --tier=minimal # refs + names only
72-
bap goto https://example.com --observe --tier=interactive # elements + roles (default)
73-
bap observe --tier=full # everything + metadata
46+
bap goto https://example.com --observe # Navigate + observe (1 call, not 2)
47+
bap act click:role:button:"Submit" --observe # Act + post-observe (1 call)
48+
bap observe --diff # Incremental: only changes
49+
bap observe --tier=minimal # Minimal response (refs + names only)
7450
```
7551

76-
**Always prefer fused calls** `bap goto <url> --observe` is 1 roundtrip vs 2 for `bap goto` then `bap observe`.
52+
**Always prefer fused calls.** `--observe` saves a roundtrip. `--diff` avoids re-scanning unchanged elements. `--tier=minimal` reduces response size.
7753

78-
## Common Patterns
54+
**Common patterns:**
7955

8056
```bash
81-
# Accept cookies + navigate
82-
bap act click:text:"Accept" goto:https://example.com/app
83-
84-
# Fill and submit a search
85-
bap act fill:role:searchbox:"Search"="query here" press:Enter
86-
87-
# Checkout form
88-
bap act fill:label:"Card number"="4111111111111111" \
89-
fill:label:"Expiry"="12/28" \
90-
fill:label:"CVV"="123" \
91-
click:role:button:"Pay now"
92-
93-
# Login with fused observe (2 calls total)
94-
bap goto https://app.example.com/login --observe
95-
bap act fill:label:"Email"="user@example.com" \
96-
fill:label:"Password"="secret" \
57+
bap act click:text:"Accept" goto:https://example.com/app # Dismiss + navigate
58+
bap act fill:role:searchbox:"Search"="query" press:Enter # Search
59+
bap goto https://app.example.com/login --observe # Login flow (2 calls)
60+
bap act fill:label:"Email"="u@e.com" fill:label:"Password"="s" \
9761
click:role:button:"Sign in" --observe
9862
```
9963

@@ -125,7 +89,7 @@ Do not strip the `@` prefix from stable refs. `bap click ep44e3j` is not the sam
12589

12690
For the full selector reference, see [references/SELECTORS.md](references/SELECTORS.md).
12791

128-
## Commands
92+
## Commands (26)
12993

13094
### Navigation
13195

@@ -160,6 +124,7 @@ bap observe # Compact interactive elements (default max 50)
160124
bap observe --full # Full accessibility tree
161125
bap observe --forms # Form fields only
162126
bap observe --max=20 # Limit number of elements returned
127+
bap observe --diff # Incremental: only changes since last observe
163128
bap observe --tier=interactive # Response tier: full, interactive, minimal
164129
bap snapshot # Full YAML snapshot (playwright-cli compatible)
165130
bap screenshot [--file=F] # Save screenshot to .bap/ directory
@@ -183,6 +148,35 @@ bap tab-new [url] # Open new tab
183148
bap tab-select <index> # Switch to tab
184149
```
185150
151+
### Live Event Streaming
152+
153+
```bash
154+
bap watch # Stream all browser events (console, network, dialog, download)
155+
bap watch --filter=console # Only console messages
156+
bap watch --filter=network # Only 4xx/5xx network responses
157+
bap watch --filter=dialog # Only dialog events (alert, confirm, prompt)
158+
bap watch --filter=download # Only download events
159+
bap watch --format=json # Machine-readable NDJSON output
160+
```
161+
162+
### Tracing
163+
164+
```bash
165+
bap trace # Show traces for current session
166+
bap trace --sessions # List all recorded sessions
167+
bap trace --all # Show all traces across sessions
168+
bap trace --session=<id> # Traces for a specific session
169+
bap trace --replay # Generate self-contained HTML timeline viewer
170+
bap trace --export # Export traces as JSON
171+
bap trace --limit=20 # Limit number of trace entries shown
172+
```
173+
174+
### Getting Started
175+
176+
```bash
177+
bap demo # Guided walkthrough for first-time users
178+
```
179+
186180
### Recipes
187181
188182
```bash
@@ -191,50 +185,29 @@ bap recipe fill-form <url> --data=data.json
191185
bap recipe wait-for <selector> [--timeout=ms]
192186
```
193187
194-
## Output Behavior
188+
## Reference
195189
196-
All outputs saved to `.bap/` directory (never injected into LLM context):
190+
**Output formats:** Use `--format=pretty` (TTY default, colored), `--format=json` (machine-readable), or `--format=agent` (concise markdown). TTY auto-detects. All file outputs (snapshots, screenshots, extractions) saved to `.bap/` directory never injected into LLM context.
197191
198-
- Snapshots: `.bap/snapshot-<timestamp>.yml`
199-
- Screenshots: `.bap/screenshot-<timestamp>.png`
200-
- Extractions: `.bap/extraction-<timestamp>.json`
192+
**Error recovery — when things go wrong:**
201193
202-
After each command, BAP prints a concise summary:
194+
| Problem | What to do |
195+
| ---------------------------- | ------------------------------------------------------------------------------ |
196+
| `bap: command not found` | Use `pnpm exec bap` inside repo. Outside, `npm i -g @browseragentprotocol/cli` |
197+
| Element not found | DOM changed. Run `bap observe` to get fresh element refs |
198+
| Stale ref after navigation | Always re-run `bap observe` or use `--observe` flag after page changes |
199+
| Stable ref click fails | Use exact ref from `bap observe`, including the leading `@` prefix |
200+
| Browser launch fails | Try `--no-profile` for fresh browser without profile conflicts |
201+
| Server not responding | `bap close-all` to kill daemon, then retry |
202+
| Navigation timeout | `bap --timeout=120000 goto <url>` to increase timeout |
203+
| Click intercepted by overlay | Dismiss first: `bap act click:text:"Accept" click:<target>` |
204+
| Wrong tab active | `bap tabs` to list, `bap tab-select <index>` to switch |
203205
204-
```
205-
### Page
206-
- URL: https://example.com/dashboard
207-
- Title: Dashboard
208-
### Snapshot
209-
Saved to .bap/snapshot-1739734242.yml
210-
```
206+
**Key rules for agents:**
211207
212-
## Error Handling
213-
214-
| Problem | Fix |
215-
| ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
216-
| `bap: command not found` | Inside this repo, use `pnpm exec bap`. Outside the repo, either install globally or use `npx @browseragentprotocol/cli` if you intentionally want the published package |
217-
| Element not found | Run `bap observe` to get fresh refs — the DOM changed after navigation |
218-
| Stable ref click does not work | Use the exact ref from `bap observe`, including the leading `@` |
219-
| Stale element ref | Re-run `bap observe` or `bap snapshot` after navigation or major DOM changes |
220-
| Browser launch fails | Try `--no-profile` for a fresh browser, or use a dedicated `--profile <dir>` if the default Chrome profile is busy |
221-
| Chrome says it is controlled by automated test software | Expected for Playwright-launched Chrome. Use `--no-profile` for clean automation, or attach to a user-started browser in future workflows if that UX matters |
222-
| Server not responding | Run `bap close-all` to kill the daemon, then retry your command |
223-
| Navigation timeout | Increase the timeout: `bap --timeout=120000 goto <url>` |
224-
| Click intercepted / overlay | An overlay may be blocking the element. Try `bap act click:text:"Accept" click:<target>` to dismiss it first |
225-
| Wrong tab active | Run `bap tabs` to list open tabs, then `bap tab-select <index>` |
226-
227-
## When to Use BAP vs playwright-cli
228-
229-
| Scenario | Use |
230-
| ------------------------------------------ | ------------------------------------------------ |
231-
| Single click or type action | Either works — BAP accepts `e15` refs |
232-
| Multi-step flow (login, form, checkout) | **BAP**`bap act` batches steps in one command |
233-
| Extract structured data from page | **BAP**`bap extract` with schema validation |
234-
| Need selectors resilient to layout changes | **BAP** — semantic selectors |
235-
| Quick page snapshot | Either works — same YAML format |
236-
237-
## Installation
238-
239-
Inside the repo, prefer `pnpm exec bap`.
240-
Use `npx @browseragentprotocol/cli` only when you explicitly want to test the published npm package.
208+
1. Always use `--observe` with `goto` and `act` to avoid extra roundtrips
209+
2. After navigation or DOM changes, re-run `bap observe` before clicking — refs go stale
210+
3. Prefer semantic selectors (`role:`, `label:`, `text:`) over positional refs — they survive redesigns
211+
4. Use `bap act` for multi-step flows instead of individual commands — fewer calls, fewer tokens
212+
5. Use `--diff` for incremental observation after small DOM changes
213+
6. Check `bap trace` when debugging failures — it records every request with timing

0 commit comments

Comments
 (0)