implementing-ui-bundle-agentforce-conversation-client

Integrate and customize the Agentforce Conversation Client in React applications.

Updated May 19, 2026

Search Tags:#react #customization #conversational AI #chat widget #agentforce-conversation-client

Ready to run

npx skills add https://github.com/dmckeeSF/mcpdctn0507 --skill implementing-ui-bundle-agentforce-conversation-client-dmckeesf

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: implementing-ui-bundle-agentforce-conversation-client
Source: https://github.com/dmckeeSF/mcpdctn0507/tree/main/.agents/skills/implementing-ui-bundle-agentforce-conversation-client
Command: npx skills add https://github.com/dmckeeSF/mcpdctn0507 --skill implementing-ui-bundle-agentforce-conversation-client-dmckeesf

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you integrate and customize the Agentforce Conversation Client into your application, simplifying the process of adding, modifying, and styling chat widgets and conversational AI components.

Core Features & Use Cases

Component Integration: Add and update the Agentforce Conversation Client component in your app.
Styling Customization: Customize the appearance of chat widgets and conversational AI components.
Configuration Management: Configure settings for inline vs floating chat, dimensions, and more.
Use Case: If you need to add a chat widget to your app and want to customize its appearance and behavior, this Skill can help you do so efficiently.

Quick Start

Use the implementing-ui-bundle-agentforce-conversation-client skill to add the Agentforce Conversation Client to the 'Contact Details' page with the specified agent ID and style settings.

Frequently Asked Questions about implementing-ui-bundle-agentforce-conversation-client

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

FAQPage Schema

How do I add a conversational AI chat widget to my React application?▼

To add a conversational AI chat widget to your React application, use this Skill to integrate the Agentforce Conversation Client component. It simplifies adding, modifying, and styling chat interfaces with minimal setup.

Can I configure the Agentforce chat widget to display inline instead of floating?▼

Yes, you can configure the Agentforce chat widget to display inline or floating. This Skill provides configuration management for chat dimensions and display modes, ensuring the conversational AI component meets your layout requirements.

What is the best way to customize the styling of a conversational AI component in React?▼

The best way to customize the styling of a conversational AI component in React is by using this Skill. It manages styling customization for Agentforce Conversation Client chat widgets, allowing you to efficiently modify their appearance.

Do I need specific dependencies to integrate the Agentforce Conversation Client?▼

Yes, integrating the Agentforce Conversation Client requires the @salesforce/ui-bundle-template-feature-react-agentforce-conversation-client and @salesforce/agentforce-conversation-client dependencies to manage the chat widget in your React app.

How do I update an existing chat widget with a new agent ID and style settings?▼

To update an existing chat widget with a new agent ID and style settings, apply this Skill to modify the Agentforce Conversation Client component. It supports component integration and configuration management for conversational AI features.