NEXT SDK 源码深度分析：让 AI 直接操控浏览器

英勇无比的消炎药
5 阅读8分钟

🔌 NEXT SDK 源码深度分析：让 AI 直接操控浏览器的"魔法棒"

你有没有想过，让 AI 不只是聊天助手，而是能直接帮你操作网页——帮你填表、帮你点按钮、帮你截图？NEXT SDK 就是干这个的。而且——不需要改你现有代码，零重构就能让 AI 操作你的应用。

一、这项目到底有多酷？

NEXT SDK（WebMCP SDK）是 OpenTiny 团队推出的一套前端 AI 与浏览器自动化工具包。它的核心能力：

通过 WebMCP 协议，让 AI 代理能够远程操控任意网页——哪怕你的网页没有做任何 AI 适配。

这不是 UI 组件库，不是聊天框，而是AI 与浏览器之间的协议桥梁——定义了网页如何向 AI 暴露"能力"，以及 AI 如何通过标准协议调用这些能力。

当前版本 v0.3.3，MIT 许可证，78 Stars。语言构成：TypeScript 68.7% + Vue 21.4%。

二、WebMCP 协议：MCP 的浏览器版

MCP vs WebMCP

MCP（Model Context Protocol）是 Anthropic 提出的 AI 代理与外部系统交互的标准协议。NEXT SDK 把 MCP 扩展到浏览器环境，形成 WebMCP：

维度MCP（原版）WebMCP（NEXT SDK 扩展）
运行环境服务端/桌面浏览器网页
工具注册代码中硬编码navigator.modelContext.registerTool
通信方式stdio/SSEMessageChannel/SSE/HTTP/Chrome Extension
跨页面不涉及自动路由跨页面/iframe 消息

navigator.modelContext Polyfill —— 今天可用，明天兼容

NEXT SDK 最妙的创新是为浏览器注入 navigator.modelContext 对象：

import { initializeBuiltinWebMCP } from '@opentiny/next-sdk'
initializeBuiltinWebMCP()

一行代码，SDK 就做了：

  1. 在 navigator 上注入 modelContext 对象
  2. 提供标准工具注册 API（registerTool、registerResource）
  3. 设置自动路由与桥接，处理跨页面/iframe 消息同步

最关键的点：当浏览器未来原生支持 navigator.modelContext 时，Polyfill 会自动切换到原生引擎。你今天写的 WebMCP 代码，明天浏览器原生支持后无缝兼容。这叫"面向未来编程"。

三、核心架构：三步工作流

┌─────────────────────────────────────────────────────────────┐
│                       Web Browser                           │
│  ┌──────────────────┐              ┌───────────────────┐    │
│  │  Front-end App   │◄── Bridge ──►│   AI Assistant    │    │
│  │ (WebMCP Server)  │              │   (MCP Client)    │    │
│  └──────────────────┘              └───────────────────┘    │
└─────────────────────────────────────────────────────────────┘

三步走：

  1. 注册：前端用 navigator.modelContext.registerTool 声明"我能做什么"
  2. 桥接：Bridge 自动将 AI 请求路由到正确的页面/iframe
  3. 执行：工具在页面上下文中运行，可直接访问 DOM、State 和 APIs

四、源码结构拆解

webmcp-sdk/
├── packages/
│   ├── next-sdk/              # 核心 SDK 包 ⭐
│   │   ├── agent/             # WebAgent 实现
│   │   ├── page-tools/        # 页面工具
│   │   ├── remoter/           # 遥控器逻辑
│   │   ├── skills/            # WebSkills 定义
│   │   ├── transport/         # 传输层实现
│   │   ├── utils/             # 工具函数
│   │   ├── WebAgent.ts        # WebAgent 核心
│   │   ├── WebMcp.ts          # WebMCP 核心逻辑
│   │   ├── WebMcpClient.ts    # MCP 客户端
│   │   ├── WebMcpServer.ts    # MCP 服务端
│   │   ├── McpSdk.ts          # MCP SDK 封装
│   │   ├── Zod.ts             # Zod 验证模块
│   │   ├── core.ts            # 核心公共模块
│   │   ├── index.ts           # 主入口
│   │   └── vite.config.*.ts   # 多模块构建配置
│   ├── next-remoter/          # Vue3 AI 聊天组件
│   ├── webmcp-cli/            # CLI 工具 ⭐
│   ├── webmcp-cli-skill/      # AI 代理技能包
│   ├── next-sdk-playground/   # Playground
│   ├── vue-playground/        # Vue 演示
│   ├── doc-ai-angular/        # Angular 示例
│   ├── doc-ai-react/          # React 示例
│   └── ...

六大核心模块逐一拆解

WebMcpServer —— 让你的页面变成 MCP 工具提供方
const server = new WebMcpServer({ name: 'my-app', version: '1.0.0' })

server.registerTool('tool-name', {
  title: 'Tool Title',
  description: 'Tool Description',
  inputSchema: { /* Zod schema */ }
}, async (params) => {
  return { content: [{ type: 'text', text: 'Result' }] }
})

你的前端应用摇身一变，成了 MCP 的"工具提供方"。AI 客户端来调用你注册的工具，你在页面里执行，结果回传给 AI。

WebMcpClient —— 让 AI 连上你的页面
const client = new WebMcpClient({ name: 'my-client', version: '1.0.0' })
const { sessionId } = await client.connect({
  agent: true,
  url: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp'
})

建立 SSE/HTTP 连接，获取 sessionId，AI 通过 sessionId 远程调用你页面上的工具。

WebAgent —— AI 代理的中枢调度器

AI 说"我要调用工具 X"，WebAgent 把请求路由到正确的工具，执行结果回传给 AI。多轮工具调用编排——AI 可以连续调用多个工具完成复杂任务。

Transport 层 —— 多通道通信
传输方式适用场景
MessageChannel浏览器内跨窗口（iframe、跨页面）
SSEAI → 前端流式响应
HTTP同步工具调用
Chrome Extension浏览器扩展消息传递

四种传输方式，覆盖所有可能的浏览器通信场景。

Skills 层 —— 把工具组织成"业务技能"

不是暴露单个工具，而是组织成技能包（"订单管理技能"、"数据分析技能"）。渐进式向 AI 揭示能力——先展示核心技能，按需展开细节。技能描述包含使用指南，帮 AI 正确调用——给 AI 写说明书，这想法绝了。

Zod.ts —— 参数验证

用 Zod 定义工具参数结构，自动转换为 JSON Schema 供 AI 参考，运行时验证 AI 传入参数。AI 传了错误参数？Zod 直接拦住，不会让你的代码炸掉。

五、多模块构建体系：按场景选择

next-sdk 通过不同的 vite.config.*.ts 实现模块化构建：

构建配置输出模块说明
vite.config.mcpSdk.tsMCP SDK 模块核心 MCP SDK 封装
vite.config.webAgent.tsWebAgent 模块AI 代理核心逻辑
vite.config.webMcp.tsWebMCP 模块Client + Server
vite.config.webMcpFull.tsWebMCP 完整版全功能版本
vite.config.zod.tsZod 验证模块参数校验子集

你只用 Client？那就只引入 Client 模块。包体积最小化，不拉全家桶。

六、webmcp-cli：AI 操控浏览器的命令行

webmcp-cli 通过 Chrome DevTools Protocol (CDP) 控制浏览器——这才是真正的"魔法棒"：

# 打开网页（唯一可在未先 state 的情况下直接执行的命令）
webmcp-cli tabs open https://example.com

# 获取浏览器完整状态（URL、标题、标签页、DOM索引、可用工具）
webmcp-cli state

# 执行页面工具
webmcp-cli run page-agent-tool '{"action": "click", "index": 18}'
webmcp-cli run page-agent-tool '{"action": "fill", "index": 13, "text": "Hello"}'
webmcp-cli run page-agent-tool '{"action": "scroll", "down": true, "numPages": 1}'

page-agent-tool：AI 可操作任何网页

page-agent-tool 是 CLI 在每个页面自动注入的通用操作工具：

Action说明
click点击指定 DOM 索引的元素
fill在指定输入框填入文本
scroll滚动页面
executeJavascript执行任意 JavaScript
browserState获取浏览器状态

关键：AI 代理可以操作任何网页，即使该网页没有注册任何自定义 MCP 工具。 这就是"零重构"的秘密——你的页面什么都不改，AI 也能通过 page-agent-tool 的 DOM 操作来操控它。

领域专用工具：比 DOM 操作更精准

CLI 导航到特定域名时，会自动注入该域名的专用工具：

域名注入的工具
excalidraw.comexcalidraw_execute_command（绘图操作）
juejin.cncreate_article（发布文章） 👀
xiaohongshu.comxhs_search_notes、xhs_get_note_detail 等

专用工具直接调用页面业务 API，比 DOM 操作更精准、更可靠。 这就是为什么掘金能发文章、小红书能搜笔记——不是模拟点击，而是直接调用。

七、next-remoter：即用型 AI 远程控制面板

@opentiny/next-remoter 是基于 TinyRobot 的 Vue3 AI 聊天组件：

  • AI 助手 UI（聊天界面）
  • MCP 插件市场（动态发现和加载 WebSkills）
  • PC 端和移动端遥控器模式

一句话：引入 next-remoter，用户就能通过聊天界面指挥 AI 操作你的页面。不需要你自己写聊天 UI。

八、零重构智能化：不改代码就能让 AI 操作你的应用

NEXT SDK 最核心的承诺：

无需改变应用核心架构，即可将现有业务逻辑和 UI 操作暴露为 MCP 工具。

三步搞定：

  1. 应用入口调用 initializeBuiltinWebMCP()
  2. 用 navigator.modelContext.registerTool 注册想暴露的能力
  3. 工具的 execute 函数直接调用现有 Service/Store——已有代码不用改

一个已上线运行的 Vue/React/Angular 应用，可以在不重构的情况下让 AI 代理理解和操作它的功能。这才是真正的"AI 原生应用"——不是从零开始写，而是让 AI 能理解你已有的代码。

九、跨框架支持

技术栈支持方式
Vue@opentiny/next-remoter 直接使用
AngularSDK 核心 + MessageChannel 连接 iframe Remoter
ReactSDK 核心 + MessageChannel 连接 iframe Remoter
纯 JSSDK 核心 + 自定义 UI

核心 SDK 框架无关，next-remoter 只是 Vue 的即用型封装。 不管你用什么框架，WebMCP 都能用。

十、在 OpenTiny 生态中的位置

搭档关系
TinyRobotnext-remoter 基于 TinyRobot AI 聊天组件
GenUI SDKWebMCP 能力为 GenUI 工具调用提供浏览器端通道
TinyEngineAI 代理通过 WebMCP 远程操作低代码设计器
web-agent配套的 WebAgent 服务端（独立仓库）

NEXT SDK 在生态中处于协议基础设施层——它不解决"AI 怎么聊天"（那是 TinyRobot/GenUI），而是解决"AI 怎么操作网页"。分层设计，各司其职。

十一、总结：AI + 浏览器的"万能钥匙"

🌟 核心创新

  1. WebMCP 协议 —— MCP 标准扩展到浏览器，网页向 AI 暴露能力有标准可循
  2. Polyfill + 原生兼容 —— 今天可用，明天浏览器原生支持自动切换
  3. 零重构智能化 —— 不改代码就能让 AI 操作现有应用，这能力太香了
  4. page-agent-tool —— AI 可操作任何网页，没有自定义工具也能用
  5. 领域专用工具 —— 特定网站精准操作，比 DOM 模拟更可靠

👍 优势

  • 标准化协议（MCP），不造私有协议
  • 多传输方式，覆盖所有浏览器通信场景
  • 多框架支持，核心 SDK 不绑 Vue
  • CLI + SDK 双模式，本地和远程 AI 代理都能接入

🤔 挑战

  • 78 Stars，社区认知度仍在建设期
  • Polyfill 是临时方案，最终需要浏览器原生支持
  • 需要配套 WebAgent 服务端部署，增加运维复杂度
  • CDP 控制浏览器在企业环境可能受限

🎯 适用场景

  • AI 客服远程帮用户操作网页 —— 用户说"我不会填这个表"，AI 直接帮你填
  • 自动化测试/数据采集
  • AI 代理驱动的浏览器自动化
  • 为文档网站添加智能问答和操作助手
  • 浏览器扩展的 AI 能力增强

📚 项目资源

资源地址
🏠 GitHub 源码github.com/opentiny/we…
📖 官方文档docs.opentiny.design/next-sdk/
🚀 快速入门docs.opentiny.design/next-sdk/gu…
🔌 API 参考docs.opentiny.design/next-sdk/ap…
🤖 TinyRobot Remoterdocs.opentiny.design/next-sdk/gu…
🔗 官网首页opentiny.design

这项目真的有点酷——让 AI 直接操作浏览器，不用改代码。如果你对 AI + 浏览器自动化感兴趣，一定要试试！点赞👍收藏⭐，评论区聊聊你的想法~

avatar
文章
阅读
粉丝