Lottie Creator MCP

Lottie Creator MCP

Connect an AI assistant to Lottie Creator through the local MCP bridge to create, edit, and animate using prompts.

[WebMCP](/en/creator/13_ai-tools/lottie-creator-webmcp) lets a compatible browser assistant use Creator directly, without this local bridge. It is on by default in supported browsers. Follow this guide if you want to connect through the local Creator MCP server.

The Lottie Creator MCP brings your AI assistant directly into your animation workflow — giving it tools to inspect, build, and edit Lottie animations in LottieFiles Creator through natural language. You can check out the installation further down.

MCP servers are part of a standardized interface for AI agents to interact with data sources using the Model Context Protocol. The Lottie Creator MCP connects AI assistants like Claude, Cursor, and Windsurf to Creator's editing tools through a local bridge.

With the MCP enabled, you can:

✦ Create animations from scratch

Describe what you want — a loading spinner, a progress bar, a character animation — and your AI will build it directly in Creator, layer by layer.

✦ Edit and modify existing animations

Change colors, adjust timing, swap easing curves, rename layers, or refactor an entire scene. Your AI reads the current state of your file and edits it in real time.

✦ Batch generate animation variants

Automatically produce multiple versions of an animation at once — dark and light themes, different sizes, brand color variations.

✦ Analyze animations for accessibility and brand

Ask your AI to inspect animations for contrast issues, motion speed, color consistency, or alignment with your brand guidelines — and fix what it finds.

✦ Integrate into your project workflow

Generate animation assets on the fly while working on a broader project.

To use the MCP, install it in your AI client and enable it in LottieFiles Creator. The sections below walk through each step.

Prerequisites

Before installing, make sure you have the following set up:

✅ 📦 Node.js 18+: Required to run the MCP package via npx. Download Node.js →

✅ 🎬 LottieFiles Creator: Open creator.lottiefiles.com in your browser and keep this tab open.

✅ 🤖 An MCP-compatible AI: Claude, Cursor, Windsurf, VS Code Copilot, or any other MCP-supporting assistant.

First, go to the Creator MCP README file where you can access the MCP strings and commands.

Installing the MCP

For all of your AI tools, you can use the following config:

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

This documentation covers the installation steps for some of our supported MCP clients. For a list of install guides for supported MCP clients, see the list below:

Supported MCP Clients

Follow the instructions for your specific client to install and connect the Lottie Creator MCP. Some clients also support skills, which add motion design knowledge so your AI can produce more intentional, polished animations. 🖇️ Here is the LottieFiles motion design skill.

Follow the steps for your MCP client:

---

**1. Open Claude Desktop Settings**

Navigate to **Settings → Developer** and click **"Edit Config"**. This opens a JSON config file on your computer which you can edit in VS Code, Cursor, or any text editor.

<Image src="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp" alt="Claude Desktop Settings → Developer, Edit Config" caption="Claude Desktop Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp 640w, https://assets.docs.lottiefiles.com/static/cbcf2779e6-1024.webp 1024w" width="1490" height="1070" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAIAAABxZ0isAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAXklEQVR4nGWNSwqAMAxEc/8DiXgXF4rgp41pTNNWuxGpFEGYxcCbDwgjO5tPVaEUJZ9aBLtdinNkhFGFhPEBhOuVfA0G79DML6gL49B3bSOMMRxQin+B3Sb1+L0t4AYM8YjEckZSmwAAAABJRU5ErkJggg==" />

**2. Add the MCP config**

Paste the following into the config file inside the `mcpServers` object. You may need to add or remove brackets/commas to keep the JSON valid.

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

Here's what the config file might look like after pasting the config above:

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  },
  "preferences": {
    "quickEntryShortcut": "off",
    "coworkScheduledTasksEnabled": false,
    "ccdScheduledTasksEnabled": false,
    "sidebarMode": "chat",
    "coworkWebSearchEnabled": true,
    "floatingAtollActive": true
  }
}
```

**3. Verify it's connected**

Click the **"+"** button in a chat, navigate to **Connectors**, and confirm the `lottiefiles-creator` toggle is on.

<Image src="https://assets.docs.lottiefiles.com/static/661d017685-640.webp" alt="Claude Desktop Connectors with lottiefiles-creator enabled" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/661d017685-640.webp 640w, https://assets.docs.lottiefiles.com/static/661d017685-1024.webp 1024w" width="1470" height="840" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAXUlEQVR4nE1NQQ7AIAjz/1/14CZGBJEu6JaMpGkobUmqioC7IybYfWGtgCEREUQEYzCuu6J1xZxnNzOkUgrMJoJzzhCdYO5QldNQiXZdJJh5i+eFvYYW4hH+h8/wAH2hnMwEoNxAAAAAAElFTkSuQmCC" />

**1. Run the following command in your terminal**

That's it. Claude Code will install and register the MCP automatically.

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

#### **Using the Lottie Creator MCP for Cursor**

1. Press `Cmd + Shift + P` (Mac) or `Ctrl + Shift + P` (Windows/Linux) → search **"Cursor Settings"**
2. In the sidebar go to **Tools & MCPs**
3. Click **"Add custom MCP"**

<Image src="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp" alt="Cursor Settings → Tools & MCP, Add custom MCP" caption="Cursor Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp 640w, https://assets.docs.lottiefiles.com/static/1d779c5bf1-1024.webp 1024w" width="1724" height="1122" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYElEQVR4nD2OWQpFMQhDXUVnh1JKu/8N5qKPvg8hJPEoqSqYGbVWlFKQUkLO+T8kIhGOMXDvhZnFgpqGR27MOdF7j8JaC04VFbDyr/AoHuy9cc4JUmsN5BgXft9L75enP/5xNWNuTqnuAAAAAElFTkSuQmCC" />

4. Paste in:

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

Save and **fully restart Cursor** (quit and reopen - not just reload)

After restart, go to **Settings → Tools & MCP** and you should see a green dot next to `lottiefiles-creator` confirming it's connected.

<Image src="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp" alt="Cursor Settings → Tools & MCP, lottiefiles-creator connected" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp 640w, https://assets.docs.lottiefiles.com/static/d5e4c14c2c-1024.webp 1024w" width="1724" height="1118" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYUlEQVR4nD2NSw7AIAhEOYVfBHSlsfe/3jTY2MUEeDAMqSpEBKUUpJQQQkCM8Rf5MucMZsacE713tNagZoeRmR3ow1oLY4xzICoQU5BHOKhcsZ/9fWCGG5sKyJ033+vtr14GGTV0KRWZBgAAAABJRU5ErkJggg==" />

**Option A: Deep link install**

1. Click the [LottieFiles MCP server deep link.](https://vscode.dev/redirect/mcp/install?name=%40lottiefiles%2Fcreator-mcp\&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40lottiefiles%2Fcreator-mcp%22%5D%7D) This will open the MCP configuration in VS Code.
2. Press the **Install** button.

<Image src="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp" alt="VS Code Install MCP Server prompt for Lottie Creator" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp 640w, https://assets.docs.lottiefiles.com/static/215df2a202-1024.webp 1024w" width="1720" height="736" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADCAIAAAAhqtkfAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAANUlEQVR4nGNQ19TW0NFX0tCSlVcQk5AUFBaFIAYJKRlxSSlhUXG4EFRCSkZOUlpWXFIKTQIAGEcGwVfSfA0AAAAASUVORK5CYII=" />

**Option B: CLI or config file**

Or via CLI:

Terminal

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

Or add to your `.vscode/mcp.json`:

JSON — .vscode/mcp.json

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

ℹ️ You'll need [GitHub Copilot](https://github.com/features/copilot) enabled on your account to use MCP tools in VS Code.

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` Follow Antigravity's MCP setup docs and use the config above. Follow Cline's MCP setup docs and use the config above. Follow the [configure MCP guide](https://github.com/openai/codex/blob/main/docs/config.md) 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 ``` ``` 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.

Connecting to Lottie Creator

1. Open Lottie Creator

Navigate to creator.lottiefiles.com in your browser and keep this tab open throughout your session. The MCP communicates with Creator through this browser tab.

1. Enable local MCP in Creator

In Creator, go to Settings → MCP Settings → Enable local MCP.

1. Confirm the connection

You should see a notification in Creator: Local MCP bridge connected

If you see this, you're all set and ready to start prompting! Keep in mind, the animation quality heavily depends on which model you are using, so be sure to use the best model available to you.

About Skills

Skills provide guidance for how an agent should approach animation tasks — using a combination of MCP tool calls and deep motion design knowledge baked in as reusable instructions.

While the Lottie Creator MCP exposes individual tools (create a layer, set a keyframe, adjust a fill), Skills help your AI understand how to use them well. Things like knowing which easing curve fits a bounce vs. a fade, how to sequence a multi-element entrance, or how to structure timing so an animation feels intentional rather than mechanical.

Skills don't replace the MCP connection or add new tools. They reduce guesswork by packaging motion design expertise into instructions your AI draws on automatically whenever it works on animations.

Install the motion design skill

Run this command once in your terminal. It works with 40+ agents including Claude Code, Cursor, Codex, and GitHub Copilot.

Terminal

npx skills add LottieFiles/motion-design-skill

✨ Highly recommended. The difference between an AI that produces stiff, mechanical animations and one that produces polished, intentional motion is almost entirely down to whether it has this context. Install it once and it applies to every animation session.

View the full skill on GitHub → LottieFiles/motion-design-skill

Capabilities

Lottie Creator MCP, Motion Copilot, and Lottie Creator WebMCP offer the same Creator editing capabilities. Their setup and assistant interfaces differ.

Area	What you can ask for
Scenes and layers	Inspect and create scenes; change size, frame rate, duration, or preview background; rename, duplicate, group, align, reorder, hide, or lock layers.
Shapes and text	Create and edit rectangles, ellipses, polygons, stars, paths, and text; change fonts and text styles; split text into parts for animation.
Styling and effects	Adjust solid and gradient fills or strokes; use blend modes, shadows, blur, color effects, masks, and mattes.
Animation and timing	Add, inspect, change, copy, or remove keyframes; adjust easing; animate transforms, opacity, and color; use motion paths, staggered entrances, and retiming.
Assets and scene inspection	Import SVGs, Lottie animations, and images; convert PNG or JPG image layers to vectors; inspect the scene and move the playhead to a specific frame.
Themes and reusable motion	Create and link motion-token slots, update their values, and create or switch themes. Find and apply saved styles and motion presets from your workspace's Motion System.
Segments and interactivity	Create named animation segments, state machines, states, transitions, and inputs; connect click, hover, and state events to actions.

Feature access follows your Creator workspace and plan. When the animation is ready, use Creator's export controls to save the result.

Best practices

• Install the motion design skill for better quality: The MCP gives your AI the tools. The motion design skill gives it the judgment to use them well — easing curves, timing principles, choreography. One command, significantly better output. Motion design skill can be found here.
• Start with your own SVGs, then animate: AI can be unpredictable when generating illustration shapes from scratch. For the best results, import your existing SVG assets into Creator first, then ask your AI to animate them. This keeps your visual style consistent and lets the AI focus on what it does best — motion, timing, and sequencing.
  • Test out these remix links
    • Medal: https://lottie.link/metal
    • Weather: https://lottie.link/weather
    • Graph: https://lottie.link/graph
    • Mail box: https://lottie.link/mailbox1
• Always use the best model available to you: Animation quality scales directly with the model. If you have access to Claude Sonnet or Opus, use it over a smaller model — the difference in how it handles timing, sequencing, and spatial reasoning is noticeable.
• Name your layers before you prompt: The AI reads your layer names to understand your animation's structure. Well-named layers like left_arm, right_leg, bg_circle, and text_headline help it target the right elements, avoid mistakes, and stay organized across complex scenes. Generic names like Shape 1 or Group 4 make it harder for the AI to build on your work accurately.
• Break complex animations into steps: Instead of "build me a full onboarding animation," go scene by scene. Create the scene → add shapes → add keyframes → refine timing. Smaller steps give you more control and make errors easier to catch and correct.
• Be specific about timing and feel: "A smooth fade" is vague. "A 400ms fade-in with ease-out" gives your AI something to work with. The more you describe the feel — snappy, bouncy, slow and cinematic — the closer the first result will be to what you're imagining.