21st.dev Magic

oficial

Crie componentes de UI refinados inspirados pelos melhores engenheiros de design da 21st.dev.

GitHub

5.9k

Experimente este MCPPatrocinado

O que você pode fazer com 21st Dev Magic MCP?

Gerar componentes de UI — Peça à sua IA para criar um novo componente com generate, produzindo variantes a partir de um prompt em linguagem natural quando o acesso à IA estiver habilitado.
Pesquisar no catálogo de componentes — Use search para encontrar componentes, temas ou modelos na 21st.dev e, em seguida, busque o código completo com get_component.
Refinar designs existentes — Solicite uma nova geração a partir de um prompt de refinamento via generate, mantendo o contexto do seu rascunho anterior.
Obter código pago — Peça o código de componentes premium por meio de get_component quando sua conta tiver acesso pago habilitado.
Verificar o status do acesso à IA — Consulte get_usage para confirmar se aiGenerationEnabled é verdadeiro antes de tentar a geração hospedada.

Documentação

Magic MCP → 21st MCP

Magic MCP agora é o 21st MCP. O servidor Magic MCP (@21st-dev/magic) foi substituído pelo unificado 21st MCP, instalado via 21st CLI — configuração em 21st.dev/mcp. Este pacote continua publicado como um proxy de compatibilidade fino para que configurações antigas continuem funcionando.

Instale o 21st MCP (recomendado)

npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex

Ou adicione manualmente — é um servidor MCP HTTP simples:

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}

Obtenha uma chave de API em 21st.dev/mcp.

Chaves antigas da API Magic foram redefinidas. Chaves emitidas pelo console antigo do Magic não funcionam mais em lugar nenhum. Gere uma nova chave em 21st.dev/mcp.

O que este pacote faz agora (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." ainda funciona: desde a v0.2.0, é um pequeno proxy stdio que encaminha cada mensagem MCP para o servidor 21st MCP. Entradas existentes de mcp.json que referenciam @21st-dev/magic continuam funcionando — mas agora falam com o mesmo servidor que o 21st CLI, com as ferramentas disponíveis para a conta autenticada.

A chave de API é aceita em todas as formas históricas: API_KEY="..." posicional, --API_KEY=..., /API_KEY:..., -API_KEY ..., ou as variáveis de ambiente TWENTY_FIRST_API_KEY / API_KEY_21ST.

Acesso à IA

O acesso a componentes do Builder não habilita a IA hospedada do 21st. O servidor lista generate e iterate_generation apenas quando o acesso à IA está habilitado. Verifique get_usage.aiGenerationEnabled; isso informa o acesso, não o saldo restante de créditos de IA. Com a IA desativada, use search e get_component, depois adapte o código com seu próprio agente de codificação. Rascunhos existentes permanecem legíveis.

Uma chamada de geração em cache ou legada pode retornar ai_subscription_required. Não tente novamente até que a IA esteja habilitada. Atualize a lista de ferramentas do cliente ou reconecte após habilitar a IA. O proxy encaminha a descoberta para o servidor, então versões existentes do proxy recebem esse comportamento sem uma atualização do npm.

server.json espelha a listagem oficial do registro dev.21st/mcp. A versão do registro é independente da versão deste pacote de compatibilidade.

Nomes antigos de ferramentas → novos nomes de ferramentas

O 21st MCP ainda aceita os nomes legados das ferramentas Magic e os traduz, então agentes que lembram os nomes antigos continuam funcionando. Prefira os novos nomes:

Ferramenta Magic legada	Ferramenta 21st MCP
`21st_magic_component_builder`	`generate`
`21st_magic_component_inspiration`	`get_inspiration`
`21st_magic_component_refiner`	`generate` (nova geração a partir do prompt de refinamento)
`logo_search`	`search_logo` (uma consulta por chamada)

O servidor atual expõe muito mais do que as quatro ferramentas antigas: busca de catálogo em componentes/temas/modelos, recuperação de código pago, favoritos, bibliotecas de equipe, geração de UI com variantes, gerenciamento de perfil e muito mais. Conecte-se e chame tools/list para ver as ferramentas disponíveis para sua conta.

Instalar como plugin

Este repositório também é empacotado como um plugin de agente (servidor MCP + uma habilidade de UI). Você não precisa esperar por nenhuma loja — este repositório É um marketplace, adicione-o diretamente:

# Claude Code
claude plugin marketplace add 21st-dev/magic-mcp   # then: /plugin install 21st

# Grok Build
grok plugin marketplace add 21st-dev/magic-mcp && grok plugin install 21st --trust

# Codex CLI
codex plugin marketplace add 21st-dev/magic-mcp    # then install "21st" from /plugins

Defina sua chave de API na variável API_KEY_21ST (chave gratuita em 21st.dev/mcp).

Listagens de loja:

Cursor / Grok Bot — instale "21st" do Cursor Marketplace, depois defina seu API_KEY_21ST em Plugins → Configurar. Obtenha uma chave em 21st.dev/mcp.
Grok Build — grok plugin install 21st --trust (do marketplace oficial do xAI), depois exporte API_KEY_21ST.
Claude Code — o repositório contém um manifesto .claude-plugin/: /plugin install de qualquer marketplace que liste este repositório, ou carregue localmente com claude --plugin-dir . e exporte API_KEY_21ST.

A configuração do plugin espera a chave de API na variável API_KEY_21ST em todos os clientes.

FAQ

Por que meu antigo Magic MCP parou de funcionar? O backend do Magic (magic.21st.dev) foi substituído pelo 21st MCP unificado, e todas as chaves antigas da API foram redefinidas por segurança. Atualize para uma nova chave em 21st.dev/mcp — sua configuração existente de @21st-dev/magic voltará a funcionar através deste proxy de compatibilidade, embora recomendemos mudar para npx @21st-dev/cli@latest init.

/ui ainda existe? Use linguagem natural: peça ao seu agente para buscar componentes no 21st (search), ou use a geração de UI hospedada (generate) quando a IA estiver habilitada. As antigas frases de gatilho /ui, /21 eram uma convenção das descrições das ferramentas legadas, não do protocolo.