@snapcn/mcp

snapcn MCP

An MCP server that lets a coding agent build a Remotion video by picking components and filling props — never by inventing animation code.

snapcn is a shadcn-style registry of hand-tuned Remotion components. This server puts that registry inside your agent: it searches it in plain English, hands back the exact prop table for a component, and turns a one-line brief into a beat-by-beat plan with a ready TransitionSeries skeleton.

The server is part of snapcn Pro. Every tool call needs your Pro key: copy it from https://snapcn.dev/account and put it where the snippets below say YOUR_KEY. Setup for every client, with copy-paste prompts: https://snapcn.dev/docs/mcp

Install

Claude Code

claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

Cursor

~/.cursor/mcp.json (or .cursor/mcp.json in the project):

{
  "mcpServers": {
    "snapcn": {
      "command": "npx",
      "args": ["-y", "@snapcn/mcp@latest", "SNAPCN_API_KEY=YOUR_KEY"]
    }
  }
}

Windsurf (Devin Desktop)

Windsurf is Devin Desktop now. Its default agent, Devin Local, reads the Devin CLI's config:

devin mcp add -s user snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

The legacy Cascade agent reads ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "snapcn": {
      "command": "npx",
      "args": ["-y", "@snapcn/mcp@latest", "SNAPCN_API_KEY=YOUR_KEY"]
    }
  }
}

VS Code (Copilot)

code --add-mcp '{"name":"snapcn","command":"npx","args":["-y","@snapcn/mcp@latest", "SNAPCN_API_KEY=YOUR_KEY"]}'

Or in .vscode/mcp.json:

{
  "servers": {
    "snapcn": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@snapcn/mcp@latest", "SNAPCN_API_KEY=YOUR_KEY"]
    }
  }
}

Codex

~/.codex/config.toml:

[mcp_servers.snapcn]
command = "npx"
args = ["-y", "@snapcn/mcp@latest", "SNAPCN_API_KEY=YOUR_KEY"]

Everything else that speaks stdio MCP works the same way: run npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY.

Tools

Tool	What it does
snapcn_search_components	Describe a beat in plain English ("swap one pricing number for another") and get ranked components with their natural length, vibe, and use/avoid notes. Filter by category, vibe, or max_frames. If nothing scores, it says so and routes you to the closest typographic component — it never leaves you to improvise.
snapcn_component	Everything needed to use one component: its npx shadcn@latest add @snapcn/<name> command, the tunable props (the customizer's controls) with defaults and ranges, an example where one is written, its frame budget, and when not to use it. List and object props such as terminal-simulator's lines are not in the table — read the source for those. Accepts legacy names and tells you the replacement.
snapcn_plan_video	One-line brief in, whole plan out: archetype, duration, one registry component per beat with frame budgets, a single install command for all of them, and a TransitionSeries skeleton you can paste. Blocks on the user's real copy first, and hands back the exact re-call. Takes mode, vibe, accent_color, duration_seconds.
snapcn_preview	Renders frames of the user's own composition with the Remotion CLI in their project and returns them as images, so the agent can see a black frame or clipped text before shipping it.
snapcn_analyze_recording	Measures a screen recording — chrome to crop, the source frame each screen beat opens on, and where to point the camera — and returns it in snapcn_plan_video's content.recording shape, with one frame per beat. Uses the ffmpeg inside @remotion/cli.
snapcn_rules	The snapcn motion, design, anatomy and anti-slop rules. Read these before hand-writing any scene chrome — backdrops, cards, lower-thirds, easing.

Try it

"Plan a 20-second launch video for Acme, an AI CLI that fixes flaky tests. Dark mode, accent #F2D200."

"What snapcn component shows a terminal running an install command?"

One gotcha worth knowing up front

snapcn components default to the shadcn light palette. On a dark frame you must pass mode="dark" — a bare render otherwise comes out black on black. Every tool payload repeats this, and snapcn_plan_video sets it for you when you pass mode: "dark".

Pro components

Pro components show up in search and snapcn_component with their props, marked Pro. Installing one needs your project to send the key: declare the @snapcn registry with an Authorization header in components.json (the three lines are on https://snapcn.dev/account). The install lines this server prints are @snapcn/<name> because that is the only form the shadcn CLI sends registry headers for.

The server itself needs the same key — without one snapcn.dev accepts, every tool call answers with where to get it. Pass it in any of these forms:

npx -y @snapcn/mcp@latest API_KEY="sk_..."
npx -y @snapcn/mcp@latest --API_KEY=sk_...
npx -y @snapcn/mcp@latest /API_KEY:sk_...
npx -y @snapcn/mcp@latest -API_KEY sk_...

or set SNAPCN_API_KEY (or API_KEY) in the server's env.

Keys are managed on https://snapcn.dev/account — one per person or machine. The server checks its key on the first call and again every 15 minutes, so a key you delete there stops a running session within 15 minutes; a brief snapcn.dev outage does not lock out a key that was already accepted.

Network

The key is checked with snapcn.dev on the first tool call of each session, so that call needs a connection. After that the package's snapshot of the registry index and every prop schema in data/ keeps it answering: the server prefers the live registry at https://snapcn.dev/r/, falls back to a disk cache, then to the bundled snapshot.

Development

npm install
npm run build          # tsc → dist/, chmod +x
npm run check          # build, then run the self-test (node dist/index.js --check)
npm test               # build, then the test files in src/__tests__ (install, menus, recording analysis)
npm run manifest       # regenerate data/registry.json + data/props.json
npm run skills         # regenerate the generated block in src/skills.ts

manifest and skills read the sibling snapcn checkout; override with an argument or SNAPCN_REPO=/path/to/snapcn. manifest runs automatically on npm publish.

After adding a component to snapcn

Deploy the site, then npm run snapshot && npm run check. Nothing else — a component's category comes from its lib/gallery-data.ts card and its prose from the registry description, both of which shipping the component already required.

npm run check fails if the snapshot is behind what snapcn.dev/r serves. snapshot names anything sitting in the checkout that has not deployed yet (the server won't serve those — shadcn add would 404) and anything shipping without a skills/snapcn/references/components/<name>.md. That file is optional: it upgrades a component from "here is what it is" to "here is when to reach for it, and when not to".

Nothing but JSON-RPC may reach stdout — all logging goes to stderr, and console.log is aliased to console.error in src/index.ts.

License

MIT © Sri Nath