Chat component history using REST API

💬 App Building
1

  • Goal: I am trying to use the retool chat component to chat with via REST API with my n8n chatbot I built. I can send messages and I can also see in the console that the API works. But I dont know how to show the output in the chat component.

  • Steps: I have tried several things. Saving the output as a variable and then setting it as chat.history, but nothing really worked.

  • Details: When using the standard Retool AI Query that comes with the chat component there is a message history field that is pre-set with {{ chat.messageHistory }}. I dont know how to do this using the REST API.

  • Screenshots:

  • The REST API

    Screenshot 2025-02-26 at 14.16.46
    Screenshot 2025-02-26 at 14.16.46992×1528 70.5 KB

  • The Chat component:

    Screenshot 2025-02-26 at 14.17.32
    Screenshot 2025-02-26 at 14.17.32640×1774 64.8 KB

  • How it normally works, when using retools own Retool AI Query:

    Screenshot 2025-02-26 at 14.18.28
    Screenshot 2025-02-26 at 14.18.28992×1566 62.5 KB

  • App json export:

2

just to clarify. When adding the chat component it comes with the standard retool AI resource i posted above. But I want to use one of these (REST or Chat):

Screenshot 2025-02-26 at 14.26.12
Screenshot 2025-02-26 at 14.26.12986×582 37.8 KB

3

Hi @Luca_Solari,

Very interesting use case!

I think the chat component was definitely created with the Retool AI query in mind as the primary way to set chat history, so I am curious to see if we can get it to work with data from another query source instead.

From my testing, it looks like the chat component is hardwired to only work with Retool AI queries. This is something I can definitely bring up with the team to make it more robust.

So in my mind we could gather the data with the REST Query, store this somewhere the Retool AI Query can access, then pass in into the 'Message History' input field from the first screenshot of the AI Query.

My other thought was to see if there is a method to programmatically set the chat component's history :thinking: as I was hoping we could take the REST API and in the 'success' handler run something like chat1.setHistory(restQuery.data) but there doesn't seem to currently be an exposed method for this.

Are you using the REST API query to get the data of all the chat history or just the latest message?

Another option would be to take the results of the REST API call and pass that query.data into the 'message history' of the AI Query.

Alternatively, we could store the REST API query results in a database(Retool DB or Postgres, etc.) or in Retool Vectors and have the built in Retool AI query pull from there into the chat component in a similar way via the 'Message History' input window.