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

> Aprenda a iniciar seu aplicativo a partir de um projeto Replit existente. Um **Remix** é um novo Aplicativo Replit que você cria a partir de um aplicativo ao qual você 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? O **Remix** permite que você comece a partir de aplicativos existentes criados pela comunidade. É mais rápido do que construir do zero e uma ótima forma de aprender com código funcional.

<Tip>
  Novo no Replit? Tente [criar seu primeiro aplicativo](/getting-started/quickstarts/ask-ai) para aprender como o Agent funciona do zero.
</Tip>

## Crie seu Remix

⏰ *Tempo estimado: 5 minutos*

Siga os passos neste guia para criar um Remix de um aplicativo 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 aplicativo publicado em [Digital Piano Keys](https://digital-piano-keys.replit.app).
</Tip>

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

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

  <Step title="Complete os detalhes do aplicativo">
    Após selecionar o botão, o diálogo **Remixar Aplicativo** aparece. Selecione **Remixar Aplicativo** para continuar. Você pode editar esses detalhes mais tarde.

    <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="Diálogo Remixar Aplicativo mostrando nome do aplicativo, 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 aplicativo inicia automaticamente. Navegue até a aba **Visualização** 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 aplicativo.
  </Step>
</Steps>

## Aprimore seu Remix

Agora que você tem um aplicativo funcionando, use o Agent para modificá-lo e estendê-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="Crie 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, espere 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 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 **Visualização** para ver as atualizações do Agent no piano.

    Tente iniciar o modo tutorial e acompanhe conforme 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 incluiu detalhes específicos sobre o design visual, o resultado pode não corresponder exatamente às suas expectativas.
  </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 o quanto já avancei 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](/core-concepts/agent/checkpoints-and-rollbacks).
  </Step>
</Steps>

### Adicione um recurso usando o modo Lite

Siga estes passos para adicionar uma melhoria rápida ao seu Remix usando o [modo Lite](/core-concepts/agent/agent-modes):

<Steps>
  <Step title="Crie um prompt">
    Mude para o [modo Lite](/core-concepts/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 enviar o prompt, o Agent descreve as alterações que deseja fazer e permite que você revise as mudanças no código antes de continuar.
    Selecione **Visualizar alterações no código** para ver uma comparação do código atual com as atualizações.
  </Step>

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

    Navegue até a aba **Visualização** 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 Reverter na aba **Agent**.
  </Step>
</Steps>

## Continue sua jornada

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

* **Explore mais remixes**: Navegue pela [comunidade](https://replit.com/community/all) para encontrar aplicativos para remixar e aprender com eles
* **Crie do zero**: Tente [criar seu próprio aplicativo](/getting-started/quickstarts/ask-ai) com o Agent para comparar a experiência
* **Publique para remix**: Compartilhe sua versão aprimorada para que outros possam criar com base no seu trabalho.