> 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/skyone-studio/inteligencia-artificial/vibe-coding/chat.md).
# 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](/skyone-studio/inteligencia-artificial/vibe-coding/biblioteca.md#como-criar-um-novo-theme-tema-na-biblioteca).
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.
{% hint style="success" %}
Para editar ou excluir variáveis criadas anteriormente, clique nos ícones de lápis (editar) ou lixeira (excluir) ao lado da variável correspondente.
{% endhint %}
* **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**.
{% hint style="info" %}
Se você deixar estes campos em branco, o sistema adotará automaticamente os comandos padrão do gerenciador `pnpm`.
{% endhint %}
#### 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.
{% hint style="info" %}
Links de compartilhamento expiram em 30 dias.
{% endhint %}
* **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.
{% hint style="danger" %}
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.
{% 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/skyone-studio/inteligencia-artificial/vibe-coding/chat.md?ask=&goal=
```
`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.