Agentix Canvas

Développé dans le cadre de ma formation MMI, Agentix Canvas part d'une observation simple : quand on débute le développement web, le plus dur n'est pas d'écrire du code, c'est de savoir quoi écrire et pourquoi. L'idée était de bâtir une interface qui combine éditeur, prévisualisation et accompagnement IA dans le même espace, pour que l'apprenant garde toujours le contexte sous les yeux. Côté technique, j'ai construit la plateforme avec React 19 et Vite, en plogant plusieurs agents IA spécialisés via l'API OpenAI, le tout sauvegardé sur Supabase.

• 01

  Éditeurs HTML / CSS / JS intégrés

  Trois éditeurs Monaco côte à côte, un par langage, avec coloration syntaxique et auto-complétion. Un assistant IA contextuel est accessible directement depuis la sélection de texte : on surligne un bout de code, on demande une explication ou une correction sans quitter l'éditeur.

• 02

  Aperçu live et console intégrée

  Le rendu HTML/CSS/JS se met à jour à chaque frappe via un iframe isolé. Une console embarquée capture les logs et les erreurs pour que l'apprenant comprenne ce qui se passe quand son code "ne marche pas". C'est souvent là que le débutant se décourage.

• 03

  Du wireframe au code

  Un canvas basé sur Excalidraw permet de dessiner une interface à main levée. Un agent IA analyse ensuite le croquis pour générer le code HTML/CSS correspondant. C'est le cœur du concept : passer du dessin à un site fonctionnel sans rupture.

• 04

  Pipeline multi-agents

  Plusieurs agents IA spécialisés s'enchaînent selon les besoins : un pour analyser un design, un pour générer du code, un pour créer des exercices, un pour donner du feedback. Cette séparation permet à chaque agent d'avoir un prompt système plus précis, et donc des réponses plus pertinentes.

• 05

  Chat IA avec modes d'assistance

  Un chat permet à l'apprenant de poser des questions sur son code en cours. Plusieurs modes sont disponibles (guidage, révision, génération), et les solutions proposées peuvent être appliquées directement dans l'éditeur en un clic, sans copier-coller.

• 06

  Exercices générés selon le niveau

  À partir du niveau et des sujets travaillés, le système génère des exercices ciblés : code à compléter, bug à corriger, ou mini-projet complet à réaliser. L'avantage par rapport aux exercices fixes d'un MOOC : on ne refait jamais deux fois la même chose.

• 07

  Retour IA en temps réel

  Pendant que l'apprenant code, un agent IA analyse en continu ce qu'il écrit et lui dit si l'exercice est validé. Ça évite l'aller-retour "j'envoie ma réponse → j'attends → je découvre que c'est faux" qui casse le rythme d'apprentissage.

• 08

  Bibliothèque de projets

  Une interface en cartes (avec aperçu de chaque projet) permet de retrouver, organiser ou dupliquer ses travaux. Chaque projet sauvegarde son état complet : code, dessins, conversation avec le chat. Pas besoin de recommencer là où on s'était arrêté.

• 09

  Authentification Supabase

  Connexion classique par email ou via les providers OAuth de Supabase (Google, GitHub). Toute la progression et les projets sont stockés côté serveur, donc accessibles depuis n'importe quel poste sans réinstallation locale.

• 10

  Workspace ajustable

  Les panneaux de l'interface (éditeur, preview, canvas, chat) sont redimensionnables et masquables. Chaque utilisateur peut adapter son espace selon ce qu'il est en train de faire : apprendre un concept, déboguer un bout de code, ou prototyper une page.