Quickstart
New to Thunkable AI? This Quickstart Guide will take you through everything you need to know to get started and bring your ideas to life.
App Building Video Guide
Project Generation Prompt
The prompt box on the home page is the starting point for creating your first mobile application.
For your first prompt, be as detailed as possible. A sample prompt is below for creating a travel app for visiting San Francisco.
Color Palettes: Using a tool like coolers.co for inspiration is recommended
Plan Mode
In addition to the ability to simply enter a prompt to get started, Plan Mode provides additional perspective on features you may find valuable on your app's first iteration.
Below you'll find additional considerations for an app using the above example: Create a travel app using my most recent trip to San Francisco.
The presented questions allow for a deeper level of customization from the start of your project.
"Who will use this app—just you, or do you want to share your trip with others?"
"What matters most for your San Francisco trip experience?"
"Should your trip data and photos stay on your device, or would you like them backed up?"
While Plan Mode offers these additional perspectives, you'll only need to answer questions relevant to your vision. Answer what matters - skip the rest.
Builder Screen Components
Prompt Box
The prompt box is the primary area where you build and modify your mobile app. Your prompts will generate code that your app is built on.
As a general rule, be as specific and detailed as possible when prompting.
Voice Input
Voice Input allows you to speak your prompt instead of typing it. This makes it faster and easier to describe the app you want to build, especially for longer requests or when you're away from your keyboard.
To use Voice Input, click the microphone icon in the prompt box, speak your request, and your speech will automatically be converted into text that you can review before submitting.
Attach image
The Attach image option lets you upload images to provide visual context for your prompt. This is useful for sharing UI mockups, wireframes, sketches, screenshots, logos, or design inspiration so the AI can better understand what you want to build.
To attach an image, click the + button in the prompt box and select one image from your device. Uploaded images will appear above the prompt and will be analyzed together with your text when generating the app.
Tokens Left
The Tokens Left indicator shows how much of your available AI context is left for the current conversation. As you send prompts and receive responses, the available tokens decrease.
Monitoring your remaining tokens helps you understand when you're approaching the conversation limit and when it may be beneficial to start a new chat for the best AI performance.
Discuss Mode
Discuss Mode allows you to work with our AI agent to plan the next update to your app and is most effective in troubleshooting. This is important for two reasons:
Speed - the AI agent response is faster and can help plan your next code prompt
Accuracy - by planning your next prompt with our agent, it makes the implementation and result of your next prompt more accurate
Choose AI model
The AI Model selector lets you choose which AI model is used for your next prompt. It is available in the chat composer footer, next to the Tokens Left indicator, in both Modify and Discuss modes.
Standard - is the default model for every new chat session. It provides fast responses with the same behavior and token cost as the existing AI experience.
Max - uses a more capable AI model designed for more demanding tasks.
Choose Max when you need:
More accurate and detailed responses.
Better reasoning for complex features.
Higher-quality code generation.
More effective troubleshooting and planning.
Mention Components in Chat
You can reference existing components in your app directly in the chat when prompting the AI.
To mention a component, select the component you want to reference by clicking on it in edit mode..
When a component is selected, the chat enters Apply to mode, indicating that any requested changes will be applied to the selected component.
Mention Screens in Chat
You can reference existing project screens directly in the chat when prompting the AI.
To mention an asset:
In the chat input, type @.
Select Screens from the dropdown.
Choose the Screen you want to reference or type the screen name.
Once selected, the screen is inserted into your message as a tag rather than plain text, making it easy to identify and ensuring the AI references the correct screen.
Navigation Bar Components
App Icon
The image that represents your app on your users' mobile devices.
To customize your app’s icon:
Click the plus icon (+) at the left of your project name.
Click Click or drag an icon to upload to select an image from your device, or drag the files into the provided drop window.
Show/Hide Panel
Toggles the visibility of the side panel with the prompt box and code generation streaming
Edit View
Sets the canvas to Edit View, which shows all screens in your mobile app and updates with each code change via prompt or manual update
Preview Mode
Sets the canvas to Preview Mode, showing a single screen and allowing users to test the app by interacting with buttons, content, and navigating between screens
Code View
Sets the view to show the underlying code for your mobile app. Users can directly edit the code
Screen Navigator
Allows users to navigate and set the active screen via drop down menu select.
App Preview
Enables users to preview their mobile app in the official Thunkable Mobile App
Share
When you generate a share link, it creates a copy of your app project at the point in time you generate the link. If you update your app and want your collaborators/remixers to have the latest copy, you'll have to generate a new link.
Download App
iOS: Detailed instructions found here
Android: Sends an email link to download an APK to install on your Android device
Publish App
Allows users to publish their app on iOS, Google Play, or as a Web App.
iOS: Sends a build to your App Store Connect account to publish to Apple’s App Store (Developer Account required)
Android: Sends a link to download an Android App Bundle (AAB) for you to upload to your Google Play Developer account
Web App: Publishes your app as a web app accessible via browser.
Code Editor
Navigating to Code Editor
Users can edit the code for their app directly by navigating to the Code View from the Nav Bar
Editing Code
Users can edit their app code directly from the code editor, which includes useful features such as color pickers for updating their app's color palette.
Last updated
Was this helpful?