{}

{
    const ta = e.currentTarget;
    ta.style.height = "auto";
    ta.style.height = ta.scrollHeight + "px";
    updateAgentInputButtonState(findAgentInputContainer(ta));
  }} style={{
    display: "block",
    width: "100%",
    minHeight: "21px",
    maxHeight: "calc(14px * 1.5 * 10)",
    padding: 0,
    margin: 0,
    border: "none",
    outline: "none",
    resize: "none",
    fontSize: "14px",
    lineHeight: "1.5",
    color: "var(--ai-text-primary)",
    background: "transparent",
    fontFamily: "inherit",
    boxSizing: "border-box",
    overflowY: "auto"
  }} />
          </div>
          {}
          <div style={{
    position: "absolute",
    left: "8px",
    right: "8px",
    bottom: "8px",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
  }}>
            {}
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: "8px",
    overflow: "hidden",
    minWidth: 0
  }}>
              <button className="ai-icon-btn" style={iconBtnStyle} aria-label="Add attachment" type="button">
                {PlusIcon}
              </button>
              <div id="agent-input-pills" data-agent-input-role="pills" style={{
    display: "flex",
    alignItems: "center",
    gap: "6px",
    overflow: "hidden"
  }}></div>
            </div>
            {}
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: "8px",
    flexShrink: 0
  }}>
              {highlightPlan ? <div className="ai-plan-wrap" onClick={e => {
    const wrap = e.currentTarget;
    wrap.classList.toggle("ai-plan-off");
  }}>
                  <label className="ai-plan-btn-highlight" style={{
    display: "flex",
    alignItems: "center",
    gap: "6px",
    height: "32px",
    padding: "0 8px",
    cursor: "pointer",
    fontSize: "12px",
    fontFamily: "inherit",
    transition: "background 120ms ease-out"
  }}>
                    <input className="ai-plan-checkbox-input" type="checkbox" aria-label="Plan mode" name="Plan mode" defaultChecked />
                    <span>Plan</span>
                  </label>
                </div> : <label className="ai-plan-checkbox-label">
                  <input className="ai-plan-checkbox-input" type="checkbox" aria-label="Plan mode" name="Plan mode" />
                  <span>Plan</span>
                </label>}
              <button className="ai-icon-btn" style={iconBtnStyle} aria-label="Start voice input" type="button">
                {MicIcon}
              </button>
              {highlightStart ? <div className="ai-start-wrap">
                  <button data-agent-input-role="start-button" className="ai-icon-btn ai-start-btn-highlight" onClick={handleStartClick} type="button" aria-label="Start" style={{
    ...iconBtnStyle,
    borderRadius: "6px",
    background: "#0079F2",
    color: "#fff",
    opacity: defaultPrompt ? "1" : "0.4",
    cursor: defaultPrompt ? "pointer" : "not-allowed"
  }}>
                    {ArrowUpIcon}
                  </button>
                </div> : <button data-agent-input-role="start-button" className="ai-icon-btn" onClick={handleStartClick} type="button" aria-label="Start" style={{
    ...iconBtnStyle,
    background: "#0079F2",
    color: "#fff",
    opacity: defaultPrompt ? "1" : "0.4",
    cursor: defaultPrompt ? "pointer" : "not-allowed"
  }}>
                  {ArrowUpIcon}
                </button>}
            </div>
          </div>
        </div>
      </div>
    </div>;
};

## O que é o Canvas?

O Canvas é um espaço para explorar e iterar em designs com o Agent. Aqui, você verá seus artefatos — como apps, vídeos e slides — exibidos em um frame. Você pode trabalhar com o Agent para criar mockups, comparar direções de design e aplicar mudanças de volta ao seu app — tudo em um quadro visual.

## O que está no Canvas

O Canvas é um quadro infinito onde você pode ver e trabalhar com tudo visualmente.

* **Seus apps**: Seus apps em execução aparecem como prévias interativas ao vivo direto no Canvas. Você pode clicar e usá-los assim como faria em um navegador.
* **Mockups de design**: Protótipos visuais que o Agent cria para você. Eles parecem e funcionam como páginas reais — você pode interagir com eles, redimensioná-los e pedir ao Agent para ajustá-los — mas são separados do seu app ao vivo para que você possa experimentar livremente.
* **Formas e desenhos**: Retângulos, círculos, estrelas, setas, corações e mais. Use-os para esboçar ideias brutas, marcar designs ou mapear como as telas se conectam.
* **Texto e notas adesivas**: Adicione rótulos ou notas em qualquer lugar do Canvas para organizar seus pensamentos.
* **Imagens**: Solte capturas de tela ou imagens de referência no Canvas. O Agent pode recriar ou se inspirar no que vê.
* **Vídeos**: Coloque arquivos de vídeo no Canvas ao lado do seu outro conteúdo.

### Colocando designs no Canvas

Há algumas formas de começar a criar designs. Escolha o que parecer mais natural.

<Steps>
  <Step title="Pergunte ao Agent no chat">
    Digite o que você quer ver na entrada do chat e o Agent o coloca como um frame interativo no Canvas.

<Step title="Escolha um tipo de saída">
    Você também pode escolher que tipo de saída quer — web, mobile, slides, design e mais. Use o carrossel para escolher antes de enviar seu prompt.

<Step title="Trazer uma página existente para o Canvas">
    Já tem um app ao vivo? Peça ao Agent para trazer uma página para o Canvas para um redesign — por exemplo, "Coloque meu dashboard no Canvas." O Agent faz uma cópia para que seu app ao vivo fique intacto.
  </Step>
</Steps>

## Fazendo alterações

Uma vez que você tem um design no Canvas, há várias formas de iterar nele.

### Peça atualizações ao Agent

Selecione um frame no Canvas e digite suas alterações na entrada que aparece abaixo dele. Quando você pressiona Enter, o Agent pega a solicitação, executa as atualizações e atualiza o mockup direto no Canvas.

### Desenhe e anote

Use as ferramentas de desenho na barra de ferramentas inferior para esboçar diretamente no Canvas. Desenhe setas apontando para o que você quer mudar, circule áreas problemáticas ou adicione notas de texto com seu feedback. Em seguida, peça ao Agent para fazer as alterações com base nas suas anotações.

### Visualize em diferentes dispositivos

Veja como seus designs ficam em diferentes tamanhos de tela. Peça ao Agent para mostrar uma versão mobile, tablet ou desktop:

* **Mobile** — 390 × 844
* **Tablet** — 768 × 1024
* **Desktop** — 1280 × 720

Por exemplo, "Mostre-me a versão mobile desta página" e o Agent renderiza nesse tamanho.

### Aplicar alterações ao seu app

Quando estiver satisfeito com um design, aplique as alterações de volta à sua versão principal. O Agent mostra um resumo do que foi feito e dá a você a opção de aplicar ou descartar.

### Exportar um frame como PNG

Você pode salvar qualquer artefato ou frame de design no Canvas como uma imagem PNG. Isso é útil para compartilhar uma prévia em um documento ou chat, capturar um instantâneo antes de iterar mais ou enviar uma captura de tela a um colega.

<Steps>
  <Step title="Abrir o menu do frame">
    Clique com o botão direito no artefato ou frame de design que você deseja exportar. Um menu aparece com as ações disponíveis.
  </Step>

<Step title="Escolher Exportar PNG">
    Selecione **Exportar** > **PNG**. A imagem é baixada para o seu computador com um nome de arquivo baseado no nome do frame.
  </Step>
</Steps>

<Note>O PNG exportado corresponde ao que o frame está mostrando atualmente no Canvas. Se seu app ou design ainda estiver carregando, aguarde que ele renderize completamente antes de exportar.</Note>

## Comparando direções de design

Quando você não sabe qual direção seguir, peça ao Agent para gerar múltiplas versões para que você possa compará-las lado a lado.

* **Múltiplas versões de uma página**: "Mostre-me cinco versões desta landing page." O Agent cria cada uma e as dispõe lado a lado.
* **Fluxos de múltiplas páginas**: "Projete um fluxo de onboarding completo: boas-vindas, configuração de perfil, preferências e confirmação." O Agent constrói cada tela e as organiza em ordem.
* **Mix e match**: "Mostre-me a landing page e a página de preços em um estilo minimalista e em um estilo ousado." O Agent cria cada combinação para que você possa ver o quadro completo.

## Mapeando fluxos de usuário

Organize jornadas completas de usuário no Canvas — cadastro, onboarding, dashboard, configurações — e disponha-as para ver como tudo se conecta.

* Coloque cada tela como um frame separado
* Peça ao Agent para gerar o fluxo completo: "Desenhe o fluxo completo de onboarding do meu app"
* Use setas e formas para mostrar como os usuários se movem entre as telas
* Peça ao Agent para transformar esboços brutos em designs refinados

## Transformando um design em um app real

Quando estiver satisfeito com um design e quiser torná-lo real, há dois caminhos:

### Transformar em um app completo

Se o seu design precisa de funcionalidade real — como salvar dados, contas de usuário ou conectar a outros serviços — peça ao Agent para transformá-lo em um app completo. Diga algo como "Torne isso um app real" ou "Adicione um backend a isso." O Agent constrói tudo o que é necessário para funcionar como um app real e publicável.

<Note>
  Transformar um design em um app completo requer um plano pago.
</Note>

### Converter para um tipo específico

Você também pode converter um frame de design em um tipo de artefato específico:

<Steps>
  <Step title="Selecionar um frame">
    Clique no frame que você deseja converter.
  </Step>

<Step title="Peça ao Agent para converter">
    Diga ao Agent o que você quer — por exemplo, "Converta isso em um app web" ou "Transforme isso em slides."
  </Step>

<Step title="Escolher um tipo">
    Escolha entre app web, app mobile, slides, visualização de dados e mais.
  </Step>
</Steps>

## Perguntas frequentes

<Accordion title="Os frames de design são iguais ao meu app em execução?">
  Não. Frames de design são protótipos visuais — eles parecem e funcionam como o real, mas não têm um backend ou banco de dados funcionando por trás deles. Suas prévias de app no Canvas, por outro lado, são seu app real em execução.
</Accordion>

<Accordion title="Posso redesenhar uma página sem quebrar meu app ao vivo?">
  Sim. Peça ao Agent para trazer uma página para o Canvas — por exemplo, "Coloque meu dashboard no Canvas." O Agent faz uma cópia com a qual você pode experimentar. Seu app ao vivo não é afetado até você escolher aplicar as alterações.
</Accordion>

<Accordion title="Como transformo um design em um app real?">
  Peça ao Agent para torná-lo um app completo ("Torne isso real") ou converta-o para um tipo específico ("Converta isso em um app web"). O Agent constrói tudo o que é necessário para se tornar um app funcional e publicável.
</Accordion>

<Accordion title="Posso converter para tipos além de apps web?">
  Sim. Você pode transformar frames do Canvas em apps web, apps mobile, slides, visualizações de dados e mais.
</Accordion>

<Accordion title="Posso importar designs do Figma ou outras ferramentas?">
  Sim. Há algumas formas de trazer designs do Figma para o Replit:

* **Importar do Figma**: Vá para [replit.com/import](https://replit.com/import), conecte sua conta Figma e cole uma URL de frame para converter um design em um app React funcional. Consulte o [Início rápido de Importar do Figma](/pt/build/figma-to-app) para detalhes.
  * **Figma MCP no chat do Agent**: Cole um link do Figma diretamente no chat do Agent e peça para ele gerar código, extrair dados de design ou construir um componente a partir do design. Consulte o guia de [Integração Figma MCP](/references/mcp/figma).
  * **Referência de captura de tela**: Solte uma captura de tela no Canvas e peça ao Agent para recriar o design a partir dela.
</Accordion>

<Accordion title="O que mais posso colocar no Canvas?">
  Além de mockups de design e prévias de app, você pode adicionar formas, setas, rótulos de texto, notas adesivas, imagens e vídeos — úteis para esboçar ideias, anotar designs ou organizar seu pensamento.
</Accordion>

## Disponibilidade

O Canvas está disponível em todos os planos, incluindo criação de frames, edição inline, geração de variantes e conversão em artefatos. Transformar designs em apps completos requer um plano pago.