docs: mdx, light/dark mode, ask (#400)

2026-02-09 11:16:21 -06:00
parent 4d8097a56f
commit e8ceafcbe1
36 changed files with 4221 additions and 1258 deletions
@@ -0,0 +1,104 @@
+export const metadata = { title: "Installation" }
+
+# Installation
+
+## npm (recommended)
+
+```bash
+npm install -g agent-browser
+agent-browser install  # Download Chromium
+```
+
+## Homebrew (macOS)
+
+```bash
+brew install agent-browser
+agent-browser install  # Download Chromium
+```
+
+## From source
+
+```bash
+git clone https://github.com/vercel-labs/agent-browser
+cd agent-browser
+pnpm install
+pnpm build
+pnpm build:native
+./bin/agent-browser install
+pnpm link --global
+```
+
+## Linux dependencies
+
+On Linux, install system dependencies:
+
+```bash
+agent-browser install --with-deps
+# or manually: npx playwright install-deps chromium
+```
+
+## Custom browser
+
+Use a custom browser executable instead of bundled Chromium:
+
+- **Serverless** - Use `@sparticuz/chromium` (~50MB vs ~684MB)
+- **System browser** - Use existing Chrome installation
+- **Custom builds** - Use modified browser builds
+
+```bash
+# Via flag
+agent-browser --executable-path /path/to/chromium open example.com
+
+# Via environment variable
+AGENT_BROWSER_EXECUTABLE_PATH=/path/to/chromium agent-browser open example.com
+```
+
+### Serverless example
+
+```typescript
+import chromium from '@sparticuz/chromium';
+import { BrowserManager } from 'agent-browser';
+
+export async function handler() {
+  const browser = new BrowserManager();
+  await browser.launch({
+    executablePath: await chromium.executablePath(),
+    headless: true,
+  });
+  // ... use browser
+}
+```
+
+## AI agent setup
+
+agent-browser works with any AI agent out of the box. For richer context:
+
+### AGENTS.md / CLAUDE.md
+
+Add to your instructions file:
+
+```markdown
+## Browser Automation
+
+Use `agent-browser` for web automation. Run `agent-browser --help` for all commands.
+
+Core workflow:
+1. `agent-browser open <url>` - Navigate to page
+2. `agent-browser snapshot -i` - Get interactive elements with refs (@e1, @e2)
+3. `agent-browser click @e1` / `fill @e2 "text"` - Interact using refs
+4. Re-snapshot after page changes
+```
+
+### Claude Code skill
+
+```bash
+cp -r node_modules/agent-browser/skills/agent-browser .claude/skills/
+```
+
+Or download:
+
+```bash
+mkdir -p .claude/skills/agent-browser
+curl -o .claude/skills/agent-browser/SKILL.md \
+  https://raw.githubusercontent.com/vercel-labs/agent-browser/main/skills/agent-browser/SKILL.md
+```