Magic MCP: servicio MCP para generar componentes de interfaz de usuario modernos

Introducción general

Magia MCP 21st.dev es una herramienta basada en IA desarrollada por el equipo de 21st.dev y diseñada para desarrolladores front-end. Genera componentes de interfaz de usuario modernos sobre la marcha a partir de descripciones en lenguaje natural y se integra en entornos de desarrollo como Cursor, WindSurf y VS Code (plugin de Cline). Los usuarios introducen requisitos sencillos, como "Crear una barra de navegación moderna", y Magic MCP genera un componente de interfaz de usuario moderno basado en la descripción en lenguaje natural. Reaccione con estilos CSS de Tailwind y compatibilidad con TypeScript. La herramienta es completamente de código abierto, alojada en GitHub, y de uso gratuito para los desarrolladores. Ofrece previsualizaciones en vivo y una rica biblioteca de componentes para la creación rápida de prototipos o el desarrollo en equipo.

Lista de funciones

• componente de generación de lenguaje natural: Describa los requisitos en texto y genere automáticamente el código del componente React.
• Compatible con varios IDEIntegración perfecta con Cursor, WindSurf y VS Code (Cline Beta).
• Biblioteca de componentes modernos: ofrece un gran número de componentes personalizables inspirados en 21st.dev.
• Vista previa en tiempo realVisualización instantánea del efecto al generar componentes para facilitar la depuración.
• Compatibilidad con TypeScript: Garantiza que el código generado sea seguro para los tipos y reduce los errores.
• Integración de SVGLIconos y logotipos de marca profesionales integrados directamente en el componente.
• Mejoras en los componentes (próximamente): Añade funciones avanzadas y animaciones a los componentes existentes.

Utilizar la ayuda

Proceso de instalación

Magic MCP necesita ser instalado en un IDE soportado, como se muestra en el siguiente ejemplo Cursor Por ejemplo, otros IDEs (e.g. WindSurf (o VS Code + Cline) se instala de forma similar:

1. Preparar el entorno
   Asegúrese de que su ordenador tiene instalado Node.js (se recomienda la última versión LTS, por ejemplo v22) y npm, que es la base para ejecutar Magic MCP.
2. Obtener la clave API
   Visite el sitio web 21st.dev, inicie sesión y vaya a la página "API", y genere una nueva TWENTY_FIRST_API_KEY. Puedes probarlo sin llave, pero la funcionalidad es limitada.
3. Instalación de Magic MCP
   Abra un terminal y ejecute el siguiente comando:

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

comandante en jefe (militar) 你的API密钥 Sustituya la clave por la obtenida en el sitio web oficial.

4. Configuración del Cursor IDE
   Abra Configuración en Cursor, busque la opción Protocolo de Contexto de Modelo (MCP) y añada la siguiente configuración:

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

Guarde y reinicie el IDE.

5. Verificar la instalación
   En la ventana de chat Cursor escriba /uiSi aparece el mensaje "Crear componentes con Magic MCP", la instalación se ha realizado correctamente.

Configuración de WindSurf

existe ~/.codeium/windsurf/mcp_config.json Añade:

{
"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 + Configuración Cline (Beta)

existe Cline se añade a la configuración MCP del

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

Cómo utilizar las principales funciones

Generación de componentes de interfaz de usuario

• procedimiento::
  1. En la ventana de chat del IDE escriba /uiseguido de un requisito, como /ui 创建一个带搜索功能的导航栏.
  2. Magic MCP genera un código de componente React que se muestra directamente en la ventana.
  3. Haga clic en "Insertar código" y el código se añadirá automáticamente al archivo del proyecto.
• Descripción detallada::
  El componente utiliza estilos CSS y TypeScript de Tailwind por defecto, y el código puede ajustarse manualmente. Cuanto más específica sea la descripción de entrada, más relevante será el resultado.
• ejemplo típico::
  Entrada:/ui 一个蓝色按钮
  Salida:

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

Vista previa en tiempo real

• procedimiento::
  1. Después de generar el componente, el IDE muestra una ventana de previsualización que muestra el efecto del componente.
  2. Tras modificar el código, la vista previa se actualiza automáticamente.
• Descripción detallada::
  Si el proyecto local no se está ejecutando, la vista previa se basa en el renderizado integrado de Magic MCP, que puede diferir ligeramente del resultado real.

Uso de iconos SVGL

• procedimiento::
  1. importación /logo 品牌名Por ejemplo /logo Twitter.
  2. La herramienta devuelve el código del icono en formato SVG o JSX.
  3. Copia para utilizar en un componente.
• ejemplo típico::
  Entrada:/logo GitHub
  Salida:

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

Detalles del proceso operativo

1. Inicio de proyectos
   Asegúrese de que se ha creado el proyecto front-end (por ejemplo, con Create React App). magic MCP genera código basado en la estructura del proyecto.
2. requisito de entrada
   Utilice descripciones en lenguaje natural en el IDE, como "una lista de tarjetas de respuesta". Las descripciones más claras conducen a resultados más precisos.
3. Código de ajuste
   Compruebe el código tras la generación y modifique el estilo o la lógica para cumplir los requisitos.
4. prueba de funcionamiento
   Guarde el código y ejecute el proyecto (por ejemplo npm start), lo que confirma el efecto.

advertencia

• Número limitado de generaciones al mes, una vez superado el límite, es necesario pasar al plan de pago.
• Se recomienda dividir los componentes complejos en varias generaciones de requisitos simples.
• Únete a la comunidad Discord para hacer preguntas.

escenario de aplicación

1. Creación rápida de prototipos
   Cuando los desarrolladores necesitan mostrar efectos de interfaz de usuario, Magic MCP ahorra tiempo generando componentes rápidamente.
2. Reutilización del código en equipo
   Los equipos comparten componentes a través de 21st.dev para estandarizar el estilo y mejorar la eficacia.
3. Aprender tecnologías front-end
   Los principiantes lo utilizan para generar código estándar, aprender a medida que cambian y empezar a utilizar React rápidamente.

CONTROL DE CALIDAD

1. ¿Es gratis Magic MCP?
   Sí, es de código abierto en GitHub, gratuito para las funciones básicas, con claves API y planes de pago necesarios para las funciones avanzadas.
2. ¿Está disponible comercialmente el código generado?
   Sí, el código es propiedad del usuario y puede utilizarse para cualquier proyecto.
3. ¿Qué IDEs son compatibles?
   Actualmente soporta Cursor, WindSurf y VS Code (Cline Beta), puede ser extendido en el futuro.