npm package: @lottiefiles/creator-mcp
Description: MCP server for LottieFiles Creator
Latest version: 0.1.2

# @lottiefiles/creator-mcp

[![npm version](https://img.shields.io/npm/v/@lottiefiles/creator-mcp.svg?style=flat-square)](https://www.npmjs.com/package/@lottiefiles/creator-mcp)

Let AI control [LottieFiles Creator](https://creator.lottiefiles.com?utm_source=npm) —
build and edit Lottie animations through natural language.

<!-- TODO: Add demo GIF showing AI assistant controlling Creator -->

[Getting Started](#getting-started) | [Example Prompts](#example-prompts)

---

## What It Does

This MCP server connects AI assistants like Claude, Cursor, and Windsurf to the
[LottieFiles Creator](https://creator.lottiefiles.com?utm_source=npm) animation editor.
Your AI gets full access to the Creator API — it can read, modify, and create animations
on your behalf.

- **Read & modify animation properties** — colors, transforms, opacity, timing
- **Create shapes, layers, and keyframes** programmatically
- **Inspect animation structure** — list layers, examine keyframes, export data
- **Full Creator API access** — anything Creator can do, your AI can do

## Getting Started

Follow the [Creator MCP tutorial](https://lottiefiles.notion.site/lottie-creator-mcp?utm_source=npm) to get started.

### Prerequisites

- **Node.js** 18 or later
- **LottieFiles Creator** open in your browser at
  [creator.lottiefiles.com](https://creator.lottiefiles.com?utm_source=npm)
- An MCP-compatible AI assistant

### Install

[![Install in VS Code](https://img.shields.io/badge/Install_in-VS_Code-0098FF?style=flat-square&logo=visualstudiocode&logoColor=ffffff)](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)
[![Install in VS Code Insiders](https://img.shields.io/badge/Install_in-VS_Code_Insiders-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=ffffff)](https://insiders.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&quality=insiders)
[![Install in Cursor](https://img.shields.io/badge/Install_in-Cursor-000000?style=flat-square&logo=cursor&logoColor=ffffff)](https://cursor.com/install-mcp?name=lottiefiles-creator&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBsb3R0aWVmaWxlcy9jcmVhdG9yLW1jcCJdfQ==)

Add the following config to your MCP client:

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

### MCP Client configuration

<details>
<summary><strong>Amp</strong></summary>

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

</details>

<details>
<summary><strong>Antigravity</strong></summary>

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

</details>

<details>
<summary><strong>Claude Code</strong></summary>

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

</details>

<details>
<summary><strong>Claude Desktop</strong></summary>

Use the config above in your `claude_desktop_config.json`.

</details>

<details>
<summary><strong>Cline</strong></summary>

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

</details>

<details>
<summary><strong>Codex</strong></summary>

Follow the [configure MCP guide](https://github.com/openai/codex/blob/main/docs/config.md)
using:

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

Or add via CLI:

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

</details>

<details>
<summary><strong>Copilot CLI</strong></summary>

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

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

</details>

<details>
<summary><strong>Copilot / VS Code</strong></summary>

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

Or via CLI:

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

</details>

<details>
<summary><strong>Copilot / GitHub CLI</strong></summary>

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

</details>

<details>
<summary><strong>Cursor</strong></summary>

Click the install button above, or use the config above.

</details>

<details>
<summary><strong>Factory CLI</strong></summary>

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

</details>

<details>
<summary><strong>Gemini CLI</strong></summary>

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

</details>

<details>
<summary><strong>Gemini Code Assist</strong></summary>

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

</details>

<details>
<summary><strong>JetBrains AI Assistant & Junie</strong></summary>

Follow JetBrains MCP setup docs and use the config above.

</details>

<details>
<summary><strong>Kiro</strong></summary>

Follow Kiro MCP setup docs and use the config above.

</details>

<details>
<summary><strong>Qoder</strong></summary>

Follow Qoder MCP setup docs and use the config above.

</details>

<details>
<summary><strong>Visual Studio</strong></summary>

Add a local MCP server with:

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

</details>

<details>
<summary><strong>Warp</strong></summary>

Follow Warp MCP setup docs and use the config above.

</details>

<details>
<summary><strong>Windsurf</strong></summary>

Follow Windsurf MCP setup docs and use the config above.

</details>

<details>
<summary><strong>VS Code</strong></summary>

If using `.vscode/mcp.json`, use:

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

</details>

### Your first prompt

1. Open [LottieFiles Creator](https://creator.lottiefiles.com?utm_source=npm).
2. Enable MCP in Creator.
3. Keep that tab open while using your AI assistant.

Ask your assistant:

```text
Run a script that logs 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         |

<!-- TODO: Add screenshot showing example prompt and Creator result side-by-side -->