AI Hub
Concevoir une plateforme pour orchestrer l'IA au quotidien
AI Hub est un projet personnel conçu pour explorer comment un outil unique pourrait centraliser l'ensemble des interactions avec des modèles d'IA — des conversations simples aux workflows d'automatisation complexes.
Toutes les fonctionnalités, les userflows et l'architecture de l'interface ont été définis par mes soins. Le code de l'application a ensuite été généré par Claude (Anthropic), dans une démarche de vibe coding — une approche qui m'a permis de me concentrer entièrement sur l'expérience utilisateur sans contrainte technique.
Comment unifier la puissance de plusieurs modèles IA dans une interface cohérente ?
Aujourd'hui, utiliser l'IA en production signifie jongler entre ChatGPT, Claude, des outils d'automatisation distincts, des bases de données séparées… Chaque outil a sa propre interface, sa propre logique.
Trop d'outils fragmentés
Chat, automatisation, agents et données vivent dans des interfaces séparées sans cohérence.
Perte de contexte
Sans centralisation, les décisions et les données ne circulent pas entre les outils.
Automatisation inaccessible
Créer des workflows IA complexes reste réservé aux profils techniques.
Agents sans supervision
Monitorer et contrôler des agents autonomes en temps réel est difficile sans dashboard dédié.
Quatre modules, un seul espace de travail
Chat multi-modèles
Une interface de conversation unique supportant Claude, GPT-4o et Llama en local. Chaque session est configurable en temps réel : modèle, température, accès internet, base de données connectée. Le panneau droit expose les paramètres actifs sans quitter le fil de conversation.
Builder d'automatisation visuel
Un éditeur de workflows no-code basé sur ReactFlow. Sept types de nœuds — déclencheur, modèle IA, condition, appel API, outil, validation humaine, fin — permettent de construire des pipelines complets par glisser-déposer. Trois workflows d'exemple préconstruits servent de point de départ.
Agents autonomes avec monitoring
Quatre agents préconfigurés — veille académique, revue de code, analyse de données, compte-rendus de réunions — s'exécutent en arrière-plan. Un dashboard dédié expose les logs en temps réel, les outils actifs (internet, fichiers, email…) et la timeline des actions effectuées.
Bases de connaissances
Un gestionnaire de sources de données regroupant tables SQL, documents et stores vectoriels. Chaque base indique son statut (actif, sync, hors ligne), le nombre d'entrées et les agents qui l'utilisent. Accessible directement depuis le chat pour ancrer les réponses dans des données réelles.
Vibe coding : designer d'abord, coder ensuite
Ce projet a été l'occasion d'explorer une nouvelle manière de travailler : définir précisément l'expérience — les userflows, les états d'interface, les interactions — puis déléguer l'implémentation à un modèle de langage.
Mon rôle a été de spécifier chaque écran, chaque transition, chaque cas d'usage. Claude a traduit ces specs en code React/TypeScript. Cette approche inverse la relation habituelle entre design et développement et ouvre une vraie question : jusqu'où peut aller un designer qui orchestre plutôt qu'il ne code ?
Ce que j'ai fait
- — Définition des userflows et de l'architecture de navigation
- — Spécification de chaque module et de ses états
- — Choix du système de design (dark, sidebar, tokens)
- — Itérations et ajustements sur le rendu final
Stack technique (généré)
- — React 19 + TypeScript
- — Tailwind CSS + Framer Motion
- — ReactFlow pour le builder visuel
- — Zustand pour la gestion d'état
L'application est interactive
Navigue dans les quatre modules, teste le builder d'automatisation, explore les agents et les bases de données. Tout est cliquable et fonctionnel.
Ce que ce projet m'a enseigné
- — Spécifier une interface précisément est un vrai travail de design — la qualité du résultat dépend directement de la clarté des specs fournies au modèle.
- — L'IA amplifie la vitesse d'exécution mais ne remplace pas la réflexion sur les usages, les cas limites et les priorités UX.
- — Concevoir une interface pour des outils IA oblige à penser la complexité autrement : les états d'un agent en cours d'exécution ou les erreurs d'un workflow ne ressemblent à rien dans les patterns UX classiques.