21st.dev Magic

oficial

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

GitHub

5.6k

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

Pesquise no catálogo do 21st.dev — encontre componentes, temas ou templates descrevendo o que você precisa com a ferramenta search.
Gere componentes de UI a partir de um prompt — solicite um componente React que corresponda a uma descrição e receba código pronto para uso via generate.
Obtenha inspiração de componentes — recupere exemplos curados de componentes para um caso de uso específico com get_inspiration.
Consulte logotipos de empresas — encontre logotipos SVG pelo nome da empresa usando search_logo (uma consulta por chamada).
Recupere código pago — acesse componentes premium que você adquiriu através da plataforma.

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 permanece publicado como um proxy fino de compatibilidade 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-o 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 do Magic API 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 elas se comunicam com o mesmo servidor do 21st CLI, com o conjunto completo de ferramentas atual.

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.

Nomes de ferramentas antigos → novos nomes de ferramentas

O 21st MCP ainda aceita os nomes legados das ferramentas Magic e os traduz, para que agentes que lembram os nomes antigos continuem 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 no catálogo por componentes/temas/modelos, recuperação de código pago, favoritos, bibliotecas de equipe, geração de UI com variantes, gerenciamento de perfil e mais. Conecte-se e chame tools/list para ver o conjunto completo.

Perguntas Frequentes

Por que meu antigo Magic MCP parou de funcionar? O backend Magic (magic.21st.dev) foi substituído pelo 21st MCP unificado, e todas as chaves de API antigas 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 migrar para npx @21st-dev/cli@latest init.

O /ui ainda existe? Use linguagem natural: peça ao seu agente para pesquisar no 21st por componentes (search), ou gerar nova UI (generate). As antigas frases de gatilho /ui, /21 eram uma convenção das descrições das ferramentas legadas, não do protocolo.