Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[TDX at Agentforce World Tour London 2025] Impr...

[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.

Avatar for Fabien Taillon

Fabien Taillon

June 12, 2025
Tweet

More Decks by Fabien Taillon

Other Decks in Programming

Transcript

  1. • 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…
  2. 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
  3. 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
  4. 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
  5. 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
  6. <?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
  7. 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
  8. Renderer Override (6/6) Override rendering in Agentforce Action Fabien Taillon

    - https://linkedin.com/in/fabientaillon - https://www.texei.com
  9. 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
  10. • 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
  11. • 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
  12. What’s Coming Custom Lightning Types list in Lightning Experience Fabien

    Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
  13. What’s Coming More Types + UI to create Custom Lightning

    Types Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
  14. What’s Coming Define which components to use for Editor/Renderer override

    Fabien Taillon - https://linkedin.com/in/fabientaillon - https://www.texei.com
  15. 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