Lottie Creator MCP

oficial

O MCP Lottie Creator integra seu assistente de IA diretamente no seu fluxo de trabalho de animação — dando a ele acesso completo ao LottieFiles Creator para que possa criar e editar animações Lottie em seu nome por meio de linguagem natural.

Ver em lottie.link

O que você pode fazer com Lottie Creator MCP?

  • Create animations from scratch — describe an animation like a loading spinner or character motion and the AI builds it in Lottie Creator layer by layer.
  • Edit existing animations — ask the AI to change colors, adjust timing, swap easing curves, rename layers, or refactor a scene using the current file state.
  • Batch generate animation variants — produce multiple versions at once, such as dark/light themes, different sizes, or brand color variations.
  • Inspect animations for accessibility and brand — request analysis for contrast issues, motion speed, color consistency, or brand alignment, then apply fixes.
  • Manage scenes and layers — create and switch scenes, set visibility and blend modes, apply masks and mattes, and animate transforms like position, rotation, and scale.
  • Animate with keyframes and easing — add, read, or remove keyframes on properties such as opacity, color, and path, and set linear or cubic-bezier easing.

Documentação

Lottie Creator MCP

undefined

Lottie Creator MCP

O Lottie Creator MCP traz seu assistente de IA diretamente para o seu fluxo de trabalho de animação — dando a ele acesso total ao LottieFiles Creator para que possa criar e editar animações Lottie em seu nome através de linguagem natural. Você pode conferir a instalação mais abaixo.

Servidores MCP fazem parte de uma interface padronizada para agentes de IA interagirem com fontes de dados usando o Model Context Protocol. O Lottie Creator MCP conecta assistentes de IA como Claude, Cursor e Windsurf à API do Creator através de uma ponte local — o que significa que sua IA obtém o mesmo acesso total ao Creator que você.

Com o MCP ativado, você pode:

✦ Criar animações do zero

Descreva o que você quer — um spinner de carregamento, uma barra de progresso, uma animação de personagem — e sua IA irá construí-lo diretamente no Creator, camada por camada.

✦ Editar e modificar animações existentes

Mude cores, ajuste o timing, troque curvas de interpolação, renomeie camadas ou refatore uma cena inteira. Sua IA lê o estado atual do seu arquivo e o edita em tempo real.

✦ Gerar variantes de animação em lote

Produza automaticamente várias versões de uma animação de uma só vez — temas claro e escuro, tamanhos diferentes, variações de cores da marca.

✦ Analisar animações para acessibilidade e marca

Peça à sua IA para inspecionar animações em busca de problemas de contraste, velocidade de movimento, consistência de cores ou alinhamento com as diretrizes da sua marca — e corrigir o que encontrar.

✦ Integrar ao fluxo de trabalho do seu projeto

Gere recursos de animação sob demanda enquanto trabalha em um projeto mais amplo.

Para usar o MCP, instale-o no seu cliente de IA e ative-o no LottieFiles Creator. As seções abaixo orientam sobre cada etapa.

Pré-requisitos

Antes de instalar, certifique-se de ter o seguinte configurado:

✅ 📦 Node.js 18+: Necessário para executar o pacote MCP via npx. Baixar Node.js →

✅ 🎬 LottieFiles Creator: Abra creator.lottiefiles.com no seu navegador e mantenha esta aba aberta.

✅ 🤖 Uma IA compatível com MCP: Claude, Cursor, Windsurf, VS Code Copilot ou qualquer outro assistente com suporte a MCP.

Primeiro, vá para o arquivo README do Creator MCP onde você pode acessar as strings e comandos MCP.

Instalando o MCP

Para todas as suas ferramentas de IA, você pode usar a seguinte configuração:

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

Esta documentação cobre as etapas de instalação para alguns dos nossos clientes MCP suportados. Para uma lista de guias de instalação para clientes MCP suportados, veja a lista abaixo:

Clientes MCP Suportados

Siga as instruções para o seu cliente específico para instalar e conectar o Lottie Creator MCP. Alguns clientes também suportam skills, que adicionam conhecimento de motion design para que sua IA possa produzir animações mais intencionais e refinadas. 🖇️ Aqui está a skill de motion design da LottieFiles.

Siga as etapas para o seu cliente MCP:

**1. Abra as Configurações do Claude Desktop** 
Navegue até **Configurações → Desenvolvedor** e clique em **"Editar Config"**. Isso abre um arquivo de configuração JSON no seu computador que você pode editar no VS Code, Cursor ou qualquer editor de texto.

<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. Adicione a configuração MCP**

Cole o seguinte no arquivo de configuração dentro do objeto `mcpServers`. Pode ser necessário adicionar ou remover colchetes/vírgulas para manter o JSON válido.

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

Aqui está como o arquivo de configuração pode ficar após colar a configuração acima:

```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. Verifique se está conectado**

Clique no botão **"+"** em um chat, navegue até **Conectores** e confirme se o toggle `lottiefiles-creator` está ativado.

<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. Execute o seguinte comando no seu terminal** 
É isso. O Claude Code instalará e registrará o MCP automaticamente.

```
claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```
#### **Usando o Lottie Creator MCP para Cursor** 
1. Pressione `Cmd + Shift + P` (Mac) ou `Ctrl + Shift + P` (Windows/Linux) → pesquise **"Cursor Settings"**
2. Na barra lateral, vá para **Tools & MCPs**
3. Clique em **"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. Cole:

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

Salve e **reinicie completamente o Cursor** (saia e reabra - não apenas recarregue)

Após reiniciar, vá para **Configurações → Tools & MCP** e você deverá ver um ponto verde ao lado de `lottiefiles-creator` confirmando que está conectado.

<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==" />
**Opção A: Instalação por deep link** 
1. Clique no [deep link do servidor MCP LottieFiles.](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) Isso abrirá a configuração MCP no VS Code.
2. Pressione o botão **Instalar**.

<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=" />

**Opção B: CLI ou arquivo de configuração**

Ou via CLI:

Terminal

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

Ou adicione ao seu `.vscode/mcp.json`:

JSON — .vscode/mcp.json

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

ℹ️ Você precisará do [GitHub Copilot](https://github.com/features/copilot) habilitado na sua conta para usar ferramentas MCP no VS Code.
``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` Siga a documentação de configuração MCP do Antigravity e use a configuração acima. Siga a documentação de configuração MCP do Cline e use a configuração acima. Siga o [guia de configuração MCP](https://github.com/openai/codex/blob/main/docs/config.md) usando: 
```
[mcp_servers.lottiefiles-creator]
command = "npx"
args = ["-y", "@lottiefiles/creator-mcp@latest"]
```

Ou adicione via CLI:

```
codex mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```
1. Inicie `copilot` 2. Execute `/mcp add` 3. Configure: - Nome do servidor: `lottiefiles-creator` - Tipo de servidor: `Local` - Comando: `npx -y @lottiefiles/creator-mcp@latest` Siga a documentação de configuração MCP do VS Code e use a configuração acima. Ou 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 ``` Siga a documentação de configuração MCP do Gemini Code Assist e use a configuração acima. Siga a documentação de configuração MCP do JetBrains e use a configuração acima. Siga a documentação de configuração MCP do Kiro e use a configuração acima. Siga a documentação de configuração MCP do Qoder e use a configuração acima. Adicione um servidor MCP local com: 
- Nome: `lottiefiles-creator`
- Comando: `npx`
- Argumentos: `y @lottiefiles/creator-mcp@latest`
Siga a documentação de configuração MCP do Warp e use a configuração acima. Siga a documentação de configuração MCP do Windsurf e use a configuração acima.

Conectando ao Lottie Creator

  1. Abra o Lottie Creator

Navegue para creator.lottiefiles.com no seu navegador e mantenha esta aba aberta durante toda a sua sessão. O MCP se comunica com o Creator através desta aba do navegador.

  1. Ative o MCP no Creator

No Creator, vá para Configurações → MCP Settings → Enable MCP.

Lottie Creator Settings → MCP Settings with Enable MCP
  1. Confirme a conexão

Você deverá ver uma notificação no Creator: Local MCP bridge connected

Lottie Creator notification: Local MCP bridge connected

Se você vir isso, está tudo pronto para começar a usar! Tenha em mente que a qualidade da animação depende muito de qual modelo você está usando, então certifique-se de usar o melhor modelo disponível para você.

Lottie Creator top bar with a blue MCP connection indicator next to the file name

Sobre Skills

Skills fornecem orientação sobre como um agente deve abordar tarefas de animação — usando uma combinação de chamadas de ferramentas MCP e conhecimento profundo de motion design incorporado como instruções reutilizáveis.

Enquanto o Lottie Creator MCP expõe ferramentas individuais (criar uma camada, definir um keyframe, ajustar um preenchimento), as Skills ajudam sua IA a entender como usá-las bem. Coisas como saber qual curva de interpolação se encaixa em um quique vs. um fade, como sequenciar uma entrada de múltiplos elementos ou como estruturar o timing para que uma animação pareça intencional em vez de mecânica.

Skills não substituem a conexão MCP nem adicionam novas ferramentas. Elas reduzem as suposições ao empacotar expertise de motion design em instruções que sua IA utiliza automaticamente sempre que trabalha em animações.

Instale a skill de motion design

Execute este comando uma vez no seu terminal. Funciona com mais de 40 agentes, incluindo Claude Code, Cursor, Codex e GitHub Copilot.

Terminal

npx skills add LottieFiles/motion-design-skill

✨ Altamente recomendado. A diferença entre uma IA que produz animações rígidas e mecânicas e uma que produz movimento refinado e intencional está quase inteiramente em ter ou não esse contexto. Instale uma vez e ele se aplica a todas as sessões de animação.

Veja a skill completa no GitHub → LottieFiles/motion-design-skill

Capacidades

O MCP dá à sua IA acesso total à API do Creator. Aqui está tudo o que ele pode fazer:

🎬 Gerenciamento de Cena

  • Criar cenas — definir nome, tamanho, taxa de quadros, duração
  • Alternar entre cenas
  • Definir cor de fundo (apenas visualização, não exportada)
  • Ler propriedades da cena — camadas, tamanho, taxa de quadros
  • Exportar cenas para Lottie JSON
  • Importar Lottie JSON, dotLottie, SVG ou imagens

🗂 Gerenciamento de Camadas

  • Definir visibilidade, estado de bloqueio e foco
  • Controlar timing — quadro inicial, quadro final, deslocamento
  • Definir modos de mesclagem (16 modos, incluindo multiply, screen, overlay)
  • Aplicar e animar máscaras e mattes
  • Alinhar e espelhar camadas
  • Animar transformações — posição, rotação, escala, distorção

🔷 Criação de Formas

  • Retângulo — posição, tamanho, arredondamento de cantos
  • Elipse — posição, tamanho
  • Polígono — pontos, raio, arredondamento
  • Estrela — raio interno/externo, pontos
  • Caminho — bezier personalizado com controle total de tangente
  • Grupo — agrupar formas existentes

🎨 Preenchimentos e Contornos

  • Preenchimento de cor sólida — RGB estático ou animado
  • Preenchimento de gradiente linear — pontos de início/fim personalizados
  • Preenchimento de gradiente radial — ângulo e comprimento de destaque
  • Contornos sólidos e gradientes — com largura animável
  • Trim paths — animar desenho (início %, fim %, deslocamento)

⏱️ Animação e Keyframes

  • Adicionar keyframes em quadros específicos com valores
  • Definir valores estáticos (sem animação)
  • Ler, inspecionar e remover keyframes
  • Definir interpolação — Linear ou Bezier Cúbico (x1, y1, x2, y2)
  • Animar: posição, rotação, escala, opacidade, cor, caminho e mais

🖼 Recursos e Reprodução

  • Listar, clonar e remover recursos (cenas e imagens)
  • Ler propriedades da imagem — largura, altura, URI base64
  • Reproduzir, pausar e pular para quadros específicos
  • Ler quadro atual e estado de reprodução
  • Ler nós e keyframes selecionados

Em breve: State Machines e Motion Tokens

Melhores práticas

  • Instale a skill de motion design para melhor qualidade: O MCP dá à sua IA as ferramentas. A skill de motion design dá a ela o julgamento para usá-las bem — curvas de interpolação, princípios de timing, coreografia. Um comando, resultado significativamente melhor. A skill de motion design pode ser encontrada aqui.
  • Comece com seus próprios SVGs e depois anime: A IA pode ser imprevisível ao gerar formas de ilustração do zero. Para melhores resultados, importe seus recursos SVG existentes para o Creator primeiro e depois peça à sua IA para animá-los. Isso mantém seu estilo visual consistente e permite que a IA se concentre no que faz de melhor — movimento, timing e sequenciamento.
  • Sempre use o melhor modelo disponível para você: A qualidade da animação escala diretamente com o modelo. Se você tem acesso ao Claude Sonnet ou Opus, use-o em vez de um modelo menor — a diferença em como ele lida com timing, sequenciamento e raciocínio espacial é perceptível.
  • Nomeie suas camadas antes de fazer o prompt: A IA lê os nomes das suas camadas para entender a estrutura da sua animação. Camadas bem nomeadas como left_arm, right_leg, bg_circle e text_headline ajudam-na a mirar nos elementos certos, evitar erros e manter-se organizada em cenas complexas. Nomes genéricos como Shape 1 ou Group 4 dificultam que a IA construa sobre o seu trabalho com precisão.
  • Divida animações complexas em etapas: Em vez de "construa uma animação de onboarding completa", vá cena por cena. Crie a cena → adicione formas → adicione keyframes → refine o timing. Etapas menores lhe dão mais controle e tornam os erros mais fáceis de detectar e corrigir.
  • Seja específico sobre timing e sensação: "Um fade suave" é vago. "Um fade-in de 400ms com ease-out" dá à sua IA algo com que trabalhar. Quanto mais você descrever a sensação — rápido, saltitante, lento e cinematográfico — mais próximo o primeiro resultado estará do que você está imaginando.