The guide

How mtioon works.

From your repo to a finished video in four steps. Whatever Claude builds stays a layer you can move, retime and restyle.

Open the demo
Your repo
Claude Code
Copy
Fonts
Colours
Screens
Ship it.
Your video

The idea

Claude drives, you direct.

mtioon is a motion-design editor that Claude can use. You connect it to Claude Code once; from then on, Claude can open, build and change your videos while you watch them in the editor.

A video here is a stack of layers (text, shapes, images, footage, 3D, code) on a timeline. Claude works with the same layers you do, so nothing it makes is a flat render: every word, colour and move stays editable.

acme-web
~ %
README.md
globals.css
Inter · 800
logo.svg
public/hero.png

Step 1

Open your project.

Open a terminal in the folder the video is about and start Claude Code there. A Next.js app is ideal, but any repo or folder works: a landing, a design system, a folder of screenshots.

$ cd ~/code/your-app
$ claude

From that folder Claude picks up your brand on its own:

Copy

README, docs and page text: your product's name, promise and tone.

Colours

CSS variables, Tailwind config, theme files.

Type

The fonts your app loads (next/font, @font-face).

Images

Logo, icons, screenshots and footage from public/ and assets/.

No Claude Code yet? Install it with npm i -g @anthropic-ai/claude-code. Prefer the web? When you create a project, mtioon asks which of your GitHub repos it is about, and Claude reads it from there.

Terminal
acme-web %

Step 2

Connect Claude.

mtioon is an MCP server: a set of tools Claude can call. You add it to Claude Code once, sign in once, and from then on every Claude Code session, in any folder, can open and edit your videos. It takes about a minute.

  1. 1

    Add mtioon to Claude Code

    Copy the command above, paste it in any terminal and press Return. Claude Code answers that it added the server.

    --scope user makes it available in every folder. Without it, it only works in the folder where you ran it.

    Terminal
    your-app % claude mcp add --scope user --transport http mtioon https://mtioon.com/api/mcp
    Added HTTP MCP server mtioon with URL: https://mtioon.com/api/mcp to user config
    your-app %
  2. 2

    Start Claude Code in your project

    Go into the repo the video is about and run claude. Already running? Quit it (/exit) and start it again: servers load when a session starts.

    Then type /mcp and press Return.

    Terminal
    ~ % cd ~/code/your-app
    your-app % claude
    ✻ Welcome to Claude Code
    cwd: ~/code/your-app
    > /mcp
  3. 3

    Find mtioon in the list

    /mcp lists your servers. mtioon shows △ needs authentication the first time: it doesn't know who you are yet.

    Move to it with the arrow keys and press Return.

    claude · your-app
    Manage MCP servers
    ❯ 1. mtioon△ needs authentication
    ↑↓ to select · Enter to open · Esc to go back
  4. 4

    Choose Authenticate

    Pick Authenticate and press Return. Claude Code opens your browser on mtioon.

    No browser opened? Claude Code prints a link in the terminal: open it yourself.

    claude · your-app
    mtioon MCP server
    Status: △ needs authentication
    ❯ 1. Authenticate
      2. Reconnect
      3. Disable
    Opening your browser to sign in…
  5. 5

    Sign in with Google

    Use the Google account that owns your mtioon projects. Already signed in here? This step is skipped.

    mtioon.com/login

    Connect Claude to mtioon

    Sign in with the Google account that owns your projects. Claude will only see those.

    Continue with Google
  6. 6

    Allow

    mtioon asks whether this app may edit your projects. Check that it says on this computer (localhost), then press Allow. The tab can be closed after.

    Only allow requests you just started yourself. mtioon never asks you to approve access from an email or a message.

    mtioon.com/consent

    An app on this computer wants to edit your mtioon projects

    It can read, create and change your projects and spend your credits.

    “Claude Code” · localhost

    DenyAllow
  7. 7

    Connected. Try it

    Back in the terminal, Claude Code says it's connected, and /mcp shows ✔ connected. Ask something small to check: list my mtioon projects.

    That's for good: new sessions reconnect on their own. You'll only authenticate again if the sign-in expires or you remove access in Settings.

    claude · your-app
    Authentication successful. Connected to mtioon.
    > list my mtioon projects
    ● mtioon · list_projects
    3 projects: Launch, Pricing teaser, Logo intro

Other ways in

claude.ai

web

Settings → Connectors → Add custom connector.

Name it mtioon, paste https://mtioon.com/api/mcp, then Connect: the same sign-in and Allow follow.

Claude Desktop

Mac, Windows

Settings → Connectors → Add custom connector, with the same URL. Connect, sign in, Allow.

An API key

other machines

For a server, CI or a machine without a browser: make a key in Claude & keys. Settings shows the full command, with the key in an Authorization header. No Authenticate step.

If it doesn't connect

mtioon isn't in /mcp

Run the add command again, then quit and restart Claude Code. Check with claude mcp list.

It says “failed” or keeps “needs authentication”

Choose Authenticate again. If the browser shows an error, sign out of mtioon in that browser and retry.

The browser opened the wrong Google account

Sign in with the account that owns your projects: the projects Claude sees are that account's.

It used to work

Sign-ins expire now and then: /mcp → mtioon → Authenticate. Access removed in Settings also needs a new Allow.

claude · acme-web
>

Ship faster.

Building live…

Step 3

Ask for a video.

Tell Claude what you want, in your own words. Open the project in the editor first if you want to watch every layer land.

“make a 15 s launch video for this repo”“a vertical 9:16 teaser for our new pricing page”“a calm product tour of the dashboard, 30 s”“make the logo intro bouncier”

Then Claude:

Plans it

A board of the whole piece first: the hook, the beats, the ending.

Builds it

Type, shapes, your images, camera moves, 3D and code-drawn effects, cut to a beat.

Scores it

Original music for this picture, synced to every move. Narration on every paid plan (not the trial).

Checks it

It looks at its own frames, lists what a picky art director would reject, and fixes it.

Say the length, the format (16:9, 9:16, 1:1) and who it is for; the rest can come from the repo. Select a layer in the editor and say “this”: Claude knows what you picked.

Ship it.
Style
Size
Enter · Slam

Step 4

Edit it yourself.

Everything Claude made is a layer. Change it by hand, or select it and ask Claude to change it for you.

Stage

Drag layers; they snap to the centre and to each other with pink guides. Corners resize, the round handle rotates.

Timeline

Drag and trim clips, split with S, drag the grip above it for more stage or more tracks.

Inspector

Style, motion presets that preview themselves, sections, music and voice.

Ask Claude

Right-click anything, or select and type: small fixes land as one undoable step.

Play / pauseSpace
Back to the start↩ or Home or ⌘←
To the endEnd or ⌘→
One frame (⇧: one second), with nothing selected← →
Nudge the selection (⇧: 10 px)← → ↑ ↓
Copy, cut, paste layers (across projects too)⌘C ⌘X ⌘V
Duplicate⌘D
Delete the selection⌫ or Delete
Select every layer⌘A
Split at the playheadS
Undo, redo⌘Z ⌘⇧Z
Fit, 100 %, zoom the stage⌘0 ⌘1 ⌘+ ⌘−
Move without snapping to the guidesHold ⌘ while dragging

Step 5

Export.

Export gives you an MP4 with its sound, at 60 fps, straight from the editor (the Export button, top right). A single frame downloads as a PNG.

Starter

MP4 up to 1080p, with the AI narrator.

Pro

MP4 up to 4K, with the AI narrator.

Unlimited

MP4 up to 4K, with the AI narrator.

Trial

7 days on a card, MP4 up to 1080p.

AI edits use credits from your plan (exports are free); see the plans.

Questions.

Claude edited another project.+

Open the one you mean in the editor (Claude works on the open one) or name it in your message: “in the Acme launch project…”.

Is my code uploaded?+

Claude Code reads your files on your own machine. Only what ends up in the video (an image, a clip, a font) is uploaded to your mtioon account. A GitHub repo you link to a project is read, never written, so claude.ai can see it too.

Can I use it without Claude Code?+

Yes: claude.ai and Claude Desktop connect the same way (Settings → Connectors). In the editor, the Ask panel talks to your own Claude Code through a small bridge you start in your project's folder.

Can I undo what Claude did?+

Every tool call is one step in the project's history: ⌘Z takes it back, like any edit of yours.

Say it. Then watch it move.

Connect Claude Code once, open your repo, and ask for your first video.

Get startedOpen the demo