@lottiefiles/creator-mcp

Let AI control LottieFiles Creator — build and edit Lottie animations through natural language.

Getting Started | Example Prompts

What It Does

This MCP server connects AI assistants like Claude, Cursor, and Windsurf to the LottieFiles Creator animation editor. Your AI gets the same native animation tools used by Motion Copilot, so it can read, modify, and create animations on your behalf without executing arbitrary scripts.

• Read & modify animation properties — colors, transforms, opacity, timing
• Create shapes, layers, and keyframes through typed native tools
• Inspect animation structure — list layers, examine keyframes, export data
• Use Creator-native workflows — scenes, motion systems, themes, segments, and more

Getting Started

Follow the Creator MCP tutorial for comprehensive installation and user guides.

Prerequisites

• Node.js 18 or later
• LottieFiles Creator open in your browser at creator.lottiefiles.com
• An MCP-compatible AI assistant

Install

Add the following config to your MCP client:

{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}

MCP Client configuration

amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest

Follow Antigravity's MCP setup docs and use the config above.

claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest

Use the config above in your claude_desktop_config.json.

Follow Cline's MCP setup docs and use the config above.

Follow the configure MCP guide using:

[mcp_servers.lottiefiles-creator]
command = "npx"
args = ["-y", "@lottiefiles/creator-mcp@latest"]

Or add via CLI:

codex mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest

1. Start copilot
2. Run /mcp add
3. Configure:

• Server name: lottiefiles-creator
• Server type: Local
• Command: npx -y @lottiefiles/creator-mcp@latest

Follow VS Code MCP setup docs and use the config above.

Or via CLI:

code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'

gh copilot mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest

Use the config above.

droid mcp add lottiefiles-creator "npx -y @lottiefiles/creator-mcp@latest"

gemini mcp add lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest
gemini mcp add -s user lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest

Follow Gemini Code Assist MCP setup docs and use the config above.

Follow JetBrains MCP setup docs and use the config above.

Follow Kiro MCP setup docs and use the config above.

Follow Qoder MCP setup docs and use the config above.

Add a local MCP server with:

• Name: lottiefiles-creator
• Command: npx
• Arguments: -y @lottiefiles/creator-mcp@latest

Follow Warp MCP setup docs and use the config above.

Follow Windsurf MCP setup docs and use the config above.

If using .vscode/mcp.json, use:

{
  "servers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}

Your first prompt

1. Open LottieFiles Creator.
2. Enable MCP in Creator.
3. Keep that tab open while using your AI assistant.

Ask your assistant:

What is the active scene size in LottieFiles Creator?

If setup is correct, you should see a tool response with scene dimensions.

Example Prompts

Once connected, try asking your AI assistant:

| Prompt | What it does | | ---------------------------------------------- | ------------------------------------------------ | | "What layers are in this animation?" | Lists all layers with their types and properties | | "Change the background color to blue" | Modifies the background layer color | | "List all keyframes on the first layer" | Inspects keyframe data for a specific layer | | "Make the animation loop smoothly" | Adjusts timing and easing for seamless looping | | "Center all selected layers in the scene" | Aligns selected layers to scene center | | "Change all fills to a neon cyan palette" | Batch-updates colors across shapes | | "Create a pulsing loading spinner" | Builds a looped shape animation | | "Offset each layer by 3 frames" | Staggers layer timing for motion rhythm | | "Remove hidden layers from this scene" | Cleans up invisible and unused layers | | "Round all rectangle corners to 16" | Applies consistent corner radius styling | | "List every text layer and its content" | Extracts text content for copy review | | "Duplicate this scene and make a dark variant" | Creates an alternate themed scene | | "Create a 2-second intro with logo fade-in" | Generates timeline-based intro animation |