Chat

Após o prompt inicial de criação de seu app, a plataforma é automaticamente redirecionada para a aba Chat a qual é possível visualizar e editar os apps.

Acompanhe, a seguir, os recursos disponíveis:

Renomear Chat

Para alterar o nome do chat, siga os seguintes passos:

1. Clique no ícone de três pontos ao lado do nome do chat.

2. Selecione a opção Renomear Chat.

3. No modal, digite o novo nome.

4. Clique em Salvar.

Excluir Chat

Para alterar o nome do app, siga os seguintes passos:

1. Clique no ícone de três pontos ao lado do nome do aplicativo.

2. Selecione a opção Excluir Chat.

3. No modal, confirme a exclusão clicando em Excluir Chat.

Adicionar arquivos e contextos ao Prompt

1. No painel de chat, clique no botão + para abrir a lista de opções de anexo e escopo.

2. É possível escolher as seguintes opções:

   1. Contexto do código: Adiciona o contexto completo do repositório de código atual à conversa.

   2. Anexar arquivos:

      1. Anexar arquivo como contexto do chat: Insere um arquivo para atuar especificamente como histórico ou instrução de suporte no chat.

      2. Enviar arquivo para a base de código: Envia o arquivo diretamente para a árvore de diretórios do projeto.

   3. Temas: Altera a identidade visual do painel. Escolha uma das opções disponíveis ou crie um novo tema. Leia o artigo Temas.

   4. Mostrar uso de tokens: Exibe a quantidade de tokens consumidos na interação com a IA. Para remover esses dados, basta clicar em Ocultar uso de tokens.

Modo de execução

Escolha o modo de execução do prompt:

• Local Agent (padrão): Executa comandos e aplica alterações diretamente no ambiente local.

• Build: Cria e modifica código ou arquivos no projeto com foco na implementação.

• Ask: Tira dúvidas, explica conceitos e analisa o projeto sem alterar arquivos (modo leitura).

• Plan: Mapeia o problema e gera um plano detalhado em etapas antes de iniciar a execução.

Modelo de IA

Por padrão, o modelo aparece padronizado como Auto, mas é possível escolher um outro modelo de sua preferência. Para isso:

1. Acesse o menu de seleção de modelos de inteligência artificial

2. Selecione uma opção da sua preferência (OpenAI, Google, etc).

Entrada de voz

1. Clique no ícone de Microfone posicionado na área direita do campo de texto do chat.

2. Fale o seu comando ou instrução de forma clara.

3. Monitore a transcrição automática do áudio na tela.

4. Clique na seta de envio para processar o prompt.

Barra de ferramentas

A barra de ferramentas na lateral direita permite as seguintes opções:

Preview

Gerencie o comportamento e o layout da sua aplicação em tempo real utilizando os botões de controle:

• Ocultar Chat: Clique para ocultar ou exibir a aba do chat, expandindo a área do preview técnico.

• Selecionar Componente / Desativar Seleção de Componente: Clique no ícone de cursor para ativar a inspeção direta de blocos na página ou desativar a seleção interativa.

• Ativar anotações: Clique no ícone de caneta/varinha mágica para habilitar a criação de notas e demarcações visuais sobre a interface em desenvolvimento.

• Voltar / Avançar: Utilize as setas direcionais (← e →) para navegar pelo histórico de páginas renderizadas no simulador.

• Atualizar: Clique na seta circular (↻) para recarregar o estado atual da página no preview.

• Ir para Página: Utilize o seletor de rotas (campo de texto com o indicador /) para alternar ou digitar diretamente o caminho da página que deseja visualizar.

• Reiniciar: Reinicia completamente a execução.

• Visualizar em outra aba: Clique no ícone de link externo para projetar o aplicativo em uma nova aba cheia do seu navegador.

• Publicar: Clique para disponibilizar a aplicação em produção.

• Modos Web, Tablet e Mobile: Alterne entre os três ícones de dispositivos localizados no topo direito para testar o comportamento responsivo do layout nos formatos Desktop, Tablet e Mobile, respectivamente.

Opções do Preview

Erros

Execute verificações periódicas neste painel para escanear o seu aplicativo em busca de falhas de compilação em TypeScript ou outros problemas estruturais.

Código

Acesse este menu para verificar e navegar pelas pastas, arquivos e linhas de código geradas automaticamente para o seu projeto.

Config

Acesse o menu Config para gerenciar as credenciais e os comandos de execução do seu aplicativo.

• Variáveis de Ambiente: Adicione chaves de configuração sensíveis ou específicas do ambiente ao seu projeto.

  1. Clique em + Adicionar variável de ambiente.

  2. Preencha os campos Chave e Valor.

  3. Clique em Salvar para finalizar.

Para editar ou excluir variáveis criadas anteriormente, clique nos ícones de lápis (editar) ou lixeira (excluir) ao lado da variável correspondente.

• Comandos do App: Configure comandos personalizados para a instalação de dependências e inicialização do aplicativo.

  1. Clique em + Configurar comandos personalizados.

  2. Defina o comando de instalação (exemplo: pnpm install) e o comando de inicialização (exemplo: pnpm dev).

  3. Clique em Salvar.

Se você deixar estes campos em branco, o sistema adotará automaticamente os comandos padrão do gerenciador pnpm.

Revisão de Segurança

Em Segurança, você pode auditar o código do seu projeto, definir regras de conformidade e implementar sistemas de autenticação de forma automatizada.

• Executar Revisão de Segurança: Clique neste botão para iniciar uma varredura completa. O sistema escaneará o código do projeto para avaliar o nível de segurança e identificar possíveis vulnerabilidades.

• Editar regras: Clique nesta opção para abrir a caixa de diálogo de regras de conformidade. Aqui, você pode incluir contextos específicos do seu projeto para direcionar as revisões. O conteúdo inserido é salvo automaticamente no arquivo SECURITY_RULES.md. Isso ajuda a plataforma a focar em vulnerabilidades reais e evita alertas de falsos positivos que não se aplicam ao seu cenário. Ao finalizar, clique em Salvar.

• Corrigir O Problema: Após executar a revisão, caso vulnerabilidades sejam encontradas, um botão Corrigir O Problema ficará disponível ao lado de cada item. Ao clicar nele, a Inteligência Artificial aplicará correções e otimizações automaticamente no código afetado.

• Adicionar Camada de Login: Implemente autenticação segura (e-mail e senha) para acessar o seu aplicativo de forma instantânea. Basta clicar no botão Add Login Layer. O sistema utilizará o banco de dados existente no seu projeto ou configurará um banco SQLite automaticamente caso não haja nenhum, sem exigir configurações manuais adicionais.

Publicar App

No menu Publicar, escolha como deseja publicar o app:

• Compartilhamento do Preview: Copie a URL para compartilhar o preview do app. Também é possível gerar uma nova URL.

Links de compartilhamento expiram em 30 dias.

• Exportar código-fonte: Baixe um arquivo compactado (ZIP) contendo o código-fonte completo deste app para realizar o deploy manual. O sistema remove automaticamente as pastas node_modules, .git, builds e os arquivos locais .env para garantir a leveza e a segurança do pacote.

• GitHub: Conecte e sincronize o seu código diretamente com um repositório do GitHub para habilitar fluxos de trabalho colaborativos e versionamento integrado.

A tela apresenta opções para compartilhamento

Reconstruir

Clique neste botão para forçar a reestruturação do ambiente de desenvolvimento.

Este comando excluirá de forma permanente a pasta node_modules, reinstalará todas as dependências do projeto, limpará os dados de sessão do preview e reiniciará o servidor de desenvolvimento.