Cómo animar un logo o personaje desde Claude, Cursor o VS Code con MCP

¿Qué es MCP (Model Context Protocol)?

MCP es “un estándar de código abierto para conectar aplicaciones de IA con sistemas externos”. El sitio oficial lo compara con “un puerto USB-C para aplicaciones de IA”: una forma estándar para que Claude, ChatGPT, Cursor, VS Code y otros clientes accedan a herramientas externas.

La especificación actual (revisión 2026-07-28) define tres cosas que un servidor puede ofrecer:

• Tools: “Funciones que ejecuta el modelo de IA”, como diseñar un logo o exportar un video.
• Resources: “Contexto y datos que usan el usuario o el modelo de IA”.
• Prompts: “Mensajes y flujos de trabajo con plantilla para los usuarios”.

Los mensajes son JSON-RPC 2.0. Un servidor se ejecuta localmente por stdio o de forma remota por Streamable HTTP, donde “cada mensaje es un HTTP POST a un único endpoint MCP”. Los servicios de animación son servidores remotos: el rigging, el render y el almacenamiento de archivos ocurren en sus máquinas, y tu asistente solo envía solicitudes y muestra resultados.

¿Por qué animar a través de un servidor MCP en lugar de pedírselo directamente a la IA?

Un modelo de chat puede escribir código de animación: keyframes CSS, una animación SVG o un script corto. A menudo basta para un spinner o un fundido. No basta para una mascota con diez estados de ánimo ni para una animación de lanzamiento de logo pulida, porque eso necesita un pipeline que el modelo no tiene: análisis de imagen, rigging, render, exportación de archivos y un lugar donde guardar los resultados.

Un servidor MCP le da al asistente herramientas para ese pipeline. En la práctica, eso cambia tres cosas:

• Recibes archivos reales, como un archivo de Rive, MP4 o WebM con fondo transparente, con enlaces de descarga en lugar de código que tienes que depurar.
• Se hace seguimiento de los trabajos largos. Una construcción que tarda minutos devuelve un id, y una herramienta de estado informa del progreso hasta que está lista.
• El mismo asistente puede integrar el resultado. En Cursor, VS Code o Claude Code, el asistente que recibió los archivos también puede editar tu proyecto para agregarlos.

Si el logo tiene que quedar exactamente como se diseñó, revisa qué tipo de IA usa el servidor antes de empezar: consulta ¿la IA puede animar un logo sin cambiarlo?.

¿Cómo funciona el inicio de sesión en un servidor MCP remoto?

Con OAuth, definido en la especificación de autorización de MCP, que se basa en OAuth 2.1. Ves una ventana del navegador: inicias sesión en el servicio y apruebas lo que puede hacer el asistente. Por detrás:

1. El servidor responde a una solicitud sin autenticar con HTTP 401 y apunta a sus Protected Resource Metadata, que todo servidor MCP protegido “DEBE implementar”.
2. El cliente descubre el servidor de autorización y obtiene un client ID. La especificación indica tres formas: Client ID Metadata Documents (que los clientes “DEBERÍAN” admitir), registro previo o Dynamic Client Registration, que la revisión 2026-07-28 marca como obsoleto, pero mantiene por compatibilidad.
3. El cliente ejecuta el flujo de código de autorización con PKCE y un parámetro resource que nombra el servidor MCP, así que el token solo sirve para ese servidor.
4. Cada solicitud posterior lleva el token en un header Authorization: Bearer.

Para ti, esto significa que no hay clave de API que copiar o filtrar, que ves los permisos en la pantalla de aprobación y que puedes revocar el acceso desde el lado del servicio.

¿Cómo agregas un servidor MCP remoto en Claude y Claude Code?

Claude (web y app de escritorio). El centro de ayuda de Anthropic (noviembre de 2026) dice que los conectores personalizados con MCP remoto están disponibles en los planes Free, Pro, Max, Ultra, Team y Enterprise, y que “los usuarios Free están limitados a un conector personalizado”. En Pro o Max:

1. Abre Customize, Connectors, haz clic en + Add y luego en Add custom connector.
2. Escribe un nombre y la URL del servidor MCP remoto, y luego Continue.
3. Revisa los ajustes de autenticación detectados, elige cuándo iniciar sesión y haz clic en Add.

En Team y Enterprise, un Owner agrega el conector en Organization settings y luego los miembros lo conectan desde Customize, Connectors. Claude “se conecta a tu servidor MCP remoto desde la infraestructura en la nube de Anthropic”, así que el servidor debe ser accesible desde internet público.

Claude Code. Agrega el servidor desde la terminal y luego inicia sesión dentro de Claude Code:

claude mcp add --transport http <name> <server-url>
# then, inside Claude Code:
/mcp

El comando /mcp lista tus servidores; elige el nuevo y “sigue los pasos en tu navegador para iniciar sesión”.

¿Cómo agregas un servidor MCP remoto en Cursor y VS Code?

Cursor. Crea .cursor/mcp.json en un proyecto, o ~/.cursor/mcp.json en tu carpeta personal para todos los proyectos, y dale al servidor una url:

{
  "mcpServers": {
    "animation": { "url": "https://example.com/mcp" }
  }
}

Cursor admite stdio, SSE y Streamable HTTP, y su documentación dice que “Cursor admite OAuth para los servidores que lo requieren”, usando “el flujo de código de autorización con PKCE”. Inicia sesión desde la configuración de MCP cuando Cursor te lo pida.

VS Code (GitHub Copilot). Ejecuta MCP: Add Server desde la Command Palette, elige HTTP e introduce el endpoint. O agrégalo a .vscode/mcp.json; el formato de VS Code usa servers:

{
  "servers": {
    "animation": { "type": "http", "url": "https://example.com/mcp" }
  }
}

La documentación de VS Code dice que “un servidor HTTP remoto puede requerir una cuenta o un inicio de sesión” y aconseja “revisar cualquier aviso de confianza o autenticación del servidor antes de aceptarlo”. Su referencia de configuración también tiene un ajuste oauth para servidores que necesitan un client ID específico, y mantiene los client secrets fuera de mcp.json.

¿Se puede agregar un servidor MCP personalizado a ChatGPT?

Sí, desde noviembre de 2026, mediante ChatGPT Plugins. La documentación del Apps SDK de OpenAI describe estos pasos:

1. Ve a ChatGPT Plugins, selecciona el botón de más y elige Add custom MCP server.
2. Escribe un nombre y una descripción.
3. En Connection, introduce la URL del servidor, incluida la ruta /mcp.
4. Configura la autenticación, revisa el aviso de riesgo y selecciona Create as a plugin.
5. Revisa las herramientas que ChatGPT descubrió en el servidor.

OpenAI recomienda OAuth con Client ID Metadata Documents cuando el servidor de autorización los admite, y señala que el registro dinámico de clientes también es compatible. Agrega que “las políticas de la cuenta y del espacio de trabajo se aplican al agregar y usar servidores MCP personalizados”, así que una cuenta de trabajo puede necesitar la aprobación de un administrador.

¿Cómo es un buen flujo de animación por MCP?

Cinco pasos, con un punto de control después de cada uno. Puedes decirlo todo en lenguaje natural; el asistente elige las herramientas.

Hábitos que hacen que todo fluya:

• Aprueba antes de gastar. La especificación de MCP dice que los hosts “deben obtener el consentimiento explícito del usuario antes de invocar cualquier herramienta”, y un servidor bien diseñado también indica qué pasos usan tu plan. Lee esos avisos en lugar de permitirlo todo.
• Mira la imagen tú mismo. Pide al asistente que te muestre el diseño y revisa las letras y los colores antes de construir.
• Haz el embed en tu herramienta de código. Construir en una app de chat e integrar en Cursor, VS Code o Claude Code funciona bien: conecta el mismo servidor en ambos.
• Revisa la accesibilidad. Pide al asistente que respete el movimiento reducido; consulta animación accesible.

Para prompts que puedes pegar en un asistente de código una vez que tengas los archivos, consulta prompts de IA para agregar una mascota animada a la splash screen. Para el runtime web de Rive en sí, la documentación de Rive recomienda el paquete @rive-app/webgl2.

¿Qué deberías revisar antes de conectar un servidor MCP?

Trata un servidor MCP remoto como cualquier app a la que das acceso a tu cuenta. Anthropic advierte que los conectores personalizados “te permiten conectar Claude a servicios arbitrarios que Anthropic no ha verificado”, y la documentación de MCP de OpenAI menciona la inyección de prompts, las solicitudes de datos excesivas y las acciones de escritura no deseadas como los principales riesgos.

• ¿Quién lo gestiona? Usa la URL del propio sitio del servicio, no una copiada de un foro.
• ¿Qué puede hacer cada herramienta? Lee la lista de herramientas que muestra tu cliente. Las herramientas de solo lectura y las que gastan créditos o cambian datos son riesgos distintos.
• ¿Qué recibe? La política de privacidad del servicio debería decir si ve tu chat o solo las entradas de las herramientas.
• ¿Cómo te desconectas? Deberías poder quitar el servidor en tu cliente y revocar el acceso desde el lado del servicio.

¿Cómo maneja el servidor MCP de Charmotion la animación de logos y personajes?

Charmotion tiene un servidor MCP remoto público (Streamable HTTP) en https://charmotion.app/mcp, con inicio de sesión OAuth en charmotion.app mediante un código de un solo uso que te llega por correo. Sus herramientas siguen los cinco pasos de arriba:

• Diseño: design_logo y design_character crean un logo o un personaje original sobre un fondo liso (cada uno usa un diseño con IA; el plan gratis incluye 2). retry_design crea otra versión.
• Revisión: para un logo, start_motion propone tres conceptos para el hero de un sitio web o una animación de inicio de app, sin costo. Para un personaje, get_expressions muestra las expresiones que agrega antes de construir el set, y approve_expressions guarda tu elección.
• Construcción: build_motion construye el concepto elegido (de 5 a 30 minutos, se consulta con get_motion) y refine_motion aplica cambios. create_character_set construye un archivo de Rive con estados de ánimo en loop, reacciones puntuales y una intro de inicio.
• Exportación: export_videos genera MP4, GIF y WebM y MOV con fondo transparente en aproximadamente un minuto.
• Embed: get_motion y get_character_set devuelven código por plataforma y notas de integración AI_README para tu asistente de código.

El asistente pregunta antes de cualquier paso que use tu plan. Para usar tu propia imagen, comparte un enlace https público (PNG, JPEG o WebP, de al menos 512 px y hasta 10 MB; los logos también pueden ser SVG), ya que la mayoría de los asistentes todavía no pueden pasar un archivo adjunto a una herramienta. La configuración para Claude, Claude Code, Cursor, VS Code y Codex está en la página del servidor MCP; los planes están en precios.

Anima un logo desde un asistente de IA por MCP

1. Agrega el servidor MCP remoto. En Claude usa Customize, Connectors, Add custom connector; en Claude Code ejecuta claude mcp add --transport http; en Cursor o VS Code agrega la URL a mcp.json; en ChatGPT usa Plugins, Add custom MCP server.
2. Inicia sesión con OAuth. Cuando el cliente lo pida, inicia sesión en el sitio del servicio en tu navegador y aprueba los permisos.
3. Diseña o comparte el logo. Pide al asistente que diseñe un logo, o comparte un enlace público a tu propio archivo, y luego revisa la ortografía y los colores.
4. Elige un concepto. Pide conceptos de movimiento y elige uno antes de que se construya nada o se use tu plan.
5. Construye y exporta. Deja que la construcción avance, revisa el progreso con la herramienta de estado y luego exporta los formatos que necesites.
6. Insértalo. En tu asistente de código, pídele que agregue la animación con el código y las notas de integración recibidos, con el movimiento reducido resuelto.

Preguntas frecuentes

¿Necesito una clave de API para usar un servidor MCP remoto de animación?

Normalmente no. Los servidores que siguen la especificación de autorización de MCP usan OAuth: tu asistente abre un navegador, inicias sesión en el servicio y apruebas el acceso, y el cliente guarda un token que solo sirve para ese servidor.

¿Por qué Claude no puede conectarse a mi servidor MCP?

Claude se conecta a los conectores personalizados desde la nube de Anthropic, así que el servidor debe ser accesible desde internet público; los servidores en localhost o detrás de un firewall no funcionan sin una lista de permitidos. Los planes Free también están limitados a un conector personalizado.

¿El mismo servidor MCP puede funcionar en Cursor y en la app de Claude?

Sí, si es un servidor remoto accesible por internet. Agrega la misma URL en cada cliente que uses e inicia sesión desde cada uno cuando te lo pida.

Fuentes

• What is the Model Context Protocol (MCP)?, Model Context Protocol
• Specification (revision 2026-07-28), Model Context Protocol
• Transports, Model Context Protocol
• Authorization, Model Context Protocol
• Get started with custom connectors using remote MCP, Claude Help Center
• Connect Claude Code to tools via MCP, Claude Code Docs
• Model Context Protocol (MCP), Cursor Docs
• Use MCP servers in VS Code, Visual Studio Code Docs
• MCP configuration reference, Visual Studio Code Docs
• Connect from ChatGPT, OpenAI Apps SDK
• Building MCP servers for ChatGPT and API integrations, OpenAI
• Web (JS) runtime, Rive
• Charmotion MCP server, Charmotion