> ## 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 app proposée par la plateforme comme base.

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 à créer sur Replit ? **Remixer** vous permet de démarrer à partir d'applications existantes créées par la communauté. C'est plus rapide que de partir 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/getting-started/quickstarts/ask-ai) pour apprendre comment Agent fonctionne depuis le début.
</Tip>

## Créez 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 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="Remixez l'application">
    Sélectionnez le bouton **Remix this app** ci-dessous pour commencer à créer votre propre version de l'application Piano numérique.

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

  <Step title="Complétez les détails de l'application">
    Après avoir sélectionné le bouton, la boîte de dialogue **Remix App** apparaît. Sélectionnez **Remix App** 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 Remix App affichant le nom de l'application, la description et les paramètres de confidentialité" width="1222" height="1202" data-path="images/getting-started/quickstart_remix_dialog.png" />
    </Frame>
  </Step>

  <Step title="Jouez du piano">
    L'application démarre automatiquement. Accédez à 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 disposez maintenant d'un Remix entièrement fonctionnel avec lequel vous pouvez interagir et améliorer progressivement.

    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éliorez 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.

### Ajoutez une fonctionnalité avec Agent

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

<Steps>
  <Step title="Rédigez un prompt">
    Accédez à l'onglet **Agent**.

    Saisissez 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="Testez la fonctionnalité">
    Accédez à l'onglet **Preview** pour voir les mises à jour du piano par Agent.

    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>

    Étant donné que le prompt initial n'incluait pas de détails spécifiques sur le design visuel, le résultat peut ne pas correspondre exactement à vos attentes.
  </Step>

  <Step title="Affinez la fonctionnalité">
    Si la fonctionnalité diffère de vos attentes, continuez la conversation en saisissant 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 **Rollback to here** dans le Point de contrôle créé immédiatement après le démarrage du plan de modification dans l'onglet **Agent**.

    En savoir plus sur les [Points de contrôle et les Retours arrière](/fr/core-concepts/agent/checkpoints-and-rollbacks).
  </Step>
</Steps>

### Ajoutez une fonctionnalité avec le mode Lite

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

<Steps>
  <Step title="Rédigez un prompt">
    Passez au [mode Lite](/fr/core-concepts/agent/agent-modes) et saisissez 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 de réviser les changements de code avant de continuer.
    Sélectionnez **Preview code changes** pour voir une comparaison du code actuel et des mises à jour.
  </Step>

  <Step title="Testez la fonctionnalité">
    Sélectionnez **Apply all** et approuvez les confirmations suivantes pour continuer.

    Accédez à 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é Rollback dans l'onglet **Agent**.
  </Step>
</Steps>

## Poursuivez votre parcours

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

* **Explorez d'autres remixes** : Parcourez la [communauté](https://replit.com/community/all) pour trouver des applications à remixer et dont apprendre
* **Créez de zéro** : Essayez de [créer votre propre application](/fr/getting-started/quickstarts/ask-ai) avec Agent pour comparer l'expérience
* **Publiez pour le remix** : Partagez votre version améliorée pour que d'autres puissent s'appuyer sur votre travail.