Let an agent drive Studio

Studio registers its own capabilities as WebMCP tools, so an AI agent running in your browser can read what Studio knows and make the same edits you can.

This is not the same as creating through an AI chat. That page covers the hosted HyperFrames MCP connector, which builds and renders a video from a conversation. This page is about an agent working inside Studio, on a composition already open in front of you.

What it looks like

With the tools available, an agent can do this without touching your files:

studio_look                      -> the project, playhead, selection, and every element
studio_select   hf:abc123        -> selects the headline, same as clicking it
studio_inspect                   -> its resolved styles, text, and animations
studio_set_style {"color":"red"} -> writes it, through Studio's own commit path
studio_frame    2.4              -> a PNG of the composition at 2.4 seconds

The last one matters most. It is what lets an agent judge a change instead of guessing at it.

Turning it on

The tools register automatically when Studio loads. Whether an agent can reach them depends on the browser.

Browser	Status
Chrome 149	Origin Trial
Edge 150	Origin Trial
ChatGPT Desktop	Shipped
Brave (Leo)	Experimental
Firefox, Safari	Not yet

For local development in Chrome, enable the flag and restart:

chrome://flags

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

Then confirm the tools are there from Studio’s console:

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

Registration is asynchronous, so a caller that reads getTools() the instant Studio loads can see a partial list. Wait for the toolchange event, or poll until the count settles at twelve.

The API is document.modelContext, not navigator.modelContext. Many published examples use the second one. It is a compatibility shim some polyfills add, not part of the specification, so feature-detecting it will mislead you.

On browsers without native support, Studio loads a polyfill so a WebMCP bridge extension can still connect. Nothing is downloaded on a browser that has the API already.

What an agent can do

Read

Tool	Answers
`studio_look`	The open project and composition, the playhead, what you have selected, and every element with a handle
`studio_inspect`	One element in full: resolved styles, text fields, box, animations, and what it will accept
`studio_frame`	A PNG of the composition at any time

studio_look gives every element a handle. Pass it back to any tool that edits an element.

Change

Tool	Does
`studio_select`	Selects an element, exactly as clicking it does
`studio_seek`	Moves the playhead
`studio_set_text`	Rewrites text
`studio_set_style`	Sets inline styles
`studio_transform`	Moves, resizes or rotates
`studio_add_animation`	Adds a GSAP animation at the playhead
`studio_update_animation`	Changes a duration, ease or position
`studio_add_keyframe`	Adds a keyframe to an animation
`studio_delete_animation`	Removes an animation

Every edit runs through the same commit path a mouse gesture uses, so it lands in your file with the same undo entry and the same save behaviour. There is no separate agent write path.

Two rules worth knowing

Select first, then edit. Most editing tools act on the current selection rather than taking an element. That is how Studio itself works: click, then type. An agent that edits without selecting gets an error telling it to select. Check what came back. Tools report what actually happened, not what was asked for. studio_transform reads the element’s box back after writing and tells you which operations took effect. studio_frame reports the time it actually captured. When something could not be verified, the tool says so rather than claiming success.

Working alongside an agent

This is built for you and an agent looking at the same composition. Studio shows you every change as it happens: an agent selecting an element draws the same selection box, and an edit appears in your undo history under its own name. That shared view is doing real work. Some of Studio’s write paths report a failure through a toast rather than a return value, so you are the one who sees it. Leave Studio visible while an agent is working.

Studio refuses agent writes while auto-save is paused or an external change to the file is waiting for your decision, and tells the agent why. Resolve the banner and it can continue.

Turning it off

There is no settings toggle yet. The switch is a Studio preference, so set it from the console and reload:

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

Read the existing object and spread it, as above. Writing {agentToolsEnabled: false} on its own replaces the whole preferences blob and loses your panel sizes, zoom and timeline settings. Set it back to true, or delete the key, to re-enable. The browser gates tool access behind its own permission prompt, so registering a tool is not the same as granting access to it. How often you are asked, once per site or every call, is up to the browser and is still changing while the API is in origin trial.

Start here

Command line

SDK guides

SDK reference

Composition, design & animation

Composition reference

Rendering paths

Cloud infrastructure

Advanced rendering

Packages

Agent setup

Contributing & community

Let an agent drive Studio

What it looks like

Turning it on

What an agent can do

Read

Change

Two rules worth knowing

Working alongside an agent

Turning it off

​What it looks like

​Turning it on

​What an agent can do

​Read

​Change

​Two rules worth knowing

​Working alongside an agent

​Turning it off

​Related topics

What it looks like

Turning it on

What an agent can do

Read

Change

Two rules worth knowing

Working alongside an agent

Turning it off

Related topics