Como animar um logo ou personagem pelo Claude, Cursor ou VS Code com MCP

O que é MCP (Model Context Protocol)?

O MCP é "um padrão de código aberto para conectar aplicações de IA a sistemas externos". O site oficial o compara a "uma porta USB-C para aplicações de IA": uma forma padrão para Claude, ChatGPT, Cursor, VS Code e outros clientes acessarem ferramentas externas.

A especificação atual (revisão 2026-07-28) define três coisas que um servidor pode oferecer:

• Tools: "Funções para o modelo de IA executar", como criar um logo ou exportar um vídeo.
• Resources: "Contexto e dados, para o usuário ou o modelo de IA usarem."
• Prompts: "Mensagens e fluxos de trabalho em formato de template para os usuários."

As mensagens são JSON-RPC 2.0. Um servidor roda localmente via stdio ou remotamente via Streamable HTTP, em que "cada mensagem é um HTTP POST para um único endpoint MCP". Serviços de animação são servidores remotos: o rig, a renderização e o armazenamento dos arquivos acontecem nas máquinas deles, e o seu assistente só envia requisições e mostra os resultados.

Por que animar por um servidor MCP em vez de pedir direto à IA?

Um modelo de chat consegue escrever código de animação: keyframes CSS, uma animação SVG ou um script curto. Muitas vezes isso basta para um spinner ou um fade. Não basta para um mascote com dez humores ou uma animação de lançamento de logo bem acabada, porque esses precisam de um pipeline que o modelo não tem: análise de imagem, rig, renderização, exportação de arquivos e um lugar para guardar os resultados.

Um servidor MCP dá ao assistente ferramentas para esse pipeline. Na prática, isso muda três coisas:

• Voltam arquivos de verdade, como um arquivo Rive, MP4 ou WebM transparente, com links de download em vez de código que você precisa depurar.
• Tarefas longas são acompanhadas. Uma construção que leva minutos devolve um id, e uma ferramenta de status informa o progresso até ficar pronta.
• O mesmo assistente pode incorporar o resultado. No Cursor, no VS Code ou no Claude Code, o assistente que recebeu os arquivos também pode editar o seu projeto para adicioná-los.

Se o logo precisa ficar exatamente como foi desenhado, verifique que tipo de IA o servidor usa antes de começar: veja a IA consegue animar um logo sem alterá-lo.

Como funciona o login em um servidor MCP remoto?

Via OAuth, definido na especificação de autorização do MCP, que se baseia no OAuth 2.1. Você vê uma janela do navegador: faz login no serviço e aprova o que o assistente pode fazer. Por trás disso:

1. O servidor responde a uma requisição não autenticada com HTTP 401 e aponta para seus Protected Resource Metadata, que todo servidor MCP protegido "MUST implement".
2. O cliente descobre o servidor de autorização e obtém um client ID. A especificação lista três formas: Client ID Metadata Documents (que os clientes "SHOULD" suportar), pré-registro ou Dynamic Client Registration, que a revisão 2026-07-28 marca como obsoleto, mas mantém por compatibilidade.
3. O cliente executa o fluxo de authorization code com PKCE e um parâmetro resource que nomeia o servidor MCP, para que o token funcione só para esse servidor.
4. Toda requisição seguinte leva o token em um cabeçalho Authorization: Bearer.

Para você, isso significa nenhuma chave de API para copiar ou vazar, permissões que você vê na tela de aprovação e acesso que você pode revogar no lado do serviço.

Como adicionar um servidor MCP remoto no Claude e no Claude Code?

Claude (web e app desktop). A central de ajuda da Anthropic (novembro de 2026) diz que conectores personalizados com MCP remoto estão disponíveis nos planos Free, Pro, Max, Ultra, Team e Enterprise, e que "usuários Free estão limitados a um conector personalizado". No Pro ou no Max:

1. Abra Customize, Connectors, clique em + Add e depois em Add custom connector.
2. Digite um nome e a URL do servidor MCP remoto e clique em Continue.
3. Confira as configurações de autenticação detectadas, escolha quando fazer login e clique em Add.

No Team e no Enterprise, um Owner adiciona o conector nas configurações da organização e depois os membros o conectam em Customize, Connectors. O Claude "se conecta ao seu servidor MCP remoto a partir da infraestrutura em nuvem da Anthropic", então o servidor precisa estar acessível na internet pública.

Claude Code. Adicione o servidor pelo terminal e depois faça login de dentro do Claude Code:

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

O comando /mcp lista os seus servidores; escolha o novo e "siga os passos no navegador para fazer login".

Como adicionar um servidor MCP remoto no Cursor e no VS Code?

Cursor. Crie .cursor/mcp.json em um projeto, ou ~/.cursor/mcp.json na sua pasta pessoal para todos os projetos, e dê ao servidor uma url:

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

O Cursor suporta stdio, SSE e Streamable HTTP, e a documentação diz que "o Cursor suporta OAuth para servidores que o exigem", usando "o fluxo de authorization code com PKCE". Faça login nas configurações de MCP quando o Cursor pedir.

VS Code (GitHub Copilot). Execute MCP: Add Server na Command Palette, escolha HTTP e digite o endpoint. Ou adicione-o em .vscode/mcp.json; o formato do VS Code usa servers:

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

A documentação do VS Code diz que "um servidor HTTP remoto pode exigir uma conta ou login" e recomenda "revisar qualquer aviso de confiança ou de autenticação do servidor antes de aceitá-lo". A referência de configuração também tem uma opção oauth para servidores que precisam de um client ID específico, e mantém os client secrets fora do mcp.json.

Dá para adicionar um servidor MCP personalizado ao ChatGPT?

Sim, em novembro de 2026, pelos ChatGPT Plugins. A documentação do Apps SDK da OpenAI descreve estes passos:

1. Vá em ChatGPT Plugins, selecione o botão de mais e escolha Add custom MCP server.
2. Digite um nome e uma descrição.
3. Em Connection, digite a URL do servidor incluindo o caminho /mcp.
4. Configure a autenticação, leia o aviso de risco e selecione Create as a plugin.
5. Revise as ferramentas que o ChatGPT encontrou no servidor.

A OpenAI recomenda OAuth com Client ID Metadata Documents quando o servidor de autorização os suporta, e observa que o dynamic client registration também é suportado. Ela acrescenta que "políticas de conta e de workspace se aplicam à adição e ao uso de servidores MCP personalizados", então uma conta de trabalho pode precisar da aprovação de um administrador.

Como é um bom fluxo de animação via MCP?

Cinco passos, com um ponto de verificação depois de cada um. Você pode dizer tudo em linguagem natural; o assistente escolhe as ferramentas.

Hábitos que deixam tudo mais tranquilo:

• Aprove antes de gastar. A especificação do MCP diz que os hosts "devem obter o consentimento explícito do usuário antes de chamar qualquer ferramenta", e um servidor bem projetado também informa quais passos usam o seu plano. Leia esses avisos em vez de permitir tudo.
• Olhe a imagem você mesmo. Peça ao assistente para mostrar o design e confira letras e cores antes da construção.
• Faça o embed na sua ferramenta de código. Construir em um app de chat e incorporar no Cursor, VS Code ou Claude Code funciona bem: conecte o mesmo servidor nos dois.
• Confira a acessibilidade. Peça ao assistente para respeitar o movimento reduzido; veja animação acessível.

Para prompts que você pode colar em um assistente de código quando já tiver os arquivos, veja prompts de IA para adicionar um mascote animado na splash. Para o runtime web do Rive em si, a documentação do Rive recomenda o pacote @rive-app/webgl2.

O que verificar antes de conectar um servidor MCP?

Trate um servidor MCP remoto como qualquer app a que você dá acesso à sua conta. A Anthropic avisa que os conectores personalizados "permitem conectar o Claude a serviços arbitrários que não foram verificados pela Anthropic", e a documentação de MCP da OpenAI lista prompt injection, pedidos excessivos de dados e ações de escrita não intencionais como os principais riscos.

• Quem o mantém? Use a URL do próprio site do serviço, não uma cópia de um fórum.
• O que cada ferramenta pode fazer? Leia a lista de ferramentas que o seu cliente mostra. Ferramentas só de leitura e ferramentas que gastam créditos ou alteram dados são riscos diferentes.
• O que ele recebe? A política de privacidade do serviço deve dizer se ele vê o seu chat ou só as entradas das ferramentas.
• Como desconectar? Você deve conseguir remover o servidor no seu cliente e revogar o acesso no lado do serviço.

Como o servidor MCP do Charmotion lida com animação de logo e de personagem?

O Charmotion mantém um servidor MCP remoto público (Streamable HTTP) em https://charmotion.app/mcp, com login via OAuth no charmotion.app usando um código de uso único enviado por e-mail. As ferramentas seguem os cinco passos acima:

• Design: design_logo e design_character criam um logo ou personagem original sobre um fundo liso (cada um usa um design com IA; o plano Free inclui 2). retry_design cria outra versão.
• Revisão: para um logo, start_motion propõe três conceitos para um hero de site ou uma animação de abertura de app, sem custo. Para um personagem, get_expressions mostra as expressões que ele adiciona antes de o conjunto ser construído, e approve_expressions salva a sua escolha.
• Construção: build_motion constrói o conceito escolhido (de 5 a 30 minutos, acompanhado com get_motion), e refine_motion aplica alterações. create_character_set constrói um arquivo Rive com humores em loop, reações únicas e uma intro de abertura.
• Exportação: export_videos gera MP4, GIF e WebM e MOV transparentes em cerca de um minuto.
• Embed: get_motion e get_character_set devolvem código por plataforma e notas de integração AI_README para o seu assistente de código.

O assistente pergunta antes de qualquer passo que use o seu plano. Para usar a sua própria imagem, compartilhe um link https público (PNG, JPEG ou WebP, com pelo menos 512 px, até 10 MB; logos também podem ser SVG), já que a maioria dos assistentes ainda não consegue passar um arquivo anexado para uma ferramenta. A configuração para Claude, Claude Code, Cursor, VS Code e Codex está na página do servidor MCP; os planos estão em preços.

Anime um logo a partir de um assistente de IA via MCP

1. Adicione o servidor MCP remoto. No Claude, use Customize, Connectors, Add custom connector; no Claude Code, execute claude mcp add --transport http; no Cursor ou no VS Code, adicione a URL ao mcp.json; no ChatGPT, use Plugins, Add custom MCP server.
2. Faça login com OAuth. Quando o cliente pedir, faça login no site do serviço pelo navegador e aprove as permissões.
3. Crie ou compartilhe o logo. Peça ao assistente para criar um logo ou compartilhe um link público para o seu próprio arquivo, e depois confira a grafia e as cores.
4. Escolha um conceito. Peça conceitos de movimento e escolha um antes de qualquer coisa ser construída ou usar o seu plano.
5. Construa e exporte. Deixe a construção rodar, acompanhe o progresso com a ferramenta de status e depois exporte os formatos de que você precisa.
6. Incorpore. No seu assistente de código, peça para adicionar a animação usando o código e as notas de integração devolvidos, com o movimento reduzido tratado.

Perguntas frequentes

Preciso de uma chave de API para usar um servidor MCP remoto de animação?

Normalmente não. Servidores que seguem a especificação de autorização do MCP usam OAuth: o seu assistente abre um navegador, você faz login no serviço e aprova o acesso, e o cliente guarda um token que só funciona para aquele servidor.

Por que o Claude não consegue se conectar ao meu servidor MCP?

O Claude se conecta a conectores personalizados a partir da nuvem da Anthropic, então o servidor precisa estar acessível na internet pública; servidores em localhost ou atrás de um firewall não funcionam sem liberação na allowlist. Os planos Free também estão limitados a um conector personalizado.

O mesmo servidor MCP funciona no Cursor e no app do Claude?

Sim, se for um servidor remoto acessível pela internet. Adicione a mesma URL em cada cliente que você usa e faça login em cada um quando ele pedir.

Fontes

• 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