skills.rest
padjei
padjeiCOMMUNITY
Explore all skills by this author →
GitHub

experience-ui-bundle-agentforce-client-generate

Embed and configure the AgentforceConversationClient chat widget in Salesforce UI Bundle React projects.

Updated Jul 2, 2026
Search Tags:#react#salesforce#soql#agentforce#chat widget#ui bundle#styletokens
One-click install
npx skills add https://github.com/padjei/SF_Build --skill experience-ui-bundle-agentforce-client-generate-padjei
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: experience-ui-bundle-agentforce-client-generate
Source: https://github.com/padjei/SF_Build/tree/main/.claude/skills/experience-ui-bundle-agentforce-client-generate
Command: npx skills add https://github.com/padjei/SF_Build --skill experience-ui-bundle-agentforce-client-generate-padjei

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @salesforce/ui-bundle-template-feature-react-agentforce-conversation-client, @salesforce/agentforce-conversation-client, @salesforce/cli, and includes references (resource) components.

What problem does it solve? Adding a Salesforce Agentforce chat agent to a UI Bundle React app involves resolving a valid agent ID from the org, using the correct package import, and styling only through supported tokens. This Skill guides that entire workflow so the chat widget is embedded correctly without building custom chat components. ## Core Features & Use Cases - Agent ID resolution and validation: Queries the org via the sf CLI (SOQL on BotVersion) to list active Employee Agents, validates the 18-character 0Xx ID format, and cross-checks existing IDs against the org. - Canonical component integration: Adds or updates <AgentforceConversationClient /> from @salesforce/ui-bundle-template-feature-react-agentforce-conversation-client in existing usage files, never editing implementation files. - Token-based styling: Applies all visual customization exclusively through the styleTokens prop using a documented token reference, rejecting CSS files, className, and inline styles. - Use Case: A developer asks to add a chatbot to a dashboard page; the Skill finds the target file, resolves an active agent ID from the org, inserts the component with the correct import, and applies brand colors via styleTokens. ## Quick Start Add the Agentforce conversation client chat widget to my dashboard page using an active agent from my connected Salesforce org.

Frequently Asked Questions about experience-ui-bundle-agentforce-client-generate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add an Agentforce chat widget to a React UI Bundle project?▼

Import AgentforceConversationClient from @salesforce/ui-bundle-template-feature-react-agentforce-conversation-client and render it with a valid agentId prop in your target page or shell component. The Skill resolves the agent ID from your org and inserts the component without restructuring existing TSX.

How do I find my Salesforce Agentforce agent ID?▼

Run a SOQL query via the sf CLI on BotVersion filtered by AgentType 'AgentforceEmployeeAgent' to list agents with their IDs and status. Alternatively, find it manually in Setup → Agentforce Agents by clicking the agent name and copying the ID from the URL.

Can I style the Agentforce chat widget with CSS or className?▼

No. The component wraps an embedded iframe, so CSS files, style attributes, className, and styled-components do not work. All visual customization must use the styleTokens prop with the documented token names.

Why is my Agentforce chat widget not appearing on localhost?▼

The most common causes are an invalid or inactive agent ID, or localhost not being trusted for inline frames. Add localhost with your dev port under Setup → Session Settings → Trusted Domains for Inline Frames, and confirm the agent is Active in Setup.

Can I build a custom chatbot component instead of using AgentforceConversationClient?▼

No. This Skill enforces a hard constraint against creating custom chat UIs, third-party chat libraries, or direct calls to the underlying SDK. All agent chat requests must use the official AgentforceConversationClient component.

Related Skills

Explore More Software Engineering Skills→
amanpraajamanpraaj
1

implementing-ui-bundle-agentforce-conversation-client

Embed and configure the Salesforce AgentforceConversationClient chat widget in React ui-bundle applications.

Community
Intermediate
angryracoonangryracoon

experience-ui-bundle-agentforce-client-generate

Embed and configure the Agentforce Conversation Client in Salesforce UI Bundle React apps.

Community
Advanced
amanpraajamanpraaj
1

sf-ai-agentforce

Configure Agentforce Builder agents, GenAiFunction actions, and GenAiPromptTemplate metadata for Salesforce.

Community
Advanced
forcedotcomforcedotcom
803

implementing-ui-bundle-agentforce-conversation-client

Embeds AgentforceConversationClient React component in Salesforce UI bundle apps with styleTokens validation.

Official
Intermediate