# Quickstart

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

<figure><img src="/files/n7pMIhbxhItOWUBZG1ua" alt=""><figcaption></figcaption></figure>

```
// 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&#x20;

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.&#x20;

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.&#x20;

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

<figure><img src="/files/gqlttJrciMpMscS6MPXY" alt=""><figcaption></figcaption></figure>

## 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="/files/Jtjq5U08pbBtBLqPHQiC" alt=""><figcaption></figcaption></figure>

### **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="/files/0KF6QFU2uAtqhcHokgvn" alt=""><figcaption></figcaption></figure>

## Navigation Bar Components

### **Project Privacy**

Indicates whether your project is private or publicly viewable.&#x20;

Private projects are only available in our Paid Plans

<figure><img src="/files/mbTQYQhz4CMgYqIv6hAf" alt=""><figcaption></figcaption></figure>

### **Show/Hide Panel**

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

<figure><img src="/files/SoL8ezNk5PUPftUTaxLh" alt=""><figcaption></figcaption></figure>

### **App Secrets**

Opens and closes the API keys panel, where you can view and edit the keys for any APIs connected to your app.

<figure><img src="/files/PO7383Ui55vV1Cgmnkrs" 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="/files/mHrgjDs8HCVQAKDiudyE" alt=""><figcaption></figcaption></figure>

### 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="/files/VnBLg5kINUR9m3eQ3LWT" alt=""><figcaption></figcaption></figure>

### **Code View**

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

<figure><img src="/files/F0iRXtbwIhrjdRXKOWRQ" alt=""><figcaption></figcaption></figure>

### **Screen Navigator**

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

<figure><img src="/files/EiusuAajreAd9hsPFSke" alt=""><figcaption></figcaption></figure>

### &#x20;**App Preview**

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

<figure><img src="/files/lRPvwVdMOkwn8YieczwU" alt=""><figcaption></figcaption></figure>

### **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](/downloading/android-downloading.md) to install on your Android device

<figure><img src="/files/4NhXKrwqRbjPayR1HjYe" 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="/files/aFtowUgwU0CmLiMYRHpd" 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="/files/ibGlJbE48t74QQdbitE6" 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="/files/LRAFlYG8UytptQgmdSku" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aidocs.thunkable.com/getting-started/quickstart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.