Magic UI MCP MCP — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Três ferramentas no registro Live Magic UI
Pesquisa de componentes de linguagem natural (tipo, consulta, paginação)
Retorna comandos de instalação e trechos de uso completos
Nenhum pacote estático — sempre lê o registro atual
Funciona em todos os principais clientes MCP

Demo ao vivo

Como fica na prática

magic-ui-mcp.replay ▶ pronto

0/0

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "magic-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "magic-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@magicuidesign/mcp@latest"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add magic-ui-mcp -- npx -y @magicuidesign/mcp@latest

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Magic UI MCP

Adicionar uma seção de herói animado a uma página inicial do Next.js

👤 Desenvolvedores e designers de front-end criando páginas de marketing ⏱ ~15 min beginner

Quando usar: Você precisa de uma animação de herói refinada e não quer navegar pelos documentos sozinho.

Pré-requisitos

Projeto Next.js ou React — npx create-next-app@latest
Tailwind + shadcn/ui — Magic UI se baseia neles; instale se estiver faltando

Fluxo

Peça naturalmente

Adicione uma animação de desfoque e fade-in para H1 e CTA na seção meu herói.✓ Copiado

→ O agente chama searchRegistryItems para 'blur fade' e retorna o componente
Instalar + conectar

Instale o componente e cole-o em app/page.tsx substituindo o herói atual.✓ Copiado

→ O comando de instalação é executado; importações adicionadas; herói atualizado
Tempo de ajuste

Entrada mais lenta — atraso de 600ms entre H1 e CTA.✓ Copiado

→ Adereços atualizados in-line

Resultado: Uma animação de herói digna de um navio sem sair do editor.

Armadilhas

Misturando Magic UI com uma configuração não Tailwind — A maioria dos componentes assume classes Tailwind; portar para módulos CSS somente se você estiver pronto para esse trabalho

Combine com: mcp-echarts

Procure todos os componentes do Magic UI por categoria

👤 Designers explorando a biblioteca ⏱ ~10 min beginner

Quando usar: Você está no início do design e deseja digitalizar o que está disponível.

Fluxo

Listar por tipo

Liste todos os componentes do Magic UI do tipo 'animação' - limite 30.✓ Copiado

→ listRegistryItems retorna nomes + títulos
Expanda os interessantes

Mostre-me os detalhes da marquise, texto da aurora e borda brilhante.✓ Copiado

→ Detalhes completos incluindo instalação + uso por componente

Resultado: Uma pequena lista de componentes que vale a pena experimentar na próxima página.

Substitua uma linha de logotipo estático por uma marca de logotipos

👤 Proprietários de marketing/página de destino ⏱ ~10 min beginner

Quando usar: Sua linha 'Confiável por' parece desatualizada – uma marca de rolagem adiciona movimento.

Fluxo

Encontre a marquise

Transforme a linha 'Confiável em' em uma marca de logotipos.✓ Copiado

→ O agente escolhe o componente letreiro e o adapta
Pausa ao passar o mouse

Pause o letreiro ao passar o mouse para acessibilidade.✓ Copiado

→ ajuste de prop/classe; preserva usuários com movimento reduzido

Resultado: Linha de letreiro que parece moderna e respeita as preferências de movimento.

Armadilhas

Ignorando prefere movimento reduzido — Os componentes do Magic UI normalmente o respeitam; não substitua a menos que você conheça os usuários

Combine com: motion-dev-animations-skill

Combinações

Combine com outros MCPs para 10× de alavancagem

magic-ui-mcp + motion-dev-animations-skill

Magic UI para componentes pré-construídos, motion.dev para animações personalizadas

Use o desfoque do Magic UI para o herói e, em seguida, motion.dev para uma paralaxe vinculada à rolagem personalizada abaixo.✓ Copiado

magic-ui-mcp + figma

Pegue um design Figma e procure o componente Magic UI mais próximo

Esta seção do cartão Figma se parece com a grade bento do Magic UI. Instale-o e preencha o texto.✓ Copiado

magic-ui-mcp + claude-code-design-skills

Fluxo Figma-to-code + melhorias no Magic UI

Converta o Figma para React; onde fizer sentido, use componentes Magic UI em vez de componentes scratch.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
listRegistryItems	kind?, query?, limit?, offset?	Navegue ou paginar os componentes disponíveis	1 registry fetch
searchRegistryItems	query + pagination	Pesquisa de componentes de linguagem natural	1 registry fetch
getRegistryItem	id/name	Antes de instalar, para ver exatamente o que você obterá	1 registry fetch

Custo e limites

O que custa rodar

Cota de API: O registro é uma busca pública – sem problemas de taxa em uso normal
Tokens por chamada: Pequenos metadados por chamada
Monetário: Livre
Dica: Use listRegistryItems com filtro de tipo; não busque todos os itens apenas para navegar.

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Sem credenciais

Saída de dados: Buscas somente leitura para o registro do Magic UI. Não há gravações em lugar nenhum.

Qualquer componente que você instalar puxa o código para o seu projeto – leia o arquivo gerado uma vez antes de confirmar, assim como qualquer dependência.

Solução de problemas

Erros comuns e correções

Ferramenta retorna array vazio

O registro pode estar bloqueado para acessibilidade em sua rede; tente novamente e confirme o DNS para resolver magicui.design.

Verificar: curl -I https://magicui.design/r/index.json

O componente é instalado, mas parece sem estilo

Configuração do Tailwind ou variáveis CSS ausentes - siga a configuração única do Magic UI (globals.css + tailwind.config.ts).

Verificar: Check tailwind.config.ts for magicui plugin

Animação gagueja

Provavelmente uma cascata de re-renderização. Memoize componentes pais; confirme que não há lixo no layout.

Verificar: Chrome DevTools Performance → Frames

Alternativas

Magic UI MCP vs. outros

Alternativa	Quando usar	Troca
motion-dev-animations-skill	Você deseja uma lógica de movimento personalizada, não uma biblioteca de componentes	Mais trabalho; mais controle
figma	Você tem projetos existentes no Figma para portar	Direção diferente: design → código, não biblioteca primeiro
claude-code-design-skills	Você está fazendo Figma-to-code, não adoção de biblioteca	Abrange uma parte diferente do pipeline

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills