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

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为示意 handlestudio_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当前打开的项目与合成、播放头、选中状态、撤销状态以及按嵌套顺序排列的有源支撑场景studio_inspect单个元素的完整信息解析后的样式、文本字段、包围盒、动画以及它接受哪些操作studio_frame任意时刻合成的一帧 PNG修改类工具工具作用studio_select选中元素效果等同于点击studio_seek移动播放头studio_set_text改写文本studio_set_style设置内联样式studio_transform移动、缩放或旋转studio_add_animation在播放头位置添加一个 GSAP 动画studio_update_animation修改时长、缓动或位置studio_add_keyframe给动画添加关键帧studio_delete_animation删除动画studio_look返回的每个元素都有一个handle。元素还附带sourceFile、parentHandle、depth、childCount用于区分两个嵌套场景文件里相同的 authored ID。后续所有对元素的写操作都要把 handle 原样传回。handle 是源安全地址不是 CSS 选择器。浏览器支持先确认你能在哪个浏览器上用工具在 Studio 加载时会自动注册但代理能否真正调用到它们取决于浏览器源文档给出的状态表浏览器状态Chrome 149Origin TrialEdge 150Origin TrialChatGPT DesktopShippedBrave (Leo)ExperimentalFirefox、SafariNot yet在浏览器没有原生 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因此之后的人工点击无法把已寻址的写入引到别的元素上。读取回执阶段。写入结果把接受和证明分开阶段证明什么refused没有提交器运行。先修正 handle、输入、能力或 Studio 状态再重试。dispatched提交器接受了请求但工具没有持久版本或独立回读。应跟随studio_inspect或studio_frame确认。savedStudio 收到带版本号的证据确认被命名源文件已持久化该写入。verified写入已保存且独立回读观察到了结果。failed提交器运行后失败。检查kind、reason和可能的hint。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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

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

相关推荐

SystemInformer 汉化完全指南：如何把这款系统监控工具改成中文界面

Filament Tables 汇总行（Summaries）完全指南：在 Laravel 表格中实现平均值、计数、范围与求和统计

ArduPilot飞控入门教程：如何5条命令跑通第一次仿真空机

更多资讯

工业物联网平台选型与实施指南

openai-agents-python 运行指南：掌握 Runner 执行、RunConfig 配置与多轮会话状态管理

OpenProject 开源项目管理软件完整指南：甘特图、工作包与时间追踪一站式自托管

让 AI 替你写移动 UI 测试：Maestro AI 断言与 MCP 评估实操指南

Web-Dev-For-Beginners 银行项目 API 实战指南：Node.js + Express 构建账户与交易后端服务

ARM Cortex-M上ML-KWS静态评测：四大硬件级雷区与专用工作流

今日更新

Linux 内核 ARM 虚拟内存布局全解析：从 4GB 地址空间划分到源码级验证

AIGC降重工具测评与教育应用指南

数据容灾核心指标与实战方案解析

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？