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.

(1) 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

// Prompt Example
Create a travel app using my most recent trip to San Francisco.

The bottom nav bar should have the following
- Home - a 2x3 grid of tiles where each tile represents a neighborhood in San Francisco
- Tips - this is where you have sections on how to prepare for your trip, eg what you need before, how to get around, what to eat, what apps to download
- Settings - general settings, where users can set dark mode, etc

On the home page should have the following elements
- A top nav bar with a title 
- The main content of the screen should be a 2x3 grid of tiles, where the tiles have an image of each neighborhood with a title of the neighborhood
- There are six neighborhoods
(1) Mission
(2) SoMa
(3) Richmond
(4) Sunset
(5) North Beach
(6) Chinatown


When you click on a tile, you go into a screen dedicated to each neighborhood. This should be a full screen experience, but not represented on the bottom nav bar

Each neighborhood screen should have the following elements:
- A top nav with the title and a back button to go to the home screen
- The bottom nav should not be present in these screens
- The main section of the screen should have the following elements from top to bottom
    - A map with pins for locations. Choose three restaurants and three tourist attractions
    - A description of the neighborhood in three sentences. Use wikipedia or some other source
    - A description of each location with
            - Title
            - Description (one or two sentences)
            - Star rating of the location using either Google Maps or Naver Maps
            - A link to see that location
            - Clicking on the link navigates to a full screen view of that location
            - Pics, longer description, and a google maps link

For UI, use Apple’s Human Interface Guidelines found here https://developer.apple.com/design/human-interface-guidelines

For color palette, use these hex codes that are used for Spotify
- #1db954
- #212121
- #121212
- #535353
- #b3b3b3
- #1db954

(2) 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

(3) Navigation Bar Components

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

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

(4) 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, and has useful features such as color pickers to update the color palette for their apps.

*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"