AI Hub — Bruno Tanguy

Contexte

Concevoir une plateforme pour orchestrer l'IA au quotidien

AI Hub est un projet personnel conçu pour explorer comment un outil pourrait centraliser 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 moi. Le code de l'application a ensuite été généré par Claude (Anthropic). Cette méthode m'a permis de me concentrer entièrement sur l'expérience utilisateur sans contrainte technique.

Problématique

Comment rassembler la puissance de plusieurs outils IA dans une interface cohérente ?

Aujourd'hui, utiliser l'IA en production signifie jongler entre ChatGPT, Claude, des outils d'automatisation, des bases de données séparées… Chaque outil a sa propre interface et ses propres logiques.

Problème 01

Trop d'outils fragmentés

Chat, automatisation, agents et données vivent dans des interfaces séparées sans cohérence.

Problème 02

Perte de contexte

Sans centralisation, les décisions et les données ne circulent pas entre les outils.

Problème 03

Automatisation inaccessible

Créer des workflows IA complexes reste réservé aux profils techniques.

Problème 04

Agents sans supervision

Monitorer et contrôler des agents autonomes en temps réel est difficile sans dashboard dédié.

Fonctionnalités

Quatre modules dans un espace de travail

01

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.

02

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. Cela permet de construire des pipelines complets par glisser-déposer. Trois workflows d'exemple préconstruits servent de point de départ.

03

Agents autonomes avec monitoring

Quatre agents préconfigurés : veille académique, revue de code, analyse de données, compte-rendus de réunions. Ils s'exécutent en arrière-plan. Un dashboard dédié expose les logs en temps réel, les outils actifs et la timeline des actions effectuées.

04

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.

Démarche

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 et 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

Explorer

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.

Ouvrir AI Hub →

Apprentissages

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.