AI Chat Component

Intro

With the roll out of the 3B AI Automation platform, we are releasing a set of tools that allows admins to configure how to interact with the AI platform right within Salesforce. There are various ways to embed the AI Chat Component in Salesforce, Protals and Digital Experiences and this article describes these.

Setup

The AI Agent Chat component requires the following setup:

1. In Custom Settings -> Onboarding Default Settings -> N8N Endpoint - set this field to the endpoint for the customer's n8n instance. You can obtain this url from the R&D team.
2. When you add the component on a Record, Utility, Portal Page, you need to pass a few parameters:
   1. Title - if defined, will appear at the top of the chat
   2. Sub Title - if defined, will appear at the top of the chat
   3. Chat ID - this is obtained from N8N from the Chat Trigger node. So, if the URL you get from n8n is this "https://n8n.3bapi.com/webhook/5cfdd759-f767-4d9c-8c30-ba05ef51718a/chat" then the Chat ID is 5cfdd759-f767-4d9c-8c30-ba05ef51718a (the portion between webhook and chat)
   4. Record ID - this is an optional parameter. You can pass it (or it is automatically passed in the case of record/utility item/portals embed) and can be anything. You use this in n8n to provide context to the AI agent
   5. Object Name - this is an optional parameter. You can pass it explicitly, although it is automatically set for internal salesforce record embedding and utility item embedding. This tells you where in salesforce the chat is contextualized
   6. Action Name - this is an optional parameter. You can pass it explicitly, although it is automatically set for internal salesforce record embedding and utility item embedding. This tells you what page the user is currently on (e.g. record page, community page, etc)
   7. AI Endpoint - this is set automatically from Custom Settings -> Onboarding Default Settings -> N8N Endpoint when using the AI Chat Component in an internal record embed or utility item or through the Visualforce Page. This needs to be set manually in Portals Pages.
   8. Initial Message - this is a string that will be displayed as the first message by the agent when the agent loads
   9. Input Placeholder - this is the placeholder for the input box in the chat component
   10. Allow File Uploads - this must be set to "true" or "false" and determines if the agent will allow file uploading
   11. Allowed Files MIME Types - if Allow File Uploads is "true", then what file types you allow users to attach - a comma separated list

Record Embedding

Lightning Record Builder

You can embed the AI Chat Component on any record inside salesforce, by using the AI Agent Chat component in the app builder.

Note that the recordId metadata item inside n8n will be auto-set to the contextual salesforce record where the component is embedded, meaning you can embed it on any object.

In addition, the actionName metadata item inside n8n will be set to the recordPage or digitalExperience, depending on where you have the component placed.

Because the component is embedded on salesforce, your n8n metadata object will have userId, orgId and userType attributes that you can use in your agent.

Finally, the objectName metadata item inside n8n will be set to the contextual record's object's API name.

Utility Item Embedding

Lightning App - Utility Item

You can embed the AI Chat Component as a Utility Item in a Salesforce App. Simply add the LWC component AI Agent Chat and define the properties displayed.

Note that the recordId metadata item inside n8n will be auto-set to the contextua salesforce record which the user is currently navigated to. This means that the agent will re-render as you change records or navigate to different objects.

In addition, the actionName metadata item inside n8n will be set to the recordPage or digitalExperience, depending on where you have the component placed.

Because the component is embedded on salesforce, your n8n metadata object will have userId, orgId and userType attributes that you can use in your agent.

Finally, the objectName metadata item inside n8n will be set to the contextual record's object's API name.

Visualforce Page Embedding

You can use the /apex/b3o__AiChatComponent Visualforce page directly to surface the AI chat agent. You will need to pass additional URL parameters like so:

/apex/b3o__AiChatComponent?chatId=123&recordId=123...

The url parameters you can pass are:

• chatId - required
• recordId
• objectName
• actionName
• initialMessage
• inputPlaceholder
• allowFileUploads - must be set to "true" or "false" or not passed
• allowedFilesMimeTypes

Because the component is embedded on salesforce, your n8n metadata object will have userId, orgId and userType attributes that you can use in your agent.

Note that if you are surfacing the visualforce page through a Guest Site or Guest Digital Experience Site, the userId, orgId and userType will be that of the Guest User associated with the site.

Via Portals Component Embedding

3B Portals - Ai Chat Component

You can use the AI Agent Chat inside 3B Portals pages by dropping the AI Chat Component element on a portals page.

Important:

• You will need to provide the Chat Id AND the correct AI Endpoint url when using the element in 3B Portals. We are currently unable to automatically set the AI Endpoint to Custom Settings -> Onboarding Default Settings -> N8N Endpoint

Note:

• You can restrict the component's height and width by applying hight and width modifiers to the parent element in a 3B Portals Page.