AI 智能体应得的浏览器接口.

AWI 是一个 MCP 服务器，为 AI 智能体提供任意网页的紧凑、语义化视图——而不是 40,000 字节它们无法理解的 DOM。

  • 稳定的元素 ID
  • 高 Token 效率的快照
  • 无原始 DOM 噪声
$npx agent-web-interface install
在 GitHub 上查看
  • 开源
  • MIT 许可
  • 适用于 Claude、GPT-4o、Gemini、Ollama
  • 需要 Node.js + Chrome

问题所在

浏览器自动化对脚本来说很简单。

对智能体却很难。

现有工具向智能体的上下文塞入成千上万 Token 的噪声。任务在中途失败。选择器在下次部署时失效。而且没有稳定的方式在多次调用间引用某个元素。

浏览器输出对比：原始 DOM 和无障碍树无法满足智能体；Agent Web Interface 则成功胜任。

Raw DOM

<div class="wrapper xyz-123">
  <div class="inner" data-v="8">
    <button type="submit"
      class="btn btn-primary
      x-4 y-2 md:x-6">
      Submit
    </button>
  </div>
</div>

40,000+ 字节的噪声。脆弱的类选择器。上下文耗尽。

Accessibility Tree

RootWebArea "Checkout"
  generic ""
    generic "wrapper xyz-123"
      generic "inner"
        button "Submit"
          StaticText "Submit"

更好，但仍然冗长。没有可在多次调用间引用的稳定 ID。

Agent Web Interface

<page title="Checkout">
  <region role="main">
    <button
      eid="btn-1"
      label="Submit" />
  </region>
</page>

紧凑。稳定 eid。只提供智能体所需的内容。

实时示例

看看你的智能体所看到的。

每次 MCP 工具调用都返回结构化的语义快照——而非原始 DOM。

agent-web-interface

input → tool call

{
  "tool": "navigate",
  "params": {
    "url": "https://example.com/checkout"
  }
}

output → snapshot

<page url="https://example.com/checkout"
      title="Checkout">
  <region role="main">
    <heading level="1">Your Cart (3 items)</heading>
    <list>
      <item eid="p1">Widget Pro — $29.99</item>
      <item eid="p2">Widget Lite — $9.99</item>
    </list>
    <button eid="btn-checkout"
            label="Proceed to Payment" />
  </region>
</page>

智能体引用 btn-checkout 通过 eid，贯穿其后的每一次调用——无需查找选择器，导航后也无需重新定位元素。

工作原理

五个步骤。一条安装命令。

1

智能体通过 MCP 调用浏览器工具

navigate, click, find, type, screenshot…

2

AWI 拦截工具调用

用 npx 启动的本地服务器——无需管理守护进程

3

Puppeteer 驱动 Chrome

通过 CDP 驱动本地 Chrome——真实渲染，完整 JS

4

页面精简为语义化 XML

标题、按钮、链接、表单——无原始标记

5

智能体收到稳定的 eid

一次次调用都引用同一个按钮。无需重新定位元素。

AWI 在本地运行，需要 Node.js 和 Chrome。如需无服务器或共享部署，请参阅 AWI Cloud。

功能特性

Playwright 给不了的，智能体在这里都能得到。

语义化快照

区域、标题、链接、按钮——而不是一大片 DOM。智能体基于结构推理，而非标记。

稳定的元素 ID

每个可交互元素都拥有稳定的 eid。在 10 次工具调用中持续引用它——CSS 类名会在下次部署时改变，eid 不会。

高 Token 效率

快照只返回智能体行动所需的结构——而非每次调用都返回整个页面。更长的任务跨度。更低的 Token 消耗。

网络检查

查看某次操作触发的每个请求——验证表单提交、追踪认证流程、调试重定向，无需打开开发者工具。

Canvas 检查

当页面是 canvas、图表或图像时，直接截图或读取 canvas 数据。能用语义快照的地方用语义快照；不能用的地方用像素。

模型无关

适用于任何兼容 MCP 的智能体运行时：Claude、GPT-4o、Gemini、本地模型。无厂商锁定。

人们用它做什么

在真实网页上行动的智能体。

网页研究智能体

在真实页面上导航、阅读和提取——价格监控、新闻聚合和竞品追踪，基于真实渲染的内容，而非过时的 API。

QA 与流程自动化

走完注册、结账和引导流程。填写表单、验证响应——无需那些会让 Playwright 套件失效的脆弱 CSS 选择器。

数据录入与表单填写

登录、按标签查找字段并提交——即便页面 DOM 在每次访问间变动。

托管云服务

不想自己管理 Chrome？

AWI Cloud 为你运行无头 Chrome。几秒钟内通过 API 密钥连接，在团队间共享会话，只为你使用的浏览器时长付费。

  • 无需安装本地 Chrome 或 Node.js——只需一个 API 密钥
  • 在团队间共享浏览器会话和凭据
  • 按分钟计费——无席位费，无长期承诺
  • 免费起步，扩展时再升级

常见问题

智能体（及其开发者）常问的问题。

什么是 Agent Web Interface（AWI）？

AWI 是一个开源的 MCP 服务器，为 AI 智能体提供任意网页的紧凑语义视图。它不返回原始 DOM 或冗长的无障碍树，而是返回带有稳定元素 ID（eid）的结构化 XML 快照，智能体可在多次工具调用之间引用这些 ID。

AWI 与 Playwright 或 Puppeteer 的 MCP 服务器有何不同？

Playwright 和 Puppeteer 是为确定性脚本而设计的，因此它们的 MCP 封装会把原始 DOM 或冗长的无障碍转储交给智能体，淹没其上下文。AWI 只返回智能体所需的语义结构——标题、按钮、链接、表单——并带有稳定的 eid，因此任务能以更少的 Token 运行更长时间。

AWI 如何降低 Token 用量？

一个典型页面有 40,000 多字节的 DOM。AWI 将其压缩为紧凑快照——通常小于 1 KB——只包含智能体行动所需的交互和结构元素。这意味着每一步消耗更少 Token，在上下文填满之前可完成更长的多步任务。

AWI 支持哪些 AI 模型和智能体？

支持任何兼容 MCP 的运行时——Claude、GPT-4o、Gemini，以及通过 Ollama 运行的本地模型。AWI 直接使用 Model Context Protocol，因此无需针对特定模型的胶水代码，也没有厂商锁定。

AWI 是免费和开源的吗？

是的。AWI 采用 MIT 许可并在 GitHub 上公开开发，你可以免费自行托管。对于不想自己运行 Chrome 的团队，还提供托管的 AWI Cloud。

我需要在本地运行浏览器吗？

本地服务器通过 Puppeteer 驱动真实的 Chrome 实例，因此你需要安装 Node.js 和 Chrome。如果你不想自行管理，AWI Cloud 会通过 API 密钥为你运行无头 Chrome。

开始使用

一条命令。智能体即刻上网。

$npx agent-web-interface install

开源 · MIT 许可 · 适用于 Claude、GPT-4o、Gemini 及任何兼容 MCP 的智能体。