Web Draw: Drive the live browser as compact text, without screenshots

Web Draw：以精简文本而非截图形式操控实时浏览器

Most tools that let AI agents browse the web work by taking screenshots of the page. That approach burns thousands of tokens per action, runs slowly, and leaves the model guessing pixel coordinates to click. We built Web Draw to solve this. It is a free Chrome extension paired with a local MCP server that lets any LLM agent read and drive the tab you already have open, as compact text instead of pixels. 目前大多数让 AI 智能体浏览网页的工具，其工作原理都是对页面进行截图。这种方法每次操作会消耗数千个 Token，运行缓慢，且迫使模型去猜测点击的像素坐标。我们开发了 Web Draw 来解决这个问题。它是一个免费的 Chrome 扩展程序，配合本地 MCP 服务器使用，可以让任何大语言模型（LLM）智能体读取并操控你当前打开的标签页，以精简文本而非像素的形式进行交互。

How it works

工作原理

Web Draw reads the visible DOM and turns it into structured text with a stable handle on every button, link, and input: Web Draw 会读取可见的 DOM，并将其转换为结构化文本，为每个按钮、链接和输入框提供稳定的句柄：

[search] e4 searchbox "Search Amazon" ="usb c hub" [form] e29 combobox "Sort by:" ="Featured" e49 button "Add to cart" off-screen: 37 controls below, next "Popular Shopping Ideas"

The agent acts directly on a handle (like clicking e49 or typing into e4) instead of guessing coordinates. 智能体直接作用于句柄（例如点击 e49 或在 e4 中输入内容），而无需猜测坐标。

Why this matters

核心优势

Token efficiency: An entire checkout page reads in around 550 tokens, compared to thousands for a screenshot. An Amazon search results view takes roughly 750 tokens. Token 效率： 整个结账页面仅需约 550 个 Token 即可读取，而截图则需要数千个。亚马逊搜索结果页面大约只需 750 个 Token。

Honest error reporting: When a web form rejects a submission, it usually does not add new controls. It just prints a message. Web Draw reports what the page actually said and halts remaining actions, instead of letting the agent run into silent failure down the line. 准确的错误报告： 当网页表单拒绝提交时，通常不会添加新的控件，只会显示一条消息。Web Draw 会报告页面实际显示的内容并停止后续操作，而不是让智能体在后续流程中陷入静默失败。

Works in your normal browser: Runs directly in Chrome, Brave, or Edge with your existing sessions and logins. 兼容常规浏览器： 可直接在 Chrome、Brave 或 Edge 中运行，并使用你现有的会话和登录状态。

Local and private: Connects only to 127.0.0.1 on your own machine. No accounts, no ads, and no telemetry. 本地化与隐私保护： 仅连接到你本机上的 127.0.0.1。无需账户，无广告，无遥测数据。

Five tools included

包含的五项工具

Web Draw exposes five tools to your agent: Web Draw 为你的智能体提供了五项工具：

browser_navigate: Open URLs, reload, go back or forward, and manage tabs
browser_navigate： 打开 URL、刷新、前进/后退以及管理标签页
browser_view: Read the visible page as structured text
browser_view： 以结构化文本形式读取可见页面
browser_act: Run a batch of steps (click, type, select, hover, scroll) and return the updated view in a single call
browser_act： 执行一系列步骤（点击、输入、选择、悬停、滚动）并在单次调用中返回更新后的视图
browser_status: Check extension connectivity
browser_status： 检查扩展程序的连接状态
browser_screenshot: A small JPEG fallback for questions only an image can answer
browser_screenshot： 作为备选方案，提供小型 JPEG 截图，用于回答只有图像才能解释的问题

Getting started

开始使用

Install the extension from the Chrome Web Store: Web Draw 从 Chrome 网上应用店安装扩展程序：Web Draw

Add Web Draw to your MCP client (Claude Desktop, Claude Code, Cursor, or any agent supporting MCP): 将 Web Draw 添加到你的 MCP 客户端（Claude Desktop、Claude Code、Cursor 或任何支持 MCP 的智能体）：

"web-draw": {
  "command": "npx",
  "args": ["-y", "@olib-ai/web-draw-mcp"]
}

Once running, the extension toolbar badge switches to ON, and your agent can read and drive the active tab. 运行后，扩展程序工具栏图标将变为“ON”状态，此时你的智能体即可读取并操控当前活动的标签页。