Como criar projetos no Creator
Para iniciar e customizar o seu projeto utilizando os recursos de inteligência artificial do Creator é muito simples:
1. Crie projetos por prompt
Acesse a página inicial do Creator.
Localize a caixa de diálogo do chat.
Descreva detalhadamente a aplicação que você deseja construir.
Pressione Enter para enviar o comando inicial.
Envie novos comandos ao longo do desenvolvimento para refinar e ajustar o seu projeto conforme avança.
Importante: Forneça instruções claras e específicas, especialmente no primeiro prompt, para obter os melhores resultados. Isso permite que a Inteligência Artificial compreenda o objetivo exato em vez de tentar prever requisitos omissos.
Exemplo de escrita de prompts
Crie um aplicativo de IA para identificar doenças em plantas.
Crie um aplicativo de diagnóstico de plantas baseado em IA. Ele deve conter uma tela de cadastro rápido (apenas e-mail e senha) que leva o usuário a um breve questionário sobre o tipo de plantas que ele possui em casa. Na tela principal, deve haver um botão centralizado em destaque para abrir a câmera; o usuário tira uma foto das folhas danificadas, a IA processa a imagem, exibe o diagnóstico provável da doença com uma porcentagem de certeza e lista três ações imediatas de tratamento, permitindo que o usuário salve o diagnóstico no histórico de sua planta.
2. Adicione arquivos e contextos ao Prompt
Acesse a parte inferior do painel de chat.
Clique no botão + para abrir a lista de opções de anexo e escopo.
Selecione a opção ideal para a sua tarefa:
Codebase Context: Adiciona o contexto completo do repositório de código atual à conversa.
Attach Files: Anexa arquivos locais genéricos à sua mensagem.
Attach File As Chat Context: Insere um arquivo para atuar especificamente como histórico ou instrução de suporte no chat.
Upload File to Codebase: Envia o arquivo diretamente para a árvore de diretórios do projeto.
Themes: Altera a identidade visual do painel (opções disponíveis: No Theme, Default Theme ou New Theme).
Show Token Usage: Exibe a quantidade de tokens consumidos na interação com a IA.
3. Escolha 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:
Acesse o menu de seleção de modelos de inteligência artificial
Selecione uma opção da sua preferência (OpenAI, Google, etc).
4. Use a entrada de voz:
Clique no ícone de Microfone posicionado na área direita do campo de texto do chat.
Fale o seu comando ou instrução de forma clara.
Monitore a transcrição automática do áudio na tela.
Clique na seta de envio para processar o prompt.
5. Utilize a barra de ferramentas
Preview
Gerencie o comportamento e o layout da sua aplicação em tempo real utilizando os botões de controle:
Hide 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 Annotator: 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.
Restart App: Clique em Restart para reiniciar completamente a execução do microsserviço da aplicação de testes.
Visualizar em Outra Aba: Clique no ícone de link externo para projetar o aplicativo em uma nova aba cheia do seu navegador.
Publicar: Clique no botão azul Publish 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.
Mensagens do Sistema
Acompanhe os logs de execução do ambiente. Clique na seta localizada à direita do painel para abrir os registros. Você pode filtrar as mensagens por níveis de criticidade (Info, Aviso e Erro) e por origem (Servidor, Cliente, etc.), além de limpar o histórico clicando no ícone de Lixeira.
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
Environment Variables: Adicione chaves de configuração ao projeto. Clique em Add Environment Variable para preencher os campos Key e Value, e clique em Salvar para finalizar.
Importante: Para modificar variáveis de ambiente voltadas ao Supabase ou ao ambiente de produção definitivo, acesse o console do seu provedor de hospedagem e atualize-as diretamente por lá.
App Commands: Configure comandos personalizados de instalação e inicialização do seu app. Clique em Configure Custom Commands para definir o comando de instalação (install command, como pnpm install) e o comando de inicialização (start command, como pnpm dev). Deixe os campos vazios para que o sistema adote os comandos padrão do pnpm. Clique em Salvar para concluir.
Revisão de Segurança
Executar a revisão: Acione este módulo para escanear o nível de segurança e conformidade do código do seu projeto.
Editar as regras: Clique nesta opção para abrir a caixa de diálogo de regras de conformidade. Esta ação permite incluir contextos específicos do seu projeto dedicados exclusivamente às revisões de segurança. O conteúdo preenchido é salvo no arquivo SECURITY_RULES.md, auxiliando a plataforma a detectar vulnerabilidades adicionais e a evitar falsos positivos que não façam sentido para o seu cenário. Clique em Salvar para registrar as alterações.
Fix: Clique no botão Fix ao lado de qualquer vulnerabilidade encontrada para que a IA corrija e otimize o item automaticamente.
Publicar
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.
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. O procedimento leva normalmente entre 30 e 90 segundos para ser concluído.
Atualizado
Isto foi útil?