Agent skill · forcedotcom
experience-ui-bundle-agentforce-client-generate
Use this skill when the user asks to add, embed, integrate, configure, style, or remove an agent, chatbot, chat widget, conversation client, or AI assistant in a UI Bundle project (React or Angular). TRIGGER when: project contains a uiBundles/*/src/ directory and the task involves adding or modifying a chat widget, chatbot, or conversational AI; files under uiBundles/*/src/ import AgentforceConversationClient in React `.tsx`/`.jsx` files, or use the app-agentforce-conversation-client element in Angular `.html` templates and AgentforceConversationClientComponent in `.component.ts` files; user asks to add any chat or agent functionality to a page. DO NOT TRIGGER when: user wants to create a custom agent, chatbot, or chat widget component from scratch; the project has no uiBundles directory.
What it needs
About 11k tokens when loaded.
What this skill does
Managing Agentforce Conversation Client This skill is framework-agnostic: it supports both React and Angular UI Bundle apps. The Agentforce client ships as two feature packages that wrap the same Lightning Out glue — pick the one matching the app's framework (detected in Step 0): Framework Feature package Element Component symbol ----------- ----------------- --------- ------------------ React @salesforce/ui-bundle-template-feature-react-agentforce-conversation-client <AgentforceConversationClient /> AgentforceConversationClient Angular @salesforce/ui-bundle-template-feature-angular-agentforce-conversation-client <app-agentforce-conversation-client> AgentforceConversationClientComponent HARD CONSTRAINT: NEVER create a custom agent, chatbot, or chat widget component. ALL such requests MUST be fulfilled by importing and rendering the existing framework-appropriate component (React <AgentforceConversationClient /> or Angular <app-agentforce-conversation-client>) from its feature package as documented below. If a requirement is unsupported by the component's props/inputs, state the limitation — do not improvise an alternative. Prerequisites Before the component will work, the following Salesforce settings must be configured by the user. ALWAYS call out the prequisites after successfully embedding the agent. Trusted domains (required only for local development): Setup → Session Settings → Trusted Domains for Inline Frames → Add your domain Local development: localhost:<dev-server-port> — React (Vite) defaults to localhost:5173; the Angular template may use a different port (check the app's dev-server config, e.g. localhost:5174). Add whichever port the app actually runs on. Warning: Remove this trusted domain entry before deploying to production. Instructions Step 0: Detect the app framework Determine whether the target UI Bundle app is React or Angular before doing anything else — it drives discovery, import, element syntax, and prop binding in every step below. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills forcedotcom/experience-ui-bundle-agentforce-client-generate--8190a8