Univer Icons MCP
Conecta tu AI Agent a Univer Icons MCP para encontrar iconos y generar código React o Vue.
Univer Icons MCP permite que tu AI Agent encuentre iconos y consulte cómo utilizar sus componentes. Describe una acción, como copiar el contenido seleccionado o insertar una imagen. Tu AI Agent puede elegir un icono y generar código React o Vue.
Conectar tu AI Agent
Model Context Protocol (MCP) permite que un AI Agent se conecte a herramientas externas. Añade un servidor en un AI Agent compatible con MCP remoto con esta configuración:
| Ajuste | Valor |
|---|---|
| Nombre | univer-icons |
| Transporte | Streamable HTTP |
| URL del servidor | https://docs.univer.ai/mcp/icons |
| Autenticación | No requiere clave API |
Guarda y activa el servidor. Tu AI Agent podrá utilizar estas herramientas:
| Herramienta | Uso |
|---|---|
search_icons | Buscar iconos candidatos según su finalidad |
get_icon | Consultar importaciones, ejemplos de código y ajustes de apariencia |
Describir el icono que necesitas
Incluye el framework, la acción que representa el icono y los requisitos de tamaño o color. Por ejemplo:
Usa Univer Icons MCP para elegir un icono de un solo color para un botón de una barra de herramientas React que copie el contenido seleccionado. El icono debe medir 20 px, heredar el color del texto del botón y el botón debe tener un nombre accesible.
Para un proyecto Vue, puedes pedir:
Usa Univer Icons MCP para elegir un icono de dos colores para un botón de color de relleno en Vue 3. Usa gris oscuro como color principal y gris claro como acento. Genera la importación y el código del componente.
Para ajustar el resultado, describe el cambio: «Usa un icono de un solo color» o «Amplíalo a 32 px manteniendo los trazos finos».
Usar el icono en tu proyecto
Busca el nombre del componente devuelto en la vista previa de iconos. Comprueba que su forma, tamaño y colores encajen en tu interfaz. Instala el paquete del framework y conecta los eventos del botón con la lógica de tu aplicación.
Sigue Integrar en React o Integrar en Vue para implementar la integración.
¿Cómo es esta guía?