Experience UI Bundle Agentforce Client Generate

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):

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.

Run the bundled detector against the app (or uiBundle) root. It performs the detection deterministically and prints exactly one token — react, angular, ambiguous, or unknown:

bash "<skill_dir>/scripts/detect-framework.sh" "<app-or-uiBundle-root>"

The detector combines: an angular.json at/above the root; @angular/core / react in any non-node_modules package.json; and source-file signatures (*.component.ts, app.routes.ts, or @Component-decorated classes for Angular; *.tsx/*.jsx for React).

Act on the result:

• react or angular → use that framework. Do NOT ask the user — the detection is deterministic.
• ambiguous (both frameworks detected) or unknown (neither) → ask the user which framework the app uses before proceeding.

Carry the resolved framework through the remaining steps.

Step 1: Check if component already exists

Search for existing usage across all app files (not implementation files). Use the grep for the detected framework:

React:

grep -r "AgentforceConversationClient" --include="*.tsx" --include="*.jsx" --exclude-dir=node_modules

Angular:

grep -rn "app-agentforce-conversation-client" --include="*.html" --exclude-dir=node_modules
grep -rn "AgentforceConversationClientComponent" --include="*.ts" --exclude-dir=node_modules

Important: Look for the files that USE the element (for example, shared shells/layouts, route components, or feature pages) — for Angular the <app-agentforce-conversation-client> tag lives in a *.html template and the component is registered in the host's imports: [...]. Do NOT open the component implementation files:

• React: AgentforceConversationClient.tsx / AgentforceConversationClient.jsx
• Angular: conversation.ts, conversation.html, __inherit__conversation.ts, agentforce-embed.service.ts

If multiple files found: Ask the user which component file they are referring to. Do not proceed until clarified.

If found: Read the file and check the current agentId value.

Agent ID validation rule (deterministic):

• Valid only if it matches: ^0Xx[a-zA-Z0-9]{15}$
• Meaning: starts with 0Xx and total length is 18 characters

Decision:

• If agentId matches ^0Xx[a-zA-Z0-9]{15}$ and user wants to update other props → Go to Step 4 (update props)
• If agentId matches ^0Xx[a-zA-Z0-9]{15}$ and user asks to "embed" or "add" the chat client → Inform: "The Agentforce Conversation Client is already embedded in <file> with agent ID <agentId>. Would you like to change the agent or update other props?"
• Change agent → Step 2
• Update props → Step 4b
• If agentId is missing, empty, or does NOT match ^0Xx[a-zA-Z0-9]{15}$ → Continue to Step 2 (need real ID)
• If not found → Continue to Step 2 (add new)

If user reports an error:

If the user says the component is "not working", "showing an error", or similar — ask them for the specific error message. Then proceed to Step 2 to cross-check the configured agentId against the org.

Step 2: Resolve and Validate Agent ID

Prerequisites

1. Verify sf CLI is available: ``bash sf --version `` If fails:

• Inform: "The Salesforce CLI (sf) is not installed. It's needed to query available agents from your org."
• Ask: "Would you like me to install it?"
• Yes → Install via npm install -g @salesforce/cli, then continue.
• No → "You can find your agent ID manually in Setup → Agentforce Agents → click the agent name → copy the ID from the URL. Would you like to provide it now, or skip this step?"
• User provides ID → validate format (^0Xx[a-zA-Z0-9]{15}$), store it, proceed to Step 3.
• Skip → proceed to Step 4 with placeholder <YOUR_AGENT_ID>.

1. Verify org connectivity: ``bash sf org display --json `` If fails:

• Inform: "No authenticated org found."
• Ask: "Would you like to connect to your org now? Run sf org login web to authenticate."
• User authenticates → retry the query, continue.
• User declines → "You can find your agent ID manually in Setup → Agentforce Agents → click the agent name → copy the ID from the URL. Would you like to provide it now, or skip this step?"
• User provides ID → validate format, store it, proceed to Step 3.
• Skip → proceed to Step 4 with placeholder <YOUR_AGENT_ID>.

Note: Even if the user provides their own agentId, the org must be connected for the agent to function at runtime. An agentId without a connected org will not work.

Query all Employee Agents

Run the SOQL query defined in references/agent-id-resolution.md.

Handle results

No records at all:

"No Employee Agents found in this org. Create one in Setup → Agentforce Agents."

Ask user if they want to provide an agent ID manually or skip. If skip, proceed to Step 4 with placeholder <YOUR_AGENT_ID>.

All agents are inactive:

Found Employee Agents but none are active: - Agentforce Sales Agent (0Xxxx000000001dCAA) - HR Assistant (0Xxxx0000000002BBB) To activate: Setup → Agentforce Agents → click the agent name → open in Agent Builder → press Activate. Then re-run this step.

Ask user if they want to provide an agent ID manually or skip. If skip, proceed to Step 4 with placeholder <YOUR_AGENT_ID>.

Has active agents — Path A (fresh install / no existing agentId):

Present only active agents for selection:

Which agent should the chat widget use? 1. Property Manager Agent (0Xxxx0000000001CAA) 2. HR Assistant (0Xxxx0000000002BBB)

• One agent → still confirm with user, do not auto-select.
• If user picks one → store the selected Id for use in Step 4.