framejam

FrameJam

Make videos with your coding agent, and tell it what to change by pointing at the screen.

Pick a style, let the agent build the video, then click the frame that's wrong and say why. Your agent gets the exact timestamp and a frame image with your pin on the spot you clicked.

Website · Join the Discord · Get updates · Report an issue

Why FrameJam

Coding agents are surprisingly good at making videos, with Hyperframes, Remotion, Motion Canvas, ffmpeg or whatever your project already uses. The hard part is everything around it. Describing a look in words is slow, and "the thing at around three seconds should be bigger" is a terrible way to give feedback. FrameJam is a plugin for Claude, ChatGPT and Cursor, with a small app that sits next to your agent, and it handles both.

Pick a style instead of describing one. Name one of 30 example videos when you ask for a video, or type /framejam:style to choose on a page. Your agent gets the look: palette, textures, fonts, easing, transitions, text animations and pacing, and builds whatever your video is about in it.

Give feedback like you would to a person. Pause and type, click the thing that's off, or drag across the timeline to mark a range. Press Finish review and your agent gets every comment with its timestamp and a frame from the render, with your pin drawn where you clicked.

Works with any video tool. Anything that renders an mp4 can be reviewed, and you always review the render.

Go round by round. Each new version from the agent is a fresh round. Old versions keep their comments, so you can always see what changed and why.

Runs on your machine. One local Node process, no account, no upload. Your projects are plain JSON files in ~/.framejam. Your videos and comments never leave your machine. The Styles and Playbooks pages stream their example videos from framejam.ai, and the Feedback button sends the note you write; nothing else goes out.

How it works

1. Ask your agent for a video, for example "make a 7-second launch teaser with FrameJam and open it for review".
2. Optionally pick a playbook and a style: name them in your request, or type /framejam:playbook or /framejam:style to choose on a page.
3. Review it in the browser pane next to your chat: click, type, drag, then press Finish review.
4. Get version 2. The agent applies your notes and the page switches to the new version on its own. Repeat until you love it.

Not ready to animate yet? Ask for a storyboard first: one still per shot, which you review the same way.

Quick start

FrameJam is a plugin for Claude Code (terminal and the Claude desktop app), ChatGPT (Work and Codex in the ChatGPT desktop app) and Cursor. You need Node 22+ and ffmpeg (brew install ffmpeg on macOS). Paste this into your agent (shown for Cursor; use claude or codex for the other apps):

Run npx -y framejam install cursor and open the link it prints in your built-in browser.

Or run npx -y framejam install in a terminal yourself; without an app name it sets up every app it finds. It installs the FrameJam plugin in each app (the tools and the skill), checks Node and ffmpeg, and starts the app in the background at http://localhost:2400. Then start a new session in Claude, reopen the ChatGPT app, or reload the Cursor window, so the plugin loads. FrameJam shows up in each app's plugin list, where you can turn it off or remove it.

Updating. In Claude Code the plugin updates on its own. Run npx -y framejam@latest install any time to update everywhere: it updates the plugin and replaces an older FrameJam UI that is still running in the background with the new one. The Projects page shows a notice with this command when a newer version is on npm (it asks the npm registry at most every 6 hours; set FRAMEJAM_NO_UPDATE_CHECK=1 to turn that off).

After that, typing /framejam:start in your agent is all it takes: the agent opens FrameJam and picks up where you are (a video you're already editing, feedback waiting, or a new video). Until an agent has connected, the start page shows a short setup checklist (it stays available at /setup). After that, it lists your projects and shows whose turn it is on each one.

To run from a clone instead:

git clone https://github.com/moritzkremb/framejam.git
cd framejam
npm install
npm run build
npm start                 # http://localhost:2400  (MCP at http://localhost:2400/mcp)
node dist/server/cli.js install   # points your apps at this clone instead of npm (MCP server + skill, no plugin)

Connect your agent

npx -y framejam install does all of this for you. The plugin lives in plugin/: one folder that Claude Code, ChatGPT and Cursor all read, listed in this repo's marketplaces (.claude-plugin/marketplace.json for Claude, .agents/plugins/marketplace.json for ChatGPT). To install it by hand, then run npx -y framejam start to start the UI:

In Claude Code:

/plugin install framejam --marketplace moritzkremb/framejam

Or in a terminal:

claude plugin marketplace add moritzkremb/framejam
claude plugin install framejam@framejam

In the Claude desktop app you can also add the marketplace under Customize → Plugins → Add → Add marketplace → Add from a repository. Start a new session so it loads. Claude Code has no built-in browser, so open http://localhost:2400 yourself.

codex plugin marketplace add moritzkremb/framejam
codex plugin add framejam@framejam

The codex command comes with the ChatGPT desktop app. Reopen the app; FrameJam is listed under Plugins.

Cursor also loads plugins you installed in Claude Code, so if you have FrameJam there, you're done. Otherwise copy the plugin folder to ~/.cursor/plugins/local/framejam and reload the window.

Each app needs the MCP server and the skill. Desktop apps launched from the Dock may not see the PATH from your shell (nvm, fnm): if the server fails to start because npx isn't found, use the full path from which npx as the command. When running from a clone, replace npx -y framejam with node /absolute/path/to/framejam/dist/server/cli.js and moritzkremb/framejam with the clone's path.

For example, in Cursor's ~/.cursor/mcp.json (or .cursor/mcp.json in a project):

{
  "mcpServers": {
    "framejam": {
      "command": "npx",
      "args": ["-y", "framejam", "--stdio"]
    }
  }
}

npx -y skills add moritzkremb/framejam -g -a cursor -y

Claude Code: claude mcp add -s user framejam -- npx -y framejam --stdio. Codex: codex mcp add framejam -- npx -y framejam --stdio. Use -a claude-code or -a codex for the skill.

ChatGPT's chat connectors use MCP over HTTP. Run npm start, turn on developer mode for connectors in ChatGPT's settings, and add a custom connector with this URL:

http://localhost:2400/mcp

If your ChatGPT build requires an https URL, expose the port with a tunnel (for example cloudflared tunnel --url http://localhost:2400) and set FRAMEJAM_PUBLIC_URL to the tunnel URL so the review links it hands out are reachable.

skills/framejam/SKILL.md is the skill. The plugin ships it as start (so the command reads /framejam:start), next to playbook and style. Without the plugin, npx skills add moritzkremb/framejam installs it for most agents (there it's /framejam); you can also drop it into AGENTS.md. It walks the agent through: ask what to make → pick a preset → build with the project's tool → render → open_review → wait_for_feedback (and call it again while the result is pending, up to 12 times in a row, about 10 minutes) → edit → add_version with a note, until you say it's done. .cursor/rules/framejam.mdc is the same text as a Cursor rule; regenerate it with npm run sync:rule after editing the skill.

Try the whole loop without an agent

npm start                 # terminal 1
npm run e2e               # terminal 2 — plays the agent: picks a preset, opens a review, blocks on wait_for_feedback

Open the printed review URL, add a few comments and press Finish review. The script prints what the agent received, then posts v2, and you can watch the page move to it live. npx tsx scripts/ui-demo.ts does the browser side automatically (headless Chrome) and saves screenshots.

Styles

FrameJam ships with 30 styles:

Neon Terminal, Noir Quote, Navy Teal, Mono Plex, Paper Marker, Bauhaus Grid (1:1), Dot Matrix, Red Band Title, Midnight Glow, Cream Serif, Airy UI, Dot Field, Blueprint, Topo Credits, Parchment Epic, Case File, Ink Wash, Acid Chrome, Soft Outline, Split Flap, Label Collage, Cyanotype Mac, Doodle Mascot, Synthwave Grid, Pop Zine, UI Microstudy, Motion Principles, Dither Serif, Color Wipe and Storybook Lantern. Want a style that isn't here? Ask for it in the FrameJam Discord.

Many were studied from the Skillry Opus 5.5 gallery, What Ships launch films and Opus 5.5 videos shared on X, with original copy and no brand assets. Every one passes hyperframes lint with no errors.

Presets live in presets/<id>/ (built-in) and ~/.framejam/presets/<id>/ (yours):

presets/neon-terminal/
  style.json          # the look: palette, fonts, easing, transitions, textAnimations, rhythm, guide, plus example (what the preview shows)
  composition/        # the example video as a Hyperframes project; agents look here for techniques, not a starting point
  preview.mp4         # rendered with `npx hyperframes render`
  poster.jpg

The npm package leaves out the built-in preview.mp4 files to stay small; the Styles page streams them from https://www.framejam.ai/presets/<id>/preview.mp4 (override with FRAMEJAM_PREVIEW_URL). To add a style pack, unzip it into ~/.framejam/presets/.

To re-render the previews:

npm run render:presets            # or: npm run render:presets -- noir-quote

Playbooks

A style sets the look; a playbook sets how a kind of video gets made: what you bring, the steps, the tools it needs and the quality bar, all as defaults your request can override. Name one when you ask for a video, or type /framejam:playbook to choose on a page. Some playbooks come with styles made for them, each with its own example video. FrameJam ships with 15:

Playbook	What goes in, what comes out
Kinetic Music Video	A song goes in, a music video where the lyrics, graphics and illustrated characters move on every beat comes out.
Slopcore Music Video	A song full of a scene's in-jokes goes in, a music video with one star, every lyric on screen and a graphic explaining every line comes out. Made the way anabology made ESCAPE VELOCITY with Claudia (claudia.gallery).
Slopcore Cartoon	A song about a scene's memes goes in, a cartoon music video that explains every joke comes out, from still illustrations only, for a few dollars.
Show & Tell Short	Raw talking-head clips go in, a tight vertical short that shows what you talk about while you say it comes out. Comes with two styles made for it: Midnight Glow and Paper Marker.
Dynamic Layout Short	A raw talking-head recording goes in, a vertical short that switches layout with what you say comes out. Comes with three styles made for it: Pop Zine, Midnight Glow and Mono Plex.
Clean Cut	A raw recording goes in, the same video as a tight, fast-paced jump cut without pauses, fillers and retakes comes out.
Product Launch	Your product goes in, a polished launch video with the real app on screen comes out.
Founder Launch	A founder talking to camera and screen recordings go in, a tight launch video comes out.
Launch Teaser	A name, one promise and a few real clips go in, a 15-second teaser that lands the name on the beat comes out.
Explainer	A topic, article or script goes in, a narrated animated explainer comes out.
Math Animation	A math or science idea goes in, a calm animated explainer in the style of 3Blue1Brown comes out. Comes with two styles made for it: Blueprint and Soft Outline.
How-to	A process goes in, a short step-by-step video that's clear even with the sound off comes out.
Timeline	Dates and milestones go in, a fast story told one milestone at a time comes out. Comes with a style made for it: Parchment Epic.
YouTube Hook	Your intro script or recording goes in, the 20–60 second opening that keeps people watching your long video comes out.
Motion Design Showreel	Your logo and a few things to show off go in, a short motion piece cut to the beat comes out. Comes with two styles made for it: Bauhaus Grid and Pop Zine.

Each playbook page says what you need (what's included, what runs free on your computer, and which accounts cost money), whether it starts a new project or works in the one you have, and how your style combines with it.

Playbooks live in playbooks/<id>/ (built-in) and ~/.framejam/playbooks/<id>/ (yours). A playbook is an agent skill plus a playbook.json for the gallery:

playbooks/clean-cut/
  playbook.json   # name, tagline, creator, bring, get, needs, project, styles, steps
  SKILL.md        # the method the agent follows
  references/     # read on demand
  scripts/        # helpers the agent copies into the project
  poster.jpg

Like styles, the npm package leaves out preview.mp4; the Playbooks page streams it from https://www.framejam.ai/playbooks/<id>/preview.mp4. The full format is on framejam.ai/docs/playbooks.

The review page

• One round per version. You add comments to the latest version, then press Finish review. That locks the version and hands its comments to the agent. The agent's next version starts with an empty list, and older versions show their comments greyed out.
• Changed your mind? After finishing, Edit comments reopens the round. If the agent hadn't picked the comments up yet they're simply withdrawn; if it had, finishing again sends a revised list (revised: true) that replaces the old one.
• Layout. The video, timeline and comment box sit on the left; the comments are a list in a sidebar on the right that collapses to a rail. Clicking a comment anywhere (pin, timeline marker, corner note) opens the sidebar on it. Below 720px wide the sidebar slides over the video instead of taking a column.
• The comment box sits under the timeline. It's attached to the current time by default; click the video to attach a spot (the agent gets that frame with your pin drawn on it), drag across the filmstrip to attach a range, or choose Whole video. Enter adds the comment.
• On the video, a comment shows up only while the playhead is at it: pinned comments as a bubble on their spot, time and range comments as a note in the top-left corner. The cursor over the video is a comment bubble.
• Agent listening. The page says "Agent listening" while the agent is inside wait_for_feedback (and for 15 seconds between its calls). That only happens while the agent's turn is still running: once it ends its turn, nobody is listening, and after you finish the page shows one line to paste into the chat ("Apply my FrameJam feedback for rev_…"). It switches to "Your agent is making version N" once the agent picks the comments up.
• What plays. Always the render. Each version keeps a snapshot of its mp4, so older versions look as they did then.
• Timeline zoom. Pinch on the timeline, ⌘+scroll (Ctrl+scroll), or use the zoom buttons to pick ranges on long videos. Scroll sideways or drag the bar under the filmstrip to move along.
• Download. The download button next to Finish review (or Download video in the version menu) saves a copy of the version's video wherever you choose.
• Keys. Space play/pause, ←/→ step one frame, Shift+←/→ step one second, C focus the comment box, ⌘↩ (Ctrl+Enter) finish review, Esc clear, ? shortcuts.
• Copy comments as text (version menu) copies a version's comments as markdown for harnesses without MCP.

Before anything is animated, an agent can open a storyboard: a set of still panels, one per shot, each with an optional title and caption (action, camera move, voiceover line, duration).

open_review({
  title: "Launch storyboard",
  panelsDir: "/abs/project/storyboard",          // every image in the folder, sorted by file name
  panels: [{ path: "01.png", title: "Cold open", caption: "Slow push in. VO: 'Every team ships faster.'" }, "02.png"],
})

The review page shows the panels as a board (a grid with titles and captions) and a panel view (one panel large, with a strip of all panels underneath). Click a panel on the board to open it, click inside it to pin a spot, or just type to comment on the whole panel. On the board, the comment box is for the whole storyboard. Keys: ←/→ previous/next panel, B board, C comment, ⌘↩ finish review.

Comments reach the agent by panel: at: "panel 3 (Cold open)", with the panel's number, title, caption and image path, the pin position, and an image of the panel with the pin drawn on it. Rounds, Finish review, Edit comments and versions work exactly as for videos. Each version keeps its own copy of the panel images, so the agent can overwrite the files for v2 and v1 still shows what it was.

Tool	What it does
open_review({ title?, videoPath?, panels?, panelsDir?, reviewId?, note? })	Opens a review and returns { reviewId, url, version }. videoPath is a render from any tool. Pass panels/panelsDir instead of a video for a storyboard. Calling it again with the same title adds v2, v3, and so on.
wait_for_feedback({ reviewId, timeoutSeconds? })	Blocks until the user presses Finish review. Returns { status: "pending" } after about 50s; call it again, up to 12 times in a row, then stop and tell the user to say "apply my FrameJam feedback". Sends progress notifications while waiting.
get_feedback({ reviewId?, include? })	Returns the newest round of comments right away. Without reviewId it picks the review whose comments haven't reached the agent yet; unsent comments are sent (and their version locked). Use it when the user says "apply my FrameJam feedback".
list_reviews()	Lists reviews with their URL and where each round stands (awaiting_user, user_commenting, sent_not_delivered, delivered_to_agent).
add_version({ reviewId, videoPath?, panels?, panelsDir?, note? })	Attaches a new render (or new storyboard panels) as the next round. It starts with no comments; the note is shown to the user. With no media, a storyboard re-reads its panelsDir.
resolve_comments({ reviewId, ids, note? })	Optional bookkeeping for the agent. The UI shows each version as one round instead.
list_presets({ mood?, pacing?, format?, query? })	Lists the style presets.
get_preset({ id, includeTemplate? })	Returns the look (style.json and its guide of look rules), what the example video shows, and the example's file list. includeTemplate: true adds the example's source.
list_playbooks({ query? })	Lists the playbooks with what to bring, what you get, the cost and the creator.
get_playbook({ id, styleId? })	Returns playbook.json, the full SKILL.md method, the playbook's local folder and file list, how a style combines with it, and the styles made for it (with their ready settings when styleId is one of them).
open_picker({ kinds?, title? })	Opens a page where the user picks a playbook and/or style for this video, or none. Returns { pickId, url }.
wait_for_pick({ pickId })	Waits for the user's pick and returns the playbook and style (or null for none). Returns pending after about 50s; call it again.
get_selected_preset(), get_selected_playbook()	Kept for older skills; they point the agent to open_picker.

Feedback comes back three ways: as JSON (comments[] with at, time, endTime, position, thumbnailPath), as a markdown prompt, and as inline JPEG frames with the pin drawn on them.

Development

npm run dev        # API on :2400 (tsx watch) + Vite UI on :2401 with a proxy
npm test           # vitest: MCP tools (in-memory, streamable HTTP, stdio) + REST API
npm run typecheck
npm run lint

Path	Contents
src/server/cli.ts	CLI entry. framejam install [cursor|claude|codex] installs the FrameJam plugin in each app (src/server/install.ts; from a clone it adds the MCP server and skill instead) and starts the UI; framejam start starts the UI in the background (log in ~/.framejam/server.log) and prints the URL, --browser also opens it; framejam starts HTTP in the foreground; framejam --stdio runs MCP on stdio and also hosts the UI when the port is free.
src/server/mcp.ts	MCP tool definitions.
src/server/store.ts	JSON file store. Every call re-reads from disk, so several processes can share ~/.framejam.
src/server/app.ts	Hono routes: REST, SSE change feed, media with HTTP range support, /mcp.
src/web/	React front end styled by the design system (src/web/styles/, generated from design/).
design/	The FrameJam design system: brand book, tokens, component CSS and screen mockups. Open design/index.html.
skills/framejam/	The agent skill (also mirrored as the Cursor rule in .cursor/rules/framejam.mdc).
plugin/	The plugin for Claude Code, ChatGPT and Cursor: both manifests, mcp.json and the skills start, playbook and style. npm run sync:plugin regenerates the manifests and start from package.json and the skill.

Configuration: --port / FRAMEJAM_PORT (default 2400), --host / FRAMEJAM_HOST (default 127.0.0.1), --data-dir / FRAMEJAM_HOME (default ~/.framejam), FRAMEJAM_PUBLIC_URL (the base URL used in links), and FRAMEJAM_PREVIEW_URL (where the Styles page streams built-in previews from), FRAMEJAM_PLAYBOOK_PREVIEW_URL (the same for the Playbooks page), and FRAMEJAM_NO_UPDATE_CHECK=1 (don't look for a newer version on npm).

• One UI host per port. If several harnesses each start framejam --stdio, the first one hosts the web UI and the others reuse it through the shared data directory. If the hosting process exits, restart one of them (or run npx -y framejam start).
• No MCP Apps embedding yet. The UI is a plain web page, ready to be embedded later.

Join the community

Join the FrameJam Discord

FrameJam is free and open source, and so is the community. Join the FrameJam Discord:

• Get help. Ask questions and get unstuck on your videos.
• Share what you make. Show your videos and see what others are making.
• Shape what's next. Ask for styles and features, and hear about new ones first.

Join the Discord →

Just want the news? Sign up for updates for new styles and releases.

Created by @moritzkremb. Questions, ideas or bugs? Use the Feedback button in the app or open an issue.