Adding Voice Input to Your AI App

Introduction

In this tutorial, we'll upgrade our AI app by adding voice input using Thunkable’s built-in Speech Recognizer component. This lets users speak their prompts instead of typing them — perfect for accessibility and fun!

Step 1: Open Your Thunkable AI Project

Open the Thunkable app you created in the last tutorial, or create a new one if you're starting fresh. Make sure it already connects to OpenAI as shown in the previous tutorial.

Step 2: Add a Voice Button

Drag a new button onto your screen and label it something like "🎤 Speak to AI". When tapped, it will activate the Speech Recognizer and capture user input.

Step 3: Add the Speech Recognizer

In the Blocks section, drag in a Speech Recognizer block.

Step 4: Capture Voice Input

Still in the Blocks tab. Let’s create the logic for when the button is clicked:

1. Use when VoiceButton.Click block to start speech recognition
2. Add call SpeechRecognizer
3. Then, set your Text_Input.text to the spoken result

Step 5: Test It Out

Try out your app by tapping the voice button and asking the AI something out loud. The AI should respond just like it would with typed input!

Want to take it even further? You could add text-to-speech to read the AI's response aloud!