Agentforce conversation client for UI Bundles
Add, configure or restyle the Agentforce chat widget in React or Angular Salesforce UI Bundle apps — never a hand-rolled chatbot
- What
- Add, configure or restyle the Agentforce chat widget in React or Angular Salesforce UI Bundle apps — never a hand-rolled chatbot
- Cost
- Free
- Needs
- a Salesforce UI Bundle project (React or Angular, with a uiBundles/*/src/ directory); an org with an Agentforce agent; the sf CLI (>=2.0.0) authenticated against the org; npm (>=9.0.0)
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — @forcedotcom's framework-agnostic playbook for embedding the Agentforce Conversation Client in Salesforce UI Bundle apps: detect the app framework deterministically (React or Angular), check whether the client is already embedded, resolve and validate the agent ID against the org via SOQL (with activation-path guidance), import the matching feature package (`@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client` or the Angular twin), and insert the element with the right prop-binding syntax per framework. The hard constraint is memorable: never build a custom agent/chatbot/chat widget — always import and render the existing component, and style it only through the documented `styleTokens` (CSS files, style attributes and className are ignored by design). By @forcedotcom, listed here with credit to its creator. Honest caveats: requires a Salesforce org with the agent, the sf CLI and npm; for local development you must add your dev port to Trusted Domains for Inline Frames and **remove it before deploying to production**; styling outside the token set is unsupported, by design. Apache-2.0 licensed. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a Salesforce UI Bundle project (React or Angular, with a uiBundles/*/src/ directory); an org with an Agentforce agent; the sf CLI (>=2.0.0) authenticated against the org; npm (>=9.0.0) Install "Agentforce conversation client for UI Bundles" for me. It teaches the agent @forcedotcom's workflow to manage the Agentforce Conversation Client in a UI Bundle app: detect the framework (React vs Angular), check for existing usage, resolve and validate the agent ID against the org via SOQL, import the matching framework feature package, add or update the element with correct prop-binding syntax, and configure props (inline mode, dimensions, header, agentLabel, styleTokens). Repository: https://github.com/forcedotcom/sf-skills/blob/main/plugins/builder/experience-react/skills/experience-ui-bundle-agentforce-client-generate/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "experience-ui-bundle-agentforce-client-generate". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. point it at the UI Bundle app directory, confirm the agent ID, and for local dev add my dev port to Trusted Domains for Inline Frames — removing it before production deploy). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.