> 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/chat.md).

# Chat

After the initial prompt to create your app, the platform automatically redirects to the Chat tab where you can view and edit the apps.

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2FGIZ7VPXQkhrS7e9FKakQ%2Foverview-chat-creator-engl.gif?alt=media&amp;token=65733908-721a-4065-9558-0371f1cf5589" alt=""><figcaption></figcaption></figure>

Follow the available features below:

### Rename Chat

To change the chat name, follow these steps:

1. Click the three-dots icon next to the chat name.
2. Select the **Rename Chat** option.
3. In the modal, type the new name.
4. Click **Save**.

### Delete Chat

To change the app name, follow these steps:

1. Click the three-dots icon next to the application name.
2. Select the **Delete Chat** option.
3. In the modal, confirm the deletion by clicking **Delete Chat**.

### Add files and contexts to the Prompt

1. In the chat panel, click the + button to open the list of attachment and scope options.
2. You can choose the following options:
   * a. **Code context:** Adds the complete context of the current code repository to the conversation.
   * b. **Attach files:**
     * i. **Attach file as chat context:** Inserts a file to act specifically as history or support instructions in the chat.
     * ii. **Send file to the codebase:** Sends the file directly to the project's directory tree.
   * c. **Themes:** Changes the visual identity of the panel. Choose one of the available options or create a new theme. [Read the Themes article](/english/skyone-studio/artificial-intelligence/vibe-coding/library.md#how-to-create-a-new-theme-in-the-library).
   * d. **Show token usage:** Displays the amount of tokens consumed in the interaction with the AI. To remove this data, simply click Hide token usage.

### Execution mode

Choose the prompt execution mode:

* **Local Agent (default):** Executes commands and applies changes directly in the local environment.
* **Build:** Creates and modifies code or files in the project with a focus on implementation.
* **Ask:** Answers questions, explains concepts, and analyzes the project without altering files (read mode).
* **Plan:** Maps out the problem and generates a detailed step-by-step plan before starting execution.

### AI Model

By default, the model is set to 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.).

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

### Toolbar

The toolbar on the right side provides the following options:

#### 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 / Disable Component Selection:** Click the cursor icon to enable direct block inspection on the page or disable interactive selection.
* **Enable annotations:** Click the pen/magic wand icon to enable the creation of notes and visual demarcations on the interface under development.
* **Back / Forward:** Use the directional arrows to navigate through the history of pages rendered 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:** Completely restarts the execution.
* **View in another tab:** Click the external link icon to project the application in a new full tab of your browser.
* **Publish:** Click to make the application available in production.
* **Web, Tablet and Mobile Modes:** Switch between the three device icons located at the top right to test the layout's responsive behavior in Desktop, Tablet, and Mobile formats, respectively.

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2FBwH8MzrKRhXmmN7tGYDU%2F0D667B81-9540-4661-B653-1D34C5707383.png?alt=media&amp;token=d2608bd9-4ab0-45bb-8cd8-a2f2708dd873" alt=""><figcaption><p>Preview options</p></figcaption></figure>

#### Errors

Run periodic checks in this panel to scan your application for *TypeScript* compilation flaws or other structural problems.

#### Code

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

#### Config

Access the **Config** menu to manage the credentials and execution commands for your application.

* **Environment Variables:** Add sensitive or environment-specific configuration keys to your project.
  1. Click + Add environment variable.
  2. Fill in the **Key** and **Value** fields.
  3. Click **Save** to finish. To edit or delete previously created variables, click the pencil (edit) or trash (delete) icons next to the corresponding variable.
* **App Commands:** Configure custom commands for dependency installation and application startup.
  1. Click + Configure custom commands.
  2. Set the installation command (example: `pnpm install`) and the startup command (example: `pnpm dev`).
  3. Click **Save**.

{% hint style="info" %}
If you leave these fields blank, the system will automatically adopt the default commands of the pnpm manager.
{% endhint %}

#### Security Review

Under **Security**, you can audit your project's code, define compliance rules, and implement authentication systems automatically.

* **Run Security Review:** Click this button to start a full scan. The system will scan the project code to assess the security level and identify potential vulnerabilities.
* **Edit rules:** Click this option to open the compliance rules dialog box. Here, you can include specific contexts of your project to guide the reviews. The inserted content is automatically saved in the `SECURITY_RULES.md` file. This helps the platform focus on real vulnerabilities and prevents false positive alerts that do not apply to your scenario. When finished, click Save.
* **Fix The Issue:** After running the review, if vulnerabilities are found, a Fix The Issue button will be available next to each item. By clicking it, the Artificial Intelligence will automatically apply corrections and optimizations to the affected code.
* **Add Login Layer:** Implement secure authentication (email and password) to access your application instantly. Just click the Add Login Layer button. The system will use the existing database in your project or automatically configure an SQLite database if there isn't one, without requiring additional manual configurations.

#### Publish App

In the **Publish** menu, choose how you want to publish the app:

* Preview sharing: Copy the URL to share the app preview. You can also generate a new URL.

{% hint style="info" %}
Share links expire in 30 days.
{% endhint %}

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

<figure><img src="https://2493694111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQPcfIOA6Tl2Bmk6CdV2O%2Fuploads%2FirMcU52td2sqHvBG0olw%2F938B9ACD-FE86-46E5-87D9-385A078FDD9F.png?alt=media&amp;token=7bedcdbb-99ac-44f9-b301-a07e41cd1738" alt=""><figcaption><p>The screen displays sharing options.</p></figcaption></figure>

#### Rebuild

Click this button to force the restructuring of the development environment.&#x20;

{% 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.
{% 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/chat.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.