Le chat avec l'agent

Le chat est l’endroit où tu travailles avec l’agent. Tu écris ce que tu veux avec tes mots, l’agent modifie ton app dans son environnement, et l’aperçu se met à jour pendant qu’il écrit le code. Chaque réponse terminée crée une nouvelle version de ton projet, que tu peux toujours consulter ou restaurer.

Envoyer une demande

1. Clique dans la zone de saisie en bas du panneau (Demande une modification…).

2. Décris le changement, le plus concrètement possible :

   Ajoute une section « Tarifs » sous les témoignages, avec trois formules : Découverte 15 €, Mensuel 59 €, Annuel 590 €. Mets la formule mensuelle en avant.

3. Appuie sur Entrée (ou clique sur la flèche Envoyer). Pour aller à la ligne sans envoyer : Maj + Entrée.

Le bouton à côté du +, Construction, indique le mode du message : en Construction, l’agent modifie ton app directement. L’autre mode, Discussion, sert à poser des questions ou demander un plan sans rien changer (voir Le mode Discussion). Alt + P passe de l’un à l’autre.

Astuce

Une demande précise donne un meilleur résultat qu’une demande vague : dis ce que tu veux voir, où, et avec quel contenu. Les conseils détaillés sont dans Bien écrire ses demandes.

Suivre le travail de l’agent

Dès l’envoi, une réponse Highwind apparaît avec la pastille En attente… puis Au travail. Au tout début, « Préparation de l’environnement… » s’affiche le temps que l’environnement de ton projet démarre. Ensuite, l’agent écrit ce qu’il fait et ses actions s’affichent en direct, regroupées dans des cartes.

Ce que veut dire chaque étape

Ce que tu vois	Ce que fait l’agent
Un fichier avec écrit, modifié ou supprimé	Il crée, modifie ou supprime ce fichier. ×3 veut dire qu’il y est revenu trois fois. Une roue tourne tant que l’action est en cours, une coche verte quand elle a réussi.
Lu / Lu N fichiers	Il relit des fichiers existants pour comprendre le code avant de le changer.
Un texte entre guillemets (« Header »)	Il cherche ce texte dans le code.
Des noms de paquets (react-router…)	Il installe ces dépendances.
Parcourt les fichiers	Il regarde la liste des fichiers du projet.
Vérifie le projet	Il lance la vérification (types, build et aperçu).
Lit le schéma de la base / Base de données : …	Il lit ou modifie la base de données de ton app (si le backend est activé).
Ajoute un serveur à l’app	Il donne à ton app un serveur pour ses routes /api. Voir Le serveur de l’app.
Demande la clé …	Il a besoin d’une clé d’API : une carte apparaît dans le chat (voir plus bas).
Lit les logs du serveur	Il consulte les logs pour comprendre une erreur d’une route /api.
Crée l’image …	Il génère une image pour ton site. Voir Images générées.
Te propose un choix	Il te demande comment enregistrer les données (voir plus bas).
Te pose des questions	Il t’envoie un formulaire. Voir Les questions de l’agent.
N actions ont échoué	Une ou plusieurs actions n’ont pas marché. L’agent le voit et, en général, corrige de lui-même.

À la fin, une ligne résume la vérification : Vérifié : typecheck, build et aperçu OK (tout va bien), Vérifié : typecheck et build OK, ou Des erreurs restent à corriger.

Après la réponse

Sous chaque réponse terminée, tu trouves :

• Voir les étapes : rejoue la liste des actions, avec un résumé (« 4 fichiers écrits ou modifiés · 6 lus »). Clique sur un fichier pour voir exactement ce qui a changé dedans.
• Voir les changements : ouvre l’onglet Changements sur la version créée par cette réponse.
• Le badge de version (v7) à droite du nom Highwind : clique dessus pour afficher cette version dans l’aperçu (en lecture seule), reclique pour revenir à la version actuelle.
• Les crédits utilisés par cette réponse, avec une petite pièce (par exemple « 0,6 crédit »). Voir Les crédits.

Arrêter l’agent

Pendant que l’agent travaille, le bouton d’envoi devient un carré : Arrêter l’agent. Clique dessus pour l’interrompre.

• Les fichiers déjà modifiés sont gardés dans une version (« Run annulé en cours de route »), que tu peux garder, corriger ou annuler en restaurant la version précédente.
• Le travail déjà fait est débité ; si l’agent n’avait encore modifié aucun fichier, rien n’est débité.

Note

Un seul run à la fois : tant que l’agent travaille sur un projet, tu ne peux pas lui envoyer d’autre message, ni lancer l’agent sur un autre de tes projets.

Suggestions et avis

Les suggestions

Sous la dernière réponse, l’agent propose deux ou trois prochaines étapes adaptées à ton app (« Ajoute un formulaire de contact », « Rends l’en-tête fixe au défilement »…). Clique sur une suggestion pour l’envoyer telle quelle, en mode Construction.

Donner ton avis

Les pouces sous chaque réponse servent à dire si elle t’a été utile : Bonne réponse ou Réponse à améliorer. Avec le pouce vers le bas, un champ te demande « Qu’est-ce qui n’allait pas ? (facultatif) » : écris ce qui n’a pas marché et clique sur Envoyer, ou sur Passer. Reclique sur un pouce pour retirer ton avis. Ces retours aident l’équipe à améliorer l’agent.

Joindre des images

Tu peux joindre jusqu’à 4 images par message (PNG, JPEG, WebP ou GIF). Il y a deux façons de le faire, qui n’ont pas le même effet :

Image de référence

Une capture d’écran, une maquette, un site qui t’inspire : l’agent la regarde, mais elle n’est pas ajoutée au site.

• Menu + → Joindre → Image de référence,
• ou colle une capture directement dans la zone de saisie (Ctrl + V),
• ou glisse l’image sur la zone de saisie (« Dépose tes images ici »).

Refais la section d'accueil comme sur cette capture, mais avec nos couleurs.

Image pour le site

Ton logo, tes photos : l’image est enregistrée dans le projet (dossier public/assets/) et l’agent la place dans le site.

• Menu + → Joindre → Envoyer une image dans le projet (depuis ton ordinateur),
• ou Utiliser une image du projet pour choisir une image déjà dans la bibliothèque,
• ou, dans l’onglet Images, le bouton Utiliser dans le chat d’une image.

Ces images ont un contour turquoise et une petite icône de dossier, dans la zone de saisie comme dans l’historique.

Mets ce logo dans l'en-tête, à gauche, et dans le pied de page.

Survole une image jointe et clique sur la croix (Retirer l’image) pour l’enlever avant l’envoi.

Attention

Les images sont réduites dans ton navigateur avant l’envoi. Une image trop lourde même après réduction (plus de 5 Mo) est refusée avec le message « Image illisible ou trop lourde ». Les images SVG ne peuvent pas être jointes au chat : l’agent ne sait pas les regarder. Cite plutôt leur adresse dans ton message (« utilise /assets/logo.svg dans l’en-tête »).

Le menu +

Le bouton + à gauche de la zone de saisie regroupe tout ce que tu peux ajouter à ton message. Une recherche en haut du menu filtre les entrées.

Entrée	Ce qu’elle fait
Joindre	Une image de référence, une image à envoyer dans le projet ou une image déjà dans le projet (voir ci-dessus).
Connecteurs	La liste des services que l’agent peut brancher à ton app (paiement, e-mails, IA, CRM…). Ceux déjà configurés portent la mention Connecté. Choisir un service l’insère dans ton message.
Sélectionner un élément	Tu cliques sur un élément de l’aperçu pour que ta demande porte sur lui. Voir Sélectionner un élément.
Modifier directement	Ouvre le mode Design sur l’onglet Élément pour retoucher toi-même un élément, gratuitement. Voir Le mode Design.
Gérer les connecteurs	Ouvre la page Connecteurs de ton compte dans un nouvel onglet (tes clés et comptes, réutilisés dans tous tes projets).

Sélectionner un élément et Modifier directement sont grisés quand ce n’est pas possible, avec la raison au survol : « L’aperçu n’est pas encore prêt », « Indisponible sur une ancienne version » ou « Attends que l’agent ait terminé ».

Mentionner un connecteur avec @

Tape @ dans la zone de saisie : le menu s’ouvre directement sur la liste des Connecteurs. Choisis un service, il s’insère sous forme de pastille dans ton message. Si tu refermes le menu sans choisir, le caractère « @ » est simplement écrit.

Ajoute un paiement par carte avec @Stripe sur la page Réservation.

Mentionner un connecteur dit à l’agent que tu veux ce service : il le branche à ton app et te demande la clé s’il en a besoin. Les sources de contexte (Notion, Linear, Figma, Kameleoon) se mentionnent de la même façon, pour que l’agent lise ta page, ton ticket ou ta maquette. Voir Les connecteurs et Les sources de contexte.

Les cartes de l’agent dans le chat

Parfois, l’agent a besoin de toi pour continuer. Il termine alors sa réponse et affiche une carte sous le chat.

« À toi de choisir » : où enregistrer les données

Quand ton app doit garder des données (inscriptions, commandes, comptes…) et que plusieurs solutions sont possibles, l’agent te propose un choix. La carte rappelle le besoin (« Enregistrer les inscriptions à ta liste d’attente ») et propose deux ou trois options, celle qu’il recommande en premier avec le badge Recommandé :

• Base de données : comptes utilisateurs, données partagées entre appareils et fichiers, hébergés par Highwind en Europe. Cliquer dessus crée la base (« Création de la base… (moins d’une minute) »), puis l’agent reprend tout seul.
• Dans une feuille Google Sheets : chaque envoi s’ajoute comme une ligne dans une feuille de ton Google Drive, sans base de données.
• Par e-mail (Resend) : tu reçois chaque envoi par e-mail.
• Dans Slack : chaque envoi est publié dans un canal Slack.
• Plus tard : les données restent dans le navigateur de chaque visiteur pour l’instant.

Clique sur l’option qui te convient : Highwind fait le nécessaire et l’agent continue avec ton choix. Pour comprendre les différences, lis Où enregistrer les données.

« L’agent a besoin d’une clé »

Quand une fonction de ton app a besoin d’une clé d’API (pour envoyer des e-mails, encaisser un paiement…), une carte la demande :

• pour un connecteur (« L’agent a besoin de ta connexion Resend ») : choisis une connexion déjà enregistrée dans ton compte (Utiliser une connexion de ton compte), ou colle une nouvelle clé. Elle est chiffrée et enregistrée dans ton compte, réutilisable dans tes autres projets. Highwind vérifie la clé et te dit si elle fonctionne ;
• pour une autre clé (« L’agent a besoin d’une clé », avec son nom, par exemple CONTACT_EMAIL) : colle la valeur et clique sur Ajouter. Elle est chiffrée et jamais montrée à l’agent.

Ignorer retire la demande. Tu pourras toujours ajouter la clé plus tard dans Paramètres du projet → Secrets. Voir Les secrets.

Les autres cartes

• Les questions de l’agent : un petit formulaire quand quelques réponses changent vraiment le résultat (nom de la marque, couleurs, tarifs…). Voir Les questions de l’agent.
• Connecte ton compte Google : quand ton app enregistre dans Google Sheets, connecte ton compte pour que la feuille soit créée. Voir Google Sheets.

Quand l’envoi est bloqué

Message	Que faire
« Enregistre ou annule tes modifications de code avant d’envoyer un message. »	Tu as modifié du code dans l’onglet Code sans l’enregistrer. Clique sur Enregistrer ou Annuler dans cet onglet, puis renvoie ton message. (En mode Discussion, l’envoi reste possible : rien n’est modifié.)
« Plus de crédits pour aujourd’hui : les prochains arrivent à … »	Tes crédits du jour sont épuisés. Tu peux continuer à retoucher ton app gratuitement en mode Design en attendant. Voir Les crédits.
La zone indique « L’agent travaille… »	Attends la fin de la réponse en cours, ou arrête l’agent.

Voir aussi

Bien écrire ses demandesDes demandes qui donnent un bon résultat du premier coup.

Le mode DiscussionPoser des questions et obtenir un plan sans rien modifier.

Sélectionner un élémentViser un élément précis de l'aperçu.

Comment travaille l'agentCe qui se passe pendant un run.