Move specialized skills to skill-data/ so npx skills add only finds one (#1227)
The skills CLI metadata.internal flag was never implemented (PRs #587 and #652 were both closed). All 6 skills were showing in the installer. Move the 5 specialized skills (dogfood, electron, slack, vercel-sandbox, agentcore) from skills/ to skill-data/, which the skills CLI does not search. The bootstrap skill stays in skills/ for discovery. The Rust CLI searches both directories so agent-browser skills list/get still serves all 6.
This commit is contained in:
Chris Tate
@@ -0,0 +1,115 @@
|
||||
---
|
||||
name: agentcore
|
||||
description: Run agent-browser on AWS Bedrock AgentCore cloud browsers. Use when the user wants to use AgentCore, run browser automation on AWS, use a cloud browser with AWS credentials, or needs a managed browser session backed by AWS infrastructure. Triggers include "use agentcore", "run on AWS", "cloud browser with AWS", "bedrock browser", "agentcore session", or any task requiring AWS-hosted browser automation.
|
||||
allowed-tools: Bash(agent-browser:*), Bash(npx agent-browser:*)
|
||||
---
|
||||
|
||||
# AWS Bedrock AgentCore
|
||||
|
||||
Run agent-browser on cloud browser sessions hosted by AWS Bedrock AgentCore. All standard agent-browser commands work identically; the only difference is where the browser runs.
|
||||
|
||||
## Setup
|
||||
|
||||
Credentials are resolved automatically:
|
||||
|
||||
1. Environment variables (`AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, optionally `AWS_SESSION_TOKEN`)
|
||||
2. AWS CLI fallback (`aws configure export-credentials`), which supports SSO, IAM roles, and named profiles
|
||||
|
||||
No additional setup is needed if the user already has working AWS credentials.
|
||||
|
||||
## Core Workflow
|
||||
|
||||
```bash
|
||||
# Open a page on an AgentCore cloud browser
|
||||
agent-browser -p agentcore open https://example.com
|
||||
|
||||
# Everything else is the same as local Chrome
|
||||
agent-browser snapshot -i
|
||||
agent-browser click @e1
|
||||
agent-browser screenshot page.png
|
||||
agent-browser close
|
||||
```
|
||||
|
||||
## Environment Variables
|
||||
|
||||
| Variable | Description | Default |
|
||||
|----------|-------------|---------|
|
||||
| `AGENTCORE_REGION` | AWS region | `us-east-1` |
|
||||
| `AGENTCORE_BROWSER_ID` | Browser identifier | `aws.browser.v1` |
|
||||
| `AGENTCORE_PROFILE_ID` | Persistent browser profile (cookies, localStorage) | (none) |
|
||||
| `AGENTCORE_SESSION_TIMEOUT` | Session timeout in seconds | `3600` |
|
||||
| `AWS_PROFILE` | AWS CLI profile for credential resolution | `default` |
|
||||
|
||||
## Persistent Profiles
|
||||
|
||||
Use `AGENTCORE_PROFILE_ID` to persist browser state across sessions. This is useful for maintaining login sessions:
|
||||
|
||||
```bash
|
||||
# First run: log in
|
||||
AGENTCORE_PROFILE_ID=my-app agent-browser -p agentcore open https://app.example.com/login
|
||||
agent-browser snapshot -i
|
||||
agent-browser fill @e1 "user@example.com"
|
||||
agent-browser fill @e2 "password"
|
||||
agent-browser click @e3
|
||||
agent-browser close
|
||||
|
||||
# Future runs: already authenticated
|
||||
AGENTCORE_PROFILE_ID=my-app agent-browser -p agentcore open https://app.example.com/dashboard
|
||||
```
|
||||
|
||||
## Live View
|
||||
|
||||
When a session starts, AgentCore prints a Live View URL to stderr. Open it in a browser to watch the session in real time from the AWS Console:
|
||||
|
||||
```
|
||||
Session: abc123-def456
|
||||
Live View: https://us-east-1.console.aws.amazon.com/bedrock-agentcore/browser/aws.browser.v1/session/abc123-def456#
|
||||
```
|
||||
|
||||
## Region Selection
|
||||
|
||||
```bash
|
||||
# Default: us-east-1
|
||||
agent-browser -p agentcore open https://example.com
|
||||
|
||||
# Explicit region
|
||||
AGENTCORE_REGION=eu-west-1 agent-browser -p agentcore open https://example.com
|
||||
```
|
||||
|
||||
## Credential Patterns
|
||||
|
||||
```bash
|
||||
# Explicit credentials (CI/CD, scripts)
|
||||
export AWS_ACCESS_KEY_ID=AKIA...
|
||||
export AWS_SECRET_ACCESS_KEY=...
|
||||
agent-browser -p agentcore open https://example.com
|
||||
|
||||
# SSO (interactive)
|
||||
aws sso login --profile my-profile
|
||||
AWS_PROFILE=my-profile agent-browser -p agentcore open https://example.com
|
||||
|
||||
# IAM role / default credential chain
|
||||
agent-browser -p agentcore open https://example.com
|
||||
```
|
||||
|
||||
## Using with AGENT_BROWSER_PROVIDER
|
||||
|
||||
Set the provider via environment variable to avoid passing `-p agentcore` on every command:
|
||||
|
||||
```bash
|
||||
export AGENT_BROWSER_PROVIDER=agentcore
|
||||
export AGENTCORE_REGION=us-east-2
|
||||
|
||||
agent-browser open https://example.com
|
||||
agent-browser snapshot -i
|
||||
agent-browser click @e1
|
||||
agent-browser close
|
||||
```
|
||||
|
||||
## Common Issues
|
||||
|
||||
**"Failed to run aws CLI"** means AWS CLI is not installed or not in PATH. Either install it or set `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY` directly.
|
||||
|
||||
**"AWS CLI failed: ... Run 'aws sso login'"** means SSO credentials have expired. Run `aws sso login` to refresh them.
|
||||
|
||||
**Session timeout:** The default is 3600 seconds (1 hour). For longer tasks, increase with `AGENTCORE_SESSION_TIMEOUT=7200`.
|
||||
@@ -0,0 +1,220 @@
|
||||
---
|
||||
name: dogfood
|
||||
description: Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.
|
||||
allowed-tools: Bash(agent-browser:*), Bash(npx agent-browser:*)
|
||||
---
|
||||
|
||||
# Dogfood
|
||||
|
||||
Systematically explore a web application, find issues, and produce a report with full reproduction evidence for every finding.
|
||||
|
||||
## Setup
|
||||
|
||||
Only the **Target URL** is required. Everything else has sensible defaults -- use them unless the user explicitly provides an override.
|
||||
|
||||
| Parameter | Default | Example override |
|
||||
|-----------|---------|-----------------|
|
||||
| **Target URL** | _(required)_ | `vercel.com`, `http://localhost:3000` |
|
||||
| **Session name** | Slugified domain (e.g., `vercel.com` -> `vercel-com`) | `--session my-session` |
|
||||
| **Output directory** | `./dogfood-output/` | `Output directory: /tmp/qa` |
|
||||
| **Scope** | Full app | `Focus on the billing page` |
|
||||
| **Authentication** | None | `Sign in to user@example.com` |
|
||||
|
||||
If the user says something like "dogfood vercel.com", start immediately with defaults. Do not ask clarifying questions unless authentication is mentioned but credentials are missing.
|
||||
|
||||
Always use `agent-browser` directly -- never `npx agent-browser`. The direct binary uses the fast Rust client. `npx` routes through Node.js and is significantly slower.
|
||||
|
||||
## Workflow
|
||||
|
||||
```
|
||||
1. Initialize Set up session, output dirs, report file
|
||||
2. Authenticate Sign in if needed, save state
|
||||
3. Orient Navigate to starting point, take initial snapshot
|
||||
4. Explore Systematically visit pages and test features
|
||||
5. Document Screenshot + record each issue as found
|
||||
6. Wrap up Update summary counts, close session
|
||||
```
|
||||
|
||||
### 1. Initialize
|
||||
|
||||
```bash
|
||||
mkdir -p {OUTPUT_DIR}/screenshots {OUTPUT_DIR}/videos
|
||||
```
|
||||
|
||||
Copy the report template into the output directory and fill in the header fields:
|
||||
|
||||
```bash
|
||||
cp {SKILL_DIR}/templates/dogfood-report-template.md {OUTPUT_DIR}/report.md
|
||||
```
|
||||
|
||||
Start a named session:
|
||||
|
||||
```bash
|
||||
agent-browser --session {SESSION} open {TARGET_URL}
|
||||
agent-browser --session {SESSION} wait --load networkidle
|
||||
```
|
||||
|
||||
### 2. Authenticate
|
||||
|
||||
If the app requires login:
|
||||
|
||||
```bash
|
||||
agent-browser --session {SESSION} snapshot -i
|
||||
# Identify login form refs, fill credentials
|
||||
agent-browser --session {SESSION} fill @e1 "{EMAIL}"
|
||||
agent-browser --session {SESSION} fill @e2 "{PASSWORD}"
|
||||
agent-browser --session {SESSION} click @e3
|
||||
agent-browser --session {SESSION} wait --load networkidle
|
||||
```
|
||||
|
||||
For OTP/email codes: ask the user, wait for their response, then enter the code.
|
||||
|
||||
After successful login, save state for potential reuse:
|
||||
|
||||
```bash
|
||||
agent-browser --session {SESSION} state save {OUTPUT_DIR}/auth-state.json
|
||||
```
|
||||
|
||||
### 3. Orient
|
||||
|
||||
Take an initial annotated screenshot and snapshot to understand the app structure:
|
||||
|
||||
```bash
|
||||
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/initial.png
|
||||
agent-browser --session {SESSION} snapshot -i
|
||||
```
|
||||
|
||||
Identify the main navigation elements and map out the sections to visit.
|
||||
|
||||
### 4. Explore
|
||||
|
||||
Read [references/issue-taxonomy.md](references/issue-taxonomy.md) for the full list of what to look for and the exploration checklist.
|
||||
|
||||
**Strategy -- work through the app systematically:**
|
||||
|
||||
- Start from the main navigation. Visit each top-level section.
|
||||
- Within each section, test interactive elements: click buttons, fill forms, open dropdowns/modals.
|
||||
- Check edge cases: empty states, error handling, boundary inputs.
|
||||
- Try realistic end-to-end workflows (create, edit, delete flows).
|
||||
- Check the browser console for errors periodically.
|
||||
|
||||
**At each page:**
|
||||
|
||||
```bash
|
||||
agent-browser --session {SESSION} snapshot -i
|
||||
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/{page-name}.png
|
||||
agent-browser --session {SESSION} errors
|
||||
agent-browser --session {SESSION} console
|
||||
```
|
||||
|
||||
Use your judgment on how deep to go. Spend more time on core features and less on peripheral pages. If you find a cluster of issues in one area, investigate deeper.
|
||||
|
||||
### 5. Document Issues (Repro-First)
|
||||
|
||||
Steps 4 and 5 happen together -- explore and document in a single pass. When you find an issue, stop exploring and document it immediately before moving on. Do not explore the whole app first and document later.
|
||||
|
||||
Every issue must be reproducible. When you find something wrong, do not just note it -- prove it with evidence. The goal is that someone reading the report can see exactly what happened and replay it.
|
||||
|
||||
**Choose the right level of evidence for the issue:**
|
||||
|
||||
#### Interactive / behavioral issues (functional, ux, console errors on action)
|
||||
|
||||
These require user interaction to reproduce -- use full repro with video and step-by-step screenshots:
|
||||
|
||||
1. **Start a repro video** _before_ reproducing:
|
||||
|
||||
```bash
|
||||
agent-browser --session {SESSION} record start {OUTPUT_DIR}/videos/issue-{NNN}-repro.webm
|
||||
```
|
||||
|
||||
2. **Walk through the steps at human pace.** Pause 1-2 seconds between actions so the video is watchable. Take a screenshot at each step:
|
||||
|
||||
```bash
|
||||
agent-browser --session {SESSION} screenshot {OUTPUT_DIR}/screenshots/issue-{NNN}-step-1.png
|
||||
sleep 1
|
||||
# Perform action (click, fill, etc.)
|
||||
sleep 1
|
||||
agent-browser --session {SESSION} screenshot {OUTPUT_DIR}/screenshots/issue-{NNN}-step-2.png
|
||||
sleep 1
|
||||
# ...continue until the issue manifests
|
||||
```
|
||||
|
||||
3. **Capture the broken state.** Pause so the viewer can see it, then take an annotated screenshot:
|
||||
|
||||
```bash
|
||||
sleep 2
|
||||
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}-result.png
|
||||
```
|
||||
|
||||
4. **Stop the video:**
|
||||
|
||||
```bash
|
||||
agent-browser --session {SESSION} record stop
|
||||
```
|
||||
|
||||
5. Write numbered repro steps in the report, each referencing its screenshot.
|
||||
|
||||
#### Static / visible-on-load issues (typos, placeholder text, clipped text, misalignment, console errors on load)
|
||||
|
||||
These are visible without interaction -- a single annotated screenshot is sufficient. No video, no multi-step repro:
|
||||
|
||||
```bash
|
||||
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}.png
|
||||
```
|
||||
|
||||
Write a brief description and reference the screenshot in the report. Set **Repro Video** to `N/A`.
|
||||
|
||||
---
|
||||
|
||||
**For all issues:**
|
||||
|
||||
1. **Append to the report immediately.** Do not batch issues for later. Write each one as you find it so nothing is lost if the session is interrupted.
|
||||
|
||||
2. **Increment the issue counter** (ISSUE-001, ISSUE-002, ...).
|
||||
|
||||
### 6. Wrap Up
|
||||
|
||||
Aim to find **5-10 well-documented issues**, then wrap up. Depth of evidence matters more than total count -- 5 issues with full repro beats 20 with vague descriptions.
|
||||
|
||||
After exploring:
|
||||
|
||||
1. Re-read the report and update the summary severity counts so they match the actual issues. Every `### ISSUE-` block must be reflected in the totals.
|
||||
2. Close the session:
|
||||
|
||||
```bash
|
||||
agent-browser --session {SESSION} close
|
||||
```
|
||||
|
||||
3. Tell the user the report is ready and summarize findings: total issues, breakdown by severity, and the most critical items.
|
||||
|
||||
## Guidance
|
||||
|
||||
- **Repro is everything.** Every issue needs proof -- but match the evidence to the issue. Interactive bugs need video and step-by-step screenshots. Static bugs (typos, placeholder text, visual glitches visible on load) only need a single annotated screenshot.
|
||||
- **Verify reproducibility before collecting evidence.** Before recording video or taking screenshots, verify the issue is reproducible with at least one retry. If it can't be reproduced consistently, it's not a valid issue.
|
||||
- **Don't record video for static issues.** A typo or clipped text doesn't benefit from a video. Save video for issues that involve user interaction, timing, or state changes.
|
||||
- **For interactive issues, screenshot each step.** Capture the before, the action, and the after -- so someone can see the full sequence.
|
||||
- **Write repro steps that map to screenshots.** Each numbered step in the report should reference its corresponding screenshot. A reader should be able to follow the steps visually without touching a browser.
|
||||
- **Use the right snapshot command.**
|
||||
- `snapshot -i` — for finding clickable/fillable elements (buttons, inputs, links)
|
||||
- `snapshot` (no flag) — for reading page content (text, headings, data lists)
|
||||
- **Be thorough but use judgment.** You are not following a test script -- you are exploring like a real user would. If something feels off, investigate.
|
||||
- **Write findings incrementally.** Append each issue to the report as you discover it. If the session is interrupted, findings are preserved. Never batch all issues for the end.
|
||||
- **Never delete output files.** Do not `rm` screenshots, videos, or the report mid-session. Do not close the session and restart. Work forward, not backward.
|
||||
- **Never read the target app's source code.** You are testing as a user, not auditing code. Do not read HTML, JS, or config files of the app under test. All findings must come from what you observe in the browser.
|
||||
- **Check the console.** Many issues are invisible in the UI but show up as JS errors or failed requests.
|
||||
- **Test like a user, not a robot.** Try common workflows end-to-end. Click things a real user would click. Enter realistic data.
|
||||
- **Type like a human.** When filling form fields during video recording, use `type` instead of `fill` -- it types character-by-character. Use `fill` only outside of video recording when speed matters.
|
||||
- **Pace repro videos for humans.** Add `sleep 1` between actions and `sleep 2` before the final result screenshot. Videos should be watchable at 1x speed -- a human reviewing the report needs to see what happened, not a blur of instant state changes.
|
||||
- **Be efficient with commands.** Batch multiple `agent-browser` commands in a single shell call when they are independent (e.g., `agent-browser ... screenshot ... && agent-browser ... console`). Use `agent-browser --session {SESSION} scroll down 300` for scrolling -- do not use `key` or `evaluate` to scroll.
|
||||
|
||||
## References
|
||||
|
||||
| Reference | When to Read |
|
||||
|-----------|--------------|
|
||||
| [references/issue-taxonomy.md](references/issue-taxonomy.md) | Start of session -- calibrate what to look for, severity levels, exploration checklist |
|
||||
|
||||
## Templates
|
||||
|
||||
| Template | Purpose |
|
||||
|----------|---------|
|
||||
| [templates/dogfood-report-template.md](templates/dogfood-report-template.md) | Copy into output directory as the report file |
|
||||
@@ -0,0 +1,109 @@
|
||||
# Issue Taxonomy
|
||||
|
||||
Reference for categorizing issues found during dogfooding. Read this at the start of a dogfood session to calibrate what to look for.
|
||||
|
||||
## Contents
|
||||
|
||||
- [Severity Levels](#severity-levels)
|
||||
- [Categories](#categories)
|
||||
- [Exploration Checklist](#exploration-checklist)
|
||||
|
||||
## Severity Levels
|
||||
|
||||
| Severity | Definition |
|
||||
|----------|------------|
|
||||
| **critical** | Blocks a core workflow, causes data loss, or crashes the app |
|
||||
| **high** | Major feature broken or unusable, no workaround |
|
||||
| **medium** | Feature works but with noticeable problems, workaround exists |
|
||||
| **low** | Minor cosmetic or polish issue |
|
||||
|
||||
## Categories
|
||||
|
||||
### Visual / UI
|
||||
|
||||
- Layout broken or misaligned elements
|
||||
- Overlapping or clipped text
|
||||
- Inconsistent spacing, padding, or margins
|
||||
- Missing or broken icons/images
|
||||
- Dark mode / light mode rendering issues
|
||||
- Responsive layout problems (viewport sizes)
|
||||
- Z-index stacking issues (elements hidden behind others)
|
||||
- Font rendering issues (wrong font, size, weight)
|
||||
- Color contrast problems
|
||||
- Animation glitches or jank
|
||||
|
||||
### Functional
|
||||
|
||||
- Broken links (404, wrong destination)
|
||||
- Buttons or controls that do nothing on click
|
||||
- Form validation that rejects valid input or accepts invalid input
|
||||
- Incorrect redirects
|
||||
- Features that fail silently
|
||||
- State not persisted when expected (lost on refresh, navigation)
|
||||
- Race conditions (double-submit, stale data)
|
||||
- Broken search or filtering
|
||||
- Pagination issues
|
||||
- File upload/download failures
|
||||
|
||||
### UX
|
||||
|
||||
- Confusing or unclear navigation
|
||||
- Missing loading indicators or feedback after actions
|
||||
- Slow or unresponsive interactions (>300ms perceived delay)
|
||||
- Unclear error messages
|
||||
- Missing confirmation for destructive actions
|
||||
- Dead ends (no way to go back or proceed)
|
||||
- Inconsistent patterns across similar features
|
||||
- Missing keyboard shortcuts or focus management
|
||||
- Unintuitive defaults
|
||||
- Missing empty states or unhelpful empty states
|
||||
|
||||
### Content
|
||||
|
||||
- Typos or grammatical errors
|
||||
- Outdated or incorrect text
|
||||
- Placeholder or lorem ipsum content left in
|
||||
- Truncated text without tooltip or expansion
|
||||
- Missing or wrong labels
|
||||
- Inconsistent terminology
|
||||
|
||||
### Performance
|
||||
|
||||
- Slow page loads (>3s)
|
||||
- Janky scrolling or animations
|
||||
- Large layout shifts (content jumping)
|
||||
- Excessive network requests (check via console/network)
|
||||
- Memory leaks (page slows over time)
|
||||
- Unoptimized images (large file sizes)
|
||||
|
||||
### Console / Errors
|
||||
|
||||
- JavaScript exceptions in console
|
||||
- Failed network requests (4xx, 5xx)
|
||||
- Deprecation warnings
|
||||
- CORS errors
|
||||
- Mixed content warnings
|
||||
- Unhandled promise rejections
|
||||
|
||||
### Accessibility
|
||||
|
||||
- Missing alt text on images
|
||||
- Unlabeled form inputs
|
||||
- Poor keyboard navigation (can't tab to elements)
|
||||
- Focus traps
|
||||
- Insufficient color contrast
|
||||
- Missing ARIA attributes on dynamic content
|
||||
- Screen reader incompatible patterns
|
||||
|
||||
## Exploration Checklist
|
||||
|
||||
Use this as a guide for what to test on each page/feature:
|
||||
|
||||
1. **Visual scan** -- Take an annotated screenshot. Look for layout, alignment, and rendering issues.
|
||||
2. **Interactive elements** -- Click every button, link, and control. Do they work? Is there feedback?
|
||||
3. **Forms** -- Fill and submit. Test empty submission, invalid input, and edge cases.
|
||||
4. **Navigation** -- Follow all navigation paths. Check breadcrumbs, back button, deep links.
|
||||
5. **States** -- Check empty states, loading states, error states, and full/overflow states.
|
||||
6. **Console** -- Check for JS errors, failed requests, and warnings.
|
||||
7. **Responsiveness** -- If relevant, test at different viewport sizes.
|
||||
8. **Auth boundaries** -- Test what happens when not logged in, with different roles if applicable.
|
||||
@@ -0,0 +1,53 @@
|
||||
# Dogfood Report: {APP_NAME}
|
||||
|
||||
| Field | Value |
|
||||
|-------|-------|
|
||||
| **Date** | {DATE} |
|
||||
| **App URL** | {URL} |
|
||||
| **Session** | {SESSION_NAME} |
|
||||
| **Scope** | {SCOPE} |
|
||||
|
||||
## Summary
|
||||
|
||||
| Severity | Count |
|
||||
|----------|-------|
|
||||
| Critical | 0 |
|
||||
| High | 0 |
|
||||
| Medium | 0 |
|
||||
| Low | 0 |
|
||||
| **Total** | **0** |
|
||||
|
||||
## Issues
|
||||
|
||||
<!-- Copy this block for each issue found. Interactive issues need video + step-by-step screenshots. Static issues (typos, visual glitches) only need a single screenshot -- set Repro Video to N/A. -->
|
||||
|
||||
### ISSUE-001: {Short title}
|
||||
|
||||
| Field | Value |
|
||||
|-------|-------|
|
||||
| **Severity** | critical / high / medium / low |
|
||||
| **Category** | visual / functional / ux / content / performance / console / accessibility |
|
||||
| **URL** | {page URL where issue was found} |
|
||||
| **Repro Video** | {path to video, or N/A for static issues} |
|
||||
|
||||
**Description**
|
||||
|
||||
{What is wrong, what was expected, and what actually happened.}
|
||||
|
||||
**Repro Steps**
|
||||
|
||||
<!-- Each step has a screenshot. A reader should be able to follow along visually. -->
|
||||
|
||||
1. Navigate to {URL}
|
||||
|
||||
|
||||
2. {Action -- e.g., click "Settings" in the sidebar}
|
||||
|
||||
|
||||
3. {Action -- e.g., type "test" in the search field and press Enter}
|
||||
|
||||
|
||||
4. **Observe:** {what goes wrong -- e.g., the page shows a blank white screen instead of search results}
|
||||
|
||||
|
||||
---
|
||||
@@ -0,0 +1,236 @@
|
||||
---
|
||||
name: electron
|
||||
description: Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.
|
||||
allowed-tools: Bash(agent-browser:*), Bash(npx agent-browser:*)
|
||||
---
|
||||
|
||||
# Electron App Automation
|
||||
|
||||
Automate any Electron desktop app using agent-browser. Electron apps are built on Chromium and expose a Chrome DevTools Protocol (CDP) port that agent-browser can connect to, enabling the same snapshot-interact workflow used for web pages.
|
||||
|
||||
## Core Workflow
|
||||
|
||||
1. **Launch** the Electron app with remote debugging enabled
|
||||
2. **Connect** agent-browser to the CDP port
|
||||
3. **Snapshot** to discover interactive elements
|
||||
4. **Interact** using element refs
|
||||
5. **Re-snapshot** after navigation or state changes
|
||||
|
||||
```bash
|
||||
# Launch an Electron app with remote debugging
|
||||
open -a "Slack" --args --remote-debugging-port=9222
|
||||
|
||||
# Connect agent-browser to the app
|
||||
agent-browser connect 9222
|
||||
|
||||
# Standard workflow from here
|
||||
agent-browser snapshot -i
|
||||
agent-browser click @e5
|
||||
agent-browser screenshot slack-desktop.png
|
||||
```
|
||||
|
||||
## Launching Electron Apps with CDP
|
||||
|
||||
Every Electron app supports the `--remote-debugging-port` flag since it's built into Chromium.
|
||||
|
||||
### macOS
|
||||
|
||||
```bash
|
||||
# Slack
|
||||
open -a "Slack" --args --remote-debugging-port=9222
|
||||
|
||||
# VS Code
|
||||
open -a "Visual Studio Code" --args --remote-debugging-port=9223
|
||||
|
||||
# Discord
|
||||
open -a "Discord" --args --remote-debugging-port=9224
|
||||
|
||||
# Figma
|
||||
open -a "Figma" --args --remote-debugging-port=9225
|
||||
|
||||
# Notion
|
||||
open -a "Notion" --args --remote-debugging-port=9226
|
||||
|
||||
# Spotify
|
||||
open -a "Spotify" --args --remote-debugging-port=9227
|
||||
```
|
||||
|
||||
### Linux
|
||||
|
||||
```bash
|
||||
slack --remote-debugging-port=9222
|
||||
code --remote-debugging-port=9223
|
||||
discord --remote-debugging-port=9224
|
||||
```
|
||||
|
||||
### Windows
|
||||
|
||||
```bash
|
||||
"C:\Users\%USERNAME%\AppData\Local\slack\slack.exe" --remote-debugging-port=9222
|
||||
"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe" --remote-debugging-port=9223
|
||||
```
|
||||
|
||||
**Important:** If the app is already running, quit it first, then relaunch with the flag. The `--remote-debugging-port` flag must be present at launch time.
|
||||
|
||||
## Connecting
|
||||
|
||||
```bash
|
||||
# Connect to a specific port
|
||||
agent-browser connect 9222
|
||||
|
||||
# Or use --cdp on each command
|
||||
agent-browser --cdp 9222 snapshot -i
|
||||
|
||||
# Auto-discover a running Chromium-based app
|
||||
agent-browser --auto-connect snapshot -i
|
||||
```
|
||||
|
||||
After `connect`, all subsequent commands target the connected app without needing `--cdp`.
|
||||
|
||||
## Tab Management
|
||||
|
||||
Electron apps often have multiple windows or webviews. Use tab commands to list and switch between them:
|
||||
|
||||
```bash
|
||||
# List all available targets (windows, webviews, etc.)
|
||||
agent-browser tab
|
||||
|
||||
# Switch to a specific tab by index
|
||||
agent-browser tab 2
|
||||
|
||||
# Switch by URL pattern
|
||||
agent-browser tab --url "*settings*"
|
||||
```
|
||||
|
||||
## Webview Support
|
||||
|
||||
Electron `<webview>` elements are automatically discovered and can be controlled like regular pages. Webviews appear as separate targets in the tab list with `type: "webview"`:
|
||||
|
||||
```bash
|
||||
# Connect to running Electron app
|
||||
agent-browser connect 9222
|
||||
|
||||
# List targets -- webviews appear alongside pages
|
||||
agent-browser tab
|
||||
# Example output:
|
||||
# 0: [page] Slack - Main Window https://app.slack.com/
|
||||
# 1: [webview] Embedded Content https://example.com/widget
|
||||
|
||||
# Switch to a webview
|
||||
agent-browser tab 1
|
||||
|
||||
# Interact with the webview normally
|
||||
agent-browser snapshot -i
|
||||
agent-browser click @e3
|
||||
agent-browser screenshot webview.png
|
||||
```
|
||||
|
||||
**Note:** Webview support works via raw CDP connection.
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Inspect and Navigate an App
|
||||
|
||||
```bash
|
||||
open -a "Slack" --args --remote-debugging-port=9222
|
||||
sleep 3 # Wait for app to start
|
||||
agent-browser connect 9222
|
||||
agent-browser snapshot -i
|
||||
# Read the snapshot output to identify UI elements
|
||||
agent-browser click @e10 # Navigate to a section
|
||||
agent-browser snapshot -i # Re-snapshot after navigation
|
||||
```
|
||||
|
||||
### Take Screenshots of Desktop Apps
|
||||
|
||||
```bash
|
||||
agent-browser connect 9222
|
||||
agent-browser screenshot app-state.png
|
||||
agent-browser screenshot --full full-app.png
|
||||
agent-browser screenshot --annotate annotated-app.png
|
||||
```
|
||||
|
||||
### Extract Data from a Desktop App
|
||||
|
||||
```bash
|
||||
agent-browser connect 9222
|
||||
agent-browser snapshot -i
|
||||
agent-browser get text @e5
|
||||
agent-browser snapshot --json > app-state.json
|
||||
```
|
||||
|
||||
### Fill Forms in Desktop Apps
|
||||
|
||||
```bash
|
||||
agent-browser connect 9222
|
||||
agent-browser snapshot -i
|
||||
agent-browser fill @e3 "search query"
|
||||
agent-browser press Enter
|
||||
agent-browser wait 1000
|
||||
agent-browser snapshot -i
|
||||
```
|
||||
|
||||
### Run Multiple Apps Simultaneously
|
||||
|
||||
Use named sessions to control multiple Electron apps at the same time:
|
||||
|
||||
```bash
|
||||
# Connect to Slack
|
||||
agent-browser --session slack connect 9222
|
||||
|
||||
# Connect to VS Code
|
||||
agent-browser --session vscode connect 9223
|
||||
|
||||
# Interact with each independently
|
||||
agent-browser --session slack snapshot -i
|
||||
agent-browser --session vscode snapshot -i
|
||||
```
|
||||
|
||||
## Color Scheme
|
||||
|
||||
The default color scheme when connecting via CDP may be `light`. To preserve dark mode:
|
||||
|
||||
```bash
|
||||
agent-browser connect 9222
|
||||
agent-browser --color-scheme dark snapshot -i
|
||||
```
|
||||
|
||||
Or set it globally:
|
||||
|
||||
```bash
|
||||
AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### "Connection refused" or "Cannot connect"
|
||||
|
||||
- Make sure the app was launched with `--remote-debugging-port=NNNN`
|
||||
- If the app was already running, quit and relaunch with the flag
|
||||
- Check that the port isn't in use by another process: `lsof -i :9222`
|
||||
|
||||
### App launches but connect fails
|
||||
|
||||
- Wait a few seconds after launch before connecting (`sleep 3`)
|
||||
- Some apps take time to initialize their webview
|
||||
|
||||
### Elements not appearing in snapshot
|
||||
|
||||
- The app may use multiple webviews. Use `agent-browser tab` to list targets and switch to the right one
|
||||
|
||||
### Cannot type in input fields
|
||||
|
||||
- Try `agent-browser keyboard type "text"` to type at the current focus without a selector
|
||||
- Some Electron apps use custom input components; use `agent-browser keyboard inserttext "text"` to bypass key events
|
||||
|
||||
## Supported Apps
|
||||
|
||||
Any app built on Electron works, including:
|
||||
|
||||
- **Communication:** Slack, Discord, Microsoft Teams, Signal, Telegram Desktop
|
||||
- **Development:** VS Code, GitHub Desktop, Postman, Insomnia
|
||||
- **Design:** Figma, Notion, Obsidian
|
||||
- **Media:** Spotify, Tidal
|
||||
- **Productivity:** Todoist, Linear, 1Password
|
||||
|
||||
If an app is built with Electron, it supports `--remote-debugging-port` and can be automated with agent-browser.
|
||||
@@ -0,0 +1,285 @@
|
||||
---
|
||||
name: slack
|
||||
description: Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include "check my Slack", "what channels have unreads", "send a message to", "search Slack for", "extract from Slack", "find who said", or any task requiring programmatic Slack interaction.
|
||||
allowed-tools: Bash(agent-browser:*), Bash(npx agent-browser:*)
|
||||
---
|
||||
|
||||
# Slack Automation
|
||||
|
||||
Interact with Slack workspaces to check messages, extract data, and automate common tasks.
|
||||
|
||||
## Quick Start
|
||||
|
||||
Connect to an existing Slack browser session or open Slack:
|
||||
|
||||
```bash
|
||||
# Connect to existing session on port 9222 (typical for already-open Slack)
|
||||
agent-browser connect 9222
|
||||
|
||||
# Or open Slack if not already running
|
||||
agent-browser open https://app.slack.com
|
||||
```
|
||||
|
||||
Then take a snapshot to see what's available:
|
||||
|
||||
```bash
|
||||
agent-browser snapshot -i
|
||||
```
|
||||
|
||||
## Core Workflow
|
||||
|
||||
1. **Connect/Navigate**: Open or connect to Slack
|
||||
2. **Snapshot**: Get interactive elements with refs (`@e1`, `@e2`, etc.)
|
||||
3. **Navigate**: Click tabs, expand sections, or navigate to specific channels
|
||||
4. **Extract/Interact**: Read data or perform actions
|
||||
5. **Screenshot**: Capture evidence of findings
|
||||
|
||||
```bash
|
||||
# Example: Check unread channels
|
||||
agent-browser connect 9222
|
||||
agent-browser snapshot -i
|
||||
# Look for "More unreads" button
|
||||
agent-browser click @e21 # Ref for "More unreads" button
|
||||
agent-browser screenshot slack-unreads.png
|
||||
```
|
||||
|
||||
## Common Tasks
|
||||
|
||||
### Checking Unread Messages
|
||||
|
||||
```bash
|
||||
# Connect to Slack
|
||||
agent-browser connect 9222
|
||||
|
||||
# Take snapshot to locate unreads button
|
||||
agent-browser snapshot -i
|
||||
|
||||
# Look for:
|
||||
# - "More unreads" button (usually near top of sidebar)
|
||||
# - "Unreads" toggle in Activity tab (shows unread count)
|
||||
# - Channel names with badges/bold text indicating unreads
|
||||
|
||||
# Navigate to Activity tab to see all unreads in one view
|
||||
agent-browser click @e14 # Activity tab (ref may vary)
|
||||
agent-browser wait 1000
|
||||
agent-browser screenshot activity-unreads.png
|
||||
|
||||
# Or check DMs tab
|
||||
agent-browser click @e13 # DMs tab
|
||||
agent-browser screenshot dms.png
|
||||
|
||||
# Or expand "More unreads" in sidebar
|
||||
agent-browser click @e21 # More unreads button
|
||||
agent-browser wait 500
|
||||
agent-browser screenshot expanded-unreads.png
|
||||
```
|
||||
|
||||
### Navigating to a Channel
|
||||
|
||||
```bash
|
||||
# Search for channel in sidebar or by name
|
||||
agent-browser snapshot -i
|
||||
|
||||
# Look for channel name in the list (e.g., "engineering", "product-design")
|
||||
# Click on the channel treeitem ref
|
||||
agent-browser click @e94 # Example: engineering channel ref
|
||||
agent-browser wait --load networkidle
|
||||
agent-browser screenshot channel.png
|
||||
```
|
||||
|
||||
### Finding Messages/Threads
|
||||
|
||||
```bash
|
||||
# Use Slack search
|
||||
agent-browser snapshot -i
|
||||
agent-browser click @e5 # Search button (typical ref)
|
||||
agent-browser fill @e_search "keyword"
|
||||
agent-browser press Enter
|
||||
agent-browser wait --load networkidle
|
||||
agent-browser screenshot search-results.png
|
||||
```
|
||||
|
||||
### Extracting Channel Information
|
||||
|
||||
```bash
|
||||
# Get list of all visible channels
|
||||
agent-browser snapshot --json > slack-snapshot.json
|
||||
|
||||
# Parse for channel names and metadata
|
||||
# Look for treeitem elements with level=2 (sub-channels under sections)
|
||||
```
|
||||
|
||||
### Checking Channel Details
|
||||
|
||||
```bash
|
||||
# Open a channel
|
||||
agent-browser click @e_channel_ref
|
||||
agent-browser wait 1000
|
||||
|
||||
# Get channel info (members, description, etc.)
|
||||
agent-browser snapshot -i
|
||||
agent-browser screenshot channel-details.png
|
||||
|
||||
# Scroll through messages
|
||||
agent-browser scroll down 500
|
||||
agent-browser screenshot channel-messages.png
|
||||
```
|
||||
|
||||
### Taking Notes/Capturing State
|
||||
|
||||
When you need to document findings from Slack:
|
||||
|
||||
```bash
|
||||
# Take annotated screenshot (shows element numbers)
|
||||
agent-browser screenshot --annotate slack-state.png
|
||||
|
||||
# Take full-page screenshot
|
||||
agent-browser screenshot --full slack-full.png
|
||||
|
||||
# Get current URL for reference
|
||||
agent-browser get url
|
||||
|
||||
# Get page title
|
||||
agent-browser get title
|
||||
```
|
||||
|
||||
## Sidebar Structure
|
||||
|
||||
Understanding Slack's sidebar helps you navigate efficiently:
|
||||
|
||||
```
|
||||
- Threads
|
||||
- Huddles
|
||||
- Drafts & sent
|
||||
- Directories
|
||||
- [Section Headers - External connections, Starred, Channels, etc.]
|
||||
- [Channels listed as treeitems]
|
||||
- Direct Messages
|
||||
- [DMs listed]
|
||||
- Apps
|
||||
- [App shortcuts]
|
||||
- [More unreads] button (toggles unread channels list)
|
||||
```
|
||||
|
||||
Key refs to look for:
|
||||
- `@e12` - Home tab (usually)
|
||||
- `@e13` - DMs tab
|
||||
- `@e14` - Activity tab
|
||||
- `@e5` - Search button
|
||||
- `@e21` - More unreads button (varies by session)
|
||||
|
||||
## Tabs in Slack
|
||||
|
||||
After clicking on a channel, you'll see tabs:
|
||||
- **Messages** - Channel conversation
|
||||
- **Files** - Shared files
|
||||
- **Pins** - Pinned messages
|
||||
- **Add canvas** - Collaborative canvas
|
||||
- Other tabs depending on workspace setup
|
||||
|
||||
Click tab refs to switch views and get different information.
|
||||
|
||||
## Extracting Data from Slack
|
||||
|
||||
### Get Text Content
|
||||
|
||||
```bash
|
||||
# Get a message or element's text
|
||||
agent-browser get text @e_message_ref
|
||||
```
|
||||
|
||||
### Parse Accessibility Tree
|
||||
|
||||
```bash
|
||||
# Full snapshot as JSON for programmatic parsing
|
||||
agent-browser snapshot --json > output.json
|
||||
|
||||
# Look for:
|
||||
# - Channel names (name field in treeitem)
|
||||
# - Message content (in listitem/document elements)
|
||||
# - User names (button elements with user info)
|
||||
# - Timestamps (link elements with time info)
|
||||
```
|
||||
|
||||
### Count Unreads
|
||||
|
||||
```bash
|
||||
# After expanding unreads section:
|
||||
agent-browser snapshot -i | grep -c "treeitem"
|
||||
# Each treeitem with a channel name in the unreads section is one unread
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
- **Connect to existing sessions**: Use `agent-browser connect 9222` if Slack is already open. This is faster than opening a new browser.
|
||||
- **Take snapshots before clicking**: Always `snapshot -i` to identify refs before clicking buttons.
|
||||
- **Re-snapshot after navigation**: After navigating to a new channel or section, take a fresh snapshot to find new refs.
|
||||
- **Use JSON snapshots for parsing**: When you need to extract structured data, use `snapshot --json` for machine-readable output.
|
||||
- **Pace interactions**: Add `sleep 1` between rapid interactions to let the UI update.
|
||||
- **Check accessibility tree**: The accessibility tree shows what screen readers (and your automation) can see. If an element isn't in the snapshot, it may be hidden or require scrolling.
|
||||
- **Scroll in sidebar**: Use `agent-browser scroll down 300 --selector ".p-sidebar"` to scroll within the Slack sidebar if channel list is long.
|
||||
|
||||
## Limitations
|
||||
|
||||
- **Cannot access Slack API**: This uses browser automation, not the Slack API. No OAuth, webhooks, or bot tokens needed.
|
||||
- **Session-specific**: Screenshots and snapshots are tied to the current browser session.
|
||||
- **Rate limiting**: Slack may rate-limit rapid interactions. Add delays between commands if needed.
|
||||
- **Workspace-specific**: You interact with your own workspace -- no cross-workspace automation.
|
||||
|
||||
## Debugging
|
||||
|
||||
### Check console for errors
|
||||
|
||||
```bash
|
||||
agent-browser console
|
||||
agent-browser errors
|
||||
```
|
||||
|
||||
### Get current page state
|
||||
|
||||
```bash
|
||||
agent-browser get url
|
||||
agent-browser get title
|
||||
agent-browser screenshot page-state.png
|
||||
```
|
||||
|
||||
## Example: Full Unread Check
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
|
||||
# Connect to Slack
|
||||
agent-browser connect 9222
|
||||
|
||||
# Take initial snapshot
|
||||
echo "=== Checking Slack unreads ==="
|
||||
agent-browser snapshot -i > snapshot.txt
|
||||
|
||||
# Check Activity tab for unreads
|
||||
agent-browser click @e14 # Activity tab
|
||||
agent-browser wait 1000
|
||||
agent-browser screenshot activity.png
|
||||
ACTIVITY_RESULT=$(agent-browser get text @e_main_area)
|
||||
echo "Activity: $ACTIVITY_RESULT"
|
||||
|
||||
# Check DMs
|
||||
agent-browser click @e13 # DMs tab
|
||||
agent-browser wait 1000
|
||||
agent-browser screenshot dms.png
|
||||
|
||||
# Check unread channels in sidebar
|
||||
agent-browser click @e21 # More unreads button
|
||||
agent-browser wait 500
|
||||
agent-browser snapshot -i > unreads-expanded.txt
|
||||
agent-browser screenshot unreads.png
|
||||
|
||||
# Summary
|
||||
echo "=== Summary ==="
|
||||
echo "See activity.png, dms.png, and unreads.png for full details"
|
||||
```
|
||||
|
||||
## References
|
||||
|
||||
- **Slack docs**: https://slack.com/help
|
||||
- **Web experience**: https://app.slack.com
|
||||
- **Keyboard shortcuts**: Type `?` in Slack for shortcut list
|
||||
@@ -0,0 +1,348 @@
|
||||
# Common Slack Tasks & Patterns
|
||||
|
||||
Reference guide for common automations and data extraction patterns when interacting with Slack.
|
||||
|
||||
## Task: Check All Unread Messages
|
||||
|
||||
### Goal
|
||||
Determine which channels and DMs have unread messages.
|
||||
|
||||
### Steps
|
||||
|
||||
1. **Connect to Slack**
|
||||
```bash
|
||||
agent-browser connect 9222
|
||||
```
|
||||
|
||||
2. **Check Activity Tab**
|
||||
- Take snapshot: `agent-browser snapshot -i`
|
||||
- Look for Activity tab ref (usually `@e14`)
|
||||
- Click: `agent-browser click @e14`
|
||||
- Wait: `agent-browser wait 1000`
|
||||
- If you see "You've read all the unreads", you have no unread messages
|
||||
- Screenshot: `agent-browser screenshot activity.png`
|
||||
|
||||
3. **Check DMs**
|
||||
- Click DMs tab ref (usually `@e13`)
|
||||
- Look for "Unreads" toggle/badge
|
||||
- Count visible conversations with indicators
|
||||
|
||||
4. **Check Channels**
|
||||
- Look for "More unreads" button (usually in sidebar)
|
||||
- Click it to expand list of channels with unreads
|
||||
- Screenshot the expanded view
|
||||
- Parse channel names from snapshot
|
||||
|
||||
5. **Summary**
|
||||
- Activity + DMs + Channels = complete unread picture
|
||||
|
||||
### Evidence Capture
|
||||
- Screenshot of Activity tab
|
||||
- Screenshot of DMs
|
||||
- Screenshot of expanded unreads sidebar
|
||||
|
||||
---
|
||||
|
||||
## Task: Find All Channels in Workspace
|
||||
|
||||
### Goal
|
||||
Get a complete list of all channels you have access to.
|
||||
|
||||
### Steps
|
||||
|
||||
1. **Navigate to Channels section**
|
||||
```bash
|
||||
agent-browser connect 9222
|
||||
agent-browser snapshot -i
|
||||
```
|
||||
|
||||
2. **Look for "Channels" treeitem**
|
||||
- This is usually a collapsed section header
|
||||
- Click to expand if collapsed
|
||||
- Screenshot: `agent-browser screenshot all-channels.png`
|
||||
|
||||
3. **Scroll through sidebar**
|
||||
```bash
|
||||
# If the list is long, scroll within the sidebar
|
||||
agent-browser scroll down 500 --selector ".p-sidebar"
|
||||
agent-browser screenshot channels-page-2.png
|
||||
```
|
||||
|
||||
4. **Parse snapshot for channel list**
|
||||
```bash
|
||||
agent-browser snapshot --json > channels.json
|
||||
# Search JSON for treeitem elements with level=2 under "Channels" section
|
||||
```
|
||||
|
||||
### Evidence
|
||||
- JSON snapshot with all channel refs
|
||||
- Screenshots of channel list
|
||||
- Count of total channels
|
||||
|
||||
---
|
||||
|
||||
## Task: Search for Messages Containing Keywords
|
||||
|
||||
### Goal
|
||||
Find all messages/threads mentioning specific terms.
|
||||
|
||||
### Steps
|
||||
|
||||
1. **Open search**
|
||||
```bash
|
||||
agent-browser snapshot -i
|
||||
# Find Search button ref (usually @e5)
|
||||
agent-browser click @e5
|
||||
agent-browser wait 500
|
||||
```
|
||||
|
||||
2. **Enter search term**
|
||||
```bash
|
||||
# Identify search input ref from snapshot
|
||||
agent-browser fill @e_search_input "your keyword"
|
||||
agent-browser press Enter
|
||||
agent-browser wait --load networkidle
|
||||
```
|
||||
|
||||
3. **Capture results**
|
||||
```bash
|
||||
agent-browser screenshot search-results.png
|
||||
agent-browser snapshot -i > search-snapshot.txt
|
||||
```
|
||||
|
||||
4. **Parse results**
|
||||
- Look for result items in snapshot
|
||||
- Extract message content, sender, channel, timestamp
|
||||
- Follow links to view full context
|
||||
|
||||
### Filters
|
||||
Slack search supports filters:
|
||||
- `in:channel-name` - Search in specific channel
|
||||
- `from:@user` - Messages from specific user
|
||||
- `before:2026-02-25` - Messages before date
|
||||
- `after:2026-02-20` - Messages after date
|
||||
- `has:file` - Messages with files
|
||||
- `has:emoji` - Messages with reactions
|
||||
|
||||
Example search: `"bug report" in:engineering from:@alice after:2026-02-20`
|
||||
|
||||
---
|
||||
|
||||
## Task: Monitor a Specific Channel for Activity
|
||||
|
||||
### Goal
|
||||
Watch a channel and capture new messages/engagement.
|
||||
|
||||
### Steps
|
||||
|
||||
1. **Navigate to channel**
|
||||
```bash
|
||||
agent-browser connect 9222
|
||||
agent-browser snapshot -i
|
||||
# Find channel ref from sidebar
|
||||
agent-browser click @e_channel_ref
|
||||
agent-browser wait --load networkidle
|
||||
```
|
||||
|
||||
2. **Check channel info**
|
||||
- Screenshot channel details: `agent-browser screenshot channel-header.png`
|
||||
- Look for member count, description, topic
|
||||
|
||||
3. **View messages**
|
||||
```bash
|
||||
# Jump to recent/unread
|
||||
agent-browser press j # Jump to unread in Slack
|
||||
agent-browser wait 500
|
||||
agent-browser screenshot recent-messages.png
|
||||
```
|
||||
|
||||
4. **Scroll to see more**
|
||||
```bash
|
||||
agent-browser scroll down 500
|
||||
agent-browser screenshot more-messages.png
|
||||
```
|
||||
|
||||
5. **Check threads**
|
||||
- Click on messages with thread indicators
|
||||
- View replies in thread view
|
||||
- Screenshot: `agent-browser screenshot thread.png`
|
||||
|
||||
### Evidence
|
||||
- Channel info screenshot
|
||||
- Message history screenshots
|
||||
- Thread examples
|
||||
|
||||
---
|
||||
|
||||
## Task: Extract User Information from a Conversation
|
||||
|
||||
### Goal
|
||||
Find who said what, when, and in what context.
|
||||
|
||||
### Steps
|
||||
|
||||
1. **Navigate to relevant channel or DM**
|
||||
```bash
|
||||
agent-browser click @e_conversation_ref
|
||||
agent-browser wait 1000
|
||||
```
|
||||
|
||||
2. **Take snapshot with context**
|
||||
```bash
|
||||
agent-browser snapshot --json > conversation.json
|
||||
```
|
||||
|
||||
3. **Find message blocks**
|
||||
- In JSON, look for document/listitem elements
|
||||
- These contain: user name (button), timestamp (link), message text, reactions
|
||||
|
||||
4. **Extract structured data**
|
||||
- User: Found in button element with username
|
||||
- Time: Found in link with timestamp
|
||||
- Content: Text content of message
|
||||
- Reactions: Buttons showing emoji counts
|
||||
|
||||
5. **Screenshot key messages**
|
||||
```bash
|
||||
agent-browser screenshot important-message.png
|
||||
agent-browser screenshot --annotate annotated-message.png
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task: Track Reactions to a Message
|
||||
|
||||
### Goal
|
||||
See who reacted to a message and with what emoji.
|
||||
|
||||
### Steps
|
||||
|
||||
1. **Find message with reactions**
|
||||
```bash
|
||||
agent-browser snapshot -i
|
||||
# Look for "N reaction(s)" buttons in messages
|
||||
```
|
||||
|
||||
2. **Click reaction button to expand**
|
||||
```bash
|
||||
agent-browser click @e_reaction_button
|
||||
agent-browser wait 500
|
||||
```
|
||||
|
||||
3. **Capture reaction details**
|
||||
```bash
|
||||
agent-browser screenshot reactions.png
|
||||
# You'll see emoji, count, and list of users who reacted
|
||||
```
|
||||
|
||||
4. **Extract data**
|
||||
- Emoji used
|
||||
- Number of people who reacted
|
||||
- User names (if visible in popup)
|
||||
|
||||
---
|
||||
|
||||
## Task: Find and Review Pinned Messages
|
||||
|
||||
### Goal
|
||||
See messages that have been pinned in a channel.
|
||||
|
||||
### Steps
|
||||
|
||||
1. **Open a channel**
|
||||
```bash
|
||||
agent-browser click @e_channel_ref
|
||||
agent-browser wait 1000
|
||||
agent-browser snapshot -i
|
||||
```
|
||||
|
||||
2. **Click Pins tab**
|
||||
- In channel view, look for "Pins" tab ref (usually near Messages, Files tabs)
|
||||
- Click it: `agent-browser click @e_pins_tab`
|
||||
- Wait: `agent-browser wait 500`
|
||||
|
||||
3. **View pinned messages**
|
||||
```bash
|
||||
agent-browser screenshot pins.png
|
||||
agent-browser snapshot -i > pins-snapshot.txt
|
||||
```
|
||||
|
||||
4. **Review each pin**
|
||||
- Click pin to see context
|
||||
- Note who pinned it, when, and why
|
||||
- Screenshot: `agent-browser screenshot pin-detail.png`
|
||||
|
||||
---
|
||||
|
||||
## Pattern: Extract Timestamp from Link
|
||||
|
||||
In Slack snapshot, message timestamps appear as links. Example:
|
||||
```
|
||||
- link "Feb 25th at 10:26:22 AM" [ref=e151]
|
||||
- /url: https://vercel.slack.com/archives/C0A5RTN0856/p1772036782543189
|
||||
```
|
||||
|
||||
The URL contains the timestamp in the fragment (`p1772036782543189`). This is a Slack message ID that uniquely identifies the message.
|
||||
|
||||
---
|
||||
|
||||
## Pattern: Understanding Channel/Thread Structure
|
||||
|
||||
```
|
||||
- treeitem "channel-name" [ref=e94] [level=2]
|
||||
- group: (contains channel metadata or sub-items)
|
||||
```
|
||||
|
||||
- **level=1**: Section headers (External connections, Starred, Channels, etc.)
|
||||
- **level=2**: Individual channels/items within sections
|
||||
- **level=3+**: Nested sub-items (rare in sidebar)
|
||||
|
||||
---
|
||||
|
||||
## Common Ref Patterns (Session-Dependent)
|
||||
|
||||
These refs vary per session, but follow patterns:
|
||||
|
||||
| Element | Typical Ref Range | How to Find |
|
||||
|---------|------------------|------------|
|
||||
| Home tab | e10-e20 | `snapshot -i \| grep "Home"` |
|
||||
| DMs tab | e10-e20 | `snapshot -i \| grep "DMs"` |
|
||||
| Activity tab | e10-e20 | `snapshot -i \| grep "Activity"` |
|
||||
| Search | e5-e10 | `snapshot -i \| grep "Search"` |
|
||||
| More unreads | e20-e30 | `snapshot -i \| grep "More unreads"` |
|
||||
| Channel refs | e30+ | `snapshot -i \| grep "treeitem"` |
|
||||
|
||||
**Always take a fresh snapshot** to find current refs for the current session.
|
||||
|
||||
---
|
||||
|
||||
## Debugging: Element Not Found
|
||||
|
||||
If you can't find an element:
|
||||
|
||||
1. **Check it's visible**
|
||||
```bash
|
||||
# Is the element on screen or off-screen?
|
||||
agent-browser screenshot current-state.png
|
||||
# Compare screenshot to what you expected
|
||||
```
|
||||
|
||||
2. **Try expanding/scrolling**
|
||||
```bash
|
||||
# Sidebar might need scrolling
|
||||
agent-browser scroll down 300 --selector ".p-sidebar"
|
||||
agent-browser snapshot -i
|
||||
```
|
||||
|
||||
3. **Check current URL**
|
||||
```bash
|
||||
agent-browser get url
|
||||
# Verify you're in the right section
|
||||
```
|
||||
|
||||
4. **Wait for page to load**
|
||||
```bash
|
||||
agent-browser wait --load networkidle
|
||||
agent-browser wait 1000
|
||||
agent-browser snapshot -i
|
||||
```
|
||||
@@ -0,0 +1,163 @@
|
||||
# Slack Analysis Report
|
||||
|
||||
**Date**: [DATE]
|
||||
**Workspace**: [WORKSPACE_NAME]
|
||||
**Analyst**: [YOUR_NAME]
|
||||
**Scope**: [WHAT_YOU_ANALYZED]
|
||||
|
||||
## Summary
|
||||
|
||||
### Unread Counts
|
||||
- **Activity**: [NUMBER] unreads
|
||||
- **Direct Messages**: [NUMBER] unreads
|
||||
- **Channels**: [NUMBER] channels with unreads
|
||||
|
||||
### Key Findings
|
||||
- [FINDING 1]
|
||||
- [FINDING 2]
|
||||
- [FINDING 3]
|
||||
|
||||
---
|
||||
|
||||
## Unread Channels
|
||||
|
||||
List of channels with unread messages:
|
||||
|
||||
| Channel | Unread Count | Last Activity | Notes |
|
||||
|---------|-------------|---------------|-------|
|
||||
| #engineering | 12 | Today 2:45 PM | Active discussion thread |
|
||||
| #announcements | 3 | Yesterday 5:30 PM | Team updates |
|
||||
| #random | 5 | Today 11:20 AM | Various topics |
|
||||
|
||||
---
|
||||
|
||||
## Unread Direct Messages
|
||||
|
||||
| User/Group | Message Count | Last Message | Preview |
|
||||
|------------|--------------|--------------|---------|
|
||||
| @alice | 2 | Today 3:15 PM | "Are you free to..." |
|
||||
| @product-team | 5 | Today 2:00 PM | Sync scheduled for... |
|
||||
|
||||
---
|
||||
|
||||
## Channel Snapshot
|
||||
|
||||
### Total Channels Accessible
|
||||
- **Public Channels**: [NUMBER]
|
||||
- **Private Channels**: [NUMBER]
|
||||
- **Group DMs**: [NUMBER]
|
||||
|
||||
### Channel Categories
|
||||
- **External Connections**: [COUNT] channels
|
||||
- **Starred**: [COUNT] channels
|
||||
- **Main Channels**: [COUNT] channels
|
||||
|
||||
---
|
||||
|
||||
## Most Active Channels (by recent activity)
|
||||
|
||||
| Rank | Channel | Activity | Participants |
|
||||
|------|---------|----------|--------------|
|
||||
| 1 | #engineering | High | 15+ active |
|
||||
| 2 | #general | High | 10+ active |
|
||||
| 3 | #product-design | Medium | 8+ active |
|
||||
|
||||
---
|
||||
|
||||
## Key Conversations
|
||||
|
||||
### [TOPIC 1]: Channel #engineering
|
||||
- **Status**: Ongoing discussion
|
||||
- **Participants**: @alice, @bob, @charlie
|
||||
- **Latest Update**: [TIME]
|
||||
- **Thread Count**: 5 threads
|
||||
- **Files Shared**: 2 documents
|
||||
- **Screenshots**: See `engineering-thread.png`
|
||||
|
||||
**Notes**: [Additional context about the conversation]
|
||||
|
||||
### [TOPIC 2]: DM with @alice
|
||||
- **Unread Messages**: 2
|
||||
- **Last Message**: [TIME]
|
||||
- **Summary**: [Brief summary of conversation]
|
||||
- **Action Items**: [Any TODOs mentioned]
|
||||
|
||||
---
|
||||
|
||||
## Search Results
|
||||
|
||||
### Query: "[SEARCH_TERM]"
|
||||
- **Results**: [NUMBER] messages
|
||||
- **Date Range**: [FROM] to [TO]
|
||||
- **Top Channels**: [LIST]
|
||||
- **Key Themes**: [PATTERNS OBSERVED]
|
||||
|
||||
#### Sample Results
|
||||
1. **[Date/Time]** in #[channel]: [Message snippet]
|
||||
2. **[Date/Time]** in #[channel]: [Message snippet]
|
||||
3. **[Date/Time]** in #[channel]: [Message snippet]
|
||||
|
||||
---
|
||||
|
||||
## Reactions & Engagement
|
||||
|
||||
### Most Reacted-To Messages
|
||||
| Message | Emoji | Count | Channel |
|
||||
|---------|-------|-------|---------|
|
||||
| "Shipped to production" | 🎉 | 8 | #engineering |
|
||||
| "FYI the site is down" | 🚨 | 12 | #incidents |
|
||||
|
||||
---
|
||||
|
||||
## Team Insights
|
||||
|
||||
### Most Active Users (by message volume)
|
||||
1. @alice - [COUNT] messages
|
||||
2. @bob - [COUNT] messages
|
||||
3. @charlie - [COUNT] messages
|
||||
|
||||
### Most Active Times
|
||||
- Peak hour: [TIME]
|
||||
- Peak day: [DAY]
|
||||
- Average messages per hour: [NUMBER]
|
||||
|
||||
---
|
||||
|
||||
## Issues / Observations
|
||||
|
||||
### [ISSUE 1]: [Title]
|
||||
**Severity**: [Critical/High/Medium/Low]
|
||||
**Description**: [What was observed]
|
||||
**Evidence**: See `issue-1-screenshot.png`
|
||||
**Recommendation**: [Suggested action]
|
||||
|
||||
---
|
||||
|
||||
## Screenshots
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `activity-tab.png` | Activity tab showing unreads |
|
||||
| `dms-overview.png` | DM list with unread indicators |
|
||||
| `channels-full-list.png` | Complete channel list |
|
||||
| `engineering-thread.png` | Active engineering thread |
|
||||
|
||||
---
|
||||
|
||||
## Appendix: Raw Data
|
||||
|
||||
### Snapshot Output
|
||||
```
|
||||
[Paste snapshot -i output here]
|
||||
```
|
||||
|
||||
### JSON Snapshot (for parsing)
|
||||
```json
|
||||
[Paste snapshot --json output here]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Report Generated**: [DATE/TIME]
|
||||
**Analysis Duration**: [TIME]
|
||||
**Next Steps**: [TODO]
|
||||
@@ -0,0 +1,280 @@
|
||||
---
|
||||
name: vercel-sandbox
|
||||
description: Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.
|
||||
---
|
||||
|
||||
# Browser Automation with Vercel Sandbox
|
||||
|
||||
Run agent-browser + headless Chrome inside ephemeral Vercel Sandbox microVMs. A Linux VM spins up on demand, executes browser commands, and shuts down. Works with any Vercel-deployed framework (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.).
|
||||
|
||||
## Dependencies
|
||||
|
||||
```bash
|
||||
pnpm add @vercel/sandbox
|
||||
```
|
||||
|
||||
The sandbox VM needs system dependencies for Chromium plus agent-browser itself. Use sandbox snapshots (below) to pre-install everything for sub-second startup.
|
||||
|
||||
## Core Pattern
|
||||
|
||||
```ts
|
||||
import { Sandbox } from "@vercel/sandbox";
|
||||
|
||||
// System libraries required by Chromium on the sandbox VM (Amazon Linux / dnf)
|
||||
const CHROMIUM_SYSTEM_DEPS = [
|
||||
"nss", "nspr", "libxkbcommon", "atk", "at-spi2-atk", "at-spi2-core",
|
||||
"libXcomposite", "libXdamage", "libXrandr", "libXfixes", "libXcursor",
|
||||
"libXi", "libXtst", "libXScrnSaver", "libXext", "mesa-libgbm", "libdrm",
|
||||
"mesa-libGL", "mesa-libEGL", "cups-libs", "alsa-lib", "pango", "cairo",
|
||||
"gtk3", "dbus-libs",
|
||||
];
|
||||
|
||||
function getSandboxCredentials() {
|
||||
if (
|
||||
process.env.VERCEL_TOKEN &&
|
||||
process.env.VERCEL_TEAM_ID &&
|
||||
process.env.VERCEL_PROJECT_ID
|
||||
) {
|
||||
return {
|
||||
token: process.env.VERCEL_TOKEN,
|
||||
teamId: process.env.VERCEL_TEAM_ID,
|
||||
projectId: process.env.VERCEL_PROJECT_ID,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
async function withBrowser<T>(
|
||||
fn: (sandbox: InstanceType<typeof Sandbox>) => Promise<T>,
|
||||
): Promise<T> {
|
||||
const snapshotId = process.env.AGENT_BROWSER_SNAPSHOT_ID;
|
||||
const credentials = getSandboxCredentials();
|
||||
|
||||
const sandbox = snapshotId
|
||||
? await Sandbox.create({
|
||||
...credentials,
|
||||
source: { type: "snapshot", snapshotId },
|
||||
timeout: 120_000,
|
||||
})
|
||||
: await Sandbox.create({ ...credentials, runtime: "node24", timeout: 120_000 });
|
||||
|
||||
if (!snapshotId) {
|
||||
await sandbox.runCommand("sh", [
|
||||
"-c",
|
||||
`sudo dnf clean all 2>&1 && sudo dnf install -y --skip-broken ${CHROMIUM_SYSTEM_DEPS.join(" ")} 2>&1 && sudo ldconfig 2>&1`,
|
||||
]);
|
||||
await sandbox.runCommand("npm", ["install", "-g", "agent-browser"]);
|
||||
await sandbox.runCommand("npx", ["agent-browser", "install"]);
|
||||
}
|
||||
|
||||
try {
|
||||
return await fn(sandbox);
|
||||
} finally {
|
||||
await sandbox.stop();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Screenshot
|
||||
|
||||
The `screenshot --json` command saves to a file and returns the path. Read the file back as base64:
|
||||
|
||||
```ts
|
||||
export async function screenshotUrl(url: string) {
|
||||
return withBrowser(async (sandbox) => {
|
||||
await sandbox.runCommand("agent-browser", ["open", url]);
|
||||
|
||||
const titleResult = await sandbox.runCommand("agent-browser", [
|
||||
"get", "title", "--json",
|
||||
]);
|
||||
const title = JSON.parse(await titleResult.stdout())?.data?.title || url;
|
||||
|
||||
const ssResult = await sandbox.runCommand("agent-browser", [
|
||||
"screenshot", "--json",
|
||||
]);
|
||||
const ssPath = JSON.parse(await ssResult.stdout())?.data?.path;
|
||||
const b64Result = await sandbox.runCommand("base64", ["-w", "0", ssPath]);
|
||||
const screenshot = (await b64Result.stdout()).trim();
|
||||
|
||||
await sandbox.runCommand("agent-browser", ["close"]);
|
||||
|
||||
return { title, screenshot };
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## Accessibility Snapshot
|
||||
|
||||
```ts
|
||||
export async function snapshotUrl(url: string) {
|
||||
return withBrowser(async (sandbox) => {
|
||||
await sandbox.runCommand("agent-browser", ["open", url]);
|
||||
|
||||
const titleResult = await sandbox.runCommand("agent-browser", [
|
||||
"get", "title", "--json",
|
||||
]);
|
||||
const title = JSON.parse(await titleResult.stdout())?.data?.title || url;
|
||||
|
||||
const snapResult = await sandbox.runCommand("agent-browser", [
|
||||
"snapshot", "-i", "-c",
|
||||
]);
|
||||
const snapshot = await snapResult.stdout();
|
||||
|
||||
await sandbox.runCommand("agent-browser", ["close"]);
|
||||
|
||||
return { title, snapshot };
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## Multi-Step Workflows
|
||||
|
||||
The sandbox persists between commands, so you can run full automation sequences:
|
||||
|
||||
```ts
|
||||
export async function fillAndSubmitForm(url: string, data: Record<string, string>) {
|
||||
return withBrowser(async (sandbox) => {
|
||||
await sandbox.runCommand("agent-browser", ["open", url]);
|
||||
|
||||
const snapResult = await sandbox.runCommand("agent-browser", [
|
||||
"snapshot", "-i",
|
||||
]);
|
||||
const snapshot = await snapResult.stdout();
|
||||
// Parse snapshot to find element refs...
|
||||
|
||||
for (const [ref, value] of Object.entries(data)) {
|
||||
await sandbox.runCommand("agent-browser", ["fill", ref, value]);
|
||||
}
|
||||
|
||||
await sandbox.runCommand("agent-browser", ["click", "@e5"]);
|
||||
await sandbox.runCommand("agent-browser", ["wait", "--load", "networkidle"]);
|
||||
|
||||
const ssResult = await sandbox.runCommand("agent-browser", [
|
||||
"screenshot", "--json",
|
||||
]);
|
||||
const ssPath = JSON.parse(await ssResult.stdout())?.data?.path;
|
||||
const b64Result = await sandbox.runCommand("base64", ["-w", "0", ssPath]);
|
||||
const screenshot = (await b64Result.stdout()).trim();
|
||||
|
||||
await sandbox.runCommand("agent-browser", ["close"]);
|
||||
|
||||
return { screenshot };
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## Sandbox Snapshots (Fast Startup)
|
||||
|
||||
A **sandbox snapshot** is a saved VM image of a Vercel Sandbox with system dependencies + agent-browser + Chromium already installed. Think of it like a Docker image -- instead of installing dependencies from scratch every time, the sandbox boots from the pre-built image.
|
||||
|
||||
This is unrelated to agent-browser's *accessibility snapshot* feature (`agent-browser snapshot`), which dumps a page's accessibility tree. A sandbox snapshot is a Vercel infrastructure concept for fast VM startup.
|
||||
|
||||
Without a sandbox snapshot, each run installs system deps + agent-browser + Chromium (~30s). With one, startup is sub-second.
|
||||
|
||||
### Creating a sandbox snapshot
|
||||
|
||||
The snapshot must include system dependencies (via `dnf`), agent-browser, and Chromium:
|
||||
|
||||
```ts
|
||||
import { Sandbox } from "@vercel/sandbox";
|
||||
|
||||
const CHROMIUM_SYSTEM_DEPS = [
|
||||
"nss", "nspr", "libxkbcommon", "atk", "at-spi2-atk", "at-spi2-core",
|
||||
"libXcomposite", "libXdamage", "libXrandr", "libXfixes", "libXcursor",
|
||||
"libXi", "libXtst", "libXScrnSaver", "libXext", "mesa-libgbm", "libdrm",
|
||||
"mesa-libGL", "mesa-libEGL", "cups-libs", "alsa-lib", "pango", "cairo",
|
||||
"gtk3", "dbus-libs",
|
||||
];
|
||||
|
||||
async function createSnapshot(): Promise<string> {
|
||||
const sandbox = await Sandbox.create({
|
||||
runtime: "node24",
|
||||
timeout: 300_000,
|
||||
});
|
||||
|
||||
await sandbox.runCommand("sh", [
|
||||
"-c",
|
||||
`sudo dnf clean all 2>&1 && sudo dnf install -y --skip-broken ${CHROMIUM_SYSTEM_DEPS.join(" ")} 2>&1 && sudo ldconfig 2>&1`,
|
||||
]);
|
||||
await sandbox.runCommand("npm", ["install", "-g", "agent-browser"]);
|
||||
await sandbox.runCommand("npx", ["agent-browser", "install"]);
|
||||
|
||||
const snapshot = await sandbox.snapshot();
|
||||
return snapshot.snapshotId;
|
||||
}
|
||||
```
|
||||
|
||||
Run this once, then set the environment variable:
|
||||
|
||||
```bash
|
||||
AGENT_BROWSER_SNAPSHOT_ID=snap_xxxxxxxxxxxx
|
||||
```
|
||||
|
||||
A helper script is available in the demo app:
|
||||
|
||||
```bash
|
||||
npx tsx examples/environments/scripts/create-snapshot.ts
|
||||
```
|
||||
|
||||
Recommended for any production deployment using the Sandbox pattern.
|
||||
|
||||
## Authentication
|
||||
|
||||
On Vercel deployments, the Sandbox SDK authenticates automatically via OIDC. For local development or explicit control, set:
|
||||
|
||||
```bash
|
||||
VERCEL_TOKEN=<personal-access-token>
|
||||
VERCEL_TEAM_ID=<team-id>
|
||||
VERCEL_PROJECT_ID=<project-id>
|
||||
```
|
||||
|
||||
These are spread into `Sandbox.create()` calls. When absent, the SDK falls back to `VERCEL_OIDC_TOKEN` (automatic on Vercel).
|
||||
|
||||
## Scheduled Workflows (Cron)
|
||||
|
||||
Combine with Vercel Cron Jobs for recurring browser tasks:
|
||||
|
||||
```ts
|
||||
// app/api/cron/route.ts (or equivalent in your framework)
|
||||
export async function GET() {
|
||||
const result = await withBrowser(async (sandbox) => {
|
||||
await sandbox.runCommand("agent-browser", ["open", "https://example.com/pricing"]);
|
||||
const snap = await sandbox.runCommand("agent-browser", ["snapshot", "-i", "-c"]);
|
||||
await sandbox.runCommand("agent-browser", ["close"]);
|
||||
return await snap.stdout();
|
||||
});
|
||||
|
||||
// Process results, send alerts, store data...
|
||||
return Response.json({ ok: true, snapshot: result });
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
// vercel.json
|
||||
{ "crons": [{ "path": "/api/cron", "schedule": "0 9 * * *" }] }
|
||||
```
|
||||
|
||||
## Environment Variables
|
||||
|
||||
| Variable | Required | Description |
|
||||
|---|---|---|
|
||||
| `AGENT_BROWSER_SNAPSHOT_ID` | No (but recommended) | Pre-built sandbox snapshot ID for sub-second startup (see above) |
|
||||
| `VERCEL_TOKEN` | No | Vercel personal access token (for local dev; OIDC is automatic on Vercel) |
|
||||
| `VERCEL_TEAM_ID` | No | Vercel team ID (for local dev) |
|
||||
| `VERCEL_PROJECT_ID` | No | Vercel project ID (for local dev) |
|
||||
|
||||
## Framework Examples
|
||||
|
||||
The pattern works identically across frameworks. The only difference is where you put the server-side code:
|
||||
|
||||
| Framework | Server code location |
|
||||
|---|---|
|
||||
| Next.js | Server actions, API routes, route handlers |
|
||||
| SvelteKit | `+page.server.ts`, `+server.ts` |
|
||||
| Nuxt | `server/api/`, `server/routes/` |
|
||||
| Remix | `loader`, `action` functions |
|
||||
| Astro | `.astro` frontmatter, API routes |
|
||||
|
||||
## Example
|
||||
|
||||
See `examples/environments/` in the agent-browser repo for a working app with the Vercel Sandbox pattern, including a sandbox snapshot creation script, streaming progress UI, and rate limiting.
|
||||
Reference in New Issue
Block a user