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

# Remixer une application

> Apprenez à démarrer votre application à partir d'un projet Replit existant. Un **Remix** est une nouvelle application Replit que vous créez à partir d'une application à laquelle vous avez actuellement accès.

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>;
};

Vous cherchez une autre façon de commencer à construire sur Replit ? Le **Remix** vous permet de démarrer à partir d'applications existantes créées par la communauté. C'est plus rapide que de construire de zéro et c'est une excellente façon d'apprendre à partir de code fonctionnel.

<Tip>
  Nouveau sur Replit ? Essayez [de créer votre première application](/fr/build/your-first-app) pour apprendre comment Agent fonctionne de zéro.
</Tip>

## Créer votre Remix

⏰ *Durée estimée : 5 minutes*

Suivez les étapes de ce guide pour créer un Remix d'une application de piano numérique interactif :

<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 numérique interactif avec des touches" width="1820" height="1024" data-path="images/getting-started/quickstart_piano_complete.png" />
</Frame>

<Tip>
  Essayez l'application publiée sur [Digital Piano Keys](https://digital-piano-keys.replit.app).
</Tip>

<Steps>
  <Step title="Remixer l'application">
    Sélectionnez le bouton **Remixer cette application** ci-dessous pour commencer à créer votre propre version de l'application Digital Piano.

    <RemixButton replUrl="https://replit.com/@sarahxli/Digital-Piano-Keys?v=1" label="Remixer cette application" />
  </Step>

  <Step title="Compléter les détails de l'application">
    Après avoir sélectionné le bouton, la boîte de dialogue **Remixer l'application** apparaît. Sélectionnez **Remixer l'application** pour continuer. Vous pouvez modifier ces détails ultérieurement.

    <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="Boîte de dialogue Remixer l'application affichant le nom, la description et les paramètres de confidentialité de l'application" width="1222" height="1202" data-path="images/getting-started/quickstart_remix_dialog.png" />
    </Frame>
  </Step>

  <Step title="Jouer du piano">
    L'application démarre automatiquement. Naviguez vers l'onglet **Preview** pour voir l'interface du piano.

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

    Vous avez maintenant un Remix entièrement fonctionnel que vous pouvez utiliser et améliorer de manière itérative.

    Cliquez sur les touches du piano pour jouer des notes et entendre les sons. Essayez de jouer une mélodie simple pour tester l'application.
  </Step>
</Steps>

## Améliorer votre Remix

Maintenant que vous avez une application fonctionnelle, utilisez Agent pour la modifier et l'étendre. Les sections suivantes montrent des exemples pratiques d'amélioration de votre Remix.

### Ajouter une fonctionnalité avec Agent

Utilisez Agent pour ajouter des fonctionnalités complexes à votre Remix :

<Steps>
  <Step title="Rédiger un prompt">
    Naviguez vers l'onglet **Agent**.

    Entrez le prompt suivant dans la zone de texte :

    <AiPrompt>
      Add a tutorial mode that teaches you how to play simple songs. When tutorial mode is active, highlight the next key that should be played, wait for you to press the correct key before moving on, and display the song name at the top. Include a button to start the tutorial and pre-load at least two simple songs like "Mary Had a Little Lamb" or "Twinkle Twinkle Little Star."
    </AiPrompt>

    Après avoir soumis le prompt, Agent peut faire une pause et demander des clarifications ou une confirmation. Répondez dans la zone de texte.
  </Step>

  <Step title="Tester la fonctionnalité">
    Naviguez vers l'onglet **Preview** pour voir les mises à jour d'Agent sur le piano.

    Essayez de démarrer le mode tutoriel et de suivre les touches en surbrillance.

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

    Comme le prompt initial ne précisait pas les détails du design visuel, le résultat peut ne pas correspondre exactement à vos attentes.
  </Step>

  <Step title="Affiner la fonctionnalité">
    Si la fonctionnalité diffère de vos attentes, continuez la conversation en entrant un prompt de suivi
    dans la zone de texte **Agent**. Par exemple :

    <AiPrompt>
      Make the highlighted key glow with a pulsing animation and add a progress indicator showing how far along in the song I am.
    </AiPrompt>

    Pour annuler ces modifications, sélectionnez **Revenir ici** dans le Checkpoint créé immédiatement
    après le démarrage du plan pour la modification dans l'onglet **Agent**.

    En savoir plus sur les [Checkpoints et les restaurations](/fr/references/version-control/checkpoints-and-rollbacks).
  </Step>
</Steps>

### Ajouter une fonctionnalité avec le mode Lite

Suivez ces étapes pour ajouter une amélioration rapide à votre Remix avec le [mode Lite](/fr/references/agent/agent-modes) :

<Steps>
  <Step title="Rédiger un prompt">
    Passez au [mode Lite](/fr/references/agent/agent-modes) et entrez le prompt suivant :

    <AiPrompt>
      Add record and playback buttons to capture and replay piano performances.
    </AiPrompt>

    Après avoir soumis le prompt, Agent décrit les modifications qu'il souhaite apporter et vous permet d'examiner les changements de code avant de continuer.
    Sélectionnez **Aperçu des modifications de code** pour voir une comparaison du code actuel et des mises à jour.
  </Step>

  <Step title="Tester la fonctionnalité">
    Sélectionnez **Tout appliquer** et approuvez les confirmations suivantes pour continuer.

    Naviguez vers l'onglet **Preview** pour vérifier le résultat. Vous devriez maintenant voir des boutons d'enregistrement et de lecture qui vous permettent de capturer et de rejouer ce que vous jouez.

    Pour annuler ces modifications, utilisez la fonctionnalité de restauration dans l'onglet **Agent**.
  </Step>
</Steps>

## Continuer votre parcours

Maintenant que vous avez terminé ce tutoriel, voici quelques étapes suivantes spécifiques au remix :

* **Explorer plus de remixes** : Parcourez la [communauté](https://replit.com/community/all) pour trouver des applications à remixer et à partir desquelles apprendre
* **Construire de zéro** : Essayez de [créer votre propre application](/fr/build/your-first-app) avec Agent pour comparer l'expérience
* **Publier pour le remixage** : Partagez votre version améliorée pour que d'autres puissent s'appuyer sur votre travail.