VOOZH about

URL: https://glama.ai/mcp/servers/standardbeagle/agnt?locale=zh-CN

⇱ agnt by standardbeagle | Glama

agnt

赋予你的 AI 编码代理浏览器超能力。

👁 Go Version
👁 MCP
👁 npm
👁 PyPI
👁 License

什么是 agnt？

agnt 是一款专为 AI 辅助开发时代设计的新型工具。它充当了你的 AI 编码代理与浏览器之间的桥梁，扩展了在“氛围编码”（vibe coding）过程中可能实现的功能。

当你使用 Claude Code、Cursor 或其他 AI 编码工具进行开发时，agnt 可以让你的代理：

  • 看到你所看到的 - 截图、DOM 检查和可视化调试

  • 直接听取你的反馈 - 从浏览器发送消息给你的代理

  • 共同勾勒想法 - 直接在你的 UI 上绘制线框图

  • 实时调试 - 捕获错误、网络流量和性能指标

  • 在任何设备上测试 - 通过隧道连接到手机和 BrowserStack，并进行全面监测

  • 扩展其思维窗口 - 结构化数据比你的描述占用更少的 token

演示

👁 Sketch Demo

直接在运行中的应用上绘制线框图，然后发送给你的 AI 代理

愿景：扩展你代理的能力

传统的 AI 编码助手对浏览器中发生的事情一无所知。它们可以编写代码，但无法：

  • 查看其更改后的视觉结果

  • 在 JavaScript 错误发生时知晓

  • 理解你遇到的布局问题

  • 在无需你手动输入的情况下接收反馈

agnt 改变了这一点。 它在你的浏览器和 AI 代理之间创建了一个双向通道：

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Your Browser │ ←──► │ agnt │ ←──► │ AI Agent │
│ │ │ │ │ │
│ - See changes │ │ - Proxy traffic│ │ - Receives │
│ - Send notes │ │ - Capture errors│ │ context │
│ - Draw sketches│ │ - Inject tools │ │ - Acts on │
│ - Click to log │ │ - Route messages│ │ feedback │
└─────────────────┘ └─────────────────┘ └─────────────────┘

快速开始

安装

npm (推荐)：

npm install -g @standardbeagle/agnt

pip/uv：

pip install agnt
# or
uv pip install agnt

从源码安装：

git clone https://github.com/standardbeagle/agnt.git
cd agnt
make build && make install-local

作为 MCP 服务器 (Claude Code, Cursor 等)

添加到你的 MCP 配置中：

{
 "mcpServers": {
 "agnt": {
 "command": "agnt",
 "args": ["mcp"]
 }
 }
}

或者作为 Claude Code 插件安装：

/plugin marketplace add standardbeagle/agnt
/plugin install agnt@agnt

作为 PTY 包装器 (增强终端)

包装你的 AI 工具以获得覆盖层功能：

agnt run claude --dangerously-skip-permissions
agnt run cursor
agnt run aider

这会添加一个终端覆盖菜单 (Ctrl+P) 并启用浏览器到终端的消息桥接。

通道模式 (测试版 — 仅限 Claude Code)

测试版 / 实验性：通道模式需要一个分叉的 MCP SDK 和 Claude Code 中的开发标志。行为和架构可能会发生变化。

Claude Code v2.1.80+ 可以在无需 PTY 包装器的情况下，将实时浏览器错误、诊断信息和用户交互作为推送事件接收到上下文中。将 channel { enabled true } 添加到 .agnt.kdl 并使用 claude --dangerously-load-development-channels server:agnt 启动。有关完整架构、事件格式以及用于向浏览器覆盖层发送消息的 channel_reply 工具，请参阅 CLAUDE.md 中的通道模式部分。

核心功能

1. 浏览器超能力

启动代理，你的代理就能获得浏览器的视野：

proxy {action: "start", id: "app", target_url: "http://localhost:3000"}

现在你的代理可以：

// Take screenshots
proxy {action: "exec", id: "app", code: "__devtool.screenshot('current-state')"}

// Inspect any element
proxy {action: "exec", id: "app", code: "__devtool.inspect('#submit-button')"}

// Audit accessibility
proxy {action: "exec", id: "app", code: "__devtool.auditAccessibility()"}

// Check what the user clicked
proxy {action: "exec", id: "app", code: "__devtool.interactions.getLastClickContext()"}

2. 悬浮指示器

每个被代理的页面都会获得一个小的悬浮 Bug 图标。点击它可以：

  • 发送消息 直接给你的 AI 代理

  • 截取特定区域 的屏幕

  • 选择元素 以记录其详细信息

  • 打开草图模式 进行线框图绘制

无需再通过 Alt-Tab 切换来描述你看到的内容 - 只需点击并发送。

3. 草图模式

按下草图按钮并直接在你的 UI 上绘图：

  • 矩形、圆形、箭头和手绘

  • 线框元素：按钮、输入框、便签

  • 一键保存并发送给你的代理

非常适合在无需打字的情况下表达“我想在这里加个按钮”或“这个布局不对”。

4. 实时错误捕获

JavaScript 错误会被自动捕获并提供给你的代理：

proxylog {proxy_id: "app", types: ["error"]}
→ {message: "TypeError: Cannot read property 'map' of undefined",
 stack: "at ProductList (products.js:42)",
 timestamp: "..."}

你的代理会在错误发生时立即看到，而不是等你记起来去提及它们。

5. 扩展思维窗口

结构化数据比自然语言描述消耗更少的 token：

  • 错误摘要 - proxylog {types: ["error"]} 优于“我看到第 42 行有一个 TypeError，上面写着……”

  • 点击上下文 - interactions.getLastClickContext() 优于“我点击了页眉里的蓝色按钮……”

  • DOM 状态 - inspect('#element') 优于“有一个 div 里面嵌套了一些 span，还有……”

  • 合并的堆栈跟踪 - 将预处理后的 React 错误墙转化为可操作的摘要

  • 一目了然的状态 - 你的代理可以高效解析的结构化 JSON

agnt 不会将 100 行嵌套的 React 错误转储到上下文中，而是将冗长的输出合并为简洁、可操作的数据。

MCP 工具

工具

描述

detect

自动检测项目类型和可用脚本

run

执行脚本或命令 (后台/前台)

proc

管理进程：状态、输出、停止、列表

proxy

反向代理：启动、停止、执行、状态

proxylog

查询日志：http、错误、截图、草图、面板消息

currentpage

查看带有分组资源的活动页面会话

tunnel

隧道管理：用于移动端测试的 cloudflare/ngrok

daemon

管理后台守护进程服务

channel_reply

向开发者的浏览器覆盖层发送消息 (仅限通道模式)

浏览器 API (50+ 函数)

代理会注入 window.__devtool，提供强大的诊断功能：

元素检查

__devtool.inspect('#element') // Full element analysis
__devtool.getPosition('#element') // Bounding box and position
__devtool.isVisible('#element') // Visibility check

可视化调试

__devtool.highlight('.items') // Highlight elements
__devtool.mutations.highlightRecent() // Show recent DOM changes
__devtool.screenshot('name') // Capture screenshot

可访问性

__devtool.auditAccessibility() // Full a11y audit with score
__devtool.getContrast('#text') // Color contrast check
__devtool.getTabOrder() // Tab navigation order

交互

__devtool.interactions.getLastClick() // Last click details
__devtool.interactions.getLastClickContext() // Full click context
__devtool.selectElement() // Interactive picker

草图模式

__devtool.sketch.open() // Enter sketch mode
__devtool.sketch.save() // Save and send to agent
__devtool.sketch.toJSON() // Export sketch data

配置

在项目根目录创建 .agnt.kdl 以自动启动脚本、代理并配置浏览器通知：

// Scripts to run via daemon process manager
scripts {
 dev {
 run "npm run dev" // Shell command (recommended)
 autostart true
 url-matchers "(Local|Network):\\s*{url}"
 }

 api {
 command "go" // Or use command + args
 args "run" "./cmd/server"
 autostart true
 env {
 GIN_MODE "debug"
 }
 cwd "./backend"
 }
}

// Reverse proxies with traffic logging
proxies {
 frontend {
 script "dev" // Link to script for URL auto-detection
 }

 backend {
 target "http://localhost:8080"
 autostart true
 max-log-size 2000
 }
}

// Browser notifications when AI responds
hooks {
 on-response {
 toast true // Show toast notification
 indicator true // Flash bug indicator
 sound false // Play notification sound
 }
}

// Toast appearance
toast {
 duration 4000
 position "bottom-right" // top-right, top-left, bottom-right, bottom-left
 max-visible 3
}

在 Claude Code 中运行 /setup-project 以交互方式生成此配置。

框架特定的 URL 匹配器：

框架

url-matchers

Next.js / Vite / React

`"(Local\

Network):\s*{url}"`

Wails

"DevServer URL:\\s*{url}"

Astro

"Local\\s+{url}"

Jekyll

"Server address:\\s*{url}"

Hugo

"Web Server.*available at {url}"

架构

agnt 使用守护进程架构来实现持久状态：

┌─────────────────────┐ ┌─────────────────────────────────────┐
│ AI Agent │ │ agnt │
│ (Claude Code, etc.)│◄─────►│ │
│ │ MCP │ ┌────────────────┐ │
└─────────────────────┘ │ │ MCP Server │ │
 │ └───────┬────────┘ │
 │ │ socket │
 │ ▼ │
┌─────────────────────┐ │ ┌────────────────────────────────┐ │
│ Browser │◄──────┼──│ Daemon │ │
│ │ proxy │ │ ProcessManager │ ProxyManager │ │
│ __devtool API │ │ └────────────────────────────────┘ │
│ Floating Indicator │ └─────────────────────────────────────┘
│ Sketch Mode │
└─────────────────────┘

关键设计决策：

  • 使用 sync.Map 和原子操作实现无锁并发

  • 使用环形缓冲区限制内存占用

  • 进程和代理在客户端断开连接后依然存活

  • 零依赖的前端 JavaScript

文档

完整文档 →

# Run docs locally
cd docs-site
npm install && npm start

使用场景

  • 氛围编码 - 在你的代理观察一切的同时保持工作流

  • 可视化调试 - 展示而非讲述 - 勾勒出问题所在

  • 移动端测试 - 通过 Cloudflare/ngrok + BrowserStack 集成，为你的开发服务器建立隧道以进行真实设备测试

  • 可访问性测试 - 开发过程中的自动化 a11y 审计

  • 错误追踪 - 在用户发现之前捕获前端错误

  • UI 评审 - 直接在实时应用上标注设计

  • 远程协作 - 与你的代理共享视觉上下文

要求

  • Node.js 18+ 或 Go 1.24+

  • 兼容 MCP 的 AI 助手

从 devtool-mcp 迁移

agnt 是 devtool-mcp 的新名称。现有用户：

# npm
npm uninstall -g @standardbeagle/devtool-mcp
npm install -g @standardbeagle/agnt

# pip
pip uninstall devtool-mcp
pip install agnt

更新你的 MCP 配置，使用带有 ["mcp"] 参数的 agnt 命令。

许可证

MIT

贡献

欢迎贡献！有关架构详情，请参阅 文档。

A
license - permissive license
-
quality - not tested
A
maintenance

Maintenance

–Maintainers
–Response time
1dRelease cycle
94Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/standardbeagle/agnt'

If you have feedback or need assistance with the MCP directory API, please join our Discord server