Skip to main content

Getting started with Chat

Learn how to use the Chat component to provide access to an AI chatbot.

The Chat component provides an interface for users to interact with AI. You can choose how the AI model behaves and the actions it takes in response to user messages.

Demo

Features​

Key features of Chat include:

Specify content options​

The Content section of the Inspector contains settings that control the content of Chat, such as:

  • AI name and Sender name, which define the name of the user and the AI in the chat.
  • Actions, which enable the user to copy AI responses.
  • Add-ons, which customize the layout of the content in the AI chat, including Avatar and Header.

Configure Retool AI​

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

Automatically-generated Retool AI query

The query uses your default Retool AI model. If you haven't set one up, this is a Retool-managed OpenAI configuration. Click Configure more models to set up a different AI model to use in your Chat.

Add context to answers​

In the Retool AI query, you can update the Input, Message history, and System Prompt to reference components and queries in the app. Otherwise, the AI does not have access to the contents of the app. For example, set System Prompt to You are a helpful assistant. Use {{ customersTable.data }} to answer questions about customers, and {{ billingTable.data }} to answer questions about billing.

Optionally toggle the Use Retool Vectors to provide more context to your query setting. Retool Vectors enables you to use a vector database to store unstructured text from documents and web pages for use with Retool AI. If you enable this setting, the Chat component incorporates information from your the selected vector in responses to users.

Configure data streaming​

Data streaming is enabled by default on queries that use the Generate chat response action type. Streaming enables Chat to incrementally update the user interface as soon as a row or chunk of data arrives, and the data property continuously updates.

To turn off data streaming for Chat, open the Advanced settings of your Retool AI query and uncheck the Stream response data and update app model incrementally setting.

Configure user interaction​

The Interaction section of the Inspector contains settings that control user interaction, such as:

  • Query to trigger, which identifies which query to trigger when a user sends a message. You can update this setting to trigger any other Retool AI query.
  • Disable send, which disables the input field and send button.
  • Event handlers, which listen for and handle interactions with your components.

As with other components, you can access Chat component properties using JavaScript. For example, Chat components have a messageHistory property that contains all messages in the chat log. You can reference specific messages using {{ chat1.messageHistory[0].content }}.

Customize appearance​

You can customize the presentation of your component in the Spacing and Appearance sections of the Inspector. The settings available in the Appearance section depend on the type of component you use.

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.