mcpField
A
agent-browser

agent-browser

github.com/partme-aiAgent 工作流71894 次安装4 周前更新
代码仓库

关于 agent-browser

agent-browser 是指导 AI Agent 使用命令行自动化浏览器的技能，提供命令与 API 参考、示例和模板，涵盖元素引用选择、会话及认证浏览。

主要功能

  1. 01命令行浏览器交互与自动化
  2. 02页面快照与引用选择
  3. 03语义、CSS 和 XPath 选择器
  4. 04会话与认证浏览
  5. 05带 JSON 输出的 Agent 模式
  6. 06网络、标签页、框架与对话框

适用场景

  1. 01自动执行点击、填表和导航
  2. 02提取网页内容与数据
  3. 03构建面向 AI Agent 的浏览器工作流
  4. 04在多条命令间维持认证状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/partme-ai/full-stack-skills --skill agent-browser

安装后在 Claude Code 中输入/agent-browser确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE.txt
api/
commands.md
options.md
selectors.md
examples/advanced/
architecture.md
authenticated-sessions.md
cdp-mode.md
custom-executable.md
headed-mode.md
platforms.md
sessions.md
streaming.md
usage-with-agents.md
examples/agent-mode/
integration.md
introduction.md
optimal-workflow.md
examples/commands/
advanced-commands.md
basic-commands.md
examples/getting-started/
installation.md
examples/options/
global-options.md
session-options.md
snapshot-options.md
examples/quick-start/
quick-start.md
examples/selectors/
refs.md
traditional-selectors.md
templates/
ai-agent-workflow.md
basic-automation.md

详细介绍

何时使用此技能

在用户希望执行以下操作时使用此技能：

  • 通过 CLI 自动化浏览器交互（点击、填写、导航、截图）
  • 抓取网页内容或从页面提取数据
  • 构建可与网站交互的 AI Agent 工作流
  • 使用基于 refs 的元素选择，实现确定性自动化
  • 在 Agent 模式下运行浏览器自动化并输出 JSON
  • 使用自定义标头或 CDP 管理经过身份验证的会话

如何使用此技能

此技能的组织结构与 agent-browser 官方文档结构一致（https://github.com/vercel-labs/agent-browser/blob/main/README.md）。使用 agent-browser 时：

快速入门示例：快照 → 识别 → 交互
# 1. Install
npm install -g @anthropic-ai/agent-browser

# 2. Open a page and take a snapshot to get element refs
agent-browser open "https://example.com"
agent-browser snapshot
# Output includes refs like @e1, @e2, @e3 for each element

# 3. Click an element by ref
agent-browser click @e3

# 4. Fill a form field
agent-browser fill @e5 "[email protected]"

# 5. Agent mode (JSON output for programmatic use)
agent-browser snapshot --json
详细文档

  1. 安装 agent-browser：

    • 加载 examples/getting-started/installation.md，查看安装说明

  2. 快速入门：

    • 加载 examples/quick-start/quick-start.md，查看基本工作流示例

  3. 学习核心命令：

    • 加载 examples/commands/basic-commands.md，查看基本命令（open、click、fill 等）
    • 加载 examples/commands/advanced-commands.md，查看高级命令（snapshot、eval 等）
    • 加载 examples/commands/get-info/，查看信息检索命令
    • 加载 examples/commands/check-state/，查看状态检查命令
    • 加载 examples/commands/find-elements/，查看语义定位器命令
    • 加载 examples/commands/wait/，查看等待命令
    • 加载 examples/commands/mouse-control/，查看鼠标控制命令
    • 加载 examples/commands/browser-settings/，查看浏览器配置
    • 加载 examples/commands/cookies-storage/，查看 Cookie 和存储管理
    • 加载 examples/commands/network/，查看网络拦截
    • 加载 examples/commands/tabs-windows/，查看标签页和窗口管理
    • 加载 examples/commands/frames/，查看 iframe 处理
    • 加载 examples/commands/dialogs/，查看对话框处理
    • 加载 examples/commands/debug/，查看调试命令
    • 加载 examples/commands/navigation/，查看导航命令
    • 加载 examples/commands/setup/，查看设置命令

  4. 了解选择器：

    • 加载 examples/selectors/refs.md，查看基于 refs 的选择（@e1、@e2 等）
    • 加载 examples/selectors/traditional-selectors.md，查看 CSS、XPath 和语义定位器

  5. 使用 Agent 模式：

    • 加载 examples/agent-mode/introduction.md，了解 Agent 模式
    • 加载 examples/agent-mode/optimal-workflow.md，了解最佳 AI 工作流
    • 加载 examples/agent-mode/integration.md，了解如何与 AI Agent 集成

  6. 高级功能：

    • 加载 examples/advanced/sessions.md，查看会话管理
    • 加载 examples/advanced/headed-mode.md，查看如何使用可见浏览器进行调试
    • 加载 examples/advanced/authenticated-sessions.md，查看如何通过标头进行身份验证
    • 加载 examples/advanced/custom-executable.md，查看自定义浏览器可执行文件
    • 加载 examples/advanced/cdp-mode.md，查看 Chrome DevTools Protocol 集成
    • 加载 examples/advanced/streaming.md，查看浏览器视口流式传输
    • 加载 examples/advanced/architecture.md，查看架构概览
    • 加载 examples/advanced/platforms.md，查看平台支持
    • 加载 examples/advanced/usage-with-agents.md，查看 AI Agent 集成模式

  7. 配置选项：

    • 加载 examples/options/global-options.md，查看全局 CLI 选项
    • 加载 examples/options/snapshot-options.md，查看快照专用选项
    • 加载 examples/options/session-options.md，查看会话管理选项

  8. 按需参考 API 文档：

    • api/commands.md - 完整命令参考
    • api/selectors.md - 选择器参考
    • api/options.md - 选项参考

  9. 使用模板快速入门：

    • templates/basic-automation.md - 基本自动化工作流
    • templates/ai-agent-workflow.md - AI Agent 工作流模板
文档映射（与官方文档一一对应）

示例和模板

此技能包含详细示例，按照官方文档结构组织。所有示例都位于 examples/ 目录中（参见上方映射）。

使用示例：

  • 根据用户请求确定主题
  • 从上方映射中加载相应的示例文件
  • 遵循该文件中的说明、语法和最佳实践
  • 根据具体用例调整代码示例

使用模板：

  • 参考 templates/ 目录中的模板，搭建常见项目框架
  • 根据具体需求和编码风格调整模板

API 参考

  • Commands API：api/commands.md - 完整的命令参考，包含语法和示例
  • Selectors API：api/selectors.md - 选择器类型和用法参考
  • Options API：api/options.md - 所有选项的参考

最佳实践

  1. 使用 Refs：优先使用 refs（@e1、@e2），而非传统选择器，以实现确定性自动化
  2. 先生成快照：与元素交互前，务必先生成快照以获取 refs
  3. Agent 模式：在 Agent 模式下使用 --json 标志获取机器可读的输出
  4. 会话管理：使用 --session 在多个命令间维持状态
  5. 交互式快照：使用 -i 标志选择交互式快照
  6. 语义定位器：没有 refs 时，使用语义定位器（角色/名称）
  7. 错误处理：检查命令退出代码和错误消息
  8. 等待导航完成：命令会自动等待导航完成
  9. 有头模式：调试时使用 --headed，生产环境中使用无头模式
  10. CDP 集成：使用 --cdp 集成 Chrome DevTools Protocol
  11. 流式传输：使用 AGENT_BROWSER_STREAM_PORT 实时预览浏览器
  12. 已认证会话：使用 --headers 进行身份验证，无需登录流程
  13. 自定义可执行文件：在无服务器部署或使用自定义浏览器时，使用 --executable-path
  14. 快照选项：组合使用 -i、-c、-d、-s 选项，优化快照输出

资源

关键词

agent-browser、CLI 浏览器自动化、AI Agent、浏览器自动化 CLI、refs、快照、Agent 模式、语义定位器、浏览器自动化工具、命令行浏览器、AI Agent 浏览器、确定性选择器、无障碍树、浏览器命令、网页自动化 CLI、会话、有头模式、已认证会话、CDP 模式、流式传输、Chrome DevTools Protocol、Playwright、面向 AI 的浏览器自动化

评论

支持 Markdown