Integrations

Ask an AI assistant for a map animation and it builds one here, looks at the result, fixes it and renders the video, using the Model Context Protocol (MCP). It runs on this computer, and needs Google Chrome installed to render. Animations and videos are kept in the .data folder.

First time

Run this once in the project folder, so assistants can start the app on their own. Whenever npm run dev is already running, they use that instead.

npm run mcp:build

Claude Desktop

Add this to claude_desktop_config.json (in Claude: Settings → Developer → Edit Config), then restart Claude.

{
  "mcpServers": {
    "map-animator": {
      "command": "node",
      "args": [
        "D:\\CSE\\Map Animation\\map-animator\\scripts\\mcp-stdio.mjs"
      ]
    }
  }
}

Claude Code

Run this in a terminal.

claude mcp add map-animator -- node "D:\CSE\Map Animation\map-animator\scripts\mcp-stdio.mjs"

Cursor

Add the same configuration to .cursor/mcp.json in your project, or to the global one in your home folder.

{
  "mcpServers": {
    "map-animator": {
      "command": "node",
      "args": [
        "D:\\CSE\\Map Animation\\map-animator\\scripts\\mcp-stdio.mjs"
      ]
    }
  }
}

Gemini CLI

Add the same configuration to .gemini/settings.json in your home folder. Inside Gemini, /mcp shows what's connected.

{
  "mcpServers": {
    "map-animator": {
      "command": "node",
      "args": [
        "D:\\CSE\\Map Animation\\map-animator\\scripts\\mcp-stdio.mjs"
      ]
    }
  }
}

ChatGPT and claude.ai

These run in the cloud, so they need a public HTTPS address for this computer. A Cloudflare tunnel gives it one. It only works while this computer is on and the app and the tunnel are running, and the address changes every time the tunnel restarts.

Choose a long secret: the tunnel exposes nothing but the MCP endpoint and rendered videos, and only with this secret. Add it to .env.local as MCP_SECRET=… and restart the app.
```
node -e "console.log(crypto.randomBytes(24).toString('hex'))"
```
Install cloudflared and start a tunnel to the app. It prints an address ending in trycloudflare.com.
```
cloudflared tunnel --url http://localhost:3000
```
Add a custom connector with this address. In ChatGPT that's under Settings → Apps & Connectors, with Developer Mode switched on in Advanced settings, which depends on your plan. In claude.ai it's Settings → Connectors → Add custom connector. Choose no authentication: the secret in the address is the password, so keep it private.
```
https://YOUR-TUNNEL.trycloudflare.com/api/mcp/YOUR-SECRET
```

Other MCP apps

Anything that can start a local MCP server can use the command above. The server itself speaks Streamable HTTP at /api/mcp.

The Gemini app itself isn't listed because we couldn't confirm that it accepts custom MCP servers. Gemini CLI does.

Video editors

Exports are ordinary video files, so there's nothing to install: export, then import.

Canva: Upload the MP4, then trim it on the timeline and add text with your Brand Kit.
CapCut: Import the 9:16 export, then add auto captions and sync it to music for TikTok, Reels and Shorts.
Premiere Pro: Import to the Project panel. Layer a transparent WebM over footage for an overlay.
After Effects: Import as footage into a composition, or use a PNG sequence for full control.
DaVinci Resolve: Add to the media pool, cut on the Edit page and grade on the Color page.