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

# Remixar um app

> Aprenda a iniciar seu app a partir de um projeto Replit existente. Um **Remix** é um novo Replit App que você cria a partir de um app ao qual tem acesso atualmente.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

export const RemixButton = ({replUrl = "https://replit.com/@sarahxli/Digital-Piano-Keys?v=1", label = "Remix this app", count = null}) => {
  if (typeof document !== 'undefined' && !document.getElementById('remix-button-styles')) {
    const style = document.createElement('style');
    style.id = 'remix-button-styles';
    style.textContent = `
      /* Button container */
      .remix-btn-container {
        --btn-bg: var(--replit-docs-bg-muted, #F1F1EE);
        --btn-bg-hover: var(--replit-docs-bg-elevated, #F1F1EE);
        --btn-text: var(--replit-docs-text, #1D1D1D);
        --btn-border: var(--replit-docs-border, #DEDAD5);
        --transition-duration: 120ms;
        display: flex;
        justify-content: center;
      }

      .dark .remix-btn-container,
      html.dark .remix-btn-container,
      [data-theme="dark"] .remix-btn-container {
        --btn-bg: var(--replit-docs-bg-elevated, #222223);
        --btn-bg-hover: var(--replit-docs-bg-muted, #222223);
        --btn-text: var(--replit-docs-text, #F5F5F5);
        --btn-border: var(--replit-docs-border, #39393D);
      }

      /* Button base styles - matching template page exactly */
      .remix-btn {
        /* Layout */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50%;
        max-width: 400px;
        min-width: 200px;
        height: 36px;
        padding: 0 16px;
        gap: 8px;

        /* Typography */
        font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        text-decoration: none;
        white-space: nowrap;

        /* Visual */
        border-radius: 8px;
        border: none;
        background: var(--btn-bg);
        color: var(--btn-text);
        box-shadow: inset 0 0 0 1px var(--btn-border);

        /* Interaction */
        cursor: pointer;
        user-select: none;
        transition-property: background-color;
        transition-duration: var(--transition-duration);
        transition-timing-function: ease-out;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
      }

      /* Content (icon + label) - centered */
      .remix-btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }

      /* Hover state */
      @media (hover: hover) {
        .remix-btn:hover {
          background: var(--btn-bg-hover);
        }
      }

      /* Active/pressed state */
      .remix-btn:active {
        background: var(--btn-bg-hover);
        transform: scale(0.99);
      }

      /* Focus visible state */
      .remix-btn:focus-visible {
        outline: 2px solid #0079F2;
        outline-offset: 2px;
      }

      /* Icon styles */
      .remix-btn svg {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
      }

      /* Label styles */
      .remix-btn span {
        font-weight: 600;
      }

      /* Animation */
      @keyframes remix-btn-fade-in {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
      }

      .remix-btn-container {
        animation: remix-btn-fade-in 300ms ease-out;
      }
    `;
    document.head.appendChild(style);
  }
  const handleClick = e => {
    e.preventDefault();
    const url = replUrl.includes('replit.com') ? replUrl : `https://replit.com${replUrl}`;
    window.open(url, '_blank');
  };
  const RemixIcon = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" preserveAspectRatio="xMidYMin">
      <path d="M17.47 13.47a.75.75 0 0 1 1.06 0l4 4a.745.745 0 0 1 .118.16c.016.027.032.054.044.083.007.016.01.032.016.049a.744.744 0 0 1 .042.238.743.743 0 0 1-.037.223c-.007.02-.012.042-.02.062a.748.748 0 0 1-.163.245l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72H15.95a4.753 4.753 0 0 1-3.886-2.09l-.351-.442a.75.75 0 0 1 1.172-.936l.36.45.04.055a3.251 3.251 0 0 0 2.68 1.463h4.224l-2.72-2.72a.75.75 0 0 1 0-1.06ZM17.47 1.47a.75.75 0 0 1 1.06 0l4 4a.756.756 0 0 1 .162.816.749.749 0 0 1-.162.244l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72H16.02a3.25 3.25 0 0 0-2.674 1.372l-5.44 8.58a4.75 4.75 0 0 1-3.934 2.047L2 18.75a.75.75 0 0 1 0-1.5h1.979a3.25 3.25 0 0 0 2.673-1.373l5.442-8.578.02-.03a4.751 4.751 0 0 1 3.913-2.018l4.162-.001-2.72-2.72a.75.75 0 0 1 0-1.06ZM3.972 5.25a4.75 4.75 0 0 1 4.27 2.612.751.751 0 0 1-1.34.675 3.252 3.252 0 0 0-2.698-1.781l-.226-.006H2a.75.75 0 0 1 0-1.5h1.972Z" />
    </svg>;
  return <div className="remix-btn-container" style={{
    margin: '16px 0'
  }}>
      <button onClick={handleClick} className="remix-btn" type="button" tabIndex={0}>
        <RemixIcon />
        <span>{label}</span>
      </button>
    </div>;
};

Procurando outra forma de começar a criar no Replit? **Remixar** permite que você comece a partir de apps existentes criados pela comunidade. É mais rápido do que construir do zero e uma ótima maneira de aprender com código funcional.

<Tip>
  Novo no Replit? Tente [criar seu primeiro app](/pt/build/your-first-app) para aprender como o Agent funciona do zero.
</Tip>

## Crie seu Remix

⏰ *Tempo estimado: 5 minutos*

Siga as etapas deste guia para criar um Remix de um app de piano digital interativo:

<Frame>
  <img src="https://mintcdn.com/replit/CKgy3zbnPnUlDukQ/images/getting-started/quickstart_piano_complete.png?fit=max&auto=format&n=CKgy3zbnPnUlDukQ&q=85&s=76dbd6c44f768c4cb88bd7f1ee51699c" alt="Piano digital interativo com teclas" width="1820" height="1024" data-path="images/getting-started/quickstart_piano_complete.png" />
</Frame>

<Tip>
  Experimente o app publicado em [Digital Piano Keys](https://digital-piano-keys.replit.app).
</Tip>

<Steps>
  <Step title="Remixe o app">
    Selecione o botão **Remixar este app** abaixo para começar a criar sua própria versão do app Digital Piano.

    <RemixButton replUrl="https://replit.com/@sarahxli/Digital-Piano-Keys?v=1" label="Remixar este app" />
  </Step>

  <Step title="Preencha os detalhes do app">
    Após selecionar o botão, a caixa de diálogo **Remixar App** aparece. Selecione **Remixar App** para continuar. Você pode editar esses detalhes depois.

    <Frame>
      <img src="https://mintcdn.com/replit/u7DyWVbaIRze6Cmd/images/getting-started/quickstart_remix_dialog.png?fit=max&auto=format&n=u7DyWVbaIRze6Cmd&q=85&s=d1d41a640ac0fc55679aa4081d5c5ff2" alt="Caixa de diálogo Remixar App mostrando nome do app, descrição e configurações de privacidade" width="1222" height="1202" data-path="images/getting-started/quickstart_remix_dialog.png" />
    </Frame>
  </Step>

  <Step title="Toque o piano">
    O app inicia automaticamente. Navegue até a aba **Preview** para ver a interface do piano.

    <Frame>
      <video autoPlay muted loop playsInline src="https://cdn.replit.com/sanity/quickstart-piano-demo.mp4" />
    </Frame>

    Agora você tem um Remix totalmente funcional com o qual pode interagir e melhorar iterativamente.

    Clique nas teclas do piano para tocar notas e ouvir os sons. Tente tocar uma melodia simples para testar o app.
  </Step>
</Steps>

## Aprimore seu Remix

Agora que você tem um app funcional, use o Agent para modificá-lo e expandi-lo. As seções a seguir mostram exemplos práticos de como aprimorar seu Remix.

### Adicione um recurso usando o Agent

Use o Agent para adicionar recursos complexos ao seu Remix:

<Steps>
  <Step title="Elabore um prompt">
    Navegue até a aba **Agent**.

    Digite o seguinte prompt na área de texto:

    <AiPrompt>
      Adicione um modo tutorial que ensina como tocar músicas simples. Quando o modo tutorial estiver ativo, destaque a próxima tecla que deve ser tocada, aguarde você pressionar a tecla correta antes de continuar, e exiba o nome da música no topo. Inclua um botão para iniciar o tutorial e pré-carregue pelo menos duas músicas simples como "Mary Had a Little Lamb" ou "Twinkle Twinkle Little Star."
    </AiPrompt>

    Após você enviar o prompt, o Agent pode pausar e pedir esclarecimentos ou confirmação. Responda na área de texto.
  </Step>

  <Step title="Teste o recurso">
    Navegue até a aba **Preview** para ver as atualizações do Agent no piano.

    Tente iniciar o modo tutorial e siga enquanto as teclas são destacadas.

    <Frame>
      <video autoPlay muted loop playsInline src="https://cdn.replit.com/sanity/quickstart-remix-piano-play.mp4" />
    </Frame>

    Como o prompt inicial não incluía detalhes específicos sobre o design visual, o resultado pode não
    corresponder às suas expectativas exatas.
  </Step>

  <Step title="Refine o recurso">
    Se o recurso diferir das suas expectativas, continue a conversa digitando um prompt de acompanhamento
    na área de texto do **Agent**. Por exemplo:

    <AiPrompt>
      Faça a tecla destacada brilhar com uma animação pulsante e adicione um indicador de progresso mostrando até onde estou na música.
    </AiPrompt>

    Para desfazer essas alterações, selecione **Reverter para aqui** no Checkpoint criado imediatamente
    após iniciar o plano para a alteração na aba **Agent**.

    Saiba mais sobre [Checkpoints e Reversões](/pt/references/version-control/checkpoints-and-rollbacks).
  </Step>
</Steps>

### Adicione um recurso usando o modo Lite

Siga estas etapas para adicionar uma melhoria rápida ao seu Remix usando o [modo Lite](/references/agent/agent-modes):

<Steps>
  <Step title="Elabore um prompt">
    Mude para o [modo Lite](/references/agent/agent-modes) e digite o seguinte prompt:

    <AiPrompt>
      Adicione botões de gravação e reprodução para capturar e repetir performances no piano.
    </AiPrompt>

    Após você enviar o prompt, o Agent descreve as alterações que quer fazer e permite que você revise as mudanças no código antes de prosseguir.
    Selecione **Prévia das alterações de código** para ver uma comparação do código atual e das atualizações.
  </Step>

  <Step title="Teste o recurso">
    Selecione **Aplicar tudo** e aprove as confirmações seguintes para continuar.

    Navegue até a aba **Preview** para verificar o resultado. Agora você deve ver botões de gravação e reprodução que permitem capturar e repetir o que você toca.

    Para desfazer essas alterações, use o recurso de Reversão na aba **Agent**.
  </Step>
</Steps>

## Continue sua jornada

Agora que você completou este tutorial, aqui estão alguns próximos passos específicos para remixes:

* **Explore mais remixes**: Navegue pela [comunidade](https://replit.com/community/all) para encontrar apps para remixar e aprender com eles
* **Construa do zero**: Tente [criar seu próprio app](/pt/build/your-first-app) com o Agent para comparar a experiência
* **Publique para remixagem**: Compartilhe sua versão aprimorada para que outros possam construir sobre o seu trabalho.