# Univer Icons MCP

> Connectez votre AI Agent à Univer Icons MCP pour trouver des icônes et générer du code React ou Vue.

- Human documentation: [https://docs.univer.ai/fr-FR/guides/icons/ai](https://docs.univer.ai/fr-FR/guides/icons/ai)

- Agent Markdown: [https://docs.univer.ai/fr-FR/guides/icons/ai.md](https://docs.univer.ai/fr-FR/guides/icons/ai.md)

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

- Source: [icons/ai.fr-FR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/icons/ai.fr-FR.mdx)

---

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 :

| Paramètre        | Valeur                             |
| ---------------- | ---------------------------------- |
| Nom              | `univer-icons`                     |
| Transport        | Streamable HTTP                    |
| URL du serveur   | `https://docs.univer.ai/mcp/icons` |
| Authentification | Aucune clé API requise             |

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

| Outil          | Usage                                                                     |
| -------------- | ------------------------------------------------------------------------- |
| `search_icons` | Rechercher des icônes candidates selon leur usage                         |
| `get_icon`     | Consulter les imports, les exemples de code et les paramètres d’apparence |

## 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](https://docs.univer.ai/fr-FR/guides/icons/all-icons.md). 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](https://docs.univer.ai/fr-FR/guides/icons/react.md) ou [Intégrer dans Vue](https://docs.univer.ai/fr-FR/guides/icons/vue.md) pour les étapes d’implémentation.