Lottie Creator MCP

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.

 

**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"]
 }
 }
}

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

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

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

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

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

 
 
 **Option A: Deep link install**

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

{
 "servers": {
 "lottiefiles-creator": {
 "command": "npx",
 "args": ["-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"]

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"]}'

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:

 
 
 Follow Warp MCP setup docs and use the config above.
 
 
 Follow Windsurf MCP setup docs and use the config above.

## Connecting to Lottie Creator

- **Open Lottie Creator** 

 Navigate to [creator.lottiefiles.com](https://creator.lottiefiles.com/) in your browser and keep this tab open throughout your session. The MCP communicates with Creator through this browser tab.

 

- **Enable MCP in Creator** 

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

 
 

- **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

 ✨ **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](https://github.com/LottieFiles/motion-design-skill)

## Capabilities

The MCP gives your AI full access to the Creator API. Here's everything it can do:

 **🎬 Scene Management**

 

- Create scenes — set name, size, framerate, duration 

- Switch between scenes 

- Set background color (preview only, not exported) 

- Read scene properties — layers, size, framerate 

- Export scenes to Lottie JSON 

- Import Lottie JSON, dotLottie, SVG, or images 

 **🗂 Layer Management**

 

- Set visibility, lock state, and focus 

- Control timing — start frame, end frame, offset 

- Set blend modes (16 modes including multiply, screen, overlay) 

- Apply and animate masks and mattes 

- Align and flip layers 

- Animate transforms — position, rotation, scale, skew 

 **🔷 Shape Creation**

 

- Rectangle — position, size, corner roundness 

- Ellipse — position, size 

- Polygon — points, radius, roundness 

- Star — inner/outer radius, points 

- Path — custom bezier with full tangent control 

- Group — group existing shapes together 

 **🎨 Fills & Strokes**

 

- Solid color fill — static or animated RGB 

- Linear gradient fill — custom start/end points 

- Radial gradient fill — highlight angle and length 

- Solid and gradient strokes — with animatable width 

- Trim paths — animate drawing (start %, end %, offset) 

 **⏱️ Animation & Keyframes**

 

- Add keyframes at specific frames with values 

- Set static values (no animation) 

- Read, inspect, and remove keyframes 

- Set easing — Linear or Cubic Bezier (x1, y1, x2, y2) 

- Animate: position, rotation, scale, opacity, color, path, and more 

 **🖼 Asset & Playback**

 

- List, clone, and remove assets (scenes and images) 

- Read image properties — width, height, base64 URI 

- Play, pause, and jump to specific frames 

- Read current frame and playback state 

- Read selected nodes and keyframes 

 Coming soon: State Machines and Motion Tokens

## 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](https://lottie.link/motion-design-skill). 

- **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](https://lottie.link/metal) 

- Weather: [https://lottie.link/weather](https://lottie.link/weather) 

- Graph: [https://lottie.link/graph](https://lottie.link/graph) 

- Mail box: [https://lottie.link/mailbox1](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.

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