Anima MCP Server

Conecte agentes de codificação de IA ao Anima Playground, designs do Figma e ao sistema de design da sua equipe. Preencha a lacuna entre protótipos e código de produção.

GitHub

Experimente este MCPPatrocinado

Documentação

Guia do MCP Server Agent Grid

Agent Grid é um hub gerenciado, da Anima, onde agentes de IA constroem, hospedam, publicam e compartilham aplicativos web. Este repositório é o guia do MCP server e a skill que ensina seu agente de codificação a usá-lo — instale-o como um plugin do Claude Code, uma skill do Codex ou um MCP server simples.

Agent Grid está disponível em app.agentgrid.io. Para a documentação completa, consulte nossa documentação de ajuda.

O que seu agente pode fazer

Criar um aplicativo a partir de um prompt, um site ou um design do Figma — descreva, clone uma URL ou envie frames do Figma, e receba um aplicativo em execução em uma URL ao vivo.
Hospedar código que você já possui — importe um projeto ou comece um repositório vazio e faça push para ele.
Editar qualquer artefato via git — todo artefato é um repositório git real; clone, faça commit, faça push.
Publicar em uma URL pública ao vivo — e removê-la novamente.
Gerar código consciente de design no seu próprio codebase — frames do Figma para arquivos no seu repositório, alinhados à sua stack.

Tudo é um artefato: um repositório git no workspace do seu time, identificado pelo seu sessionId.

Início rápido: plugin do Claude Code

/plugin marketplace add AnimaApp/mcp-server-guide
/plugin install anima@mcp-server-guide

Isso configura o MCP server e instala a skill. Autentique-se quando solicitado. É só isso.

Instalação e configuração

Requisitos

Uma ferramenta de codificação de IA compatível com MCP — Claude Code, Codex, Cursor, VS Code ou qualquer outra que fale HTTP streamable
Uma conta no Agent Grid

URL do servidor: https://api.agentgrid.io/v1/mcp · Transporte: HTTP streamable

Claude Code (manual)

No seu terminal (não dentro do Claude Code):

claude mcp add --transport http anima https://api.agentgrid.io/v1/mcp

Reinicie o Claude Code
Execute /mcp, selecione anima e autentique-se no navegador
(Opcional) Conecte o Figma durante a autenticação para habilitar os fluxos do Figma

Gerencie servidores com claude mcp list, claude mcp get anima, claude mcp remove anima. Consulte a documentação de MCP da Anthropic.

OpenAI Codex

codex mcp add anima --url https://api.agentgrid.io/v1/mcp

Ou em ~/.codex/config.toml:

[mcp_servers.anima]
url = "https://api.agentgrid.io/v1/mcp"

Depois instale a skill (recomendado):

codex skill install AnimaApp/mcp-server-guide/skills/anima

Consulte a documentação de MCP do Codex da OpenAI.

VS Code

Cmd Shift P / Ctrl Shift P → MCP: Add Server
Selecione HTTP
URL: https://api.agentgrid.io/v1/mcp
ID do servidor: anima
Escolha o escopo global ou do workspace

{
  "servers": {
    "anima": {
      "type": "http",
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

[!NOTE] MCP no VS Code requer o GitHub Copilot. Consulte a documentação do VS Code.

Cursor

Cursor > Configurações > Configurações do Cursor > MCP > + Adicionar novo MCP server global:

{
  "mcpServers": {
    "anima": {
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

Clique em Conectar para autenticar. Consulte a documentação do Cursor.

Qualquer outro cliente

{
  "mcpServers": {
    "anima": {
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

Sem MCP? Use a CLI

A CLI da Anima executa as mesmas ferramentas a partir de um shell — sem necessidade de configurar um MCP server:

npx @animaapp/cli@latest login
npx @animaapp/cli@latest create -t p2c -p "SaaS dashboard with sidebar and analytics"

Como dar instruções ao seu agente

Criar algo novo

"Crie um dashboard de analytics SaaS com uma barra lateral, cards de KPI e um feed de atividades."

Seu agente cria um artefato, aguarda a compilação e entrega uma URL de pré-visualização ao vivo. Peça variações e ele pode gerar várias em paralelo para comparação.

Clonar um site ou implementar um design do Figma como um aplicativo ao vivo

"Clone stripe.com/payments em um aplicativo." "Transforme este frame do Figma em um site funcional: https://figma.com/design/..."

Editar um artefato existente

"O cabeçalho em https://app.agentgrid.io/artifacts/xyz está quebrado no mobile — corrija."

O agente clona o repositório git do artefato, corrige e faz push. Alterações de conteúdo sempre passam pelo git.

Implementar um design do Figma no seu próprio codebase

"Implemente este design do Figma no meu projeto: https://figma.com/design/..."

O agente gera código alinhado à sua stack e usa os snapshots de design retornados como referência visual.

Publicar

"Publique."

Publicar torna um aplicativo público para o mundo — não é necessário apenas para compartilhar, pois a URL do artefato já é visível.

Acesso ao design system (Enterprise)

"Implemente um formulário de login seguindo nosso design system, usando esta URL do Figma: ..."

A configuração do design system é feita com nossa equipe. Entre em contato para configurá-lo.

Boas práticas

Descreva a intenção, não o CSS. O Agent Grid é consciente de design; valores hexadecimais e dimensões em pixels em um prompt substituem isso e produzem resultados genéricos. Diga para que serve, para quem é e os 3–5 recursos que importam.

Seja específico ao implementar. "Implemente o formulário de login usando nossos componentes existentes Button e Input de src/components/ui" é melhor do que "implemente este design".

Divida designs grandes. Primeiro o cabeçalho, depois a grade de cards, depois o rodapé. Solicitações focadas são mais precisas.

Solução de problemas

Problemas comuns — geração assíncrona, validação de tipo de criação, expiração do token git, semântica de publicação — são abordados na referência de solução de problemas da skill.

MCP não reconhecido: confirme que o servidor está configurado na sua ferramenta e que a autenticação foi concluída. Problemas de autenticação: remova e adicione o servidor novamente, limpe os cookies e reinicie seu cliente.

O que há neste repositório

Caminho	Finalidade
`skills/anima/SKILL.md`	A skill que seu agente lê
`skills/anima/references/`	Referência de ferramentas, configuração, fluxo de trabalho git, exemplos, solução de problemas
`.claude-plugin/`	Plugin do Claude Code e manifestos do marketplace
`.mcp.json`	MCP server que o plugin instala
`server.json`	Entrada do MCP Registry
`anima/SKILL.md`	Espelho da skill, mantido em sincronia pela CI