Guides

Examples

Step-by-step walkthroughs for common workflows. Each example shows the exact tool calls and explains what happens at each step.

Dev Loop: Screenshot localhost and iterate

The most common workflow: open your local dev server in a browser, take a screenshot so your coding agent can see the result, make changes, and verify visually.

dev-loop
// 1. Open a browser session
open_session({ profile: "work" })
 
// 2. Navigate to your local dev server
navigate({ url: "http://localhost:3000/dashboard" })
 
// 3. Take a screenshot — the agent sees the rendered page
screenshot()
 
// 4. Agent edits code based on what it sees...
 
// 5. Screenshot again to verify the fix
screenshot()
 
// 6. Done — close the session
close_session()

The agent drives the entire loop: open, look, edit, look again, close. No manual browser interaction needed.

Morning Brief: Pull metrics from 3 dashboards

Navigate to multiple dashboards, extract key metrics, and store them in the KV store for later use (e.g., by another agent generating a daily report).

morning-brief
// 1. Open a session with your analytics profile
open_session({ profile: "analytics" })
 
// 2. Pull revenue data
navigate({ url: "https://analytics.app.com" })
get_content()
kv_set({
  namespace: "brief",
  key: "revenue",
  value: "$1.2M MRR, +8% MoM"
})
 
// 3. Pull support queue depth
navigate({ url: "https://support.app.com/queue" })
get_content()
kv_set({
  namespace: "brief",
  key: "support-queue",
  value: "23 open tickets, 4 critical"
})
 
// 4. Clean up
close_session()

The KV store persists across sessions. A separate agent (or a cron job) can later read these values with kv_get to compile the brief.

Competitive Intel: Monitor a competitor's pricing

Use stealth mode to browse a competitor's site without triggering bot detection. Save a screenshot and extracted content for later analysis.

competitive-intel
// 1. Open a stealth session
open_session({
  profile: "research",
  stealth: true
})
 
// 2. Navigate to the pricing page
navigate({ url: "https://competitor.com/pricing" })
 
// 3. Capture visual + text
screenshot()
get_content()
 
// 4. Store for later comparison
kv_set({
  namespace: "intel",
  key: "competitor-pricing-2024-04",
  value: "..."
})
 
close_session()

Stealth mode applies anti-fingerprinting patches to Chrome, making automated browsing harder to detect.

Multi-Agent Coordination via KV Store

Two agents working on different tasks can share data through the KV store. Agent A gathers research; Agent B consumes it to produce a report.

agent-a (research)
// Agent A: gather competitor data
open_session({ profile: "research" })
// ... browse, extract data ...
 
kv_set({
  namespace: "research",
  key: "competitors",
  value: "[{\"name\": \"Acme\", \"price\": 99}, ...]"
})
close_session()
agent-b (report)
// Agent B: read the data and generate a report
kv_get({
  namespace: "research",
  key: "competitors"
})
 
// Agent B uses the data to generate a report
// No browser session needed — just KV access

This pattern requires daemon mode so both agents share the same KV store. Without the daemon, each MCP server instance has its own isolated database.

Record a Session for Debugging

Record every action during a bug reproduction, add markers at key moments, and render the recording to video for sharing with your team.

debug-recording
// 1. Open a session and start recording
open_session({ profile: "debug" })
start_recording({ name: "bug-repro-123" })
 
// 2. Reproduce the bug
navigate({ url: "https://app.com/settings" })
click({ selector: "#delete-account" })
 
// 3. Mark the moment the bug occurs
add_marker({
  label: "Bug: modal doesn't appear"
})
screenshot()
 
// 4. Stop recording and render to video
stop_recording()
render_recording({
  format: "mp4",
  with_overlays: true
})

The rendered video includes timestamped markers as overlays, making it easy to jump to the exact moment something went wrong. Share the video file with your team or attach it to a bug report.

Next: Tools Reference → · Daemon Mode →