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:

AjusteValor
Nombreuniver-icons
TransporteStreamable HTTP
URL del servidorhttps://docs.univer.ai/mcp/icons
AutenticaciónNo requiere clave API

Guarda y activa el servidor. Tu AI Agent podrá utilizar estas herramientas:

HerramientaUso
search_iconsBuscar iconos candidatos según su finalidad
get_iconConsultar 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?

© 2026 DreamNum Co., Ltd.