Lottie Creator MCP

Lottie Creator MCP

Conecte um assistente de IA ao Lottie Creator por meio da ponte MCP local para criar, editar e animar usando prompts.

[WebMCP](/en/creator/13_ai-tools/lottie-creator-webmcp) permite que um assistente de navegador compatível use o Creator diretamente, sem esta ponte local. Ele está ativado por padrão em navegadores compatíveis. Siga este guia se quiser conectar por meio do servidor MCP local do Creator.

O Lottie Creator MCP traz seu assistente de IA diretamente para seu fluxo de trabalho de animação — dando a ele ferramentas para inspecionar, construir e editar animações Lottie no LottieFiles Creator por meio de linguagem natural. Você pode conferir a instalação mais abaixo.

Os 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 às ferramentas de edição do Creator por meio de uma ponte local.

Com o MCP habilitado, 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 construirá diretamente no Creator, camada por camada.

✦ Editar e modificar animações existentes

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

✦ Gerar variações 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 seu fluxo de trabalho de projeto

Gere assets de animação em tempo real enquanto trabalha em um projeto mais amplo.

Para usar o MCP, instale-o no seu cliente de IA e habilite-o no LottieFiles Creator. As seções abaixo detalham 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 que suporte MCP.

Primeiro, vá para o arquivo README do Creator MCP onde você pode acessar as strings e comandos do 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 compatíveis. Para uma lista de guias de instalação para clientes MCP compatíveis, veja a lista abaixo:

Clientes MCP Compatíveis

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 design de movimento para que sua IA possa produzir animações mais intencionais e refinadas. 🖇️ Aqui está a skill de design de movimento 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 do MCP**

Cole o seguinte no arquivo de configuração dentro do objeto `mcpServers`. Talvez seja 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"]
    }
  }
}
```

Veja 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 alternador `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**

É só 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ê deve 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 da 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 do 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á ter o [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 do MCP do Antigravity e use a configuração acima. Siga a documentação de configuração do MCP do Cline e use a configuração acima. Siga o [guia de configuração do 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 o `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 do 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 do MCP do Gemini Code Assist e use a configuração acima. Siga a documentação de configuração do MCP do JetBrains e use a configuração acima. Siga a documentação de configuração do MCP do Kiro e use a configuração acima. Siga a documentação de configuração do 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 do MCP do Warp e use a configuração acima. Siga a documentação de configuração do MCP do Windsurf e use a configuração acima.

Conectando ao Lottie Creator

1. Abra o Lottie Creator

Navegue até creator.lottiefiles.com no seu navegador e mantenha esta aba aberta durante toda a sessão. O MCP se comunica com o Creator por meio desta aba do navegador.

1. Habilite o MCP local no Creator

No Creator, vá para Configurações → Configurações do MCP → Habilitar MCP local.

1. Confirme a conexão

Você deve ver uma notificação no Creator: Ponte MCP local conectada

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

Sobre Skills

As 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 design de movimento 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 easing se ajusta a um bounce versus um fade, como sequenciar uma entrada de múltiplos elementos ou como estruturar o tempo para que uma animação pareça intencional em vez de mecânica.

As skills não substituem a conexão MCP nem adicionam novas ferramentas. Elas reduzem a tentativa e erro ao empacotar experiência em design de movimento em instruções que sua IA usa automaticamente sempre que trabalha em animações.

Instale a skill de design de movimento

Execute este comando uma vez no seu terminal. Ele 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 é quase inteiramente se ela tem 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 Lottie Creator MCP, o Motion Copilot e o Lottie Creator WebMCP oferecem as mesmas capacidades de edição do Creator. A configuração e as interfaces de assistente diferem.

Área	O que você pode pedir
Cenas e camadas	Inspecionar e criar cenas; alterar tamanho, taxa de quadros, duração ou fundo de visualização; renomear, duplicar, agrupar, alinhar, reordenar, ocultar ou bloquear camadas.
Formas e texto	Criar e editar retângulos, elipses, polígonos, estrelas, caminhos e texto; alterar fontes e estilos de texto; dividir texto em partes para animação.
Estilo e efeitos	Ajustar preenchimentos sólidos e gradientes ou traços; usar modos de mesclagem, sombras, desfoque, efeitos de cor, máscaras e mattes.
Animação e tempo	Adicionar, inspecionar, alterar, copiar ou remover keyframes; ajustar easing; animar transformações, opacidade e cor; usar caminhos de movimento, entradas escalonadas e re-temporização.
Assets e inspeção de cena	Importar SVGs, animações Lottie e imagens; converter camadas de imagem PNG ou JPG em vetores; inspecionar a cena e mover o playhead para um quadro específico.
Temas e movimento reutilizável	Criar e vincular slots de motion-token, atualizar seus valores e criar ou alternar temas. Encontrar e aplicar estilos salvos e predefinições de movimento do Motion System do seu workspace.
Segmentos e interatividade	Criar segmentos de animação nomeados, máquinas de estado, estados, transições e entradas; conectar eventos de clique, hover e estado a ações.

O acesso aos recursos segue seu workspace e plano do Creator. Quando a animação estiver pronta, use os controles de exportação do Creator para salvar o resultado.

Melhores práticas

• Instale a skill de motion design para melhor qualidade: O MCP dá ao seu IA as ferramentas. A skill de motion design dá a ela o julgamento para usá-las bem — curvas de easing, 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, depois anime: A IA pode ser imprevisível ao gerar formas de ilustração do zero. Para melhores resultados, importe seus ativos SVG existentes no Creator primeiro, depois peça ao seu IA para animá-los. Isso mantém seu estilo visual consistente e permite que a IA foque no que ela faz de melhor — movimento, timing e sequenciamento.
  • Teste estes links de remix
    • Medalha: https://lottie.link/metal
    • Clima: https://lottie.link/weather
    • Gráfico: https://lottie.link/graph
    • Caixa de correio: https://lottie.link/mailbox1
• Sempre use o melhor modelo disponível para você: A qualidade da animação escala diretamente com o modelo. Se você tiver 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 dar 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 os elementos certos, evitar erros e permanecer organizada em cenas complexas. Nomes genéricos como Shape 1 ou Group 4 dificultam que a IA construa com precisão sobre o seu trabalho.
• Divida animações complexas em etapas: Em vez de "crie uma animação completa de onboarding", vá cena por cena. Crie a cena → adicione formas → adicione keyframes → refine o timing. Etapas menores dão a você 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á ao seu IA algo com que trabalhar. Quanto mais você descrever a sensação — ágil, saltitante, lenta e cinematográfica — mais próximo o primeiro resultado estará do que você imagina.