Chris TateandVercel <vercel[bot]@users.noreply.github.com>
4713c8b520
* docs * updates * Fix: The handleCopy function fails to handle errors from navigator.clipboard.writeText(), causing unhandled exceptions and misleading UI feedback when clipboard operations fail. Co-authored-by: ctate <chris@ctate.dev> * Fix: The benchmark file uses emojis (📊, 🚀, 🔨, 📈, 📋, ✅, ⏱️, ⚠) in console output, violating repository guidelines that forbid emojis in code and output. Co-authored-by: ctate <chris@ctate.dev> * Remove benchmark/run.ts from PR --------- Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import { CodeBlock } from "@/components/code-block";
|
|
|
|
export default function AgentMode() {
|
|
return (
|
|
<div className="max-w-2xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
|
|
<div className="prose">
|
|
<h1>Agent Mode</h1>
|
|
<p>
|
|
agent-browser works with any AI coding agent. Use <code>--json</code> for machine-readable output.
|
|
</p>
|
|
|
|
<h2>Compatible agents</h2>
|
|
<ul>
|
|
<li>Claude Code</li>
|
|
<li>Cursor</li>
|
|
<li>GitHub Copilot</li>
|
|
<li>OpenAI Codex</li>
|
|
<li>Google Gemini</li>
|
|
<li>opencode</li>
|
|
<li>Any agent that can run shell commands</li>
|
|
</ul>
|
|
|
|
<h2>JSON output</h2>
|
|
<CodeBlock code={`agent-browser snapshot --json
|
|
# {"success":true,"data":{"snapshot":"...","refs":{...}}}
|
|
|
|
agent-browser get text @e1 --json
|
|
agent-browser is visible @e2 --json`} />
|
|
|
|
<h2>Optimal workflow</h2>
|
|
<CodeBlock code={`# 1. Navigate and get snapshot
|
|
agent-browser open example.com
|
|
agent-browser snapshot -i --json # AI parses tree and refs
|
|
|
|
# 2. AI identifies target refs from snapshot
|
|
# 3. Execute actions using refs
|
|
agent-browser click @e2
|
|
agent-browser fill @e3 "input text"
|
|
|
|
# 4. Get new snapshot if page changed
|
|
agent-browser snapshot -i --json`} />
|
|
|
|
<h2>Integration</h2>
|
|
|
|
<h3>Just ask</h3>
|
|
<p>The simplest approach:</p>
|
|
<CodeBlock lang="text" code="Use agent-browser to test the login flow. Run agent-browser --help to see available commands." />
|
|
<p>The <code>--help</code> output is comprehensive.</p>
|
|
|
|
<h3>AGENTS.md / CLAUDE.md</h3>
|
|
<p>For consistent results, add to your instructions file:</p>
|
|
<CodeBlock lang="markdown" code={`## 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`} />
|
|
|
|
<h3>Claude Code skill</h3>
|
|
<p>For richer context:</p>
|
|
<CodeBlock code="cp -r node_modules/agent-browser/skills/agent-browser .claude/skills/" />
|
|
<p>Or download:</p>
|
|
<CodeBlock code={`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`} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|