<div align="center">

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. <br> 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

<br> <img src="docs/images/review.jpg" alt="The FrameJam review page: a video with a timeline, a range selected on the filmstrip and a comment in the sidebar" width="860"> </div> <br>

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.

<div align="center"> <img src="docs/images/styles.jpg" alt="The Styles page: a grid of example videos, each with a Use button" width="860"> </div>

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:

<details open> <summary><b>Claude Code</b></summary> <br>

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.

</details> <details> <summary><b>ChatGPT (Work and Codex)</b></summary> <br>

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.

</details> <details> <summary><b>Cursor</b></summary> <br>

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.

</details> <details> <summary><b>Any other MCP client (without the plugin)</b></summary> <br>

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.

</details> <details> <summary><b>ChatGPT chat mode (or any remote MCP client)</b></summary> <br>

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.

</details> <details> <summary><b>Teach the agent the loop</b></summary> <br>

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.

</details>

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

<table> <tr> <td><img src="presets/acid-chrome/poster.jpg" alt="Acid Chrome" width="200"><br>_{<b>Acid Chrome</b>}</td> <td><img src="presets/cyanotype-mac/poster.jpg" alt="Cyanotype Mac" width="200"><br>_{<b>Cyanotype Mac</b>}</td> <td><img src="presets/doodle-mascot/poster.jpg" alt="Doodle Mascot" width="200"><br>_{<b>Doodle Mascot</b>}</td> <td><img src="presets/case-file/poster.jpg" alt="Case File" width="200"><br>_{<b>Case File</b>}</td> </tr> <tr> <td><img src="presets/dot-matrix/poster.jpg" alt="Dot Matrix" width="200"><br>_{<b>Dot Matrix</b>}</td> <td><img src="presets/ink-wash/poster.jpg" alt="Ink Wash" width="200"><br>_{<b>Ink Wash</b>}</td> <td><img src="presets/synthwave-grid/poster.jpg" alt="Synthwave Grid" width="200"><br>_{<b>Synthwave Grid</b>}</td> <td><img src="presets/parchment-epic/poster.jpg" alt="Parchment Epic" width="200"><br>_{<b>Parchment Epic</b>}</td> </tr> </table>

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.

<details> <summary><b>How presets are stored, and making your own</b></summary> <br>

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