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.
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
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.
Only screens that already exist in your project are available from the @ menu.
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.
This feature may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information.
Project Privacy
Indicates whether your project is private or publicly viewable.
Private projects are only available in our Paid Plans
Show/Hide Panel
Toggles the visibility of the side panel with the prompt box and code generation streaming
App Secrets
Opens and closes the API keys panel, where you can view and edit the keys for any APIs connected to your app.
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
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.
Tip: Use Discuss Mode to ask our AI agent where to find elements in your app to update directly. Common prompts include "Where in code can I update an image?" or "Where in code can I update a description?"
Last updated