This sample demonstrates how to slot components in the chat experience to complement the agent’s output with interactive UI elements. Agent responses can be overly wordy and overwhelming. Slottable UI allows you to render interactive components directly in the chat experience. This pattern provides the following benefit to the user:

• Rich components allow users to modify choices made by the agent without requiring follow up text input
• End users may prefer interacting with familiar UI components rather than reading and writing lengthy text
• The application start with a thin UI and progressively disclose additional components only as they are needed by the end user

This application adds a custom agent that calculates a route from natural language instructions. Rather than display turn-by-turn directions directly in the chat, the application slots the arcgis-directions component into the chat interface to allow the user to directly interact with the agent’s response.

Once the route is solved, the custom agent emits a UXSuggestion that describes the UI needed for its result:

await sendUXSuggestion({
  type: "directions",
  data: { layerId: layer.id },
}, config);

Neither the tool nor the custom agent creates DOM elements. Instead, the tool emits a UXSuggestion, the assistant turns it into a slot request, and the application creates and appends the arcgis-directions component for that slot.

assistant.addEventListener("arcgisSlottableRequest", () => {
  // find only slottable requests for directions UI
  const requests = assistant.slottableRequests.filter(
    (request) => request.name === "block" && request.data?.block?.type === "directions",
  );

  // Render new directions slots
  for (const request of requests) {
    const layerId = request.data.block.data?.layerId;
    // create the element to render
    const element = document.createElement("arcgis-directions");
    // the slot name is generated by the assistant for this request
    element.slot = request.slotName;
    element.mapLayerId = layerId;

    // append element to the assistant so it becomes part of the DOM
    assistant.append(element);
  }
});

Once the element is appended to the assistant, it becomes part of the DOM and can render the directions UI for the specified route layer.