Ethan Hayoun
← Tous les projets02 / 05

Produit web · Temps réel · Agents IA

Atelio

L’animateur lance un sondage, un quiz ou une rétrospective. Toute la salle participe depuis son téléphone, sans compte ni application.

Rôle
Product owner et pilote d’agents IA · cadrage, décisions d’architecture, validation
Période
Depuis oct. 2026
Statut
En ligne en démonstration
Contexte
Projet personnel

Le défi

Animer un groupe suppose souvent des comptes à créer et des applications à installer, avant même la première question.

La réponse

Un code, un téléphone : la salle participe en quelques secondes. Le logiciel est écrit par des agents d’IA, sous des règles et des contrôles que j’ai définis.

La coupe

Sous l’interface.

  1. 01

    Interface

    Trois écrans pour un même événement.

    Le téléphone du participant, l’écran projeté et la console de l’animateur. Pensé mobile d’abord, vérifié en accessibilité.

    Rejoindre avec un code · Console d’animation · Écran projeté en direct · Générateur d’activité par IA · Catalogue

    TypeScript · React · Tailwind · shadcn/ui · Vite · Playwright

  2. 02

    Services

    Un serveur qui valide tout, un code d’activité jamais cru sur parole.

    Un serveur de salons en temps réel valide chaque action. Chaque participant ne reçoit que sa propre vue, et le code des activités s’exécute dans un bac à sable.

    Salons temps réel · Contrat activité ↔ plateforme · Bac à sable · Comptes sans mot de passe · Service isolé

    Node.js · WebSocket · Zod · QuickJS (WASM) · SQLite · SimpleWebAuthn

  3. 03

    Infrastructure

    Déployé en conteneur, vérifié à chaque changement.

    Conteneur non-root derrière un proxy HTTPS, réseau confiné, base sauvegardée. Une commande unique de vérification et des tests de bout en bout encadrent chaque changement.

    Conteneur Docker · Proxy HTTPS · Vérification unique · Tests e2e · Relectures de sécurité

    Docker · Caddy · pnpm · Vitest · Playwright · GitHub

Schéma conceptuel simplifié : interface, services, infrastructure.
Générateur d’activité par IA : brouillon et aperçu des trois vues (capture, modèle d’IA simulé, données de démonstration).
Console d’animation en cours d’activité (capture, données de démonstration).

Décisions

Pourquoi ces choix.

  1. 01Interface

    Une interface déclarative : l’activité décrit, la plateforme dessine

    Le code d’une activité peut venir d’un catalogue ou d’une IA : il ne doit jamais s’exécuter dans le navigateur.

    Une activité renvoie des données (barres, cartes, saisie…) à partir d’un vocabulaire fixe ; seule la plateforme les affiche.

    → Aucun code d’activité côté navigateur, et un rendu homogène sur téléphone et sur écran projeté.

  2. 02Services

    Un serveur autoritatif et un code d’activité traité comme non fiable

    Des activités venues d’inconnus ou d’une IA tournent sur le serveur ; une réponse cachée ne doit pas fuir.

    Logique côté serveur, exécution dans un bac à sable avec quotas, toute entrée validée par un schéma, et un test de conformité qui vérifie qu’aucune vue ne contient de secret.

    → Les règles de sécurité sont des tests exécutables, pas des intentions.

  3. 03Services

    Isoler ce qui détient les secrets

    Le paiement, l’envoi d’e-mails et l’IA exigent des clés sensibles, à côté d’un conteneur qui exécute du code d’autrui.

    Ces clés vivent dans un service distinct ; le conteneur des salons n’en reçoit aucune et refuse de démarrer si elles sont présentes.

    → Une faille dans l’exécution d’activités n’expose pas les clés de facturation ou d’IA.

  4. 04Infrastructure

    Faire relire la sécurité par un agent sans contexte

    L’auteur d’un changement a tendance à ne pas voir ses propres angles morts, agent ou humain.

    Tout changement sensible est relu avant fusion par un sous-agent qui ne voit que la fiche de tâche et le diff, en plus d’une relecture générale par un second outil.

    → Les deux relecteurs ont trouvé des choses différentes ; les constats ont été traités avant fusion.

Le parcours

D’un code projeté à un résultat exploitable.

  1. Téléphone : rejoindre le salon avec un pseudo (capture, données de démonstration).
    01

    Rejoindre la séance

    Le participant ouvre le lien ou saisit le code affiché, puis choisit un pseudo. Pas de compte, pas d’application.
  2. Téléphone : vote à un sondage (capture, données de démonstration).
    02

    Répondre depuis le téléphone

    L’animateur lance une activité (ici un sondage d’exemple) et chaque participant répond en un geste.
  3. Écran projeté : résultats en direct (capture, données de démonstration).
    03

    Voir les résultats en direct

    Les réponses s’agrègent sur l’écran projeté ; l’animateur clôture, puis exporte les résultats.

Résultats

9/12 → 12/12
activités générées avec succès, après deux mesures sur le générateur IA (mesures internes, 12 descriptions)
0,28 $ → 0,117 $
coût par activité réussie
21
décisions d’architecture documentées
RetourTous les projets