Flow
Un prototype d'OS nativement IA piloté à la voix : vous parlez, et Claude répond à voix haute tout en assemblant l'interface à l'écran en temps réel. Réalisé en solo en 24 heures au hackathon Anthropic × Y Combinator.
En bref
Ma contributionConception d'un contrat unique en JSON streamé, { speech, canvas } : Claude renvoie un seul objet, le client le parse et modifie directement le store du canevas, de sorte que chaque phrase prononcée correspond à une action sur le canevas.
- RÔLE
- Équipe de 4
- CONTEXTE
- Hackathon Anthropic × Y Combinator · 42AI
- STATUT
- Terminé
- STACK
- TypeScriptReactViteTailwind CSSVercel AI SDKAnthropic API (Claude Sonnet + Haiku)Whisper (transformers.js)ElevenLabsZustandFramer MotionZodKaTeXClaude Code
- RÉSULTAT
- Un prototype exécutable : énoncer une demande fait répondre Claude à voix haute et assembler l'interface correspondante sur un canevas spatial, construit de bout en bout dans la fenêtre de 24 heures du hackathon.
- MISE À JOUR
- 26 sept. 2026
1
Ce que j'ai construit
Équipe de 4
- Conception d'un contrat unique en JSON streamé, { speech, canvas } : Claude renvoie un seul objet, le client le parse et modifie directement le store du canevas, de sorte que chaque phrase prononcée correspond à une action sur le canevas.
- Construction du canevas spatial et du registre de widgets — déplacement et zoom de la caméra, un gestionnaire de disposition et une treizaine de types de widgets (quiz, leçon, rédaction d'e-mail, liste de tâches).
- Câblage de la stack vocale : reconnaissance vocale Whisper en local dans un Web Worker, et synthèse vocale ElevenLabs avec un repli natif speechSynthesis.
- Ajout d'une couche de démonstration à deux agents sur Claude Haiku (un routeur d'intention et un suivi de progression) et d'une intégration Gmail via MCP avec un repli sur une boîte de réception simulée.
2
Choix clés
- Un seul contrat JSON streamé plutôt que du tool calling
- Claude renvoie un unique objet { speech, canvas } que le client parse directement, ce qui garde la parole et l'interface synchronisées avec moins de latence qu'un aller-retour de tool calls.
- Deux petits agents Haiku pour une démo robuste
- Un routeur d'intention et un suivi de progression permettent au scénario scripté de se dérouler dans n'importe quel ordre, quelle que soit la formulation exacte.
- Accès à l'API côté navigateur, réservé à la démo
- La clé Anthropic est livrée au client, un choix délibérément assumé pour une démo de hackathon en local et documenté comme non sûr en production.
3
Résultats
Un prototype exécutable : énoncer une demande fait répondre Claude à voix haute et assembler l'interface correspondante sur un canevas spatial, construit de bout en bout dans la fenêtre de 24 heures du hackathon.
4
Limites
- Démo locale uniquement : la clé d'API est exposée au navigateur et il n'y a ni backend ni authentification, ce n'est donc pas déployable en l'état.
- Chrome ou Edge uniquement, et un microphone est nécessaire ; la voix premium requiert une clé ElevenLabs.
- Le contenu est scripté autour d'un unique scénario préparé ; le parcours Gmail retombe sur une boîte de réception simulée sans OAuth.
- Ni tests ni CI : c'est une preuve de concept, pas un logiciel maintenu.
Des questions sur ce projet ? → Écrivez-moi