Saving Chat History in Your AI App

Introduction

In this tutorial, we will show you how to save your chat history in your Thunkable AI-powered app. By using Local Storage, you can store previous interactions and retrieve them when the app is reopened, making the app feel more dynamic.

Step 1: Set Up the User Interface

Open your existing Thunkable AI app (or create a new one if you're starting fresh). You will need:

• A Text Input component for entering user queries
• A Button to trigger the AI's response
• A Label to display the AI's response
• A Simple List to display the chat history

Step 2: Setting up Local Storage

Next, you’ll need to use Thunkable’s Local Storage ability to store the chat. Here’s how to do it:

1. Drag in a Stored Variable component when in the blocks tab and name it answerList
2. In the Screen 1 section, drag in a when Screen 1 Opens block
3. We now need to check if our new Stored Variable is null, if so we'll set it to an empty list.

Step 2: Save the Chat History

Now, let's implement the logic to save the chat history.

1. In your screen 1 opened block, add an ELSE condition, by clicking on the +. In the ELSE set your simple list to show your stored list.
2. Then when yopu receive a response from Open AI add to your stored list.
3. In this example we join the question and the answer using | this allows us to split it later if we want to.

Step 4: Test and Refine Your App

Now that you’ve added the chat history functionality, it’s time to test your app! Try entering a few queries, and check if the responses are saved and displayed correctly.

You can enhance this feature by allowing users to delete their chat history or add timestamps to each message.