Découvrir un agent IA de code

Avant de commencer

Pourquoi apprendre à coder AVEC l'IA

Les développeurs utilisent désormais des agents IA de code au quotidien : ils décrivent ce qu'ils veulent, l'IA propose le code, eux relisent et ajustent. Bien utilisé, c'est un accélérateur énorme. Mal utilisé, on copie-colle sans comprendre et on produit du code cassé. Tout l'enjeu de cette séance : t'en servir comme un pro — vite, mais en gardant la main et la compréhension.

Ce que tu sauras faire à la fin

0. C'est quoi un agent IA de code ?

Tu connais peut-être ChatGPT : tu poses une question, il répond du texte. Un agent IA de code va plus loin : il travaille directement dans ton projet — il lit tes fichiers, en crée, en modifie, lance des commandes — en suivant tes instructions en langage naturel.

La fenêtre de contexte — combien l'agent peut « garder en tête »

Tout ce que l'agent peut traiter en une fois s'appelle la fenêtre de contexte. Elle est mesurée en tokens (groupes d'environ 4 caractères, soit ~¾ de mot). Quand elle est pleine, l'agent « oublie » le début de la conversation.

Quel outil pour quoi ? (comparaison rapide)

Apprendre AVEC l'IA, pas faire faire À ma place

C'est la distinction la plus importante de la séance. Le même outil peut te rendre plus fort… ou te rendre dépendant et nul. Tout dépend de comment tu t'en sers.

1. Lancer l'agent sur ton projet

On démarre l'agent dans le dossier de ton portfolio (celui avec index.html et style.css).

Étape 1 — Ouvrir un terminal dans le projet

Dans VS Code : Terminal → Nouveau terminal (il s'ouvre déjà dans ton dossier de projet). Vérifie où tu es :

ls

index.html   style.css

Étape 2 — Démarrer l'agent

Selon l'outil installé en classe, lance l'une de ces commandes :

claude          # Claude Code
opencode        # OpenCode

Étape 3 — Lui parler la première fois

Tape ta première demande, en français, puis Entrée :

quels fichiers vois-tu dans ce projet ?

Je vois 2 fichiers : index.html et style.css.
index.html contient ta page de présentation,
style.css contient sa mise en forme.

2. Le contexte : ce que l'agent « voit »

Un agent ne devine pas : il travaille à partir d'un contexte. Comprendre ce contexte, c'est comprendre pourquoi il répond bien ou mal.

1. Les fichiers du dossier

Quand tu le lances dans un dossier, l'agent peut lire les fichiers de ce dossier (et des sous-dossiers). C'est pour ça qu'il faut le lancer dans ton projet : lancé ailleurs, il ne voit pas ton index.html et travaille à l'aveugle.

2. Ce que tu lui écris

Tes prompts s'ajoutent au contexte au fil de la conversation. L'agent se souvient de ce qui a été dit plus haut dans la même session : tu peux dire « la section d'avant » sans tout réexpliquer.

3. Un fichier de mémoire (optionnel) — AGENTS.md / CLAUDE.md

Tu peux déposer à la racine de ton projet un petit fichier de consignes permanentes que l'agent lit à chaque démarrage. Selon l'outil il s'appelle AGENTS.md ou CLAUDE.md. Exemple de contenu :

Ce projet est mon portfolio de BTS SIO.
- Garde un style HTML/CSS simple et lisible.
- Commente le CSS pour que je comprenne.
- Explique-moi toujours ce que tu changes.

Modèle complet d'AGENTS.md pour ton portfolio

Voici un modèle pro à copier et adapter. Chaque section est expliquée :

# Consignes permanentes — Portfolio BTS SIO

## Contexte du projet
- Portfolio personnel HTML/CSS pur (pas de framework, pas de JavaScript pour l'instant).
- Fichiers : index.html (contenu), style.css (mise en forme).
- Sections dans cet ordre : #accueil, #apropos, #competences, #projets, footer contact.

## Style de code
- Une ligne de commentaire CSS avant chaque bloc de règles (ex: /* Bouton principal */).
- Classes en français avec tirets : .carte-projet, .btn-cv, .barre-nav.
- Indentation : 2 espaces.

## Ce que tu dois TOUJOURS faire
- Montrer le diff et attendre ma validation avant de modifier un fichier.
- Expliquer chaque propriété CSS que tu utilises en 1 phrase.
- Si tu n'es pas sûr d'une propriété, le dire.

## Ce que tu ne dois JAMAIS faire
- Supprimer mon contenu existant sans me le demander explicitement.
- Ajouter du JavaScript (on n'a pas encore vu ça).
- Utiliser des classes Bootstrap ou Tailwind.

3. Le bon prompt : précis = bon résultat

La qualité de ce que tu obtiens dépend entièrement de ta demande (le prompt). Un prompt vague donne un résultat vague.

Un même besoin, deux niveaux de prompt

FAIBLE : fais un menu

FORT   : dans index.html, ajoute une barre de navigation
         en haut avec 4 liens (Accueil, À propos,
         Projets, Contact) qui pointent vers les sections
         de la page. Style sobre, fond foncé, texte clair.

Atelier — répare 3 prompts faibles

Voici 3 demandes trop vagues. Pour chacune, repère ce qui manque (le contexte ? le quoi précis ? le comment ?), puis réécris-la en prompt fort.

Exemple travaillé — de bout en bout (patron atomique)

On suit le cycle complet : prompt fort → diff agent → explication token par token → résultat attendu. Cible : ajouter un bouton « Télécharger mon CV » à la section À propos.

Le prompt fort (à écrire à l'agent) :

dans index.html, dans la section id="apropos",
ajoute un lien-bouton "Télécharger mon CV" juste après
le paragraphe de présentation. href="cv.pdf".
Style dans style.css : fond #3d1d63, texte blanc,
padding 10px 24px, coins arrondis 6px,
au survol fond plus clair (#5b2d8e), transition douce.

Ce que l'agent propose (diff) :

--- index.html
    <p>Je m'appelle ... étudiant en BTS SIO SLAM.</p>
+   <a href="cv.pdf" class="btn-cv">Télécharger mon CV</a>

--- style.css
+ /* Bouton lien CV */
+ .btn-cv {
+   display: inline-block;
+   background-color: #3d1d63;
+   color: #ffffff;
+   padding: 10px 24px;
+   border-radius: 6px;
+   text-decoration: none;
+   font-weight: 700;
+   transition: background-color 0.2s ease;
+ }
+ .btn-cv:hover {
+   background-color: #5b2d8e;
+ }

[Résultat attendu dans le navigateur]
Un bouton violet foncé texte blanc arrondi.
Au survol : fond légèrement plus clair, transition fluide.
Si cv.pdf n'existe pas encore : le bouton s'affiche,
mais rien ne se télécharge au clic (erreur 404 silencieuse
dans la console — F12 → onglet Console pour la voir).

4. La boucle de travail

Travailler avec un agent, ce n'est pas « un prompt → c'est fini ». C'est une boucle que tu répètes : tu demandes, il propose, tu relis, tu testes, et si ce n'est pas parfait… tu recommences en affinant.

5. Lire le diff & accepter

L'agent te propose des modifications de fichiers. Avant de les accepter, on regarde ce qu'il change.

Le diff : ce qui change

L'agent montre un diff : les lignes ajoutées (souvent en vert, préfixées +) et supprimées (en rouge, préfixées -). Il te demande si tu acceptes.

  <main>
+   <section id="projets">
+     <h2>Mes projets</h2>
+   </section>
  </main>

Mode plan vs mode auto-accept

La plupart des agents proposent plusieurs façons de valider les changements. À connaître :

Checklist de lecture d'un diff (à passer mentalement avant d'accepter)

6. Annuler, revenir en arrière

Ça arrive : l'agent casse quelque chose, ou tu acceptes un changement que tu regrettes. Pas de panique — on sait toujours revenir en arrière. Un dev qui sait annuler proprement n'a peur de rien.

Méthode 1 — Annuler dans l'éditeur (Ctrl+Z)

Si l'agent vient de modifier un fichier ouvert dans VS Code, tu peux annuler directement dans l'éditeur, comme dans un traitement de texte :

Méthode 2 — Demander à l'agent de revenir en arrière

Tu peux simplement le lui dire, dans la conversation :

annule ton dernier changement, remets le code comme avant

7. Vérifier : ça marche vraiment ?

Le code produit a l'air bon ≠ il est bon. On teste, toujours.

1. Ouvre ta page dans le navigateur (ou rafraîchis avec F5).
2. Le résultat correspond-il à ta demande ?
3. Rien n'est cassé ailleurs (le reste de la page va bien) ?

Exemple — bien décrire un problème à l'agent

Un agent corrige bien… si tu décris bien. Compare ces deux signalements après un bug d'affichage :

Le réflexe : dire ce que tu vois vs ce que tu attendais, et où. Mini-dialogue :

Toi : après ton changement, ma page est vide à partir du titre "Mes projets". Avant elle s'affichait. Trouve ce qui est cassé.

Tu as raison : j'avais oublié de fermer la balise
</section>. Voici le correctif :
-   <div class="cartes">
+   <div class="cartes">...</div>
+ </section>

8. Itérer : le dialogue

On obtient rarement le résultat parfait du premier coup. Le vrai pouvoir de l'agent, c'est l'itération : on affine par petits pas.

Pourquoi le gros prompt rate

9. Une session complète, de bout en bout

Voici à quoi ressemble une vraie session sur le portfolio : un dialogue, du début (le prompt) à la fin (testé et validé). Lis-le comme un exemple à reproduire sur ton propre projet. Toi = ce que tu écris · Agent = ce qu'il répond.

Tour 1 — La demande

Toi :

dans index.html, ajoute après le titre une section
"Mes projets" avec 3 cartes. Chaque carte : un titre
et une phrase de description. Mets le style dans style.css.

Agent — il propose un diff sur deux fichiers :

index.html
+ <section id="projets">
+   <h2>Mes projets</h2>
+   <div class="cartes">
+     <article><h3>Page perso</h3><p>Ma 1re page HTML/CSS.</p></article>
+     <article><h3>...</h3><p>...</p></article>
+   </div>
+ </section>
Accepter ? (o/n)

Tour 2 — Tu relis, tu acceptes, tu testes

Tu lis le diff : ça correspond. Tu tapes o. Tu ouvres la page dans le navigateur (F5). Les 3 cartes s'affichent… mais les unes sous les autres, pas côte à côte. Pas grave : on itère.

Tour 3 — Tu affines

Toi :

mets les 3 cartes côte à côte, en grille de 3 colonnes,
avec un espace entre elles

Agent — diff sur le CSS :

style.css
+ .cartes { display: grid;
+           grid-template-columns: 1fr 1fr 1fr;
+           gap: 16px; }

Tour 4 — Tu fais expliquer (apprendre)

Toi : explique-moi ce que veut dire 1fr — l'agent t'explique que fr = « fraction » de l'espace dispo. Tu as appris un truc : tu repars plus fort, pas juste avec du code collé.

Tour 5 — Rendre la page mobile-friendly (responsive)

Toi :

sur écran mobile (largeur inférieure à 600px), mets les
3 cartes sur une seule colonne au lieu de 3 côte à côte

Agent — diff CSS :

style.css
+ @media (max-width: 600px) {
+   .cartes {
+     grid-template-columns: 1fr;
+   }
+ }

[Résultat attendu — mode mobile 375 px dans DevTools]
Les 3 cartes s'empilent verticalement.
Chacune occupe toute la largeur disponible.
[En mode desktop 1280 px]
Les 3 cartes reviennent côte à côte, 3 colonnes.

Tour 6 — Sauvegarder avant de continuer

Toi : dans VS Code, Ctrl + S sur index.html et style.css. C'est maintenant un bon réflexe à prendre après chaque changement accepté. La prochaine séance t'apprendra à sauvegarder toute l'histoire du projet avec Git — mais d'ici là, Ctrl + S assure le minimum.

10. Limites & ta responsabilité

Un bon utilisateur d'IA connaît ses limites. Ça évite les mauvaises surprises.

À quoi ressemble une hallucination

Une hallucination, c'est l'IA qui affirme du faux avec assurance. Exemple typique : une propriété CSS qui n'existe pas.

/* proposé par l'agent */
.carte { text-shadow-color: bleu;
         rounded-corners: 12px; }

Éthique : citer son usage de l'IA

En contexte scolaire et professionnel, on est honnête sur l'usage de l'IA. Ce n'est pas tricher de l'utiliser ; ce serait malhonnête de cacher qu'on l'a utilisée et de faire passer pour « compris » du code qu'on ne comprend pas.

Ce qui part vraiment « dans le cloud » — tableau de risque

Quand tu utilises Claude Code ou OpenCode, tes prompts et le contenu de tes fichiers sont envoyés aux serveurs distants d'Anthropic / OpenAI. Voici ce que ça implique concrètement :

11. Kickoff : ton portfolio

Grand moment : on lance ton portfolio. C'est le site personnel que tu vas enrichir toute l'année et présenter au BTS blanc (décembre). Aujourd'hui, avec l'agent, on pose une vraie base.

Ce qu'un portfolio contient

4 bons prompts pour démarrer ton portfolio

Réutilise-les en les adaptant à toi (remplace les exemples par tes vraies infos) :

1) dans index.html, structure la page en 4 sections avec
   des id : "accueil", "apropos", "competences", "projets".
   Ajoute un titre h2 à chacune. Ne touche pas au contenu
   déjà présent, déplace-le dans la bonne section.

2) ajoute une barre de navigation en haut avec 4 liens
   qui mènent vers ces 4 sections (ancres #accueil, etc.).

3) dans la section competences, fais une liste à puces
   de 5 compétences en cours d'acquisition (HTML, CSS,
   terminal, Git à venir, travail avec un agent IA).

4) dans la section projets, crée une carte "réalisation"
   pour CE TP : titre, 2 phrases de description, et la
   mention des compétences travaillées.

La structure cible (à quoi tu veux arriver)

Voici le squelette que tes prompts doivent produire dans index.html. Garde-le sous les yeux comme objectif :

<body>
  <nav>...4 liens vers les sections...</nav>
  <main>
    <section id="accueil">...</section>
    <section id="apropos">...</section>
    <section id="competences">...</section>
    <section id="projets">...</section>
  </main>
  <footer>...contact...</footer>
</body>

12. Mini-projet : construire & documenter

On boucle en mode pro : produire une amélioration avec l'agent, et documenter sa démarche (le réflexe portfolio / E5).

La mission

1. Choisis une amélioration concrète pour ton portfolio (ex. une galerie de projets, un thème de couleurs, un menu responsive).
2. Réalise-la par itérations avec l'agent (au moins 3 allers-retours), en testant à chaque étape.
3. Documente dans ton journal.md : tes prompts, ce que l'agent a produit, ce que tu as gardé / corrigé, et ce que tu as appris.
4. Vérifie que tu comprends le code final (sois capable de l'expliquer sans l'agent).

Le modèle de « fiche de démarche »

Séquence avancée — comprendre le CSS généré

Chaque fois que l'agent génère du CSS, tu dois pouvoir en lire et en expliquer les lignes. Cette séquence te fait pratiquer ce déchiffrage — propriété par propriété — sur 3 blocs types que tu rencontreras dans ton portfolio.

Bloc 1 — La barre de navigation

L'agent a produit ce CSS pour ton <nav>. Lis chaque ligne, puis consulte l'explication.

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1b2a4a;
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

[Résultat attendu]
La barre reste visible en haut de la fenêtre quand
tu fais défiler la page. Logo à gauche, liens à droite,
tout centré verticalement sur la hauteur de la barre.

Bloc 2 — Les cartes de projets (Flexbox vs Grid)

L'agent peut utiliser Flexbox ou Grid pour aligner des cartes. Savoir différencier les deux te permet de choisir ou de corriger intelligemment.

Bloc 3 — La carte de projet (boîte complète)

.carte-projet {
  background: #ffffff;
  border: 1px solid #e0d8f0;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.carte-projet:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

[Résultat attendu]
En repos : carte avec légère ombre et bord arrondi.
Au survol : la carte remonte doucement de 4 px,
l'ombre s'agrandit — effet "soulèvement" fluide.

Pour finir

Ton antisèche (bien travailler avec un agent)

Vérifie tes acquis

1. Différence entre un chatbot et un agent IA de code ?
2. Que « voit » un agent de ton projet (son contexte) ? À quoi sert un fichier AGENTS.md / CLAUDE.md ?
3. Qu'est-ce qui fait un bon prompt ?
4. Pourquoi faut-il lire le diff avant d'accepter, et pourquoi éviter l'auto-accept en débutant ?
5. Comment reviens-tu en arrière si l'agent casse quelque chose ?
6. Qu'est-ce qu'une « hallucination » de l'IA, et comment s'en protéger ?
7. Pourquoi vaut-il mieux itérer par petits pas qu'envoyer un gros prompt ?
8. Pourquoi est-il essentiel de comprendre le code que l'IA produit (pense à l'E6) ? Comment cites-tu honnêtement ton usage de l'IA ?

Glossaire