AI-Extension 是一个基于 WXT 框架构建的智能浏览器扩展插件。它把 MCP（Model Context Protocol）协议「塞进」了浏览器，让任意网页都能变成可被 AI 智能体操控的应用；同时内置 Skills 技能系统，通过一个 SKILL.md 文件即可为 AI 定义专业角色，让它自动识别意图、以领域专家身份响应。

本文由云软件体验技术团队李锦浩原创。在 NextSDK 介绍文章里，我们聊了怎么用给前端页面快速接入智能化能力——几行代码嵌进去，用户扫个二维码，手机上就能弹出一个 Remoter 对话窗口，直接用自然语言远程操控网页上的功能。答案就是。你手机上弹出的 Remoter 对话窗口和网页之间，其实并没有直连——中间隔着企业网络、防火墙，直连根本不现实。WebAgent 就是站在中间的那个“MCP 转发

本文将深入探讨 WebMCP 的核心机制、行业现状，以及 OpenTiny next-sdk 如何通过兼容性适配层，助力开发者平滑接入这一前沿协议。

以内置 LLM 为中枢、WebSkill 为业务技能、生成式 UI 为交互桥梁、WebMCP 为底层执行工具的全前端闭环生态，代表了 Web AI 架构演进的必然方向。该架构不仅优雅地化解了系统复杂性带来的“上下文窗口爆炸”难题，更通过前端本地化，为企业赋予了前所未有的敏捷迭代能力与高标准的数据隐私保障。在妥善构建抵御“意图碰撞”等新型攻击的安全边界前提下，前端原生的 WebSkill 将打破传统

AI Agent 时代，人们已经不满足只是与 AI 进行问答交互，而是希望 AI 能直接帮人干活。目前 AI 帮人干活的场景越来越丰富，最常见的就是 AI 帮人写代码、做视频、做 PPT、做设计稿。你有没有想过 AI 能帮人操作网页？这就是 OpenTiny NEXT-SDK 做的事情。

要将 MCP 工具能力接入 AI 导购助手，需通过自定义 fetch 方法，处理大模型的工具调用请求、多轮交互及结果流式返回逻辑，确保工具调用过程流畅、符合电商业务场景。在目录下新建文件，编写自定义 fetch 逻辑。核心功能：自定义 fetch 方法，处理大模型工具调用、多轮交互及流式返回，对接 MCP 工具与 AI 助手baseURL?index?: numberid?

本文以智能导购助手场景为例，带大家实操体验OpenTiny生成式UI带来的全新交互方式。

要将 MCP 工具能力接入 AI 导购助手，需通过自定义 fetch 方法，处理大模型的工具调用请求、多轮交互及结果流式返回逻辑，确保工具调用过程流畅、符合电商业务场景。在目录下新建文件，编写自定义 fetch 逻辑。核心功能：自定义 fetch 方法，处理大模型工具调用、多轮交互及流式返回，对接 MCP 工具与 AI 助手baseURL?index?: numberid?

要将 MCP 工具能力接入 AI 导购助手，需通过自定义 fetch 方法，处理大模型的工具调用请求、多轮交互及结果流式返回逻辑，确保工具调用过程流畅、符合电商业务场景。在目录下新建文件，编写自定义 fetch 逻辑。核心功能：自定义 fetch 方法，处理大模型工具调用、多轮交互及流式返回，对接 MCP 工具与 AI 助手baseURL?index?: numberid?

单条消息用Bubble完整对话流用BubbleList全局渲染扩展用文本、图片、Markdown、推理、工具调用都有内置支持角色、分组、自动滚动、插槽、CSS 变量和 TypeScript 类型一并覆盖如果你正在用 Vue 3 构建 AI Chat、Agent 控制台、企业知识库助手或 Copilot 类产品，TinyRobot Bubble 可以帮你把注意力从“消息怎么画”转移到“AI 能为用户