今天开始给大家分享真正的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就可以看到插件市场了，然而不是所有的插件都装起来就好用！
我这边首推两个必装插件，第一个是：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
安装
全局安装（推荐）
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
升级：
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-browsertype@e3"文本" # 逐字输入
agent-browser hover @e4# 悬停
agent-browserselect@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-browserwait--text"欢迎" # 等待文本出现
agent-browserwait--load networkidle# 等待网络空闲
agent-browserwait2000# 等待 2 秒
批量执行（提升性能）
agent-browser batch "open https://example.com" "snapshot -i" "screenshot"
JavaScript 执行
agent-browser eval "document.title"
agent-browsereval "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 对话。
云端浏览器支持
不需要本地 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-actionseval,download open example.com
总结
agent-browser 本质上是一个桥接 AI 智能体与浏览器的命令行工具 。你可以把它理解为：让 Claude Code、Cursor 这类 AI 能"看到"并"操控"浏览器的工具层。它的 Rust 原生性能、无依赖设计、以及专门优化的 snapshot → ref → action 工作流，使其成为目前 AI Agent 浏览器自动化领域最流行的选择之一。