> ## Documentation Index > Fetch the complete documentation index at: https://docs.replit.com/llms.txt > Use this file to discover all available pages before exploring further. # Barra de ferramentas > Referência da barra de ferramentas do Canvas: Interact, Pan, Chat, Draw, Edit e Generate. A barra de ferramentas do Canvas é uma barra flutuante ancorada na parte inferior central do quadro. Ela expõe as ferramentas que você usa para navegar, desenhar, editar e adicionar conteúdo. A barra de ferramentas aparece no modo Canvas. Detalhe da barra de ferramentas do Canvas com os botões apenas com ícone Interact (selecionado) e Pan à esquerda, seguidos dos botões com rótulo Chat, Draw, Edit e Generate à direita ## Ferramentas Selecionar uma ferramenta a torna ativa. A ferramenta ativa é destacada com um fundo preenchido. O grupo mais à esquerda é de navegação (Interact, Pan). O restante são ferramentas de conteúdo e marcação. As ferramentas são mutuamente exclusivas, o que significa que selecionar uma desativa as outras. ### Interact **Interact** é a ferramenta padrão. Use-a para selecionar frames, arrastá-los e clicar em um Artifact ativo para usá-lo como um app real em execução. Com o Interact ativo, clicar em um frame o seleciona e exibe a [barra de ações por frame](/pt/design/frames#per-frame-action-bar). Canvas com um artifact de Website selecionado usando a ferramenta Interact — o frame está contornado com alças de seleção e a barra de ações por frame é exibida acima dele. A ferramenta Interact está destacada na barra de ferramentas flutuante na parte inferior. **Atalho de teclado:** `V`. **Disponibilidade:** sempre ativa. ### Pan **Pan** transforma o cursor em uma ferramenta de arrastar para que você possa mover o próprio quadro. Enquanto o Pan está ativo, clicar e arrastar move o viewport em vez de selecionar um frame. Você também pode navegar (pan) a partir de qualquer outra ferramenta segurando a barra de espaço e arrastando, ou arrastando com o botão do meio do mouse. Canvas com a ferramenta Pan ativa — um artifact de Website (Velocity — Supercar Rental) e um mockup de Design (Velocity — Home (Mockup)) estão visíveis no quadro, e a ferramenta Pan (cursor de mão) está destacada na barra de ferramentas flutuante na parte inferior. **Atalho de teclado:** `H`. **Disponibilidade:** sempre ativa. ### Chat **Chat** coloca um pequeno campo de chat diretamente no quadro para que você possa enviar prompts ao Agent sem sair do Canvas. Elementos e frames selecionados continuam anexados à mensagem como capturas, da mesma forma que ao enviar pelo painel de chat lateral do Agent. Canvas no modo Chat com o restante do quadro escurecido e o campo de chat inline sobreposto a um artifact de Website. Um chip 'div' no campo de chat indica um elemento selecionado, e o prompt diz 'suggest three alternatives to this image'. A ferramenta Chat está destacada na barra de ferramentas flutuante na parte inferior. **Disponibilidade:** ferramenta Chat (somente desktop). ### Draw **Draw** ativa as ferramentas de marcação, como desenho livre, setas, notas adesivas e formas, para que você possa esboçar sobre os frames ou anotar o quadro. Use-a para circular pontos problemáticos, apontar para elementos que você quer mudar ou deixar uma nota escrita ao lado de um frame. Quando o Draw está ativo, uma barra de **Shape properties** aparece acima da barra de ferramentas flutuante com controles de cor, traço e preenchimento para a ferramenta de marcação atual. Ela é ocultada automaticamente quando você volta para o Interact ou o Pan. Canvas com a ferramenta Draw ativa — um retângulo 'Widget' desenhado e uma nota adesiva roxa 'Add a widget' estão posicionados ao lado de um frame. A barra Shape properties (ferramentas de lápis, texto, retângulo, seta e nota adesiva, além de amostras de cor e um controle de tamanho de texto Aa) é exibida acima da barra de ferramentas flutuante, com o Draw destacado. **Disponibilidade:** sempre ativa. ### Edit **Edit** é o seletor visual de elementos. Com o Edit ativo, clique dentro de um Artifact ativo para atingir um elemento (um botão, um título, uma imagem). Selecionar um elemento abre o **Visual Editor** — um painel de controles à direita (Layout, Color, Border e mais) combinado com um prompt inline para pedir ao Agent que mude apenas aquela parte. Veja [Elements](/pt/design/elements) e [Visual Editor](/pt/design/visual-editor) para o fluxo completo. A ferramenta Edit ativa em um site de aluguel de superesportivos com um elemento div selecionado, e o painel do Visual Editor mostrando os controles Text, Layout, Color e Border, além dos botões Discard e Save edits **Disponibilidade:** sempre ativa (desktop). Desativada até que exista pelo menos um frame; a dica exibe *"Crie um artifact ou gere um design para editar."* Oculta em dispositivos móveis. ### Generate **Generate** abre o popover **Generate media** para imagens, vídeos e gráficos vetoriais. Escolha um tipo, escreva um prompt e o Agent coloca o resultado como um novo frame no quadro. O menu + Add do Canvas aberto com quatro opções empilhadas verticalmente: Design ('Mock up interfaces and visual concepts'), Image ('Generate and edit images'), Video ('Generate motion clips and animations') e Vector Graphic ('Generate vector illustrations and SVGs'). O espaço do Generate na barra de ferramentas flutuante na parte inferior agora exibe '+ Generate'. O popover tem quatro abas no topo: * **Design** — **Image** * **Video** * **Vector Graphic** Alguns controles são compartilhados entre os tipos; outros são específicos de cada tipo. **Controles compartilhados (todos os tipos):** * **Model**: o modelo de geração a ser usado. Os modelos disponíveis variam conforme o tipo (veja a tabela abaixo). * **Prompt**: descrição em linguagem natural do que você quer que o Agent gere. * **Generate**: envia a solicitação e reserva um frame de espaço reservado na posição do cursor. O espaço reservado se transforma em um frame ativo assim que o recurso fica pronto; se a geração falhar, o espaço reservado é removido e um erro aparece no painel de chat. **Modelos e controles por tipo:** | Tipo | Melhor para | Modelos atuais | Controles específicos do tipo | | ----------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------- | -------------------------------------------------------------------------------- | | **Image** | Saída raster (PNG / JPG); imagens para moodboard, fotos de destaque, arte de referência | Nano Banana, Nano Banana 2, Nano Banana Pro, ChatGPT Images 2.0 | Proporção (`1:1`, `16:9`, `9:16`, `4:3`, `3:4`) · Tamanho (`1K`, `2K`, `4K`) | | **Video** | Vídeos curtos e animações | Veo 3.1, Seedance 2.0 | Proporção · Resolução (ex.: `720p`) · Duração (ex.: `4s`) · Alternância de áudio | | **Graphic** | Saída vetorial SVG; ícones, logotipos, diagramas, ilustrações estilizadas | Claude 4.6 Opus, Gemini 3.1 Pro Preview | Alternância de animação | A lista de modelos muda com frequência. A tabela reflete o que está disponível atualmente; confira o menu suspenso no produto para saber o que sua conta pode usar hoje. Para saber o que cada tipo de frame é e o que você pode fazer com ele depois de criado, veja [Frames](/pt/design/frames). #### Anexe referências visuais Antes de gerar, você pode anexar itens já presentes no seu quadro como referências visuais. O Agent usa essas referências para guiar o resultado para que combine com a aparência do seu projeto. Abra o menu **+** dentro do formulário **Generate media** e escolha uma opção: * **Upload file**: envie uma imagem do seu computador para usar como referência. * **Select canvas elements**: escolha itens existentes no quadro. Frames são capturados como screenshots; formas de texto e notas são anexadas como resumos de texto. Cada referência aparece como um chip no formulário. Adicione quantas precisar, escreva seu prompt e selecione **Generate**. Para remover uma referência, selecione o chip. O formulário Generate media no Canvas com o menu de mais aberto, mostrando as opções Upload file e Select canvas elements e o menu suspenso de modelo definido como Nano Banana Pro O ChatGPT Images 2.0 não suporta uploads no momento. Troque o modelo, por exemplo para o Nano Banana Pro, para anexar referências visuais. Quando o **Add menu** está habilitado, o botão Generate é substituído por um menu **+** que reúne os tipos do popover com **Design** (um mockup visual independente que não afeta o código ativo): **Disponibilidade:** geração de imagens. **Vector Graphic** precisa da geração de gráficos vetoriais; **Video** precisa da geração de vídeo. O menu **+** requer o Add menu (que por sua vez requer a geração de imagens). ## Navegação no quadro Panorâmica, zoom, gestos de seleção e seus atalhos de teclado são comportamentos no nível do quadro, não ferramentas da barra de ferramentas. Veja [Navegue pelo quadro](/pt/design/canvas#navigate-the-board) na página do Canvas. ## Páginas relacionadas * [Canvas](/pt/design/canvas) — o próprio quadro: como abri-lo, navegar por ele e o que existe nele. * [Frames](/pt/design/frames) — tipos de frame; a barra de ações por frame; Build e Focus. * [Elements](/pt/design/elements) — as peças individuais dentro de um frame. * [Visual Editor](/pt/design/visual-editor) — o fluxo de seleção de elementos para o qual o Edit te leva.