SVGator MCP

Servidor MCP SVGator — Documentação

O servidor MCP conecta seu assistente de IA diretamente ao SVGator, a ferramenta online de animação SVG. A partir daí, seu assistente pode trabalhar dentro dos seus projetos para navegar, inspecionar, editar, criar e exportar para você, cuidando de tudo, desde um simples “edite as cores de acordo com este kit de marca” até um completo “crie uma animação de revelação de logotipo e exporte como um arquivo somente CSS.”

• Endpoint: https://mcp.svgator.com/mcp
• Protocolo: Model Context Protocol sobre HTTP Transmissível
• Autenticação: OAuth 2.1 (faça login com sua conta SVGator — veja Primeiros passos)

O que você pode fazer

Capacidade	Ferramentas	Exemplo de prompt
Navegar pelos seus projetos	list_projects, get_project, get_profile	"Liste meus projetos do SVGator"
Inspecionar a estrutura de um projeto	get_skeleton, read_part	"Quais elementos estão no projeto X e quais estão animados?"
Editar um projeto incrementalmente	edit_part	"Deixe o círculo vermelho e repita seu salto para sempre"
Criar ou substituir projetos inteiros	create_project, replace_project	"Crie um novo spinner de carregamento animado para mim"
Duplicar, mover e renomear projetos	duplicate_project, move_project	"Copie o projeto X para minha pasta 'Rascunhos'"
Gerenciar ativos reutilizáveis	list_assets, get_asset, create_asset, update_asset	"Salve este ícone como um ativo reutilizável"
Organizar projetos em pastas	list_folders, get_folder, create_folder, update_folder	"Crie uma pasta 'Marketing' e arquive este projeto nela"
Consultar referência de autoria	describe_shape	(usado pelo assistente para obter formas JSON exatas)
Exportar para formatos entregáveis	export_project, get_render	"Exporte o projeto X como um vídeo MP4"
Obter orientação artesanal de motion design	recursos de habilidade + prompt	"Faça a direção de arte de uma revelação de logotipo e então construa"

Cada projeto que o servidor retorna inclui um editor_url — um link direto que abre o projeto no editor SVGator, para que você sempre possa continuar manualmente de onde o assistente parou.

Ferramentas

O servidor expõe 22 ferramentas. Veja a Referência de ferramentas para tabelas completas de parâmetros e saídas.

Projetos

• list_projects — Lista os projetos SVGator do usuário autenticado (mais recentes primeiro), com um link direto editor_url por linha e uma contagem total para paginação.
• get_project — Obtém um resumo de um único projeto: título, pré-visualização, pasta, carimbos de data/hora, tamanho da tela, cor de fundo, linha do tempo da animação e configurações de exportação salvas.
• create_project — Cria um novo projeto SVGator a partir de um JSON de projeto completo, pertencente ao usuário autenticado.
• replace_project — Substitui o JSON inteiro de um projeto existente por um projeto completo fornecido (a validação é executada antes de qualquer mutação).
• duplicate_project — Faz uma cópia de um projeto existente, opcionalmente em uma pasta diferente ou com um novo título.
• move_project — Move um projeto para uma pasta diferente e/ou o renomeia.

Inspecionando e editando um projeto

• get_skeleton — Obtém um mapa de estrutura leve e econômico em tokens de um projeto (árvore de elementos apenas com nomes e contagens de quadros-chave, nunca valores) — passo 1 do ciclo de edição.
• read_part — Lê o valor exato ou elemento em um caminho ancorado por id — passo 2 do ciclo de edição.
• edit_part — Aplica uma edição validada (atualizar, inserir, mover ou excluir) em um caminho e a persiste — passo 3 do ciclo de edição.
• describe_shape — Obtém a forma JSON exata de um bloco de construção (elemento ou animador) antes da autoria, para que os nomes dos campos nunca sejam adivinhados.

Ativos

• list_assets — Lista os ativos reutilizáveis do usuário autenticado (itens SVG estáticos ou animados), mais recentes primeiro.
• get_asset — Obtém um único ativo, incluindo sua carga completa data ({document, definitions}).
• create_asset — Cria um novo ativo reutilizável a partir de um documento de ativo.
• update_asset — Substitui o documento inteiro de um ativo existente.

Pastas

• list_folders — Lista as pastas do usuário autenticado (os rótulos sob os quais os projetos são arquivados).
• get_folder — Obtém uma única pasta (id, título, carimbos de data/hora) pelo seu id.
• create_folder — Cria uma nova pasta para organizar projetos.
• update_folder — Renomeia uma pasta existente.

Exportação e conta

• export_project — Exporta um projeto para um formato entregável (SVG, Lottie, React Native, Flutter, vídeo ou GIF), com substituições opcionais por exportação.
• get_render — Consulta o status de uma renderização raster (vídeo/GIF) iniciada por export_project e obtém a URL de download assinada quando concluída.
• get_profile — Obtém o perfil do cliente autenticado: nome, e-mail, plano e equipes.

Mapa da documentação

Documento	Para	Abrange
Primeiros passos	Todos	Conexão a partir de claude.ai, Claude Desktop, Claude Code e outros clientes MCP; autenticação; privacidade
Referência de ferramentas	Integradores / curiosos	Cada ferramenta com tabelas completas de parâmetros e saídas
Editando projetos	Integradores / usuários avançados	O ciclo navegar → ler → editar → verificar, endereçamento de caminho, regras de autoria
Exportando projetos	Todos	Formatos, modos de entrega, opções de exportação, consulta de renderização
Habilidade e recursos	Integradores	A habilidade artesanal de motion design, recursos MCP e o prompt
Solução de problemas	Todos	Problemas de conexão, erros comuns e o que significam

Requisitos

• Uma conta SVGator (cadastre-se). As exportações contam contra os limites do seu plano exatamente como no editor.
• Para conectar a partir do claude.ai / Claude Desktop, conectores personalizados exigem um plano Claude Pro, Max, Team ou Enterprise. Claude Code e outros clientes MCP conectam-se diretamente ao endpoint.

Como funciona (um parágrafo)

O servidor é um servidor MCP remoto: seu cliente MCP (Claude, ou qualquer cliente que fale HTTP Transmissível) conecta-se a https://mcp.svgator.com/mcp e faz seu login através do login OAuth regular do SVGator. Suas credenciais SVGator permanecem apenas no lado do servidor — o modelo de IA nunca vê seu token de acesso ou chave secreta; ele recebe apenas os resultados das ferramentas (listas de projetos, mapas de estrutura, arquivos exportados). As entradas das ferramentas são validadas em relação a esquemas publicados, e solicitações inválidas retornam erros descritivos que o assistente pode ler e corrigir.

⚙️ Capacidades

O servidor MCP transforma o SVGator em algo que você pode controlar com linguagem natural. Em vez de clicar pelo editor, você descreve o que deseja e seu assistente de IA faz: abrindo um projeto, mudando uma cor, animando um logotipo ou exportando um arquivo finalizado.

Ele foi criado para designers que desejam um assistente para lidar com as partes repetitivas da animação, para equipes de marketing que precisam de animações prontas para a web sem esperar por um designer para cada pequena mudança, e para desenvolvedores que desejam exportações prontas para produção (Lottie, React Native, Flutter ou SVG) que se integram diretamente a um produto. Cada projeto retorna com um link direto do editor, para que você sempre possa abri-lo e finalizar manualmente, economizando tokens.

Aqui está o que seu assistente pode fazer uma vez conectado:

🗂️ Projetos e Ativos

• Listar projetos: mais recentes primeiro, cada um com um link direto do editor
• Pesquisar e paginar por grandes bibliotecas
• Ler configurações do projeto: tamanho da tela, fundo, linha do tempo e configurações de exportação
• Criar um projeto a partir de uma definição completa
• Sobrescrever um projeto existente
• Duplicar um projeto: na mesma pasta ou em outra
• Mover ou renomear um projeto
• Organizar projetos em pastas
• Gerenciar ativos reutilizáveis: listar, ler, criar e atualizar

🔍 Estrutura e Inspeção

• Mapear a estrutura de um projeto: árvore de elementos com contagens de quadros-chave, sem dados pesados
• Ver o que está animado: quais canais carregam quadros-chave em cada elemento
• Ler valores exatos: qualquer propriedade, quadro-chave ou elemento
• Consultar formas de autoria: o JSON exato para qualquer elemento ou conceito

🔷 Formas e Elementos

• Retângulos
• Círculos e elipses
• Linhas, polilinhas e polígonos
• Caminhos personalizados
• Texto e texto multilinha
• Imagens
• Símbolos e instâncias reutilizados
• Grupos
• Máscaras e caminhos de recorte

🎨 Preenchimentos, Contornos e Cor

• Preenchimentos de cor sólida: estáticos ou animados
• Preenchimentos de gradiente
• Contornos: sólidos ou gradiente, estáticos ou animados
• Composição: modos de mesclagem e opacidade
• Efeitos de filtro, como desfoque

🎞️ Animação e Quadros-chave

• Adicionar quadros-chave em momentos específicos, com valores
• Definir valores estáticos onde nenhum movimento é necessário
• Ler, inspecionar e remover quadros-chave
• Definir easing por quadro-chave: bezier cúbico
• Animar transformações: posição, rotação, escala e distorção
• Animar canais de preenchimento, contorno, composição e filtro
• Transformar uma forma em outra

📤 Exportação e Entrega

• Exportar SVG animado: controlado por JavaScript ou CSS
• Definir um gatilho de início: carregar, passar o mouse, clicar, rolar ou programático
• Definir comportamento de clique e hover: congelar, reiniciar, reverter ou resetar
• Exportar para Lottie
• Exportar para código-fonte React Native ou Flutter
• Renderizar vídeo: MP4, MOV, AVI, MKV ou WebM
• Renderizar GIF, WebP, sequência PNG ou ZIP
• Controlar repetição: iterações, direção, pingue-pongue e velocidade
• Definir taxa de quadros, resolução e qualidade
• Lidar com transparência e cor de fundo

✅ Melhores práticas

Instale a habilidade de motion design do SVGator e então chame-a pelo nome: É uma orientação artesanal que ajuda seu assistente a fazer escolhas deliberadas sobre tempo, easing e personalidade, em vez de movimentos planos e genéricos. Baixe-a do repositório de habilidades SVGator e, em seguida, acione-a diretamente no seu prompt, começando com algo como "use as habilidades de motion do SVGator para animar este logotipo". Você a chama manualmente de propósito: dessa forma, a habilidade fica fora do seu uso de tokens quando você está apenas exportando ou fazendo pequenas edições, e carrega somente quando você realmente deseja a direção de arte extra.

Comece com sua própria arte e então anime: Gerar formas originais do zero é a coisa mais difícil de acertar em qualquer assistente de IA. Para obter os melhores resultados, construa ou importe seu SVG primeiro no editor do SVGator e, em seguida, peça ao seu assistente para animá-lo. Isso mantém seu estilo visual consistente e permite que a IA se concentre no que faz de melhor: movimento, tempo e sequenciamento.

Nomeie seus elementos antes de fazer o prompt: Seu assistente lê os nomes dos elementos para entender a estrutura de um projeto. Nomes claros como “braço_esquerdo”, “círculo_fundo” ou “título” ajudam-no a mirar no elemento certo, evitar erros e manter-se organizado em cenas complexas. Nomes genéricos dificultam seu trabalho e podem acabar custando mais tokens (dependendo do modelo).

Divida animações complexas em etapas: Em vez de “construa uma animação de integração completa para mim”, vá peça por peça: crie os elementos, adicione quadros-chave e então refine o tempo. O servidor aplica uma mudança validada por edição, então etapas menores lhe dão mais controle e tornam qualquer erro fácil de detectar e corrigir.

Seja específico sobre o tempo e a sensação: “Um fade suave” é um tanto vago. “Um fade-in de 400ms com ease-out” dá ao seu assistente algo concreto para trabalhar. Quanto mais você descrever a sensação, seja rápida, saltitante, lenta ou sutil, mais próximo o primeiro resultado chegará do que você tinha em mente.

Combine o formato de exportação com onde ele será usado: SVG é a escolha certa para a web, com sua escolha de JavaScript ou somente CSS (para desempenho ainda melhor). Lottie, React Native e Flutter integram-se perfeitamente a projetos de aplicativos e mobile. Vídeo e GIF estão prontos para redes sociais e e-mail, onde um SVG animado não será reproduzido. Escolher o formato antecipadamente economiza uma rodada de reexportação.

Duplique um projeto antes de grandes experimentos: Se você quiser que a IA reconstrua algo do zero, peça para duplicar o projeto primeiro e, em seguida, faça as alterações na cópia. O original permanece exatamente como estava, para que um experimento ousado nunca lhe custe a versão funcional. Finalize no editor: Todo projeto retorna com um link direto para o editor. Quando o assistente tiver feito a maior parte do trabalho, abra o projeto e faça os ajustes finais manualmente. A IA faz o trabalho pesado e você mantém o controle dos detalhes. Isso também economiza tokens, já que pequenos ajustes manuais são mais rápidos e baratos do que pedir ao assistente para fazer cada um.