Example: Customizing User Interface Using Custom Lightning Types with Editor and Renderer Overrides

This example explains how to override the default user interface to create a customized appearance of responses on the custom agent’s action input and output with custom Lightning types.

In this example, you specify an editor override and a renderer override for the custom Lightning type that you created.

Download these sample data files.

This section includes the Apex class FlightAgent that retrieves flight information based on your request.

Use this Apex class to create a custom agent action.

This Apex class accepts the flight search criteria, including the origin city, destination city, and date of travel, and then returns a list of available flights.

For this example, flight availability data is already included in the Apex class. However, in a real-time scenario, flight information is fetched from an external service, and the Apex class processes that data to generate the final response.

For information about how to create a custom action by using Apex class, see Create a Custom Agent Action.

Inputs and outputs for the agent action are defined by using standard Lightning types and Apex classes.

Input:

  • dateOfTravel, destinationCity, and originCity use standard Lightning types such as lightning__dateType and lightning__textType.
  • The filters input is a complex type that references an Apex class.

Output:

  • The output aFlight for the agent action is a complex type that references an Apex class.

Here’s an image that shows the custom agent action created.

Input and output settings for a 'Find Flights' agent action. Inputs: dateOfTravel, destinationCity, filters, originCity. Output: aFlight.

The available flight information is retrieved by using @apexClassType/c__FlightAgent$AvailableFlight in the agent action output, where:

  • apexClassType is the bundle name.
  • FlightAgent is the parent class.
  • AvailableFlight is a nested Apex class within FlightAgent.

When you execute this agent action, it prompts you to provide input and then generates the output.

The agent’s action UI collects these details to find available flights.

  • Origin city
  • Destination city
  • Date of travel

Here’s the image that shows how the custom agent action input appears in an agent conversation.

Agent's response to collect flight details. The response lacks filter fields for price and discount percentage, making it difficult to filter flight data.

The agent’s action UI returns the available flight details.

Here’s the image that shows how the custom agent action’s output appears in an agent conversation.

Agent's response to a flight details request. The response lacks labels and is presented in a format that is hard to understand.

The agent displays the flight data in the response.

Here’s the sample code that shows the available flight data.

Create a custom Lightning type named flightResponse to enhance the visibility of the information in the output UI.

Override the agent’s action UI for output to enhance the user experience by using Custom Lightning Types (CLTs). With CLTs, you can add your own Lightning Web Components (LWC) to present data in a more structured and intuitive format.

Configure the renderer.json file to override the default UI of a custom Lightning type in the agent action.

Here’s an example showing a lightningTypes folder for a custom Lightning type named flightResponse.

The custom Lightning type flightResponse includes a schema.json file and a renderer.json file. The renderer.json file controls how the data is displayed to the user in the agent action output.

This sample code shows the contents of the schema.json file.

This sample code shows the contents of the renderer.json file.

This section explains how the components are created and deployed for agent action output.

This image shows the Lightning Web Component (LWC) folder structure.

The lwc folder contains a folder named flightDetails, which is the LWC component. The flightDetails folder includes CSS, HTML, JS, and metadata files.

The LWC component includes HTML markup designed to represent the data that the agent returns for @apexClassType/c__FlightAgent$AvailableFlight. This HTML markup ensures that the data is displayed in an intuitive and customized format.

This sample code shows the contents of the flightDetails.js-meta.xml file.

When you create an LWC component to override the UI for action input, use lightning__AgentforceInput as the target. For output, use lightning__AgentforceOutput. For information about LWC target types, see lightning__AgentforceInput and lightning__AgentforceOutput.

This sample code shows the contents of the flightDetails.html file.

This sample code shows the contents of the flightDetails.js file.

See Also

To add a custom Lightning type to the agent action, complete these steps.

  1. Open the agent action.
  2. Edit the Output Rendering parameter of the agent action output for aFlight.
  3. Select the custom lightning type flightResponse.
  4. Save the agent action.

This image shows the custom Lightning type that you created.

The agent action output settings with 'flightResponse' selected in the Output Rendering field.

Before executing the agent action that you modified, reload the agent page. The agent prompts you to provide input and then generate the output. The output provides a new UI experience.

This image shows how the custom agent action’s output appears in an agent conversation.

Agent's response to a flight details request. The response includes clear labels and is presented in a format that is easy to understand.

Create a custom Lightning type named flightFilter to show filters in the input UI that suits your business needs.

Override the agent’s action UI for input to enhance the user experience by using Custom Lightning Types (CLTs). With CLTs, you can add your own Lightning Web Components (LWC) to present data in a more structured and intuitive format

Configure the editor.json file to override the default UI of a custom Lightning type in the agent action.

Here’s an example that shows a lightningTypes folder for a custom Lightning type named flightFilter.

The custom Lightning type flightFilter includes a schema.json file and an editor.json file. The editor.json file controls how the data is displayed to the user in the agent action input.

This sample code shows the contents of the schema.json file.

This sample code shows the contents of the editor.json file.

This section explains how the components are created and deployed for agent action input.

This image shows the Lightning Web Component (LWC) folder structure.

The lwc folder contains a folder named flightFilter, which is the LWC component. The flightFilter folder includes CSS, HTML, JS, and metadata files.

The LWC component includes HTML markup designed to accept input for @apexClassType/c__FlightAgent$Filter. This HTML markup ensures that the data is displayed in an intuitive and customized format.

This sample code shows the contents of the flightFilter.js-meta.xml file.

When you create an LWC component to override the UI for action input, use lightning__AgentforceInput as the target. For output, use lightning__AgentforceOutput. For information about LWC target types, see lightning__AgentforceInput and lightning__AgentforceOutput.

This sample code shows the contents of the flightFilter.html file.

This sample code shows the contents of the flightFilter.js file.

You must include the handleInputChange() function to capture user input, update the component’s state, and notify the parent component (planner component) by using the valuechange event. The function ensures real-time data binding and prevents unwanted event propagation.

See Also

To add a custom Lightning type to the agent action, complete these steps.

  1. Open the agent action.
  2. Edit the Input Rendering parameter of the agent action input for filters.
  3. Select the custom lightning type flightFilter.
  4. Save the agent action.

This image shows the custom Lightning type that you created.

The agent action output settings with 'flightFilter' selected in the Input Rendering field.

Before executing the agent action that you modified, reload the agent page. The agent prompts you to provide input and then generate the output. The input provides a new UI experience.

This image shows how the custom agent action’s input appears in an agent conversation.

Agent's response to collect flight details. The response includes filter fields for price and discount percentage, making it easy to filter flight data.

In certain instances the large language model (LLM) requests input as text, so make sure to accurately update the topic instructions for the correct selection of the Override Input component. For example, when you enter a prompt to find flights, the agent executes the Find Flight action. The Find Flight action executes by taking input through a UI form, and not in the form of Text because it includes a price and discount range.