Inkframe — An Agent-Native Motion Studio

• 

  Inkframe keeps the agent’s proposed edit visible and editable in the same browser timeline.

Inspiration

Video editors are built for people who can see what is selected, infer whether a drag worked, and recover from an accidental click. A browser agent faces a different problem: it sees controls and pixels, while the project itself is structured state—clips, timing, text, audio, transitions, and export rules.

Inkframe explores a better collaboration model. The person defines the creative direction. The agent works through the editor’s real capabilities, and the person reviews every consequential change.

What it does

Inkframe is an agent-native motion studio for short-form video. It creates editable 9:16 and 16:9 timelines with video, images, captions, audio, and transitions.

In the demo, an agent plans a 16-second Vietnam travel Reel, finds matching Pexels footage and licensed Freesound audio, imports those assets into the browser, composes four scenes, adds captions and transitions, validates the result, and reports the required attribution. The finished work remains an ordinary editable timeline rather than a black-box generated file.

Why WebMCP

WebMCP lets Inkframe expose named, typed editor tools instead of asking an agent to imitate a person clicking through the UI. The agent can inspect the project, search stock footage, plan a storyboard without changing anything, compose an approved plan, validate the timeline, inspect attribution, and request local export.

The key control point is approval. A storyboard plan returns a one-use token bound to that exact plan. Composition requires the token and explicit confirmation, so a later mutation cannot silently reuse an earlier approval. Export and destructive actions are confirmed too.

How we built it

Inkframe is built with Next.js, React, and TypeScript. Its reducer-backed editor session keeps separate 9:16 and 16:9 timelines. WebMCP tools are registered through the browser’s model context with strict Zod schemas and JSON Schema inputs.

Elah renders the composition in a browser worker and MediaBunny encodes the MP4 locally. Pexels, Jamendo, and Freesound imports retain provider, creator, source, license, and required-credit metadata. Projects and media stay in browser storage; Inkframe does not upload the source media or rendered video to a render server.

Challenges we ran into

The main design challenge was making the agent capable without making it authoritative. An early lesson was that atomically exposing every editor action is not enough: the agent also needs a safe workflow.

We added capability discovery, preview-first storyboards, content-bound approval tokens, isolated variants, bounded tool output, timeline validation, visual QA, attribution reporting, cancellation, and local export verification. We also had to make tools read current editor state at call time, rather than stale state captured when the page mounted.

What we learned

WebMCP is most useful when tools express product intent rather than DOM mechanics. A browser agent becomes more reliable when it can reason about a project’s actual state and report what changed.

The best outcome is collaborative: people direct taste, make approvals, and retain control; agents handle the structured, repeatable editing operations.

What's next

We want to make visual review and comparison faster, give creators more reusable motion templates, and continue refining agent workflows that are easy to inspect, approve, and undo.

The underlying editor predates this challenge. The WebMCP tool surface, approval workflow, live state bridge, validation, attribution, and judge flow were added during the challenge period.

Built With

• codex
• next.js
• openai