Getting Started with AI in Thunkable

Introduction

In this tutorial, we’ll walk through how to build a simple AI-powered app using Thunkable. This guide is ideal for beginner developers who are curious about AI and want a fun, visual way to explore app development.

Step 1: Create a New Project

Head to Thunkable.com and log in or sign up. Once you're in the dashboard, click on “Create New App” and name it something like “AI Demo”.

Step 2: Add a Text Input and Button

From the component panel, drag in a Text Input (for the user to type a question), a Button (to trigger the AI response) and a label (to display the Open AI response).

Step 3: Get Your OpenAI API Key

To integrate the AI capabilities into your Thunkable app, you’ll need an OpenAI API key. Here’s how to get one:

1. Go to the OpenAI platform website.
2. Log in to your OpenAI account or create a new one.
3. If it’s your first time logging in, you might be asked to verify your email and phone number.
4. Once logged in, click on your profile icon in the top-right corner of the page and select "API Keys" from the dropdown menu.
5. In the API Keys section, click on the Create new secret key button.
6. Give your key a name (e.g., "Thunkable Project Key") and click Create.
7. Once created, copy your API key immediately. Be sure to store it securely, as you won’t be able to view it again for security reasons.

Note: Never share your API key publicly. Keep it secure to prevent unauthorized access to your OpenAI account.

Step 4: Connect the OpenAI API using Thunkable's OpenAI Services Block

Thunkable offers an easy way to connect to OpenAI using its built-in OpenAI Services block. Here’s how to set it up:

1. In the Blocks tab, click on advanced and add a OpenAI: Services component

1. Drag onto the page a set API Key block and add the OpenAI API key you generated in the previous step.
2. Also drag onto the page a Open Ai text completion block we will set this up in the next step

Once the block is configured, it will automatically connect to OpenAI’s servers, send your request, and retrieve the AI’s response.

Step 5: Display the AI’s Response

Using the Label component we will show the AI’s reply after the API call is complete. You can update the label’s text using the set Label.text to block.

1. From the Button component we added earlier, drag in a when Button Click block from the Blocks tab.
2. Inside this block, add the OpenAI: Set API Key block and the OpenAI: Get Completion block we added in the previous step.
3. For the OpenAI: Get Completion block, set the Prompt input to the text from your Text Input component.
4. Finally, inside this block, update your Label component’s text to show the AI's response.

Step 5: Test and Expand Your App

That’s it — you’ve just built your very own AI chatbot app in Thunkable! 🎉 You can test it out using the live test option within Thunkable to see how your app responds to different prompts.

Feeling adventurous? Try expanding your app by experimenting with new prompt styles, adding voice input for a hands-free experience, or even exploring image generation with AI.

As a challenge, see if you can add some basic error checking. Use an if/else block to display a helpful message if something goes wrong with the API response.