Univer Icons MCP

Univer Icons MCP permet à votre AI Agent de rechercher des icônes et de consulter l’utilisation de leurs composants. Décrivez une action, comme copier le contenu sélectionné ou insérer une image. Votre AI Agent peut choisir une icône et générer du code React ou Vue.

Connecter votre AI Agent

Model Context Protocol (MCP) permet à un AI Agent de se connecter à des outils externes. Dans un AI Agent compatible avec MCP à distance, ajoutez un serveur avec les paramètres suivants :

Enregistrez et activez le serveur. Votre AI Agent peut alors utiliser ces outils :

Décrire l’icône souhaitée

Indiquez votre framework, l’action représentée par l’icône et vos contraintes de taille ou de couleur. Par exemple :

Utilise Univer Icons MCP pour choisir une icône monochrome destinée à un bouton de barre d’outils React qui copie le contenu sélectionné. L’icône doit mesurer 20 px et hériter de la couleur du texte du bouton. Donne au bouton un nom accessible.

Pour un projet Vue, vous pouvez demander :

Utilise Univer Icons MCP pour choisir une icône bicolore destinée à un bouton de couleur de remplissage dans Vue 3. Utilise du gris foncé comme couleur principale et du gris clair comme accent. Génère l’import et le code du composant.

Pour affiner le résultat, décrivez le changement : « Utilise une icône monochrome » ou « Agrandis-la à 32 px en conservant des traits fins ».

Utiliser l’icône dans votre projet

Recherchez le nom du composant renvoyé dans l’aperçu des icônes. Vérifiez que sa forme, sa taille et ses couleurs conviennent à votre interface. Installez le paquet de votre framework et reliez les événements du bouton à la logique de votre application.

Suivez Intégrer dans React ou Intégrer dans Vue pour les étapes d’implémentation.