21st-dev Magic MCP Server

O que faz o MCP Server “21st-dev Magic”?

O 21st-dev Magic MCP Server é uma plataforma baseada em IA projetada para ajudar desenvolvedores a criar componentes de UI belos e modernos instantaneamente a partir de descrições em linguagem natural. Atuando como uma ponte entre assistentes de IA e seu ambiente de desenvolvimento, permite geração de UI sem atritos, pré-visualização em tempo real e integração de ativos e logos profissionais de marca. Com suporte para IDEs populares como Cursor, Windsurf, VSCode e Cline, ele agiliza o fluxo de trabalho frontend permitindo que o usuário descreva a interface desejada e o Magic MCP Server gera e insere componentes sofisticados e personalizáveis diretamente no projeto. Seu objetivo é aumentar a produtividade do desenvolvedor automatizando tarefas repetitivas de UI e integrando criatividade movida por IA ao processo de desenvolvimento diário.

Lista de Prompts

Não há templates de prompt explícitos listados na documentação fornecida do repositório.

Lista de Recursos

Não há recursos explícitos listados na documentação fornecida do repositório.

Lista de Ferramentas

Não há ferramentas explícitas listadas na documentação fornecida do repositório ou em server.py (ou equivalente).

Casos de Uso deste MCP Server

• Geração de UI por IA: Crie instantaneamente componentes de UI modernos descrevendo-os em linguagem natural, economizando tempo com boilerplate e design.
• Aprimoramento de Componentes: Atualize componentes de UI existentes com recursos avançados e animações (função em breve), otimizando o desenvolvimento iterativo.
• Integração de Ativos de Marca: Acesse e integre facilmente ativos de marca e logos profissionais no frontend, mantendo a consistência e profissionalismo do design.
• Pré-visualização em Tempo Real: Veja os componentes à medida que são criados, permitindo prototipagem rápida e ciclos de feedback.
• Suporte Multi-IDE: Use o mesmo fluxo de trabalho de geração de UI por IA em Cursor, Windsurf, VSCode e Cline, garantindo experiências de desenvolvimento consistentes.

Como configurar

Windsurf

1. Pré-requisito: Instale o Node.js (última LTS).
2. Obtenha sua chave de API: Gere em Console Magic 21st.dev.
3. Abra o arquivo de configuração: Edite ~/.codeium/windsurf/mcp_config.json.
4. Adicione o Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Salve e reinicie o Windsurf para aplicar as alterações.

Protegendo Chaves de API: Use variáveis de ambiente na sua configuração:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Claude

1. Pré-requisito: Instale o Node.js (última LTS).
2. Obtenha sua chave de API: Gere em Console Magic 21st.dev.
3. Abra o arquivo de configuração: Edite ~/.claude/mcp_config.json.
4. Adicione o Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Salve e reinicie o Claude para aplicar as alterações.

Protegendo Chaves de API:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cursor

1. Pré-requisito: Instale o Node.js (última LTS).
2. Obtenha sua chave de API: Gere em Console Magic 21st.dev.
3. Abra o arquivo de configuração: Edite ~/.cursor/mcp.json.
4. Adicione o Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Salve e reinicie o Cursor para aplicar as alterações.

Protegendo Chaves de API:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cline

1. Pré-requisito: Instale o Node.js (última LTS).
2. Obtenha sua chave de API: Gere em Console Magic 21st.dev.
3. Abra o arquivo de configuração: Edite ~/.cline/mcp_config.json.
4. Adicione o Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Salve e reinicie o Cline para aplicar as alterações.

Protegendo Chaves de API:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Como usar esse MCP em fluxos

Usando MCP no FlowHunt

Para integrar servidores MCP ao seu fluxo de trabalho FlowHunt, comece adicionando o componente MCP ao fluxo e conectando-o ao seu agente de IA:

Clique no componente MCP para abrir o painel de configuração. Na seção de configuração do MCP do sistema, insira os detalhes do seu servidor MCP usando este formato JSON:

{
  "magic-mcp": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Após configurar, o agente de IA agora poderá usar esse MCP como ferramenta com acesso a todas as suas funções e capacidades. Lembre-se de trocar "magic-mcp" pelo nome real do seu servidor MCP e substituir a URL pela URL do seu próprio MCP.

Visão Geral

Suporte a Roots não especificado no repositório.

Nossa opinião

O 21st-dev Magic MCP Server apresenta excelente documentação de instalação e configuração para múltiplas plataformas, com casos de uso reais claros e uma grande base de usuários ativa. Porém, a ausência de documentação explícita para prompts MCP, recursos, ferramentas e conceitos avançados como Roots e Sampling limita sua transparência para usuários avançados e integradores.

Pontuação MCP

Avaliação: 6/10

O 21st-dev Magic MCP Server pontua alto em usabilidade, atividade e clareza de configuração, mas perde pontos pela falta de detalhes técnicos avançados e primitivos MCP explícitos na documentação pública.