AI Browser 相关的核心要点是什么？

本文围绕 AI Browser、MCP、Agent、Open Source、TypeScript、Electron 展开，Vessel Browser 是一款从零为 AI Agent 设计的开源浏览器，提供持久化状态、MCP 控制接口和人类监督 UI，让 Agent 真正拥有自主浏览能力。。详细解读见正文。

Vessel Browser：当 AI Agent 需要一双眼睛，这个开源浏览器给了它整个身体

2026-06-19T09:00:00+08:00

AI BrowserMCPAgentOpen SourceTypeScriptElectron

当我们让 AI Agent 去浏览网页、填写表单、执行多步骤任务时，大多数方案要么是无头浏览器（headless），要么是无状态的自动化工具。Agent 在里面"盲操作"，人类完全看不到发生了什么。

Vessel Browser 提出了一个不同的思路：如果浏览器本身就是为 Agent 设计的呢？

这是一个基于 Chromium 的开源浏览器，从第一行代码就围绕 Agent 的工作模式来构建——Agent 是主要操作者，人类通过可见的界面进行监督和干预。它提供了持久化会话、MCP 控制协议、BYOK（自带密钥）模式，以及与 Hermes Agent、OpenClaw 等 Agent 框架的原生集成。

目前项目已获得 96 个 GitHub Star 和 11 个 Fork，虽然数字不大，但代表了社区对"AI 原生浏览器"这一新方向的早期关注。

为什么需要一个 Agent 专属浏览器

传统的浏览器自动化栈（Puppeteer、Playwright、Selenium）都有一个共同假设：人类是主要操作者，自动化是辅助手段。

这带来了三个问题：

状态丢失：每次自动化任务都是"一次性"的，Cookie、localStorage、Tab 状态不会跨会话保留
不可见：Headless 模式下，人类无法观察 Agent 在做什么，出了问题只能看日志
控制困难：暂停、回滚、人工干预这些操作在自动化框架中实现成本极高

Vessel 的做法是反转这个模型：Agent 是浏览器的主要操作者，人类是监督者。 浏览器有一个完整的、可见的 UI，人类可以实时观察 Agent 的行为，随时暂停、审批或干预。

核心架构：Electron + SolidJS + MCP

Vessel 的技术栈选择很务实：

层级	技术选型
浏览器引擎	Chromium（Electron 40）
UI 框架	SolidJS
开发语言	TypeScript
构建工具	electron-vite + Vite
内容提取	@mozilla/readability
AI 控制	MCP Server + 内置 Chat

架构上采用 Electron 的多进程模型：

Main Process (Node.js)          Renderer (SolidJS)
├── TabManager                  ├── TabBar, AddressBar
│   └── WebContentsView[]       ├── CommandBar (Ctrl+L)
├── AgentRuntime                ├── Sidebar (8 tabs)
│   ├── Session Manager         │   ├── Supervisor
│   └── Supervision             │   ├── Bookmarks
├── MCP Server                  │   ├── Chat
│   └── HTTP / stdio            │   ├── Skills
├── AI Providers                │   ├── Research
│   ├── Anthropic               │   └── Changes
│   ├── OpenAI                  └── DevTools Panel
│   ├── Ollama / llama.cpp
│   └── Any OAI-compatible
└── IPC Handlers ◄──contextBridge──► Preload API

每个浏览器 Tab 是一个独立的 WebContentsView，由主进程管理。浏览器 UI（SolidJS）运行在自己的 View 中，叠加在内容之上。渲染进程和主进程之间通过 contextBridge 的类型化 IPC 通道通信。

这个设计的好处是：外部 Agent 通过 MCP 协议控制浏览器，不需要关心 Electron 的内部实现，只需要调用标准化的工具接口。

六大核心能力拆解

1. Supervisor 监督面板

按 Ctrl+Shift+L 打开侧边栏，包含 8 个标签页：Supervisor、Bookmarks、Checkpoints、Chat、Skills、History、Changes、Research。

Supervisor 标签是核心控制中心：

暂停/恢复 Agent 执行
切换审批模式（Agent 执行敏感操作前需要人类确认）
查看待审批操作
创建检查点和回滚
Action Undo：恢复到 Agent 上一次成功操作之前的状态

这不是一个"设完参数就放手"的工具，而是一个让 Agent 和人类协同工作的实时控制台。

2. 持久化会话管理

Vessel 的会话持久化远超传统浏览器：

Named Sessions：将 Cookie、localStorage、Tab 布局保存为一个命名会话（如 github-logged-in），下次启动直接恢复
Pinned Tabs：固定标签页，防止 Agent 意外关闭
Annotated Checkpoints：在关键操作前创建带注释的检查点，可以随时回滚
书签元数据：书签不仅存 URL，还携带 intent（页面用途）、expectedContent（预期内容）、keyFields（重要字段）、agentHints（Agent 提示）等结构化信息

这意味着 Agent 可以跨多次运行保持登录状态和上下文，而不是每次从零开始。

3. MCP 控制接口

这是 Vessel 最核心的设计——通过 MCP（Model Context Protocol）将浏览器能力暴露为标准化工具接口：

默认端口 3100
支持 HTTP 和 stdio 两种传输方式
外部 Agent 可以：导航页面、提取内容、填写表单、点击按钮、管理标签页、操作书签等
Agent 可以感知页面结构：Page Schema Inference 自动推断页面类型（article、product、form、search、checkout、login、dashboard），提取结构化字段

# 通过 stdio 模式连接
vessel-browser-mcp --stdio

# 或通过 HTTP 连接
http://127.0.0.1:3100/mcp

4. 内置 AI Chat

侧边栏 Chat 标签内置了对话式 AI，支持：

Anthropic、OpenAI、Ollama、llama.cpp、Mistral、xAI、Google Gemini、OpenRouter
任何 OpenAI 兼容端点
自动读取当前页面内容
拥有与外部 Agent 相同的浏览器工具权限
多轮对话历史

特别值得一提的是 llama.cpp 本地模式：Vessel 可以作为第一方 provider 直接连接本地 llama-server，实现完全离线的 AI 浏览体验。

5. Page Schema 推断

Vessel 对每个访问的页面自动推断结构化 Schema：

pageType：article / product / form / search / checkout / login / dashboard
primaryEntity：产品和文章的结构化字段
formFields：表单字段的名称、类型、标签、选择器
actionButtons：按钮的推断意图（submit、addToCart、login 等）

Agent 不需要"猜"页面结构，Vessel 直接把结构化信息喂给它。

6. Agent Transcript 和工作流追踪

Agent Transcript Dock：浮动在浏览器 UI 上的实时日志面板，显示 Agent 的思考过程和状态更新
Workflow Flow Tracking：Agent 可以用 flow_start 声明多步骤工作流，通过 flow_advance 逐步推进，进度在侧边栏实时可见
Page Highlights：Agent 可以在页面上用彩色标记高亮文本或元素，跨导航保持

与 Agent 框架的集成方式

Vessel 的定位是 Agent 的浏览器运行时，不是独立的 Agent 框架。它可以被任何支持 MCP 的 Agent 框架驱动：

与 Hermes Agent 集成：

启动 Vessel
在 Hermes Agent 配置中添加 Vessel 的 MCP 端点
Hermes Agent 通过 MCP 控制浏览器，Vessel 的 Supervisor 面板实时显示操作

与 OpenClaw 集成：

同样通过 MCP 协议连接
Vessel 作为持久化、可见的浏览器替代 OpenClaw 自己的浏览器会话

与任意 LLM 提供商集成：

通过 BYOK 模式配置 API Key
使用内置 Chat 功能直接对话
或搭建自己的 Agent 通过 MCP 控制

实际体验：从安装到跑起来

最快的方式（Linux）：

# 下载 AppImage
# 从 GitHub Releases 下载 Vessel--x64.AppImage
chmod +x Vessel-*.AppImage
./Vessel-*.AppImage

通过 npm 安装：

npm install -g @quanta-intellect/vessel-browser
vessel-browser

一键运行（无需安装）：

npx @quanta-intellect/vessel-browser

从源码构建：

git clone https://github.com/unmodeled-tyler/vessel-browser.git
cd vessel-browser
fnm use          # 使用 Node.js 22
npm install
npm run dev      # 开发模式（HMR）
npm run dist     # 打包 Linux AppImage

启动后按 Ctrl+, 打开设置，确认 MCP 端点状态。然后在你的 Agent 框架中配置 MCP 连接即可。

跨平台支持方面，Linux 是目前最成熟的安装目标，macOS 支持从源码构建 Universal Binary（Intel + Apple Silicon），Windows 提供 NSIS 安装包。

Premium 模式和商业化路径

Vessel 核心功能完全开源免费，同时提供了一个 Premium 订阅（$5.99/月），解锁：

Skills 系统：可复用的浏览器技能，支持导入、运行和管理
Research Desk：结构化研究报告生成（主题 → 简报 → 多线程子 Agent 收集 → 综合报告）
What Changed Timeline：页面变更历史时间线
Agent Credential Vault：加密的 Agent 凭据存储，支持 TOTP 2FA
Screenshot & Visual Analysis：全页截图 + AI 视觉分析
Obsidian Memory Hooks：Agent 写 Markdown 笔记到 Obsidian vault

这是一个典型的"核心开源 + 增值功能订阅"模式，核心浏览器能力免费，高级自动化和研究功能付费。

项目信息

GitHub：https://github.com/unmodeled-tyler/vessel-browser
Stars：96 | Forks：11
语言：TypeScript
协议：开源
平台：Linux / macOS / Windows
创建时间：2026 年 3 月

作者: itech001 来源: 公众号：AI人工智能时代网站: https://www.theaiera.cn/ 每日分享最前沿的AI新闻资讯和技术研究。

本文首发于 AI人工智能时代，转载请注明出处。