How to create projects 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.

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.

Example of writing prompts

❌ Vague prompt

✅ Adequate prompt

Create an AI app to identify plant diseases.

Create an AI-based plant diagnostic app. It must contain a quick registration screen (only email and password) that takes the user to a brief questionnaire about the type of plants they have at home. On the main screen, there must be a prominent, centered button to open the camera; the user takes a photo of the damaged leaves, the AI processes the image, displays the probable diagnosis of the disease with a certainty percentage, and lists three immediate treatment actions, allowing the user to save the diagnosis to their plant's history.

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.

Important: To modify environment variables intended for Supabase or the final production environment, access your hosting provider's console and update them directly there.

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

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.