Configuration

Installez les compétences Avonni et connectez le serveur Avonni MCP à votre assistant IA.

🚧 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: vos retours déterminent directement ce que nous améliorerons ensuite.

Deux choses à connecter : le Compétences Avonni et le serveur MCP Avonni. Un ensemble d’exigences d’abord, puis choisissez votre client.

Prérequis

Les skills écrivent des fichiers sur votre machine et interagissent avec votre organisation Salesforce, donc chaque client a besoin de la même base, y compris l’application de bureau Claude :

• Node.js 18 ou version ultérieure. Les skills exécutent des scripts locaux ; sans Node.js, ils ne peuvent pas s’exécuter du tout.
• Salesforce CLI, authentifiée auprès de votre organisation. Il alimente les étapes tenant compte de l’organisation (recherche de documentation sur les objets et les champs, requêtes sur les versions des composants, récupération et enregistrement du contenu du site) et c’est ainsi que vous déployez ce que l’assistant produit. Connectez votre organisation avec :

sf org login web

Faites cela en premier. Sans Node.js et une Salesforce CLI authentifiée, les skills et le serveur MCP n’ont rien à utiliser : l’assistant peut lire la documentation, mais il ne peut rien générer ni enregistrer d’exploitable dans votre organisation.

Choisissez votre client

🖥️ Claude Code (application de bureau ou terminal)

1. Installez les skills

Depuis le répertoire de votre projet (dans l’application de bureau, ouvrez d’abord le dossier de votre projet), exécutez :

npx skills add avonni/skills

Cela télécharge et installe automatiquement les cinq skills dans la configuration de votre projet.

2. Connectez le serveur MCP

Le serveur est hébergé : rien n’est à installer ni à exécuter localement. Exécutez :

claude mcp add --transport http avonni https://mcp.avonnicomponents.com

C’est toute la configuration.

⌨️ Cursor, VS Code, GitHub Copilot

1. Installez les skills

Depuis le répertoire de votre projet, exécutez :

npx skills add avonni/skills

Cela télécharge et installe automatiquement les cinq skills dans la configuration de votre projet.

2. Connectez le serveur MCP

Ajoutez une entrée de configuration JSON, par exemple dans .cursor/mcp.json ou .vscode/mcp.json:

{
    "mcpServers": {
        "avonni": {
            "url": "https://mcp.avonnicomponents.com"
        }
    }
}

Consultez la documentation de votre assistant pour connaître le nom et l’emplacement exacts du fichier. La structure de l’entrée reste la même partout : un nom et une URL.

Contenu du jeu de skills

Les cinq skills se trouvent dans le dépôt public avonni/skills dépôt :

• avonni-experience-components, pour les composants Avonni sur les pages Experience Site
• avonni-architect, le coordinateur qui planifie et construit des cas d’utilisation complets
• avonni-flow-components, pour les composants d’écran Avonni Flow dans les flux d’écran
• avonni-dynamic-components, pour les composants dynamiques sur les pages Lightning
• avonni-lwc-components, pour les composants Avonni dans le code LWC

Conservez avonni-architect dans l’ensemble

Décrivez un résultat métier ("une page de portail d’assistance avec une liste de cas et un flux pour créer un cas") et l’architecte planifie l’architecture, puis exécute les skills appropriés dans l’ordre des dépendances afin que chaque élément soit correctement relié aux autres. Il a besoin que les autres skills soient installés avec lui pour effectuer son travail.

Vérifiez la configuration

Demandez à votre assistant : "Liste les composants Experience Avonni disponibles."

S’il répond avec une vraie liste de composants récupérée via le serveur MCP plutôt qu’avec une réponse générique issue de sa mémoire, la connexion fonctionne.

Filtrer les toolsets (facultatif)

Par défaut, le serveur expose des outils pour les quatre packages Avonni (lwc, packages dynamiques, flow, package experience). Si vous créez uniquement des pages Experience Site, ajoutez un ?toolsets= paramètre de requête à l’URL pour réduire au minimum la liste d’outils de l’assistant :

https://mcp.avonnicomponents.com?toolsets=experience

Ajoutez à nouveau des packages avec une liste séparée par des virgules, par exemple ?toolsets=experience,flow.

Si vous filtrez les toolsets, les composants des packages exclus deviennent invisibles pour l’assistant. Voir Limitations et FAQ.