2.1 — Démo : créer dans le navigateur

Durée : 5 min | Type : Démo | Slides : ~5-6

Ce qu'on peut créer en 30 secondes#

Avant de vous lancer, on va regarder ensemble ce que les IA savent déjà faire — directement dans le navigateur, sans rien installer, avec un simple prompt.

Les exemples qui suivent ont été créés en un seul message chacun. Pas de plan élaboré, pas de spécifications techniques, pas de code écrit à la main. Juste une description de ce qu'on veut, en français, envoyée à une IA.

Et — c'est la leçon importante — les prompts utilisés sont loin d'être parfaits. Fautes d'orthographe, formulation approximative, pas de structure. Les modèles payants actuels s'en sortent quand même remarquablement bien.

Exemple 1 : Diagramme de Venn interactif pour les bases de données#

Outil : ChatGPT 5.2 Thinking + Canvas Temps : ~30 secondes de prompt, ~1 minute de génération

Le prompt exact (tel quel, fautes incluses) :

wesh mon bro! tu peux me faire une canvas en html css js avec des Diagramme de Venn interactif pour représenter les différentes opérations en db. avec qq exemples de données pour rendre tout ca un peu plus concret stp. je veux un truc tres didactique et vraiment stylé!

Le résultat :

https://chatgpt.com/canvas/shared/698e651676148191a41d318f2b5a07eb

Ce qu'on obtient : un outil pédagogique complet pour enseigner les jointures SQL. Diagramme de Venn interactif, données modifiables, sélection d'opérations (INNER JOIN, LEFT JOIN, UNION, INTERSECT...), requête SQL générée automatiquement, résultat affiché en tableau. Le tout dans une interface propre et professionnelle.

Un prof de base de données peut utiliser ça tel quel en cours, dès demain matin.

Exemple 2 : Jeu interactif pour apprendre l'électricité avec Arduino#

Outil : Claude Opus 4.6 + Artifacts Temps : ~30 secondes de prompt, ~1 minute de génération

Le prompt exact (tel quel, fautes incluses) :

Hello, tu peux me faire un artifact pour faire un prototype d'application/jeu pour apprendre les bases de l'electricité avec Arduino. genre pour le premier cours pour apprendre a allumer des leds par exemple? comment ca fonctionne? comment brancher? ou? je veux un truc tres didactique et amusant et bien foutu.

Réfléchis d'abord à plusieurs solutions et sélectionne celle que tu trouve la meilleur après comparaison. ensuite programme le dans un artifact stp.

Le résultat :

https://claude.ai/public/artifacts/75636564-620b-4dc3-bb18-96ec4c153766

Ce qu'on obtient : une application pédagogique complète avec plusieurs sections (analogie eau/électricité, fiches composants interactives, constructeur de circuit, défis). Le tout gamifié avec un système de points. Multi-onglets, illustrations, mise en page soignée.

Un prof de robotique/électronique peut s'en servir comme support de cours interactif.

La leçon : le prompt parfait n'existe pas#

Regardez les prompts. Ils sont pleins de fautes, mal structurés, informels. Et pourtant les résultats sont professionnels et immédiatement utilisables.

C'est ça la réalité des modèles de 2026 : ils comprennent l'intention derrière votre message, même si la forme est approximative. Vous n'avez pas besoin d'être un expert en "prompt engineering". Vous avez besoin de savoir ce que vous voulez et de le décrire naturellement.

⚠️ Cela dit, plus vous êtes précis, plus le résultat correspondra à vos attentes du premier coup. Mais la barrière d'entrée est très basse — et c'est ça qui change tout.

Claudeception : Claude dans Claude#

On va aller un cran plus loin. Les artifacts de Claude ont une capacité unique : ils peuvent appeler l'API de Claude depuis l'intérieur de l'artifact. En d'autres termes, on peut créer une application qui contient elle-même une IA conversationnelle.

C'est ce qu'on appelle la Claudeception — un clin d'œil au film Inception de Nolan.

Chat embarqué dans un artifact#

Un chat complet avec Claude, embarqué dans un artifact. L'artifact appelle l'API Anthropic directement — pas besoin de clé API, le proxy est intégré. Le système prompt du Claude intérieur est personnalisable : assistant pédagogique, expert en maths, chatbot thématique, personnage historique...

Débat IA vs IA#

On peut aller encore plus loin : faire débattre deux instances de Claude entre elles, avec une troisième qui juge.

Trois appels API en parallèle : Claude A argumente POUR, Claude B argumente CONTRE (en ayant lu les arguments de A), et Claude C juge le tout avec un verdict détaillé et humoristique. Dix sujets pré-chargés type "Tabs vs Spaces", "PHP est mort ?", "Vim vs VSCode", ou vous tapez le vôtre.

Ce que ça signifie#

La Claudeception montre que les artifacts ne sont pas juste du HTML statique — ce sont de vraies applications qui peuvent intégrer de l'IA. Les possibilités :

• Un correcteur de texte qui utilise Claude pour analyser la grammaire et le style
• Un générateur de QCM où Claude crée les questions à partir d'un sujet
• Un chatbot thématique où Claude joue un personnage historique
• Un jeu d'aventure textuel où Claude génère l'histoire et le joueur fait des choix
• Un assistant de code avec un mini-IDE et Claude qui explique en direct

⚠️ Limitation : cette fonctionnalité est spécifique à Claude. ChatGPT et Gemini ne permettent pas (encore) d'appeler une API depuis leurs canvas.

Quand ça ne marche pas : la console du navigateur#

Parfois, un artifact ne s'affiche pas, ou affiche un écran blanc, ou ne réagit pas aux clics. Pas de panique — il y a un réflexe simple à prendre : ouvrir la console du navigateur.

Comment ouvrir la console#

• PC de bureau : appuyez sur F12
• PC portable : appuyez sur Fn + F12 (la touche Fn est en bas à gauche du clavier)
• Alternative : clic droit sur la page → "Inspecter" → onglet "Console"

Exemple concret : un globe 3D qui ne s'affiche pas#

Voici un cas réel. On demande à Claude de créer un globe terrestre en 3D avec Three.js. L'artifact génère le code... mais rien ne s'affiche. Écran vide.

En ouvrant la console (F12), on voit l'erreur en rouge : un problème d'import Three.js. Pas besoin de comprendre l'erreur — il suffit de la copier-coller dans le chat.

Claude identifie le problème et propose une correction. Mais attention — parfois l'assistant répond à côté : il vous explique comment corriger le code... alors que c'est lui qui y a accès. Il suffit de le lui rappeler :

Un simple "non, c'est toi qui dois corriger le code, pas moi" et c'est réglé. Le globe s'affiche.

Les réflexes debug — à retenir#

Situation	Réflexe
Écran blanc ou rien ne s'affiche	Ouvrir la console (F12 ou Fn+F12)
Messages en rouge dans la console	Copier-coller l'erreur dans le chat
Trop de messages dans la console	Tout copier — l'IA fera le tri
L'IA explique au lieu de corriger	Lui dire : "corrige le code" / "modifie l'artifact"
L'IA ne comprend pas le problème	Envoyer un screenshot de ce que vous voyez
Ça marche toujours pas après 2-3 essais	Demander de "repartir de zéro" avec une approche différente

Ce workflow — erreur → console → copier → coller → l'IA corrige — c'est exactement le cycle qu'on va formaliser dans la méthode de travail.