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.

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.

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

Preview options

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.

If you leave these fields blank, the system will automatically adopt the default commands of the pnpm manager.

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.

Share links expire in 30 days.

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

The screen displays sharing options.

Rebuild

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

This command will permanently delete the node_modules folder, reinstall all project dependencies, clear the preview session data, and restart the development server.