> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/creer-avec-lia/overview.md).

# Aperçu

{% hint style="warning" %}
🚧 **Accès anticipé.** Build with AI est déployé progressivement et s'améliore à chaque version. Quelque chose n'est pas clair, manque ou ne fonctionne pas ? [Dites-le-nous](/experience-cloud/experience-cloud-fr/aide/how-do-i-contact-support.md): vos retours déterminent directement ce que nous améliorerons ensuite.
{% endhint %}

Décrivez ce que vous voulez en langage courant, et votre assistant IA (Claude, Cursor ou GitHub Copilot) ajoute de vrais composants Avonni fonctionnels à vos pages de site Experience. Deux outils rendent cela possible :

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>🧠 Serveur Avonni MCP</strong></td><td>Un service de documentation hébergé qui donne à l’assistant une connaissance précise et toujours à jour de l’ensemble des 44 composants Experience Cloud : leurs propriétés, leurs interactions et leur style.</td><td></td></tr><tr><td><strong>🛠️ Compétences Avonni</strong></td><td>Des workflows étape par étape qui apprennent à l’assistant comment ajouter des composants Avonni à une page de site et les configurer correctement.</td><td></td></tr></tbody></table>

{% hint style="success" %}
**En bref : les compétences indiquent à l’agent quoi faire ; le MCP lui dit ce qui est vrai.** Utiliser l’un sans l’autre donne de moins bons résultats. Installez les deux.
{% endhint %}

## Pourquoi vous avez besoin des deux

Les assistants IA sont entraînés sur des données publiques, donc leurs connaissances d’Avonni sont incomplètes et obsolètes. Livrés à eux-mêmes, ils inventent des noms de propriétés, devinent les types d’interaction et produisent du contenu de page qu’Experience Builder refuse. Le résultat semble plausible, mais ne fonctionne pas.

Les deux outils résolvent deux moitiés différentes du problème :

|                        | Ce qu’il fournit                                                                                                                                                          | Ce qu’il corrige                                                                                                    |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| **Avonni MCP**         | *Connaissance.* Documentation précise des composants, des interactions et du style pour le `package experience` , ainsi que les `packages dynamiques`, `flow`, et `lwc` . | Fini les propriétés ou noms d’interaction inventés. L’assistant consulte la vraie configuration au lieu de deviner. |
| **Compétences Avonni** | *Processus.* Des workflows pour créer et mettre à jour chaque type d’artefact Avonni, plus `avonni-architect`, qui coordonne les cas d’usage multi-artefacts.             | L’assistant produit un contenu de page valide et suit le bon ordre des opérations au lieu d’improviser.             |

## Rapide aujourd’hui, maintenable demain

Un assistant IA pourrait aussi créer rapidement les fonctionnalités de votre portail sous forme de code personnalisé. La différence apparaît après la démonstration : **le code personnalisé vous appartient et doit être maintenu pour toujours, et sur un site orienté client, ce risque est public.** Les composants Avonni évitent ce piège :

<table><thead><tr><th width="280"></th><th></th></tr></thead><tbody><tr><td>✍️ <strong>Configuration, pas code</strong></td><td>Une invite produit du contenu de page : quels composants, quelles données, quelles interactions, avec l’identité visuelle de votre site via des jetons de design. Aucun JavaScript personnalisé ne s’exécute devant vos clients.</td></tr><tr><td>🛡️ <strong>La complexité est prise en charge par Avonni</strong></td><td>Data Table, Kanban, Calendar et le reste vivent dans le package géré : testés, versionnés, mis à jour à chaque version. Mettez à jour le package, et ce que l’IA a construit continue de fonctionner.</td></tr><tr><td>🧩 <strong>Vos créateurs de sites gardent le contrôle</strong></td><td>Ce que l’IA construit est une page Experience Builder normale, utilisant les mêmes composants que votre équipe configure déjà manuellement. N’importe qui peut l’ouvrir, la comprendre et la faire évoluer.</td></tr></tbody></table>

## Ce que l’assistant produit

La `avonni-experience-components` compétence agit sur le fichier de contenu de votre page de site. Elle ajoute le composant Avonni à la page et configure ses données, son apparence et ses interactions. Rien n’est déployé : vous examinez le fichier, vous le déployez avec votre processus habituel, puis vous ouvrez la page dans Experience Builder pour vérifier le résultat et publier le site.

## D’un seul composant à un cas d’usage complet

Les besoins réels s’arrêtent rarement à un seul artefact. La `avonni-architect` compétence transforme un résultat métier en plan, puis invoque les bonnes compétences dans l’ordre des dépendances afin que chaque élément soit correctement relié aux autres.

{% hint style="info" %}
**Exemple :** *"Ajoutez une liste de cas à la page de mon portail d’assistance, ainsi qu’un flux d’écran pour créer un cas qui s’ouvre depuis un bouton."* L’architecte construit d’abord le flux, puis ajoute les composants à la page avec le bouton configuré pour ouvrir ce flux.
{% endhint %}

<a class="button primary" data-icon="plug">Configurez-le en quelques minutes</a>

## Dans cette section


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/creer-avec-lia/overview.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.