[TDX at Agentforce World Tour London 2025] Improve Agent Interactions with Custom LWCs in Agentforce

Agentforce provides a default and simple UI to interact with it, but some specific use cases may benefit from a dedicated interface. Combine the power of LWC and Agentforce to simplify interaction with your Agents.

Transcript

1. Improve Agent Interactions with Custom LWCs in Agentforce
3. Fabien Taillon Partner & CTO at Texeï Salesforce MVP - Hall of Fame
4. Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com Agentforce Helps companies build AI agents that work together with humans to drive customer success
5. Agentforce out of the box components
6. • Display sometimes unpredictable • Not always the best UI • Not always actionable Agentforce out of the box components Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com Great but…
7. Custom Lightning Types to the rescue Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
8. Lightning Web Components in Agentforce Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
9. Lightning Web Components in Agentforce Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
10. DEMO
11. Map the Action Action Input or Output Rendering to you Custom Lightning Type Steps to Customise Agent UI Build a Custom LWC for your Apex Build a Custom Lightning Type with Schema referring to Apex and Editor / renderer referring to the component Custom LWC CLT Test your Action and launch your Agent Action Mapping Test 1 2 3 4 Custom Code Agent Config
12. Renderer Override (1/6) import { LightningElement } from 'lwc'; export default class RestaurantDetail extends LightningElement { @api label; @api rating; … } public class RestaurantService { … public class Restaurant { @InvocableVariable public String label; @InvocableVariable public Integer rating; } … } Apex LWC Use LWC to render Apex Type Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
13. Renderer Override (2/6) import { LightningElement } from 'lwc'; export default class RestaurantDetail extends LightningElement { … } public class RestaurantService { … public class Restaurant { … } … } { "title": "My Restaurant Response", "description": "My Restaurant Response", "lightning:type": "@apexClassType/c__RestaurantService$Restaurant " } { "renderer": { "componentOverrides": { "$": { "definition": "c/restaurantDetail" } } } } Apex LWC renderer.json schema.json Use Custom Lightning Type to define the override Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
14. Renderer Override (3/6) import { LightningElement } from 'lwc'; export default class RestaurantDetail extends LightningElement { @api label; … } public class RestaurantService { … public class Restaurant { @InvocableVariable public String name;… } … } { "title": "My Restaurant Response", "description": "My Restaurant Response", "lightning:type": "@apexClassType/c__RestaurantService$Restaurant " } { "renderer": { "componentOverrides": { "$": { "definition": "c/restaurantDetail", "attributes": { "label": "{!$attr.name}" } } } } } Apex LWC renderer.json schema.json Define mapping if attribute names are different Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
15. <?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>64.0</apiVersion> <isExposed>true</isExposed> <masterLabel>Restaurants Details</masterLabel> <targets> <target>lightning__AgentforceOutput</target> </targets> <targetConfigs> <targetConfig targets="lightning__AgentforceOutput"> <sourceType name="c__restaurantResponse" /> </targetConfig> </targetConfigs> </LightningComponentBundle> Renderer Override (4/6) restaurantDetail.js-meta.xml Allow your LWC to be used as Agentforce output Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
16. Renderer Override (5/6) import { LightningElement } from 'lwc'; export default class RestaurantDetail extends LightningElement { @api value; … } LWC { "collection": { "renderer": { "componentOverrides": { "$": { "definition": "c/restaurantDetail" } } } } } renderer.json Collection Renderer Override Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
17. Renderer Override (6/6) Override rendering in Agentforce Action Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
18. Editor Override { "editor": { "componentOverrides": { "$": { "definition": "c/restaurantRating" } } } } <?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>64.0</apiVersion> <isExposed>true</isExposed> <masterLabel>Restaurant Rating</masterLabel> <targets> <target>lightning__AgentforceInput</target> </targets> <targetConfigs> <targetConfig targets="lightning__AgentforceInput"> <sourceType name="c__restaurantRating" /> </targetConfig> </targetConfigs> </LightningComponentBundle> Apex CLT Different tags but same idea Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
19. • Fully integrated with Lightning Experience • Very powerful, no limitation in what can be done in this type of LWC ◦ Use of modal, toasts… ◦ Use of Lightning Data Service ◦ Return only record Ids from Apex and use LDS to get data if you need to keep it updated ◦ Use same color theme ◦ … • Run as your current user, with its access rights What you need to know But… • Only available in Lightning Experience ◦ Use “Standard Agent Surface” for Experience Cloud/Public Agent It’s cool because… Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
20. • General Availability (Summer ‘25) • More Custom Lightning Types options beside Apex: ◦ Record Types ◦ Objects ◦ Primitive overrides • Custom Lightning Types management in Setup UI ◦ Custom Lightning Types list in Lightning Experience (Summer ‘25) ◦ Create Custom Lightning Types in Setup (according to TDX) What’s Coming Summer ‘25 and beyond Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
21. What’s Coming Custom Lightning Types list in Lightning Experience Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
22. What’s Coming More Types + UI to create Custom Lightning Types Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
23. What’s Coming Define which components to use for Editor/Renderer override Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
24. What’s Coming Define attributes mapping Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
25. GitHub Repository https://github.com/FabienTaillon/lwc-in-agentforce Documentation https://developer.salesforce.com/docs/einstein/genai/guide/lightning-types-custom.html TDX Video Customize Agentforce Responses with LWC and Lightning Types Standard Agent Surface https://help.salesforce.com/s/articleView?id=ai.agent_surfaces_ref.htm&type=5 Resources Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com