> For the complete documentation index, see [llms.txt](https://docs.skyone.cloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.skyone.cloud/english/skyone-studio/artificial-intelligence/vibe-coding/how-to-create-app-in-creator.md).

# How to create app in Creator

Starting and customizing your project using Creator's artificial intelligence features is very simple:

### **1. Create projects by prompt**

1. Access the **Creator** home page.
2. Locate the chat dialog box.
3. Describe in detail the application you want to build.
4. Press Enter to send the initial command.
5. Send new commands throughout development to refine and adjust your project as you progress.

{% hint style="info" %}
Important: Provide clear and specific instructions, especially in the first prompt, to achieve the best results. This allows the Artificial Intelligence to understand the exact goal instead of trying to predict missing requirements.
{% endhint %}

#### **Example of writing prompts**

| ❌ Vague prompt                                                     | ✅ Adequate prompt                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Create a support form application to save tickets in the database. | Create a web form page for opening technical support tickets. The form must contain the fields: Username (text), Email (with validation), Department (dropdown with IT, HR, and Finance), and Problem Description (long text field). When clicking "Submit", the system must validate if all fields are filled. If so, save the data in a database table named *tickets*, automatically generating an incremental numerical ID, the current date/time, and setting the initial status to 'Pending'. After a successful save, clear the form and display a success message on the screen with the generated protocol number. |

### **2. Add files and contexts to the Prompt**

1. Access the bottom of the chat panel.
2. Click the + button to open the list of attachment and scope options.
3. Select the ideal option for your task:
   * **Codebase Context:** Adds the complete context of the current code repository to the conversation.
   * **Attach Files:** Attaches generic local files to your message.
     * **Attach File as chat context:** Inserts a file to act specifically as a history or supporting instruction in the chat.
     * **Upload file to Codebase:** Uploads the file directly to the project's directory tree.
   * **Themes:** Changes the visual identity of the panel (available options: No Theme, Default Theme, or New Theme).
   * **Show token usage:** Displays the amount of tokens consumed during the interaction with the AI.

### **3. Choose the AI model**

By default, the model appears standardized as Auto, but you can choose another model of your preference. To do this:

1. Access the artificial intelligence model selection menu.
2. Select an option of your preference (OpenAI, Google, etc.).

### **4. Use voice input:**

1. Click the **Microphone** icon located on the right side of the chat text field.
2. Speak your command or instruction clearly.
3. Monitor the automatic audio transcription on the screen.
4. Click the send arrow to process the prompt.

### **5. Use the toolbar**

#### **Preview**

Manage the behavior and layout of your application in real time using the control buttons:

* **Hide Chat:** Click to hide or show the chat tab, expanding the technical preview area.
* **Select Component / Deactivate Component Selection:** Click the cursor icon to activate direct inspection of blocks on the page or deactivate interactive selection.
* **Activate Annotator:** Click the pen/magic wand icon to enable the creation of notes and visual markers over the interface under development.
* **Back / Forward:** Use the directional arrows (← and →) to navigate through the history of rendered pages in the simulator.
* **Refresh:** Click the circular arrow to reload the current state of the page in the preview.
* **Go to Page:** Use the route selector (text field with the `/` indicator) to switch or directly type the path of the page you want to view.
* **Restart App:** Click Restart to completely restart the execution of the test application's microservice.
* **View in Another Tab:** Click the external link icon to project the application into a new full tab of your browser.
* **Publish:** Click the blue Publish button to make the application available in production.
* **Web, Tablet, and Mobile Modes:** Toggle between the three device icons located at the top right to test the responsive behavior of the layout in Desktop, Tablet, and Mobile formats, respectively.

#### **System Messages**

Track the environment execution logs. Click the arrow located on the right side of the panel to open the records. You can filter messages by criticality levels (Info, Warning, and Error) and by origin (Server, Client, etc.), as well as clear the history by clicking the Trash icon.

#### **Errors**

Run periodic checks in this panel to scan your application for TypeScript compilation failures or other structural issues.

#### **Code**

Access this menu to verify and navigate through the folders, files, and lines of code automatically generated for your project.

#### **Config**

* **Environment Variables:** Add configuration keys to the project. Click Add Environment Variable to fill in the Key and Value fields, and click Save to finish.

{% hint style="danger" %}
Important: To modify environment variables intended for Supabase or the final production environment, access your hosting provider's console and update them directly there.
{% endhint %}

* **App Commands:** Configure custom installation and initialization commands for your app. Click Configure Custom Commands to define the installation command (*install command*, such as `pnpm install`) and the initialization command (*start command*, such as `pnpm dev`). Leave fields empty for the system to adopt default `pnpm` commands. Click Save to complete.

#### **Security Review**

* **Run review:** Trigger this module to scan the security and compliance level of your project's code.
* **Edit rules:** Click this option to open the compliance rules dialog box. This action allows including specific contexts of your project dedicated exclusively to security reviews. The filled content is saved in the `SECURITY_RULES.md` file, helping the platform detect additional vulnerabilities and avoid false positives that do not make sense for your scenario. Click Save to register changes.
* **Fix:** Click the Fix button next to any found vulnerability so that the AI automatically corrects and optimizes the item.

#### **Publish**

* Export source code: Download a compressed file (ZIP) containing the full source code of this app to perform a manual deploy. The system automatically removes `node_modules`, `.git`, `builds`, and local `.env` files to ensure the package's lightness and security.
* GitHub: Connect and synchronize your code directly with a GitHub repository to enable collaborative workflows and integrated versioning.

#### **Rebuild**

Click this button to force the restructuring of the development environment.

{% hint style="danger" %}
This command will permanently delete the `node_modules` folder, reinstall all project dependencies, clear the preview session data, and restart the development server. The procedure typically takes between 30 and 90 seconds to complete.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.skyone.cloud/english/skyone-studio/artificial-intelligence/vibe-coding/how-to-create-app-in-creator.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.