前言
一年前，我们首次系统介绍 OpenTiny NEXT 前端智能化解决方案。
当时，随着大模型和 Agent 能力快速发展，我们开始思考一个新的问题：传统 Web 应用主要面向人设计，当 AI 开始进入应用、理解页面并完成任务时，前端应该提供什么样的能力？
围绕这一问题，OpenTiny NEXT 从生成式 UI、WebMCP、智能交互等方向展开探索，希望让 Web 应用不仅能够被人使用，也能够被 AI 理解和操作。
过去一年，AI 与 Web 开发的结合进一步深入。
Coding Agent 开始参与越来越完整的软件开发任务，Agent Skills 成为向 AI 提供专业知识和开发规范的新方式；AI 交互也从对话界面进一步延伸到动态生成业务 UI。与此同时，Browser Agent 开始进入真实浏览器环境，通过结构化工具或页面操作完成任务。
OpenTiny NEXT 也在这一过程中持续演进。
今天，我们更希望从开发到运行的完整链路来理解 OpenTiny NEXT：
让现有组件、开发平台和 Web 应用更好地与 AI 协同，为开发者提供覆盖 AI 开发、AI 交互与 AI 执行的前端工具。
一、AI 开发：让前端开发资产对 Agent 更友好
Coding Agent 正在改变开发者使用组件库、低代码平台和开发工具的方式。
过去，这些开发资产主要通过文档、示例和 API 服务开发者。现在，Agent 同样需要理解组件能力、开发规范、工程约束以及特定平台的数据结构。
因此，前端基础设施除了 Developer Friendly，也开始需要考虑 AI Friendly。
Agent Skills 是 OpenTiny 在这一方向上的重要实践。
目前 OpenTiny 已经围绕多个产品建设 Skills，包括 TinyVue、TinyRobot、WebMCP SDK、WebMCP CLI 以及 OpenTiny NEXT 应用集成等，并通过统一的 Agent Skills 仓库提供给不同 Coding Agent 使用。
TinyVue Skill 将组件文档、API、示例和使用规范组织成 Agent 更容易消费的知识，使 Coding Agent 可以根据实际需求选择组件并生成符合规范的代码。
TinyRobot 也提供了对应 Skill，将组件使用、项目配置、代码生成、会话与 AI 请求等知识组织起来，帮助 Coding Agent 更准确地完成 AI 交互界面的开发。
对于低代码平台，Skill 同样可以承担开发资产与 Coding Agent 之间的连接层。TinyEngine 提供了 DSL Generator Skill，将页面、区块和应用 DSL 的结构、组件信息、生成规则以及校验脚本提供给 Agent，使 Agent 可以直接生成符合 TinyEngine 规范的页面 DSL，并进一步进入低代码设计器完成后续编辑。
因此，这里的重点并不是为每个产品增加一个独立的 AI 功能，而是：
把已有的组件、平台、文档、规范和工具转换成 Agent 能够理解和使用的开发资产。
开发者可以直接使用 TinyVue、TinyEngine、TinyRobot 等产品；Coding Agent 则可以借助 Skills 理解这些产品，并参与应用开发。
两种开发方式最终使用的是同一套前端能力。
• 源码：github.com/opentiny/ag...
二、AI 交互：从对话组件到生成式 UI
应用进入运行阶段后，人与 AI 之间的交互不再只是简单的"一问一答"。
实际的 AI 应用往往需要同时处理消息展示、流式响应、会话管理、文件附件、模型接入、工具调用以及 Agent 执行状态；对于表单填写、数据分析、任务确认等场景，还需要比文本更加合适的交互形式。
OpenTiny NEXT 在这一方向主要包括 TinyRobot 和 GenUI SDK。前者侧重 AI 应用的交互框架和运行能力，后者侧重根据任务动态生成界面，两者可以独立使用，也可以组合。
1. TinyRobot AI对话组件库
TinyRobot 最初从 AI 对话组件出发，目前已经逐渐形成由 Components、Chat、Kit、CLI 和 Skill 等能力组成的 AI 交互开发套件。
在组件层，TinyRobot 提供 Bubble、Sender、Attachments、会话历史等 AI 交互组件，并支持流式响应、主题定制和不同消息内容的展示。开发者可以按需选择组件，将 AI 交互能力嵌入已有业务系统。
对于更完整的应用场景，TinyRobot 进一步提供 Chat，将消息、输入、会话以及相关运行逻辑进行整合。开发者既可以从底层组件自由组合，也可以直接基于 Chat 快速搭建完整的 AI 对话体验。
与 UI 组件配套的 TinyRobot Kit （@opentiny/tiny-robot-kit）承担更多运行逻辑，包括模型调用、消息与会话管理、数据持久化、Tool 等能力，并支持运行时的 Tool Provider 和 Skill 加载等机制，使 AI 应用能够进一步结合业务知识和任务能力。
与此同时，TinyRobot 也在完善开发侧能力。TinyRobot CLI 可以帮助开发者快速创建项目或接入 Chat；面向 Coding Agent 的 TinyRobot Skill，则将组件使用、项目配置和代码生成等知识提供给 Agent。
因此，TinyRobot 已经不只是用于展示 AI 消息的组件集合，而是从底层组件、完整 Chat，到模型与会话运行能力，再到 CLI 和 Agent Skill，覆盖不同粒度的 AI 交互开发需求。
2. GenUI SDK 生成式UI
对于很多业务任务，文本并不是最合适的输出形式。
例如，用户发起一项差旅申请，AI 更适合生成包含行程、预算和确认操作的卡片；查询经营数据时，可以动态生成指标、表格和图表；执行复杂业务流程时，也可以根据上下文生成表单，在用户补充或确认信息后继续后续任务。
GenUI SDK 面向这样的 Generative UI 场景提供完整的前后端开发能力。
GenUI SDK 采用 Server 与 Renderer 配合的方式：服务端负责模型接入、消息编排、工具调用等逻辑，前端 Renderer 将模型生成的结构化描述转换为真正可交互的界面。目前已经提供 Vue 和 Angular Renderer，可以用于新建 AI 应用，也可以逐步集成到已有前端项目中。
对于企业应用，更重要的是生成的界面能否复用已有业务资产。GenUI SDK 支持通过 Schema 描述和注册自定义物料，将员工选择器、商品卡片、订单详情、审批面板等现有业务组件纳入生成式 UI 的物料体系，而不是只能生成一组固定的通用组件。
在此基础上，开发者还可以通过 Actions 扩展打开页面、查询数据、提交表单等交互行为，并通过 Theme、Token 等能力让动态生成的界面继续保持与现有产品一致的视觉体系。
因此，GenUI SDK 关注的不只是"生成一个 UI"，而是如何把 Server、Renderer、业务物料、交互行为和现有前端技术栈连接起来，让生成式 UI 真正进入已有应用。
TinyRobot 与 GenUI SDK 解决的是两个相邻的问题：TinyRobot 负责构建持续的 AI 交互与运行体验，GenUI SDK 则根据当前任务动态组织和生成界面。
二者组合后，用户可以通过 TinyRobot 表达需求和持续对话；当任务需要表单、卡片、表格等更加结构化的交互时，再由 GenUI SDK 生成对应界面，并将用户操作结果继续交给 Agent 处理。
这样，AI 应用的交互就可以根据任务需要，在自然语言与图形界面之间动态切换。
三、AI 执行：连接 Agent 与 Web 应用
如果说 AI 开发关注的是 Agent 如何帮助开发者构建应用，AI 交互关注的是用户如何与 AI 协同，那么 AI 执行解决的则是：
Agent 如何真正进入 Web 应用并完成任务。
NEXT-SDKs 是 OpenTiny NEXT 在这一方向上的核心项目，主要提供 Agent 与 Web 应用之间的连接与执行能力。
当前 NEXT-SDKs 已经围绕 WebMCP、Polyfill、WebSkills、浏览器 CLI 和页面操作工具形成工具链，同时兼容浏览器原生 document.modelContext API。
1. WebMCP Tool 与 PageTool 页面执行
对于 Web 应用，Agent 执行任务主要有两条路径。
对于能够修改源码的业务应用，更推荐通过 WebMCP 将关键业务能力直接暴露给 Agent。
例如一个差旅系统可以注册查询员工信息、填写申请、校验表单和提交申请等工具。Agent 获得的是明确的工具名称、参数和执行结果，而不需要通过按钮位置或页面文本推断业务含义。
Chrome 目前已通过 Origin Trial 提供 WebMCP Imperative API 的实验能力，开发者可以使用 document.modelContext.registerTool() 向 Agent 注册结构化工具。WebMCP 当前仍处于标准提案和持续演进阶段。
对于无法提前适配的网页，则可以使用 PageTool。
NEXT-SDKs 中的 webmcp-cli 可以连接真实 Chrome，并向页面注入 WebMCP Polyfill 和 PageTool，将点击、输入、滚动等常见页面操作转换成 Agent 可以调用的工具。
两条路径并不是互相替代。
WebMCP Tool 更适合稳定、明确的业务操作；PageTool 提供更广泛的页面覆盖能力。在一个完整任务中，Agent 也可以同时使用两类工具。
2. WebMCP 接入方式的演进
OpenTiny NEXT 在 Web 应用连接方式上的策略，在过去一年也发生了一项比较重要的变化。
一年前，WebMCP 尚未形成今天这样的浏览器端标准接口形态，因此 NEXT-SDKs 更侧重通过 WebMcpServer、WebMcpClient 和 WebAgent MCP Proxy 建立 Web 应用与外部 Agent 之间的连接。
随着 WebMCP 标准逐渐形成，接入方式开始变得更加直接。现在更推荐开发者围绕标准 document.modelContext 注册 WebMCP Tool，NEXT-SDKs 则通过 Polyfill 等能力补齐当前浏览器支持，在原生 API 尚未完全可用时提供兼容实现。
这也意味着 NEXT-SDKs 的角色逐渐从"建立一套 Web 与 Agent 的连接机制"，转向"优先使用标准 WebMCP 描述页面能力，并负责兼容、连接和执行"。原有的 WebMcpClient、WebMcpServer 和远程连接能力仍然适用于跨页面、跨运行环境等场景。
OpenTiny NEXT 当前在 WebMCP 方向上的策略也更加明确：尽量拥抱 Web 标准，同时在标准尚未完全落地的阶段提供可用的工程能力。
3. AI Extension 浏览器扩展
AI Extension 将 WebMCP Tool、WebSkills 和通用页面操作进一步整合到真实浏览器环境中。
对于已经适配 WebMCP 的页面，Agent 可以优先发现和调用页面提供的结构化工具；对于具有特定操作流程的网站，可以结合 WebSkills 提供领域知识；对于没有任何适配的普通网页，则可以通过 PageTool 完成点击、输入等操作。
因此，Agent 不再只有一种操作 Web 的方式，而是可以根据页面能力选择合适的执行路径。
结构化工具负责业务语义与可靠性，通用页面操作负责覆盖范围，WebSkills 则补充任务所需的知识和操作经验。
四、从开发到运行的完整链路
将这些能力组合起来，可以形成一条从应用开发到 Agent 执行的完整链路。
在开发阶段，Coding Agent 可以通过 OpenTiny 提供的 Skills 理解组件和开发规范，参与应用功能实现与验证。
进入运行阶段后，TinyRobot 作为用户与 Agent 的交互入口，负责对话、会话以及 Agent 执行过程的展示；对应的 WebSkill 为 Agent 提供业务流程和操作知识；当需要用户查看、补充或确认信息时，GenUI SDK 可以根据当前任务生成对应的业务界面。
在真正执行页面任务时，如果系统已经提供 WebMCP Tool，Agent 可以直接调用结构化业务能力；对于没有提前适配的页面，则可以通过 PageTool 完成页面操作。
以电商系统价保单为例，用户可以通过 TinyRobot 发起需求，由对应的 WebSkill 为 Agent 提供业务流程和操作知识；当任务需要展示或确认结构化信息时，由 GenUI SDK 动态生成相应界面；对于未提前适配的页面，则可以通过 PageTool 完成页面查询和操作。这个过程将 AI 交互、业务知识、生成式 UI 与页面执行串联起来。
我们也准备了一个Demo，介绍如何组合 TinyRobot、WebSkill、GenUI SDK 和 PageTool 快速创建并操作电商系统价保单，可作为 OpenTiny NEXT 从开发到运行整体能力的直观示例。
Demo 效果如下：通过 TinyRobot / WebSkill / GenUI SDK / PageTool 快速创建电商系统价保单
五、OpenTiny NEXT 的持续演进
过去一年，OpenTiny NEXT 的产品和技术形态发生了不少变化，但核心方向保持一致：
让现有前端技术体系能够更自然地与 AI 协同。
在开发阶段，通过 Agent Skills 等方式，让组件、低代码平台和开发资产能够被 Coding Agent 更好地理解和使用；在运行阶段，通过 TinyRobot 和 GenUI SDK 构建 AI 交互，通过 NEXT-SDKs、WebMCP、WebSkills 和 PageTool 连接真实 Web 应用并完成任务。
从各产品分别探索 AI 能力，到组件、开发平台、AI 交互和浏览器工具逐渐形成协同；从自有的 Web 与 Agent 连接方案，到进一步拥抱 WebMCP 标准，这些变化构成了 OpenTiny NEXT 过去一年的主要演进。
随着 Coding Agent、Agent Skills、Generative UI、WebMCP 和 Browser Agent 持续发展，OpenTiny NEXT 也将继续围绕实际 Web 开发场景完善这些能力，让 AI 更自然地进入 Web 应用的开发与运行过程。
关于 OpenTiny
OpenTiny 是面向企业级场景的前端 AI 应用开发平台。平台依托生成式 UI与WebMCP两大核心底层技术，打造适配 Agent 智能应用生态的 NEXT-SDKs、AI 扩展工具、TinyRobot 对话 AI 组件库、GenUI SDK生成式 UI 、WebAgent 智能代理等系列产品，能够依托 AI 解析用户需求意图，自动驱动任务执行，助力企业现有业务系统快速完成智能化升级。
同时 OpenTiny 沉淀成熟通用前端基建能力：提供跨端、跨框架、跨版本的 TinyVue 组件库，配套基于 Angular+TypeScript 技术栈的 TinyNG 组件库；内置可高度自定义拓展的低代码引擎 TinyEngine，搭配 TinyPro 中后台业务模板、TinyCLI 命令行工具等配套工具链，全方位赋能开发者高效搭建各类 Web 端企业应用。
欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：opentiny.design
GenUI SDK 代码仓库：github.com/opentiny/ge... （欢迎star ⭐）
如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~如果你有任何问题，欢迎在评论区留言交流！