{}

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

## Qu'est-ce que le Canvas ?

Le Canvas est un espace pour explorer et itérer sur des designs avec l'Agent. Ici, vous verrez vos artefacts — comme des applications, des vidéos et des diapositives — affichés dans un cadre. Vous pouvez travailler avec l'Agent pour créer des maquettes, comparer des directions de design et appliquer les modifications à votre application — le tout depuis un tableau visuel unique.

## Ce que contient le Canvas

Le Canvas est un tableau infini où vous pouvez tout voir et travailler visuellement.

* **Vos applications** : Vos applications en cours d'exécution apparaissent comme des aperçus interactifs en direct sur le Canvas. Vous pouvez cliquer dessus et les utiliser comme vous le feriez dans un navigateur.
* **Maquettes de design** : Des prototypes visuels créés par l'Agent. Ceux-ci ressemblent à de vraies pages — vous pouvez interagir avec eux, les redimensionner et demander à l'Agent de les modifier — mais ils sont séparés de votre application en direct pour que vous puissiez expérimenter librement.
* **Formes et dessins** : Rectangles, cercles, étoiles, flèches, cœurs et plus encore. Utilisez-les pour esquisser des idées brutes, annoter des designs ou cartographier la façon dont les écrans se connectent.
* **Texte et notes autocollantes** : Ajoutez des étiquettes ou des notes n'importe où sur le Canvas pour organiser vos idées.
* **Images** : Déposez des captures d'écran ou des images de référence sur le Canvas. L'Agent peut les recréer ou s'en inspirer.
* **Vidéos** : Placez des fichiers vidéo sur le Canvas aux côtés de votre autre contenu.

### Ajouter des designs sur le Canvas

Il existe plusieurs façons de commencer à créer des designs. Choisissez celle qui vous semble la plus naturelle.

<Steps>
  <Step title="Demander à l'Agent dans le chat">
    Tapez ce que vous souhaitez voir dans le champ de chat et l'Agent le place comme un cadre interactif sur le Canvas.

<Step title="Choisir un type de sortie">
    Vous pouvez également choisir le type de sortie souhaité — web, mobile, diapositives, design, et plus encore. Utilisez le carrousel pour choisir avant d'envoyer votre prompt.

<Step title="Amener une page existante sur le Canvas">
    Vous avez déjà une application en direct ? Demandez à l'Agent d'amener une page sur le Canvas pour une refonte — par exemple, « Mets mon tableau de bord sur le canvas. » L'Agent en fait une copie pour que votre application en direct reste intacte.
  </Step>
</Steps>

## Effectuer des modifications

Une fois que vous avez un design sur le Canvas, il existe plusieurs façons d'itérer dessus.

### Demander des mises à jour à l'Agent

Sélectionnez un cadre sur le Canvas et saisissez vos modifications dans le champ qui apparaît en dessous. Lorsque vous appuyez sur Entrée, l'Agent prend en compte la demande, effectue les mises à jour et rafraîchit la maquette directement sur le Canvas.

### Dessiner et annoter

Utilisez les outils de dessin dans la barre d'outils inférieure pour esquisser directement sur le Canvas. Dessinez des flèches pointant vers ce que vous souhaitez modifier, entourez les zones problématiques ou ajoutez des notes textuelles avec vos commentaires. Demandez ensuite à l'Agent d'apporter les modifications en fonction de vos annotations.

### Aperçu sur différents appareils

Voyez à quoi ressemblent vos designs sur différentes tailles d'écran. Demandez à l'Agent de vous montrer une version mobile, tablette ou bureau :

* **Mobile** — 390 × 844
* **Tablette** — 768 × 1024
* **Bureau** — 1280 × 720

Par exemple, « Montre-moi la version mobile de cette page » et l'Agent l'affiche à cette taille.

### Appliquer les modifications à votre application

Lorsque vous êtes satisfait d'un design, appliquez les modifications à votre version principale. L'Agent vous montre un résumé de ce qui a été fait et vous donne la possibilité d'appliquer ou d'ignorer.

## Comparer des directions de design

Lorsque vous n'êtes pas sûr de la direction à prendre, demandez à l'Agent de générer plusieurs versions pour les comparer côte à côte.

* **Plusieurs versions d'une page** : « Montre-moi cinq versions de cette page d'accueil. » L'Agent crée chacune d'elles et les dispose côte à côte.
* **Flux multi-pages** : « Conçois un flux d'intégration complet : bienvenue, configuration du profil, préférences et confirmation. » L'Agent construit chaque écran et les arrange dans l'ordre.
* **Mélanger et assortir** : « Montre-moi la page d'accueil et la page de tarification dans un style minimal et un style audacieux. » L'Agent crée chaque combinaison pour que vous puissiez voir l'ensemble.

## Cartographier les parcours utilisateurs

Disposez des parcours utilisateurs complets sur le Canvas — inscription, intégration, tableau de bord, paramètres — et arrangez-les pour voir comment tout s'articule.

* Placez chaque écran comme un cadre séparé
* Demandez à l'Agent de générer le flux complet : « Dessine le flux d'intégration complet de mon application »
* Utilisez des flèches et des formes pour montrer comment les utilisateurs se déplacent entre les écrans
* Demandez à l'Agent de transformer les esquisses brutes en designs soignés

## Transformer un design en vraie application

Lorsque vous êtes satisfait d'un design et souhaitez le rendre réel, deux options s'offrent à vous :

### En faire une application complète

Si votre design nécessite de vraies fonctionnalités — comme la sauvegarde de données, des comptes utilisateurs ou la connexion à d'autres services — demandez à l'Agent de le transformer en application complète. Dites quelque chose comme « Rends cette application réelle » ou « Ajoute un backend à ceci. » L'Agent construit tout ce dont il a besoin pour fonctionner comme une vraie application publiable.

<Note>
  Transformer un design en application complète nécessite un plan payant.
</Note>

### Le convertir en un type spécifique

Vous pouvez également convertir un cadre de design en un type d'artefact spécifique :

<Steps>
  <Step title="Sélectionner un cadre">
    Cliquez sur le cadre que vous souhaitez convertir.
  </Step>

<Step title="Demander à l'Agent de convertir">
    Dites à l'Agent ce que vous voulez — par exemple, « Convertis ceci en application web » ou « Transforme ceci en diapositives. »
  </Step>

<Step title="Choisir un type">
    Choisissez parmi application web, application mobile, diapositives, visualisation de données, et plus encore.
  </Step>
</Steps>

## Foire aux questions

<Accordion title="Les cadres de design sont-ils identiques à mon application en cours d'exécution ?">
  Non. Les cadres de design sont des prototypes visuels — ils ressemblent à la vraie chose, mais n'ont pas de backend ou de base de données fonctionnels derrière eux. Les aperçus de votre application sur le Canvas, en revanche, sont votre vraie application en cours d'exécution.
</Accordion>

<Accordion title="Puis-je repenser une page sans casser mon application en direct ?">
  Oui. Demandez à l'Agent d'amener une page sur le Canvas — par exemple, « Mets mon tableau de bord sur le canvas. » L'Agent en fait une copie avec laquelle vous pouvez expérimenter. Votre application en direct n'est pas affectée tant que vous ne choisissez pas d'appliquer les modifications.
</Accordion>

<Accordion title="Comment transformer un design en vraie application ?">
  Demandez à l'Agent d'en faire une application complète (« Rends ceci réel ») ou convertissez-le en un type spécifique (« Convertis ceci en application web »). L'Agent construit tout ce dont il a besoin pour devenir une application fonctionnelle et publiable.
</Accordion>

<Accordion title="Puis-je convertir en types autres que les applications web ?">
  Oui. Vous pouvez transformer des cadres Canvas en applications web, applications mobiles, diapositives, visualisations de données, et plus encore.
</Accordion>

<Accordion title="Puis-je importer des designs depuis Figma ou d'autres outils ?">
  Oui. Il existe plusieurs façons d'importer des designs Figma dans Replit :

* **Importer depuis Figma** : Rendez-vous sur [replit.com/import](https://replit.com/import), connectez votre compte Figma et collez une URL de cadre pour convertir un design en application React fonctionnelle. Voir le [guide de démarrage rapide Import depuis Figma](/fr/getting-started/quickstarts/import-from-figma) pour plus de détails.
  * **Figma MCP dans le chat Agent** : Collez un lien Figma directement dans le chat Agent et demandez-lui de générer du code, d'extraire des données de design ou de construire un composant à partir du design. Voir le guide [Intégration Figma MCP](/replitai/mcp/figma).
  * **Référence par capture d'écran** : Déposez une capture d'écran sur le Canvas et demandez à l'Agent de recréer le design à partir de celle-ci.
</Accordion>

<Accordion title="Que puis-je d'autre mettre sur le Canvas ?">
  En plus des maquettes de design et des aperçus d'applications, vous pouvez ajouter des formes, des flèches, des étiquettes de texte, des notes autocollantes, des images et des vidéos — utiles pour esquisser des idées, annoter des designs ou organiser votre réflexion.
</Accordion>

## Disponibilité

Le Canvas est disponible sur tous les plans, y compris la création de cadres, l'édition en ligne, la génération de variantes et la conversion en artefacts. Transformer des designs en applications complètes nécessite un plan payant.