Skip to main content

MCP Setup

Animatic is a hosted remote MCP endpoint — there's no npm package and nothing to install. Mint an access token, drop it into your editor's MCP config behind an Authorization header, and you're connected.

The endpoint is the same for every client:

https://mcp.presetai.dev/animatic/mcp

Get an access token

Access is gated on a free Preset account. The token is per-account and travels in an Authorization: Bearer header — there's no OAuth flow to complete.

  1. Create a free account at presetai.dev.
  2. In the dashboard, click Connect Animatic to mint an access token (ak_live_…).
  3. Use that token in the Authorization header for whichever client you set up below.

Claude Code

Run this in your terminal — --transport http plus a --header for the token:

Claude Code

claude mcp add --transport http animatic \
  https://mcp.presetai.dev/animatic/mcp \
  --header "Authorization: Bearer ak_live_…"

That writes a remote-server entry into your Claude Code config:

~/.claude.json (generated)

{
  "mcpServers": {
    "animatic": {
      "type": "http",
      "url": "https://mcp.presetai.dev/animatic/mcp",
      "headers": {
        "Authorization": "Bearer ak_live_…"
      }
    }
  }
}

Animatic is available in your next Claude Code session.

Claude Desktop

Add a remote HTTP server to your claude_desktop_config.json:

Claude Desktop Configuration

{
  "mcpServers": {
    "animatic": {
      "type": "http",
      "url": "https://mcp.presetai.dev/animatic/mcp",
      "headers": {
        "Authorization": "Bearer ak_live_…"
      }
    }
  }
}

Config file location:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json

Restart Claude Desktop after saving. (Native HTTP-remote support requires a current Claude Desktop release — update if you only see stdio options.)

Cursor

Add to your Cursor MCP settings (.cursor/mcp.json) using the url + headers form:

Cursor Configuration

{
  "mcpServers": {
    "animatic": {
      "url": "https://mcp.presetai.dev/animatic/mcp",
      "headers": {
        "Authorization": "Bearer ak_live_…"
      }
    }
  }
}

Cursor also supports ${env:VAR} interpolation if you'd rather keep the token in an environment variable instead of the file.

VS Code

Add to your VS Code MCP config (.vscode/mcp.json). Remote servers use type: "http", and an inputs prompt keeps the token out of the committed file:

VS Code Configuration

{
  "servers": {
    "animatic": {
      "type": "http",
      "url": "https://mcp.presetai.dev/animatic/mcp",
      "headers": {
        "Authorization": "Bearer ${input:animaticToken}"
      }
    }
  },
  "inputs": [
    {
      "id": "animaticToken",
      "type": "promptString",
      "description": "Animatic access token (ak_live_…)",
      "password": true
    }
  ]
}

VS Code prompts for the token the first time the server starts. To hardcode it instead, replace ${input:animaticToken} with Bearer ak_live_… and drop the inputs block.

Other clients

Any MCP client that speaks streamable HTTP can connect. Point it at the endpoint and send the token as an Authorization header:

Generic remote MCP server

URL:    https://mcp.presetai.dev/animatic/mcp
Header: Authorization: Bearer ak_live_…

If your client needs the raw origin instead of the branded host, the fallback is https://<project-ref>.supabase.co/functions/v1/animatic-mcp/mcp — but prefer the branded endpoint above. Consult your client's docs for how to add a remote HTTP server with custom headers.

Local install

The hosted surface covers the 60 Tier-1 tools (reference + transform). The remaining 18 tools — durable project state (init_project, get_project, …) and the video renderer (render_project, preview_video) — need a writable filesystem and a render runtime, so they only run locally.

To get all 78 tools, run Animatic as a local stdio MCP server. It's distributed as the private getfndd/animatic repository (access-gated — not a public npm package), and runs straight from a clone:

Local stdio server

{
  "mcpServers": {
    "animatic": {
      "command": "node",
      "args": ["/path/to/animatic/mcp/index.js"]
    }
  }
}

Most users never need this — reach for it only when you want to own a project or render a finished video.

Was this page helpful?