{}

{
    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 a partir de 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 diretamente no Canvas. Você pode clicar e usá-los exatamente 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.

### Obtendo designs no Canvas

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

<Steps>
  <Step title="Peça ao Agent no chat">
    Digite o que você quer ver no campo de 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, móvel, slides, design e mais. Use o carrossel para escolher antes de enviar seu prompt.

<Step title="Traga 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 não seja afetado.
  </Step>
</Steps>

## Fazendo alterações

Depois de ter um design no Canvas, há várias maneiras de iterá-lo.

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

Selecione um frame no Canvas e digite suas alterações no campo que aparece abaixo dele. Quando você pressionar Enter, o Agent recebe a solicitação, executa as atualizações e atualiza o mockup diretamente 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. Depois 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 móvel, tablet ou desktop:

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

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

### Aplique as 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.

### Exporte 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 para um colega.

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

<Step title="Escolha 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 mostra atualmente no Canvas. Se seu app ou design ainda estiver carregando, aguarde até que renderize completamente antes de exportar.</Note>

## Comparando direções de design

Quando não tiver certeza de 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 uma ao lado da outra.
* **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.
* **Misture e combine**: "Mostre-me a landing page e a página de preços em um estilo minimalista e em um estilo arrojado." O Agent cria cada combinação para que você possa ver o quadro completo.

## Mapeando fluxos de usuário

Disponha jornadas completas de usuário no Canvas — cadastro, onboarding, dashboard, configurações — e organize-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:

### Torne-o um app completo

Se o seu design precisa de funcionalidade real — como salvar dados, contas de usuário ou conexão com 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 que precisa para funcionar como um app real e publicável.

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

### Converta para um tipo específico

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

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

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

<Step title="Escolha um tipo">
    Escolha entre web app, app móvel, 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. Os frames de design são protótipos visuais — eles parecem e funcionam como o app real, mas não têm um backend ou banco de dados funcionando por trás deles. As prévias do seu 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é que você escolha 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 web app"). O Agent constrói tudo que precisa para se tornar um app funcional e publicável.
</Accordion>

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

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

* **Importar do Figma**: Acesse [replit.com/import](https://replit.com/import), conecte sua conta do Figma e cole um URL de frame para converter um design em um app React funcional. Veja o [guia de início rápido Importar do Figma](/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 gerar código, extrair dados de design ou construir um componente a partir do design. Veja 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 apps, 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 para artefatos. Transformar designs em apps completos requer um plano pago.