Magic MCP: serviço MCP para gerar componentes modernos de UI

Introdução geral

Mágica MCP O 21st.dev é uma ferramenta orientada por IA desenvolvida pela equipe do 21st.dev e projetada para desenvolvedores front-end. Ela gera componentes modernos de interface do usuário em tempo real a partir de descrições de linguagem natural e é integrada a ambientes de desenvolvimento como Cursor, WindSurf e VS Code (plug-in Cline). Os usuários inserem requisitos simples, como "Criar uma barra de navegação moderna", e o Magic MCP gera um componente de interface do usuário moderno com base no Reagir código de componente com estilos CSS Tailwind e suporte a TypeScript. A ferramenta é totalmente de código aberto, hospedada no GitHub e de uso gratuito para os desenvolvedores. Oferece visualizações ao vivo e uma rica biblioteca de componentes para prototipagem rápida ou desenvolvimento em equipe.

Lista de funções

• componente de geração de linguagem naturalDescrição: descreva os requisitos em texto e gere automaticamente o código do componente React.
• Suporte a vários IDEsIntegração perfeita com Cursor, WindSurf e VS Code (Cline Beta).
• Biblioteca de componentes modernosoferece um grande número de componentes personalizáveis inspirados no 21st.dev.
• Visualização em tempo realVisualização instantânea do efeito ao gerar componentes para facilitar a depuração.
• Suporte a TypeScriptCódigo de segurança: Garanta que o código gerado seja seguro para o tipo e reduza os erros.
• Integração SVGLÍcones e logotipos de marcas profissionais integrados, incorporados diretamente ao componente.
• Aprimoramentos de componentes (em breve)Adicionar recursos avançados e animações aos componentes existentes.

Usando a Ajuda

Processo de instalação

O Magic MCP precisa ser instalado em um IDE compatível, conforme mostrado no exemplo a seguir Cursor Por exemplo, outros IDEs (por exemplo WindSurf (ou VS Code + Cline) é instalado de forma semelhante:

1. Preparação do ambiente
   Certifique-se de que seu computador tenha o Node.js (recomenda-se a versão LTS mais recente, por exemplo, v22) e o npm instalados, que é a base para a execução do Magic MCP.
2. Obtendo a chave da API
   Visite o site 21st.dev, faça login e vá para a página "API", gere uma nova TWENTY_FIRST_API_KEY. Você pode experimentá-lo sem uma chave, mas a funcionalidade é limitada.
3. Instalação do Magic MCP
   Abra um terminal e execute o seguinte comando:

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"你的API密钥\"}"

comandante-em-chefe (militar) 你的API密钥 Substitua a chave pela que foi obtida no site oficial.

4. Configurando o Cursor IDE
   Abra Configurações no Cursor, localize a opção Protocolo de contexto de modelo (MCP) e adicione a seguinte configuração:

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cursor"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

Salve e reinicie o IDE.

5. Verificar a instalação
   Na janela de bate-papo do cursor, digite /uiSe você receber a mensagem "Creating Components with Magic MCP" (Criando componentes com o Magic MCP), a instalação foi bem-sucedida.

Configuração do WindSurf

existir ~/.codeium/windsurf/mcp_config.json Adicionar em:

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "windsurf"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

Código VS + Configuração do Cline (Beta)

existir Cline é adicionado à configuração do MCP do

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cline"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

Como usar os principais recursos

Geração de componentes da interface do usuário

• procedimento::
  1. Na janela de bate-papo do IDE, digite /ui, seguido de um requisito, como /ui 创建一个带搜索功能的导航栏.
  2. O Magic MCP gera um código de componente React que é exibido diretamente na janela.
  3. Clique em "Insert Code" (Inserir código) e o código será automaticamente adicionado ao arquivo de projeto.
• Descrição detalhada::
  O componente usa estilos CSS Tailwind e TypeScript por padrão, e o código pode ser ajustado manualmente. Quanto mais específica for a descrição da entrada, mais relevante será o resultado.
• exemplo típico::
  Entrada:/ui 一个蓝色按钮
  Saída:

  const BlueButton = () => {
  return (
  <button className="bg-blue-500 text-white px-4 py-2 rounded">
  点击我
  </button>
  );
  };
  export default BlueButton;
  

Visualização em tempo real

• procedimento::
  1. Depois de gerar o componente, o IDE exibe uma janela de visualização que mostra o efeito do componente.
  2. Depois de modificar o código, a visualização é atualizada automaticamente.
• Descrição detalhada::
  Se o projeto local não estiver em execução, a visualização dependerá da renderização integrada do Magic MCP, que pode ser ligeiramente diferente do resultado real.

Uso de ícones SVGL

• procedimento::
  1. importação /logo 品牌名Por exemplo /logo Twitter.
  2. A ferramenta retorna o código do ícone no formato SVG ou JSX.
  3. Cópia para uso em um componente.
• exemplo típico::
  Entrada:/logo GitHub
  Saída:

  const GitHubIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
  <!-- GitHub SVG 路径 -->
  </svg>
  );
  

Detalhes do processo de operação

1. Início de projetos
   Certifique-se de que o projeto de front-end tenha sido criado (por exemplo, com Create React App). O magic MCP gera código com base na estrutura do projeto.
2. requisito de entrada
   Use descrições em linguagem natural no IDE, como "uma lista de cartões responsivos". Descrições mais claras levam a resultados mais precisos.
3. Código de ajuste
   Verifique o código após a geração e modifique o estilo ou a lógica para atender aos requisitos.
4. teste operacional
   Salve o código e execute o projeto (por exemplo npm start), confirmando o efeito.

advertência

• Número limitado de gerações por mês; após exceder o limite, é necessário fazer upgrade para o plano pago.
• Recomenda-se que os componentes complexos sejam divididos em várias gerações de requisitos simples.
• Participe da comunidade do Discord para fazer perguntas.

cenário do aplicativo

1. Prototipagem rápida
   Quando os desenvolvedores precisam mostrar efeitos de interface do usuário, o Magic MCP economiza tempo ao gerar componentes rapidamente.
2. Reutilização do código da equipe
   As equipes compartilham componentes por meio do 21st.dev para padronizar o estilo e aumentar a eficiência.
3. Aprender tecnologias de front-end
   Os iniciantes o utilizam para gerar código padrão, aprender à medida que mudam e começar a usar o React rapidamente.

QA

1. O Magic MCP é gratuito?
   Sim, ele é de código aberto no GitHub, gratuito para a funcionalidade básica, com chaves de API e planos pagos necessários para recursos avançados.
2. O código gerado está disponível comercialmente?
   Sim, o código é de propriedade do usuário e pode ser usado em qualquer projeto.
3. Quais IDEs são compatíveis?
   Atualmente, é compatível com Cursor, WindSurf e VS Code (Cline Beta), podendo ser ampliado no futuro.