Thunkable Tuto - Integrate Gemini API

In the first part of this tutorial, we connected our mobile prototype to a Firebase database. This is a great practice, especially relevant if you plan to transition to coding with frameworks like React Native later on. However, this approach keeps us dependent on a pre-filled database.

Today, we are shifting into high gear. After 20 years in the IT industry, I am still fascinated by how easily we can now integrate artificial intelligence into an app with just a few clicks. We are going to replace our static database with the Google Gemini API to generate 100% custom quotes on the fly!

Foreword: This article, enhanced with improvements generated by AI (Google Gemini), is made available under the CC BY-ND 4.0

Step 1: Get the brain’s keys (Google AI Studio)

To talk to Gemini from our app, we need a pass: an API key.

  • Go to Google AI Studio.
  • Sign in with your Google account.
  • In the left menu, click on Get API key and then on the Create API key button.

Generate an API key on Google AI Studio

  • Once the API key is created, click on it to display it.
  • Copy this long string of characters and keep it safe (never share it publicly). Display an API key on Google AI Studio

Step 2: Adapt MotivApp’s Design

Let’s pick up our Thunkable project where we left off. We are going to add some interactivity.

  • On Screen1 (Home): Add a Text Input component right above the “Inspire me!” button. Change its Hint property to display: “Enter a theme (e.g., Sports, Coding…)”. Rename this component Input_Theme. Updated design with text input

Step 3: Prompt Engineering with RISEN

This is the core of the reactor. To prevent the AI from rambling, we will structure our request (prompt) with the professional RISEN framework. Here is how we will constrain the gemini-2.5-flash model:

  • R (Role): Act as an expert motivational life coach.
  • I (Instruction): Write an original motivational quote based on the following theme: [Theme typed by the user].
  • S (Steps): 1. Analyze the theme. 2. Find an inspiring angle. 3. Formulate the quote. 4. Attribute it to a fictional or real author.
  • E (End Goal): The reader must feel an immediate urge to take action.
  • N (Narrowing): The response MUST follow this strict format: ‘Quote - Author’. Do not exceed 20 words. Do not include any greetings.

Here is exactly the final text our app will assemble, replacing the end app variable with the theme chosen by the user:

Act as an expert motivational life coach. 
Write an original motivational quote based on the following theme: [USER'S THEME]. 
1. Analyze the theme. 2. Find an inspiring angle. 3. Formulate the quote. 4. Attribute it to a fictional or real author. 
The reader must feel an immediate urge to take action. 
The response MUST follow this strict format: 'Quote - Author'. Do not exceed 20 words. Do not include any greetings.

Step 4: Logic and Blocks

On Screen1

Blocks overview

Screen1 Blocks overview

Blocks sequence

Initialisation

  • When Screen1 opens, empty the Input_Theme.
  • When clicking on Btn_Inspire, we must check that the Text in the Input_Theme component is not empty before executing the next steps.

Building the API Request:

  • Create a Web API component : on the left list, uncollapse “Advanced”, then click on [+] at the right side of “Web APIs”. This will replace Firebase to communicate with Google’s servers.

    • Rename it to Gemini.
    • Configure the API URL: set the field “URL” to https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent.
    • Configure your API key:
      • Set the field “Property” to key
      • Paste your API key in the field “Value”.
      • Click on [Add].
    • Setup the header:
      • Set the field “Property” to Content-Type
      • Set the field “Value” to application/json.
      • Click on [Add].
    • Click on [Done].

WebAPI configuration

The Gemini API is very strict about the data format it receives. It expects a JSON object containing a contents list, which itself contains a parts list, which finally contains the text attribute with our prompt. In Thunkable, the easiest way to build this request body is to use a text block.

  1. First, create an app variable named full_prompt and use a join block to stick the large RISEN text block (seen in step 3) with the Text in the Input_Theme component.
  2. Grab another advanced join block (which allows pasting several pieces of text together).
  3. In the first box, paste exactly this beginning of JSON code: {"contents": [{"parts": [{"text": "
  4. In the second box, drag your full_prompt app variable.
  5. In the third box, close the JSON code with: "}]}]}
  6. Assign the whole thing to the set Web_API's Body to block.

Prompt building

Extracting the JSON response:

  • Trigger the call with the call Gemini's Post block.
  • The API replies with a large block of complex textual data (response).
  • In the then do section, we will isolate the text we want by nesting several blocks, much like Russian dolls. We will assign this entire path to a new citation app variable.
  • To fully understand this large red and blue block, read it from right to left (from the inside out):
    1. We turn the raw text into a manageable object: get object from JSON [response].
    2. We extract the candidates property.
    3. This is a list, so we grab the first item: in list [...] get # 1.
    4. We extract the content property.
    5. We extract the parts property.
    6. This is also a list, so we grab the first item: in list [...] get # 1.
    7. We finally extract the text property.
  • Separating the quote from the author:
    1. Create an app liste_reponse app variable.
    2. Assign to it the make list from text block (in Lists), using our citation app variable, and type " - " in the delimiter box.
    3. Now that our data is clean and split, finish by dragging the Maps to Screen2 block.

Web API Call and JSON parsing

On Screen2

  1. Update Label_Quote by getting the first item of this list (in list get # 1 block).
  2. Update Label_Author by getting the second item (in list get # 2 block).

Display the quote

Step 5: Try it out!

The moment of truth has arrived.

  • Launch the app via Thunkable Live on your phone (or via the web preview).
  • On the first screen, type a theme you care about in the text input (for example: “Stress management”, “Pushing your limits”, or “Learning to play guitar”).
  • Tap Inspire me!.
  • After a brief second (the time it takes for Google’s model to generate its response), you will automatically switch to the second screen.
  • And there you have it! A unique, perfectly formatted quote tailored to your theme appears right before your eyes. You can just click “Go Back” to try with a new idea!

Conclusion

Congratulations! You have just created a mobile app capable of generating endless content using artificial intelligence. The limits of no-code are being pushed every day, and now is the perfect time to experiment.

Feel free to modify the RISEN prompt to create a recipe generator, a poem creator, or even an interactive quiz. The floor is yours!