今天开始给大家分享真正的AI知识了，去年还和大家分享过很多次Cursor使用手册，说实话博主现在基本都已经很少用Cursor了，Cursor目前只给我拿来当代码搜索工具和偶尔看下源码的IDE，编程已经基本不用它了！

要说2026年想学AI，你一定要学会使用的是Claude Code，它的编程生态和插件系统确实要甩其它工具几条街，后面几期我也将结合我在海外公司上班后的项目经验和大家分享下如何打造AI Workflow、如何维护AI Harness、如何使用Hermes Agent等最新热门AI技术。

今天先和大家分享下如何正确使用Claude Code!

很多人都已经安装了Claude Code、CodeX这些CLI工具，如果你还只是停留在进入项目根目录，输入下claude启动终端对话，然后就直接提问去改代码阶段，那这篇文章你一定要看下！

说到Claude Code今年编程能排第一，那就得提到它强大的插件系统，包含了大量实用的Skills和MCP工具，一般输入/plugin就可以看到插件市场了，然而不是所有的插件都装起来就好用！

image.png

我这边首推两个必装插件，第一个是：agent-browser，第二个是：Superpowers！

这篇文章和大家分享下agent-browser是什么以及如何安装和使用！

agent-browser 详细教程

它是什么？

agent-browser 是一个专为 AI 智能体设计的命令行浏览器自动化工具，由 Vercel Labs 开源（⭐ 29.9K stars）。它的核心特点是：

  • 用 Rust 原生编写，性能极快，不依赖 Node.js

  • 通过 Chrome DevTools Protocol (CDP) 直接驱动 Chrome/Chromium，无需 Playwright 或 Puppeteer

  • 专门优化了与 AI 编程助手（Claude Code、Cursor、Codex、Copilot 等）的集成体验

  • 每周安装量达 187.4K 次

开源地址：https://github.com/vercel-labs/agent-browser

image.png

安装



# 全局安装（推荐）

   npm install -g agent-browser

   agent-browser install   # 第一次运行，下载 Chrome

# macOS Homebrew

   brew install agent-browser

   agent-browser install

# Cargo (Rust)

   cargo install agent-browser

   agent-browser install

# Linux 需要额外依赖

   agent-browser install --with-deps




image.png


升级：




agent-browser upgrade




核心工作流（最重要）


大家都知道现在很多网站直接fetch去抓包是抓不到内容的，而且很多网站都有网爬虫策略，所有agent-browser完全解决了这个问题，它能让AI自己去点击页面识别截图方式模拟人类浏览网页方式进行网站数据读取！


agent-browser 的 AI 推荐工作模式是 snapshot + ref 引用 模式，以下是它操作的相关步骤：


第一步：打开页面


例如，我这里打开我自己的一个最新新闻资讯网站https://news.quanyouhulian.com/，里面是一些新闻最新资讯信息




没有安装 agent-browser 前，直接查询这个网站内容 AI 是看不到的






我们使用该命令打开




agent-browser open https://news.quanyouhulian.com/






第二步：获取无障碍树（带元素引用 ref）


使用命令就可以操作网站上面的元素信息了




agent-browser snapshot -i   # -i 只显示可交互元素

# 输出示例：
# - button "Submit" [ref=e2]
# - textbox "Email" [ref=e3]
# - link "Learn more" [ref=e4]


第三步：用 ref 直接操作元素


获取到元素信息后，就可以直接使用命令操作网站页面了




agent-browser click @e2

   agent-browser fill @e3 "test@example.com"

   agent-browser get text @e1


第四步：截图确认


agent-browser就可以进行截图循环识别网站的内容




agent-browser screenshot page.png

   # 完成后关闭

   agent-browser close








常用命令分类


导航




agent-browser open <url>      # 打开网址

   agent-browser back / forward  # 前进/后退

   agent-browser reload          # 刷新


元素交互




agent-browser click @e2               # 点击

   agent-browser dblclick @e2            # 双击

   agent-browser fill @e3 "文本"         # 清空并填入

   agent-browser type @e3 "文本"         # 逐字输入

   agent-browser hover @e4               # 悬停

   agent-browser select @e5 "选项"       # 下拉框

   agent-browser check @e6               # 勾选复选框

   agent-browser scroll down 500         # 滚动

   agent-browser press Enter             # 按键


页面信息获取




agent-browser snapshot -i             # 可交互元素（适合 AI）

   agent-browser snapshot -i -c -d 5    # 精简输出，限制深度

   agent-browser get text @e1           # 获取文本

   agent-browser get url                # 获取当前 URL

   agent-browser get title              # 获取页面标题

   agent-browser screenshot page.png    # 截图

   agent-browser screenshot --annotate  # 带编号标注的截图（可视化定位）


等待




agent-browser wait "#spinner" --state hidden   # 等待元素消失

   agent-browser wait --text "欢迎"               # 等待文本出现

   agent-browser wait --load networkidle          # 等待网络空闲

   agent-browser wait 2000                        # 等待 2 秒


批量执行（提升性能）




agent-browser batch "open https://example.com" "snapshot -i" "screenshot"


JavaScript 执行




agent-browser eval "document.title"

   agent-browser eval "window.scrollTo(0, 500)"


网络与调试




agent-browser console               # 查看浏览器控制台

   agent-browser errors                # 查看页面报错

   agent-browser network requests      # 查看网络请求

   agent-browser trace start           # 开始录制 trace




会话与身份认证


复用 Chrome 本地登录状态（最方便）




# 列出本地 Chrome 配置文件

   agent-browser profiles

# 使用已登录的 Chrome 配置文件（会复制一份，不影响原始数据）

   agent-browser --profile Default open https://gmail.com


保存/加载认证状态




# 连接到已开启远程调试的 Chrome，保存登录态

   agent-browser --auto-connect state save ./my-auth.json

# 之后使用保存的登录态

   agent-browser --state ./my-auth.json open https://app.example.com


多会话隔离




agent-browser --session agent1 open site-a.com

   agent-browser --session agent2 open site-b.com

   agent-browser session list




与 AI 助手集成


上面介绍了agent-browser的强大功能，不过我们不可能每次自己去敲那些命令，所以我们需要让AI能自己去执行这些命令并获取数据，一般集成有两种方式


方式一：直接添加 Skill（推荐）




npx skills add vercel-labs/agent-browser


支持 Claude Code、Cursor、Codex、Gemini CLI、GitHub Copilot、Windsurf 等。




这里选择自己使用的CLI工具就可以，我是用的Claude Code




这个工具我建议可以直接安装到用户角色下面，因为功能非常实用，建议每个项目都有该skills




方式二：自然语言 Chat 模式




# 设置环境变量
export AI_GATEWAY_API_KEY=gw_your_key_here

# 单次执行

   agent-browser chat "打开 google.com 并搜索猫咪"

# 交互式 REPL

   agent-browser chat




可观测性：实时监控面板




# 启动本地 Web 监控面板（默认端口 4848）

   agent-browser dashboard start

# 自定义端口

   agent-browser dashboard start --port 8080

# 停止

   agent-browser dashboard stop


面板功能：实时浏览器视口、命令执行流水线、控制台输出、AI 对话。




image.png




云端浏览器支持


不需要本地 Chrome 时，可接入多种云服务：



 
  

   服务
   环境变量
   命令
  

 
 
  

   Browserbase
   BROWSERBASE_API_KEY
   -p browserbase
  

  

   Browserless
   BROWSERLESS_API_KEY
   -p browserless
  

  

   Browser Use
   BROWSER_USE_API_KEY
   -p browseruse
  

  

   Kernel
   KERNEL_API_KEY
   -p kernel
  

  

   AWS AgentCore
   AWS 凭证
   -p agentcore
  

 





安全配置




# 限制只能访问指定域名

   agent-browser --allowed-domains "example.com,*.example.com" open example.com

# 操作内容用分隔符包裹（防止 LLM 误读）

   agent-browser --content-boundaries snapshot

# 限制输出长度（防止 context 爆满）

   agent-browser --max-output 50000 snapshot

# 敏感操作需确认

   agent-browser --confirm-actions eval,download open example.com




总结


agent-browser 本质上是一个桥接 AI 智能体与浏览器的命令行工具。你可以把它理解为：让 Claude Code、Cursor 这类 AI 能"看到"并"操控"浏览器的工具层。它的 Rust 原生性能、无依赖设计、以及专门优化的 snapshot → ref → action 工作流，使其成为目前 AI Agent 浏览器自动化领域最流行的选择之一。
 
  
  
 
 Logo 
DeepSeek技术社区
 
欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。
 
 
  
更多推荐
  
cover
 
Agent 权限爆炸：工具调用越多越聪明？生产环境如何分层管控
 
 
avatar DeepSeek技术社区
 
cover
 
批处理任务压垮线上服务：DeepSeek-RAG 索引重建的资源隔离实战
 
 
avatar DeepSeek技术社区
 
cover
 
提示词管理混乱？从 Git 版本控制到 DeepSeek 提示词工程实践
 
 
avatar DeepSeek技术社区