Skip to main content

Getting started with Agent Chat

Learn how to use the Agent Chat component to interact with agents.

Version: Cloud and 3.223 Edge

The Agent Chat component provides an interface for users to interact with Retool Agents. Use the chat interface to ask questions or make requests, and the agent uses tools to respond to the request. The Agent Chat component functions similarly to the Chats tab available inside a Retool Agent.

The Agent Chat functionality cannot be used from public apps, as calling an agent requires a logged-in user.

Features​

Key features of Agent Chat include:

  • An automatically-created query that triggers a run of the agent you choose.
  • Inputs pulled directly from your agent, no configuration needed.
  • Customizeable styles.

Prerequisites​

Before you get started with an Agent Chat component, you must first create an agent. Refer to the Retool Agents documentation for more information.

Specify content options​

The Content section of the Inspector contains settings that control the content of Agent Chat, including:

  • Title: The title of your agent. Note that you must check the Show header setting in the Appearance section for the title to appear.
  • Query to trigger: The query triggered when a user sends a message.

Agent Chat configuration.

When you add the Agent Chat component to the canvas, Retool automatically generates a query that accesses a Retool Agent. You can customize this query as necessary.

You can also manually create a resource query that calls an agent using the Retool Agent resource.

Consider using Text or another component to explain the purpose of your agent and the kinds of requests that it can handle.

Customize appearance​

You can customize the presentation of your component in the Spacing and Appearance sections of the Inspector.

All components have a Hidden setting, which you can dynamically control with a truthy value that evaluates to true or false. You can also control the hidden property for a component using the .setHidden() method from event handlers and JavaScript queries.

You can also create custom style rules using the Styles setting. Each component has different styles that you can configure, but common ones include colors, fonts, and text styles. Use app-level or organization-level themes to set these styles across all components.