implementing-ui-bundle-agentforce-conversation-client

What problem does it solve? Adding a Salesforce Agentforce chat agent to a React ui-bundle app involves strict rules: a canonical package import, a validated 18-character agent ID, and styling that only works through the styleTokens prop. This Skill enforces those rules so the chat widget renders and authenticates correctly instead of failing silently. ## Core Features & Use Cases - Deterministic add-or-update workflow: Detects existing AgentforceConversationClient usage, validates the agentId against the ^0Xx[a-zA-Z0-9]{15}$ pattern, and either installs the component or updates props in place without deleting existing configuration. - Token-based theming: Provides the complete styleTokens reference for header, messages, input, welcome, and error blocks, covering colors, fonts, spacing, borders, and layout dimensions. - Troubleshooting guidance: Resolves common failures such as missing agentId, inactive agents, localhost trusted-domain errors, and first-party cookie restrictions. - Use Case: A developer is asked to add a branded chatbot to a support page. The Skill installs the package, embeds <AgentforceConversationClient agentId="0Xx..." inline width="420px" />, applies brand colors via styleTokens, and lists the required Salesforce setup steps. ## Quick Start Ask the agent to add the Agentforce conversation client to a specific React file with your 18-character agent ID and any desired styling or layout props.