Docs

Install

Paste one prompt into your agent. It does the rest.

Before you start

  • Node 22 or later. Frame Jam itself runs on Node 20; the Hyperframes CLI your agent renders with needs 22.
  • ffmpeg, for rendering and frame thumbnails. The Hyperframes CLI downloads its own Chrome.
Running a local build? Replace npx -y framejam below with:
node /absolute/path/to/framejam/dist/server/cli.js --stdio

The easy way: ask your agent

Paste the prompt for your app. Your agent adds the MCP server and the skill, then opens Frame Jam.

Cursor

Install Frame Jam for me: add it as an MCP server named "framejam" in ~/.cursor/mcp.json (command "npx", args ["-y", "framejam", "--stdio"]), copy the skills/framejam folder from the framejam npm package to ~/.cursor/skills/framejam, then open http://localhost:2400 in the browser.

Claude Code

Install Frame Jam for me: run `claude mcp add framejam -- npx -y framejam --stdio`, copy the skills/framejam folder from the framejam npm package to ~/.claude/skills/framejam, then open http://localhost:2400 in the browser.

Codex

Install Frame Jam for me: run `codex mcp add framejam -- npx -y framejam --stdio`, copy the skills/framejam folder from the framejam npm package to ~/.codex/skills/framejam, then open http://localhost:2400 in the browser.

Manual setup

This is what the prompts do. Two parts: the MCP server and the skill.

Cursor

Add this to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (one project):

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

Or add it to Cursor in one click. Then copy the skill:

mkdir -p ~/.cursor/skills && cp -r skills/framejam ~/.cursor/skills/

Claude Code

claude mcp add framejam -- npx -y framejam --stdio

Then copy the skill:

mkdir -p ~/.claude/skills && cp -r skills/framejam ~/.claude/skills/

Codex

codex mcp add framejam -- npx -y framejam --stdio

Or add this to ~/.codex/config.toml:

[mcp_servers.framejam] command = "npx" args = ["-y", "framejam", "--stdio"]

Then copy the skill:

mkdir -p ~/.codex/skills && cp -r skills/framejam ~/.codex/skills/

Other MCP clients

Run npx -y framejam and connect to http://localhost:2400/mcp over streamable HTTP.

What the skill does

Every agent gets short instructions when it connects. The skill (skills/framejam/SKILL.md in the package) teaches the full loop: pick a style, build, render, open_review, wait_for_feedback, edit, add_version. The commands above assume you run them from the package folder. You can also paste the file into AGENTS.md.

Make your first video

  1. Open http://localhost:2400/styles and press Use this style on a look you like, or browse them here.
  2. Ask your agent:
    Make a 7-second launch teaser with Frame Jam and open it for review.
  3. Open the review link it shares, add comments and send them. Version 2 arrives in the same tab.

Configuration

SettingFlagEnvironmentDefault
Port--portFRAMEJAM_PORT2400
Bind address--hostFRAMEJAM_HOST127.0.0.1
Data folder--data-dirFRAMEJAM_HOME~/.framejam
Base URL in linksFRAMEJAM_PUBLIC_URLhttp://localhost:<port>

Next: the MCP tools reference.