> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/ai/getting-started/quickstart.md).

# 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

{% embed url="<https://www.youtube.com/watch?v=7KgI9tzSlAc>" %}

***

## 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](http://coolers.co) for inspiration is recommended

```
// Prompt Example
Create a travel app based on a San Francisco trip, with three tabs: Home, Tips, and Settings.

Home:
A 2x3 grid of neighborhood tiles — Mission, SoMa, Richmond, Sunset, North Beach, and Chinatown — each with a photo and name.
Tapping a tile opens a dedicated neighborhood screen (without the bottom nav). Each neighborhood screen includes:

- A map with 3 restaurants and 3 attractions pinned
- A short description of the neighborhood
- A list of all 6 locations, each with a title, brief description, and star rating
- A link per location that opens a full-screen detail view with photos, a longer write-up, and a Google Maps link


Tips:
A guide covering how to prepare for your trip, getting around, what to eat, and useful apps to download.

Settings:
General preferences like dark mode.

Color palette follows Spotify's scheme: #1DB954, #212121, #121212, #535353, #B3B3B3.
```

### 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.

<figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2FmJAS23MDDsRsPSYJdDwc%2FScreenshot%202025-12-12%20at%203.18.51%E2%80%AFPM.png?alt=media&amp;token=b9869d06-cf0e-43e2-b680-1325b54a6c39" alt=""><figcaption></figcaption></figure>

### 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.

{% hint style="info" %}
To use Voice Input, you should approve microphone permission.
{% endhint %}

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

<figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2FpXZ7vsc41Eb6CuXXF0Jl%2FScreenshot%202025-12-15%20at%203.47.56%E2%80%AFPM.png?alt=media&amp;token=2ea7e72d-ef33-42c5-9f6d-73be5da885dc" alt=""><figcaption></figcaption></figure>

### 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.

{% hint style="info" %}
Using Max consumes more tokens than Standard, typically around 1.5× on Modify mode and 2× on Discuss mode.
{% endhint %}

### Thinking Effort

Thinking Effort controls how much reasoning the AI uses when working on your prompt. You can choose between three levels:

* **Low** uses less reasoning for faster responses and simpler tasks.
* **Medium (Default)** balances speed and reasoning for most tasks.
* **High** uses more reasoning for complex tasks and problems that require deeper analysis.

Higher thinking effort uses more tokens per prompt. The available token cost is shown at the bottom of the AI settings panel.

**You can adjust Thinking Effort independently from the selected AI model. For example, you can use Standard with Medium thinking effort or select Max with High thinking effort for more complex requests.**

### 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.

<div align="left"><figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2FK1rLbx2lzh2MFAdjsFD3%2FScreenshot%202026-06-29%20144125.png?alt=media&amp;token=f91918e0-6cfd-46c0-916e-22b5cfd2a1ae" alt=""><figcaption></figcaption></figure></div>

### Mention Screens in Chat

You can reference existing project screens directly in the chat when prompting the AI.

To mention an asset:

1. In the chat input, type **@**.
2. Select **Screens** from the dropdown.
3. 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.

{% hint style="info" %}
Only screens that already exist in your project are available from the **@** menu.
{% endhint %}

### Mention Lists in Chat

You can reference existing project lists directly in the chat when prompting the AI.

To mention an asset:

1. In the chat input, type **@**.
2. Select **Lists** from the dropdown.
3. Choose the **List** you want to reference or type the screen name.

Once selected, the list is inserted into your message as a tag rather than plain text, making it easy to identify and ensuring the AI references the correct list.

{% hint style="info" %}
Only lists that already exist in your project are available from the **@** menu.
{% endhint %}

## Navigation Bar Components

### **App Icon**

The image that represents your app on your users' mobile devices.

To customize your app’s icon:

1. Click the plus icon (+) at the left of your project name.

<figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2FCnUKWeHRMK5BRnY2RY8r%2Fapp%20icon%20b.png?alt=media&amp;token=cba71eff-60e3-4474-ac4f-24b7f09d8279" alt=""><figcaption></figcaption></figure>

2. Click **Click or drag an icon to upload** to select an image from your device, or drag the files into the provided drop window.

<div align="left"><figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2FtpMjef91owGk2qg9E5nx%2Fapp%20icon%20po.png?alt=media&amp;token=31503d84-b0e0-44d7-b819-241ce1556431" alt="" width="321"><figcaption></figcaption></figure></div>

{% hint style="info" %}
This feature may only be available for Creators on certain Thunkable plans. Please refer to our [pricing page](https://thunkable.com/#/pricing) for more information.
{% endhint %}

### **Show/Hide Panel**

Toggles the visibility of the side panel with the prompt box and code generation streaming

<figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2F9L90FzFxwGhm40SKvZVH%2FScreenshot%202026-05-01%20at%202.46.54%E2%80%AFPM.png?alt=media&amp;token=686fdc8d-4336-4cfc-929e-be5716d8e931" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2FQBZGC9Pg6vvuHHgEq7Fn%2FScreenshot%202026-05-01%20at%202.40.56%E2%80%AFPM.png?alt=media&amp;token=4757c306-0aae-4d79-9970-6a1b088f2d87" alt=""><figcaption></figcaption></figure>

#### Edit Component Properties

Click a component in Edit View to open its properties panel on the right. Changes you make there are saved to your app's code, show in the preview straight away, and can be undone. Click **Go to Code** to jump to the component in Code View.

**Tab bar**

Click the tab bar at the bottom of a screen to open the **Tab Bar** panel:

* **Visibility**: **Show tab bar**, **Hide on keyboard**, **iOS Liquid Glass**, and **Display** (Icon + Text, Icon only, or Text only).
* **Colors**: **Active tint**, **Inactive tint**, **Active background** and **Inactive background**.

**iOS Liquid Glass** uses the native iOS tab bar, which iOS 26 and later draw as a floating glass bar. It also shows in the iPhone and iPad previews. Android, earlier iOS versions and the desktop preview keep the standard tab bar. New apps have it turned on; for an app created before October 20, 2026, turn it on here.

{% hint style="info" %}
With iOS Liquid Glass on, iPhone and iPad use only the **Active tint**. The other colors still apply on Android, earlier iOS versions and the desktop preview. Liquid Glass needs every tab to have an icon and no header of its own; otherwise the app keeps the standard tab bar.
{% endhint %}

**Switches and sliders**

Click a switch or slider to edit it:

* **Switch**: **Thumb color**, **On color**, **Off color**, **Off background (iOS)**, **Switch state** and **Interaction enabled**.
* **Slider**: **Thumb color**, **Filled track color**, **Unfilled track color**, **Minimum value**, **Maximum value**, **Step**, **Value**, **Interaction enabled** and **Reverse direction**.

If your app's logic sets the switch state or the slider value, the panel shows it as **App controlled**, and you change it in the code instead. When an iPhone or iPad is selected, the preview draws switches and sliders in the iOS style.

When the panel says **Control properties apply to every instance of this component**, the component is reused, and your change applies everywhere it appears.

### 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

<figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2FmiEcHUZsmmfQnu1wdv8N%2FScreenshot%202026-05-01%20at%202.41.05%E2%80%AFPM.png?alt=media&amp;token=6b511516-b6f0-4d4e-b346-d0a882bc9c17" alt=""><figcaption></figcaption></figure>

#### Console output

While you test in Preview Mode, the **Console output** button at the bottom right of the canvas collects errors and failed network requests from your running app. Some entries are expected: orange entries are warnings, such as a "not found" response, and a red badge means at least one entry is an error.

Click **Console output** to open the list, then click **details** on an entry to see more. From there you can:

* **Copy logs** to copy every entry to your clipboard
* **Clear** to empty the list
* **Investigate with AI** to send the entries to the AI so it can find the cause and fix it. You can first describe what wasn't working as expected in the optional note field.

{% hint style="info" %}
Investigate with AI sends a prompt, so it uses tokens. To hide the console, turn off **Preview console** in [Account Settings → Preferences](https://ai.thunkable.com/account/preferences).
{% endhint %}

### **Code View**

Sets the view to show the underlying code for your mobile app. Users can directly edit the code

<figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2FJAnRzQithqheQgiAut6k%2FScreenshot%202026-05-01%20at%202.41.08%E2%80%AFPM.png?alt=media&amp;token=6bed77f3-7cbd-47c8-9254-c09a60a695e1" alt=""><figcaption></figcaption></figure>

### **Screen Navigator**

Allows users to navigate and set the active screen via drop down menu select.

<figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2FwqZVWXMrdIidKRJnIJX5%2FScreenshot%202025-12-12%20at%203.46.49%E2%80%AFPM.png?alt=media&amp;token=097d8afd-9460-4c46-9160-f990a9ec0fb2" alt=""><figcaption></figcaption></figure>

### **App Preview**

Enables users to preview their mobile app in the official Thunkable Mobile App

<figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2F0tJhwpdeLrl6dqlhREDA%2FScreenshot%202025-12-12%20at%203.52.22%E2%80%AFPM.png?alt=media&amp;token=202a1f27-1f40-4338-baec-6804c840646c" alt=""><figcaption></figcaption></figure>

### **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](https://docs.thunkable.com/settings/manage-your-projects/download/iosdownload#download-ios-app)

Android: Sends an email link to [download an APK](/ai/downloading/android-downloading.md) to install on your Android device

<figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2Fzw1GDHL9sMUP2eJd7OxE%2FScreenshot%202025-12-12%20at%203.52.58%E2%80%AFPM.png?alt=media&amp;token=8996bdf0-4a27-475f-b822-69a7007d7d86" alt=""><figcaption></figcaption></figure>

### **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.

<figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2FSeHI4oejYharbAMPtsis%2FScreenshot%202025-12-12%20at%204.05.54%E2%80%AFPM.png?alt=media&amp;token=58011eef-2120-42ef-bd1d-2f5aecf4eb78" alt=""><figcaption></figcaption></figure>

## 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

<figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2FmSLrdvIreuOPva9rtowf%2Fimage.png?alt=media&amp;token=b7ecfe50-6c0c-4af8-96fa-9b6f90735d6a" alt=""><figcaption></figcaption></figure>

### 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.

{% hint style="info" %}
**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?"
{% endhint %}

<figure><img src="https://1781702014-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCI51jzBbSRAMaZWD1kx4%2Fuploads%2FXcG6AkA9mY3GxYMg3fj5%2Fimage.png?alt=media&amp;token=212fb0dc-13ab-4ca9-a3e4-e279b6134f7e" alt=""><figcaption></figcaption></figure>