企业官网建设流程全解析

HyperFrames Studio 的 WebMCP 代理工具怎么开启：让浏览器里的 AI 直接查看并编辑合成

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes

如果你的目标是在浏览器里运行的 AI 代理直接查看 HyperFrames Studio 中已打开的合成、并对元素做修改，而不是另起一套对话式生成流程，那么需要开启的就是 Studio 的 WebMCP 代理工具（Agent tools）。Studio 会把自己可用的编辑能力注册为 WebMCP 工具，浏览器内的代理就能读取 Studio 已知的项目状态，并做出和你手动操作一致的编辑。这一页和 通过 AI 对话创建视频 说的托管 MCP 连接器不是一回事：前者是代理在 Studio 内部、针对你已经打开的合成工作，后者是从对话构建并渲染视频。

前提是你有一个 HyperFrames 项目，并能打开 Studio：在任意项目文件夹中运行npx hyperframes preview（参见 Studio 概览），之后所有验证都在 Studio 页面的浏览器控制台中完成。

工具能做什么：读、改、取帧

开启后，一个典型的工作循环是：先让代理看清场景，再定位并修改目标元素，最后取帧检查结果（以下为源文档给出的示例流程，hf:abc123为示意 handle）：

studio_look -> find the headline and copy its handle studio_select {"handle":"hf:abc123"} -> share the target with the person in Studio studio_inspect {"handle":"hf:abc123"} -> read its styles, text, and capabilities studio_set_style {"handle":"hf:abc123", "styles":{"color":"red"}} -> write that source-backed element studio_frame {"time":2.4} -> capture the composition at 2.4 seconds

其中studio_frame最关键：它能截出任意时刻的合成 PNG，让代理凭实际画面判断修改效果，而不是靠猜。

只读类工具：

修改类工具：

studio_look返回的每个元素都有一个handle。元素还附带sourceFile、parentHandle、depth、childCount，用于区分两个嵌套场景文件里相同的 authored ID。后续所有对元素的写操作都要把 handle 原样传回。handle 是"源安全地址"，不是 CSS 选择器。

浏览器支持：先确认你能在哪个浏览器上用

工具在 Studio 加载时会自动注册，但代理能否真正调用到它们取决于浏览器（源文档给出的状态表）：

在浏览器没有原生 WebMCP 支持时，Studio 会加载内置的 polyfill，使 WebMCP 桥接扩展仍然可以连接；已经具备该 API 的浏览器不会有任何下载。

在 Chrome 本地开发环境开启

对支持 Origin Trial 的 Chrome，打开以下 flag 并重启浏览器：

chrome://flags/#enable-webmcp-testing

然后重启浏览器，重新用npx hyperframes preview打开 Studio。

需要注意的 API 细节（源文档明确警告）：接口是document.modelContext，不是navigator.modelContext。很多公开示例用的是后者，那只是部分 polyfill 添加的兼容层，不属于规范，对navigator.modelContext做特性检测会得出误导结论。

在 Studio 控制台确认工具已注册

打开 Studio 页面（合成已打开）的浏览器控制台，执行：

const tools = await document.modelContext.getTools(); console.log(tools.map((tool) => tool.name)); // ["studio_look", "studio_select", "studio_seek", ...]

输出应列出studio_开头的工具名（上面那行是文档示例，实际以控制台输出为准）。

两点判断依据来自源文档：

• 注册是异步的。在 Studio 刚加载的瞬间调用getTools()可能只看到部分列表。应等待toolchange事件，或轮询直到工具数量稳定在 12 个。
• 若列表始终为空，先确认该浏览器是否支持（见上表）；若 Studio 偏好设置中代理工具被关闭，则不会注册任何工具（关闭方法见下文）。

代理如何浏览并编辑：两条必须知道的规则

先表达意图，再显式寻址每一次写入。第一次写某个目标之前，先调用studio_select，这样在 Studio 前的人能看到与代理相同的选框和检查器。选中只传达意图，不授予写权限；studio_set_text、studio_set_style、studio_transform和动画工具仍然要求传入studio_look返回的目标 handle，因此之后的人工点击无法把已寻址的写入引到别的元素上。

读取回执阶段。写入结果把"接受"和"证明"分开：

changed与阶段是两回事：一个"保存但无变化"的结果也是如实的——文件接受了请求，但值本来就已存在。样式写入按属性逐条给出回执，可能是部分成功。动画处理者在持久化与实时预览同步完成后目前上报dispatched，不声称带版本持久性或独立回读；迟到的取消请求也不会回滚已经 dispatched 或 saved 的编辑。

人机协作方面：写入成功完成后，打开的 Studio 预览已经同步了这次编辑，观看者不需要拖动时间轴或刷新浏览器。代理写入与你在 Studio 中的操作走同一套提交器并进入同一个撤销历史；Studio 拒绝在自动保存暂停、或有外部文件变更等待你决策时执行代理写入，并会告知代理原因——解决提示横幅后即可继续。

关闭代理工具

目前还没有设置页开关，它通过一个 Studio 偏好控制。从控制台设置并刷新页面：

const KEY = "hf-studio-ui-preferences"; const prefs = JSON.parse(localStorage.getItem(KEY) ?? "{}"); localStorage.setItem(KEY, JSON.stringify({ ...prefs, agentToolsEnabled: false })); location.reload();

注意必须像上面这样先读出已有对象再展开合并：直接写入{agentToolsEnabled: false}会替换整个偏好对象，丢失面板尺寸、缩放和时间轴等设置。该偏好缺失时表示开启；改回true或删掉该键即可重新启用。变更在下次 Studio 加载后生效，因为注册范围限定在一次挂载内。

即使工具已注册，浏览器仍会通过自己的权限提示门控每次调用，"注册了"不等于"无需同意即可访问"。多久提示一次（每个站点一次还是每次调用）由浏览器决定，且在 Origin Trial 阶段仍在变化。

边界与限制

• Firefox 和 Safari 尚不支持；不在支持表内的浏览器上代理无法直接访问这些工具。
• 工具注册是自动的、随 Studio 加载发生，"开启"的实际含义是：浏览器原生支持（或 polyfill + 桥接扩展）加上偏好开关未被显式关闭。
• 完整的工具说明以 Agent tools (WebMCP) 文档 为准；如果要用的是"从对话创建视频"而非"在 Studio 内协同编辑"，应查看 Create through an AI chat 或 Quickstart。

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes