SVGator MCP

Servidor MCP de SVGator — Documentación

El servidor MCP conecta tu asistente de IA directamente con SVGator, la herramienta de animación SVG en línea. Desde allí, tu asistente puede trabajar dentro de tus proyectos para explorarlos, inspeccionarlos, editarlos, crearlos y exportarlos por ti, encargándose de todo, desde un simple "edita los colores según este kit de marca" hasta un completo "crea una revelación de logotipo animada y expórtala como un archivo solo CSS".

• Endpoint: https://mcp.svgator.com/mcp
• Protocolo: Model Context Protocol sobre HTTP transmitible
• Autenticación: OAuth 2.1 (inicia sesión con tu cuenta de SVGator — consulta Primeros pasos)

Qué puedes hacer

Capacidad	Herramientas	Ejemplo de prompt
Explorar tus proyectos	list_projects, get_project, get_profile	"Lista mis proyectos de SVGator"
Inspeccionar la estructura de un proyecto	get_skeleton, read_part	"¿Qué elementos hay en el proyecto X y cuáles están animados?"
Editar un proyecto de forma incremental	edit_part	"Haz el círculo rojo y repite su rebote para siempre"
Crear o reemplazar proyectos completos	create_project, replace_project	"Créame un nuevo spinner de carga animado"
Duplicar, mover y renombrar proyectos	duplicate_project, move_project	"Copia el proyecto X en mi carpeta 'Borradores'"
Gestionar assets reutilizables	list_assets, get_asset, create_asset, update_asset	"Guarda este icono como un asset reutilizable"
Organizar proyectos en carpetas	list_folders, get_folder, create_folder, update_folder	"Crea una carpeta 'Marketing' y archiva este proyecto en ella"
Consultar la referencia de autoría	describe_shape	(usado por el asistente para obtener formas JSON exactas)
Exportar a formatos entregables	export_project, get_render	"Exporta el proyecto X como un video MP4"
Obtener orientación artesanal de diseño de movimiento	recursos de habilidad + prompt	"Dirige artísticamente una revelación de logotipo y luego constrúyela"

Cada proyecto que devuelve el servidor incluye un editor_url — un enlace profundo que abre el proyecto en el editor de SVGator, para que siempre puedas continuar manualmente donde el asistente lo dejó.

Herramientas

El servidor expone 22 herramientas. Consulta la Referencia de herramientas para ver las tablas completas de parámetros y resultados.

Proyectos

• list_projects — Lista los proyectos de SVGator del usuario autenticado (los más recientes primero), con un enlace profundo editor_url por fila y un recuento total para la paginación.
• get_project — Obtiene un resumen de un solo proyecto: título, vista previa, carpeta, marcas de tiempo, tamaño del lienzo, color de fondo, línea de tiempo de animación y ajustes de exportación guardados.
• create_project — Crea un nuevo proyecto de SVGator a partir de un JSON de proyecto completo, propiedad del usuario autenticado.
• replace_project — Reemplaza el JSON completo de un proyecto existente con un proyecto completo proporcionado (la validación se ejecuta antes de cualquier mutación).
• duplicate_project — Hace una copia de un proyecto existente, opcionalmente en una carpeta diferente o con un nuevo título.
• move_project — Mueve un proyecto a una carpeta diferente y/o lo renombra.

Inspeccionar y editar un proyecto

• get_skeleton — Obtiene un mapa de estructura ligero y económico en tokens de un proyecto (árbol de elementos solo con nombres y recuentos de fotogramas clave, nunca valores) — paso 1 del bucle de edición.
• read_part — Lee el valor o elemento exacto en una ruta anclada a un id — paso 2 del bucle de edición.
• edit_part — Aplica una edición validada (actualizar, insertar, mover o eliminar) en una ruta y la persiste — paso 3 del bucle de edición.
• describe_shape — Obtiene la forma JSON exacta de un bloque de construcción (elemento o animador) antes de la autoría, para que los nombres de los campos nunca se adivinen.

Assets

• list_assets — Lista los assets reutilizables del usuario autenticado (elementos SVG estáticos o animados), los más recientes primero.
• get_asset — Obtiene un solo asset incluyendo su carga útil completa data ({document, definitions}).
• create_asset — Crea un nuevo asset reutilizable a partir de un documento de asset.
• update_asset — Reemplaza el documento completo de un asset existente.

Carpetas

• list_folders — Lista las carpetas del usuario autenticado (las etiquetas bajo las cuales se archivan los proyectos).
• get_folder — Obtiene una sola carpeta (id, título, marcas de tiempo) por su id.
• create_folder — Crea una nueva carpeta para organizar proyectos.
• update_folder — Renombra una carpeta existente.

Exportación y cuenta

• export_project — Exporta un proyecto a un formato entregable (SVG, Lottie, React Native, Flutter, video o GIF), con anulaciones opcionales por exportación.
• get_render — Consulta el estado de un renderizado ráster (video/GIF) iniciado por export_project y obtiene la URL de descarga firmada cuando esté listo.
• get_profile — Obtiene el perfil del cliente autenticado: nombre, correo electrónico, plan y equipos.

Mapa de documentación

Documento	Para	Cubre
Primeros pasos	Todos	Conexión desde claude.ai, Claude Desktop, Claude Code y otros clientes MCP; autenticación; privacidad
Referencia de herramientas	Integradores / curiosos	Cada herramienta con tablas completas de parámetros y resultados
Edición de proyectos	Integradores / usuarios avanzados	El bucle navegar → leer → editar → verificar, direccionamiento por ruta, reglas de autoría
Exportación de proyectos	Todos	Formatos, modos de entrega, opciones de exportación, consulta de renderizado
Habilidad y recursos	Integradores	La habilidad artesanal de diseño de movimiento, recursos MCP y el prompt
Solución de problemas	Todos	Problemas de conexión, errores comunes y su significado

Requisitos

• Una cuenta de SVGator (registrarse). Las exportaciones cuentan contra los límites de tu plan exactamente como lo hacen en el editor.
• Para conectarse desde claude.ai / Claude Desktop, los conectores personalizados requieren un plan Claude Pro, Max, Team o Enterprise. Claude Code y otros clientes MCP se conectan directamente al endpoint.

Cómo funciona (un párrafo)

El servidor es un servidor MCP remoto: tu cliente MCP (Claude, o cualquier cliente que hable HTTP transmisible) se conecta a https://mcp.svgator.com/mcp y te autentica a través del inicio de sesión OAuth habitual de SVGator. Tus credenciales de SVGator permanecen solo del lado del servidor — el modelo de IA nunca ve tu token de acceso o clave secreta; solo recibe los resultados de las herramientas (listas de proyectos, mapas de estructura, archivos exportados). Las entradas de las herramientas se validan contra esquemas publicados, y las solicitudes no válidas devuelven errores descriptivos que el asistente puede leer y corregir.

⚙️ Capacidades

El servidor MCP convierte a SVGator en algo que puedes controlar con lenguaje natural. En lugar de hacer clic a través del editor, describes lo que quieres y tu asistente de IA lo hace: abriendo un proyecto, cambiando un color, animando un logotipo o exportando un archivo final.

Está diseñado para diseñadores que quieren un asistente que maneje las partes repetitivas de la animación, para equipos de marketing que necesitan animaciones listas para la web sin esperar a un diseñador para cada pequeño cambio, y para desarrolladores que quieren exportaciones listas para producción (Lottie, React Native, Flutter o SVG) que se integren directamente en un producto. Cada proyecto regresa con un enlace directo al editor, para que siempre puedas abrirlo y terminarlo manualmente, ahorrando tokens.

Esto es lo que tu asistente puede hacer una vez que está conectado:

🗂️ Proyectos y Assets

• Listar proyectos: los más recientes primero, cada uno con un enlace directo al editor
• Buscar y paginar a través de grandes bibliotecas
• Leer la configuración del proyecto: tamaño del lienzo, fondo, línea de tiempo y ajustes de exportación
• Crear un proyecto a partir de una definición completa
• Sobrescribir un proyecto existente
• Duplicar un proyecto: en la misma carpeta o en otra
• Mover o renombrar un proyecto
• Organizar proyectos en carpetas
• Gestionar assets reutilizables: listar, leer, crear y actualizar

🔍 Estructura e Inspección

• Mapear la estructura de un proyecto: árbol de elementos con recuentos de fotogramas clave, sin datos pesados
• Ver qué está animado: qué canales llevan fotogramas clave en cada elemento
• Leer valores exactos: cualquier propiedad, fotograma clave o elemento
• Consultar formas de autoría: el JSON exacto para cualquier elemento o concepto

🔷 Formas y Elementos

• Rectángulos
• Círculos y elipses
• Líneas, polilíneas y polígonos
• Trayectos personalizados
• Texto y texto multilínea
• Imágenes
• Símbolos e instancias reutilizados
• Grupos
• Máscaras y trazados de recorte

🎨 Rellenos, Trazos y Color

• Rellenos de color sólido: estáticos o animados
• Rellenos degradados
• Trazos: sólidos o degradados, estáticos o animados
• Composición: modos de fusión y opacidad
• Efectos de filtro como desenfoque

🎞️ Animación y Fotogramas Clave

• Añadir fotogramas clave en momentos específicos, con valores
• Establecer valores estáticos donde no se necesita movimiento
• Leer, inspeccionar y eliminar fotogramas clave
• Establecer suavizado por fotograma clave: bezier cúbico
• Animar transformaciones: posición, rotación, escala y sesgo
• Animar canales de relleno, trazo, composición y filtro
• Transformar una forma en otra

📤 Exportación y Entrega

• Exportar SVG animado: controlado por JavaScript o CSS
• Establecer un disparador de inicio: carga, hover, clic, desplazamiento o programático
• Establecer comportamiento de clic y hover: congelar, reiniciar, invertir o restablecer
• Exportar a Lottie
• Exportar a código fuente de React Native o Flutter
• Renderizar video: MP4, MOV, AVI, MKV o WebM
• Renderizar GIF, WebP, secuencia PNG o ZIP
• Controlar el bucle: iteraciones, dirección, ping-pong y velocidad
• Establecer velocidad de fotogramas, resolución y calidad
• Manejar transparencia y color de fondo

✅ Mejores prácticas

Instala la habilidad de diseño de movimiento de SVGator, luego llámala por su nombre: Es una guía artesanal que ayuda a tu asistente a tomar decisiones deliberadas sobre el tiempo, el suavizado y la personalidad en lugar de un movimiento plano y genérico. Descárgala del repositorio de habilidades de SVGator, luego actívala directamente en tu prompt comenzando con algo como "usa las habilidades de movimiento de SVGator para animar este logotipo". La llamas manualmente a propósito: de esa manera, la habilidad se mantiene fuera de tu uso de tokens cuando solo estás exportando o haciendo pequeñas ediciones, y se carga solo cuando realmente deseas la dirección de arte adicional.

Comienza desde tu propio arte, luego anima: Generar formas originales desde cero es lo más difícil de hacer bien en cualquier asistente de IA. Para obtener los mejores resultados, construye o importa tu SVG primero en el editor de SVGator, luego pide a tu asistente que lo anime. Eso mantiene tu estilo visual consistente y permite que la IA se centre en lo que hace mejor: movimiento, tiempo y secuenciación.

Nombra tus elementos antes de hacer el prompt: Tu asistente lee los nombres de los elementos para entender la estructura de un proyecto. Nombres claros como "brazo_izquierdo", "círculo_fondo" o "titular" le ayudan a apuntar al elemento correcto, evitar errores y mantenerse organizado en escenas complejas. Los nombres genéricos dificultan su trabajo y podrían terminar costándote más tokens (dependiendo del modelo).

Divide las animaciones complejas en pasos: En lugar de "constrúyeme una animación de incorporación completa", ve pieza por pieza: crea los elementos, añade fotogramas clave y luego refina el tiempo. El servidor aplica un cambio validado por edición, por lo que los pasos más pequeños te dan más control y hacen que cualquier error sea fácil de detectar y corregir.

Sé específico sobre el tiempo y la sensación: "Un fundido suave" es algo vago. "Un fundido de entrada de 400ms con suavizado de salida" le da a tu asistente algo concreto con lo que trabajar. Cuanto más describas la sensación, ya sea rápida, elástica, lenta o sutil, más se acercará el primer resultado a lo que tenías en mente.

Haz coincidir el formato de exportación con el lugar donde se usará: SVG es la elección correcta para la web, con tu elección de JavaScript o solo CSS (para un rendimiento aún mejor). Lottie, React Native y Flutter se entregan limpiamente a proyectos de aplicaciones y móviles. El video y el GIF están listos para redes sociales y correo electrónico, donde un SVG animado no se reproducirá. Elegir el formato por adelantado ahorra una ronda de reexportación.

Duplica un proyecto antes de grandes experimentos: Si quieres que la IA reconstruya algo desde cero, pídele que duplique el proyecto primero y luego haga los cambios en la copia. El original permanece exactamente como estaba, para que un experimento audaz nunca te cueste la versión funcional. Termina en el editor: Cada proyecto vuelve con un enlace directo al editor. Una vez que el asistente te ha llevado la mayor parte del camino, abre el proyecto y realiza los retoques finales manualmente. La IA hace el trabajo pesado y tú mantienes el control de los detalles. También ahorra tokens, ya que los pequeños ajustes manuales son más rápidos y económicos que pedirle al asistente que haga cada uno.