Agentforce conversation client for UI Bundles
Ajouter, configurer ou re-styler le widget de chat Agentforce dans des apps Salesforce UI Bundle React ou Angular — jamais un chatbot bricolé
- Quoi
- Ajouter, configurer ou re-styler le widget de chat Agentforce dans des apps Salesforce UI Bundle React ou Angular — jamais un chatbot bricolé
- Coût
- Gratuit
- Prérequis
- un projet Salesforce UI Bundle (React ou Angular, avec un répertoire uiBundles/*/src/) ; un org avec un agent Agentforce ; la CLI sf (>=2.0.0) authentifiée contre l'org ; npm (>=9.0.0)
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le mode d'emploi agnostique de @forcedotcom pour intégrer le client de conversation Agentforce dans les apps Salesforce UI Bundle : détecter le framework de l'app de façon déterministe (React ou Angular), vérifier si le client est déjà intégré, résoudre et valider l'ID de l'agent contre l'org via SOQL (avec guide d'activation), importer le package de fonctionnalité correspondant (`@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client` ou son jumeau Angular), et insérer l'élément avec la syntaxe de liaison de props adaptée à chaque framework. La contrainte dure est mémorable : ne jamais construire d'agent/chatbot/widget de chat sur mesure — toujours importer et rendre le composant existant, et le styler uniquement via les `styleTokens` documentés (fichiers CSS, attributs style et className sont ignorés par conception). Crédit : @forcedotcom. Bémols honnêtes : nécessite un org Salesforce avec l'agent, la CLI sf et npm ; pour le développement local, ajouter le port de dev aux domaines de confiance pour les cadres en ligne et **le retirer avant de déployer en production** ; le style hors du jeu de jetons n'est pas supporté, par conception. Licence Apache-2.0. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet Salesforce UI Bundle (React ou Angular, avec un répertoire uiBundles/*/src/) ; un org avec un agent Agentforce ; la CLI sf (>=2.0.0) authentifiée contre l'org ; npm (>=9.0.0) Installe-moi « Client de conversation Agentforce pour UI Bundles ». Il enseigne à l'agent le workflow de @forcedotcom pour gérer le client de conversation Agentforce dans une app UI Bundle : détecter le framework (React vs Angular), vérifier l'usage existant, résoudre et valider l'ID de l'agent contre l'org via SOQL, importer le package de fonctionnalité du framework correspondant, ajouter ou mettre à jour l'élément avec la bonne syntaxe de liaison de props, et configurer les props (mode inline, dimensions, en-tête, agentLabel, styleTokens). Dépôt : https://github.com/forcedotcom/sf-skills/blob/main/plugins/builder/experience-react/skills/experience-ui-bundle-agentforce-client-generate/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « experience-ui-bundle-agentforce-client-generate ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. le pointer vers le répertoire de l'app UI Bundle, confirmer l'ID de l'agent, et pour le dev local ajouter mon port de dev aux domaines de confiance pour cadres en ligne — à retirer avant le déploiement en production). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.