Créer un Dashboard IA avec Claude Code : Tutoriel Pratique
Un dashboard, c'est l'outil le plus demandé par les entreprises. Un tableau de bord visuel pour suivre les KPIs, les leads, les ventes, l'activité. Chaque entreprise en a besoin. Peu en ont un qui fonctionne vraiment.
Avec Claude Code, tu en crées un en quelques heures. Pas en quelques semaines. Pas en embauchant une agence. En décrivant ce que tu veux et en itérant jusqu'au résultat.
Ce tutoriel te guide de A à Z : de la définition des KPIs au déploiement du dashboard connecté à tes données.
Pourquoi un dashboard ?
Un dashboard transforme des données invisibles en décisions actionnables. C'est aussi un produit vendable entre 2 000 et 5 000 euros en prestation, avec une marge massive grâce au Vibe Coding.
Les entreprises veulent voir leurs données. C'est aussi simple que ça.
Un Google Sheet partagé avec 47 onglets et des formules partout, ça ne suffit plus. Personne ne le consulte. Les données sont là mais personne ne les regarde parce que c'est illisible.
Un dashboard change la donne. Tu ouvres une page, tu vois tes chiffres clés en un coup d'oeil. Nombre de leads ce mois. Taux de conversion. Chiffre d'affaires. Pipeline en cours. Tout est visuel, clair, actualisé.
Un produit vendable
Si tu es prestataire ou consultant, un dashboard custom se vend entre 2 000 et 5 000 euros en prestation. Avec une maintenance mensuelle à 200-500 euros. C'est un produit concret, visible, que le client utilise tous les jours. Bien plus tangible qu'un "workflow d'automatisation" que personne ne voit tourner.
Et avec le Vibe Coding, ton coût de production chute. Ce qui prenait 2 semaines à un dev prend quelques heures avec Claude Code. Ta marge explose.
L'architecture d'un dashboard IA
Avant de construire, il faut comprendre les briques. Un dashboard se compose de trois couches.
Le front-end : l'interface visible
C'est ce que l'utilisateur voit. Du HTML, du CSS, du JavaScript. Généré par Claude Code. La mise en page, les cartes KPI, les graphiques, les tableaux, les filtres. Tout le visuel.
Les données : d'où viennent-elles ?
Le dashboard affiche des données. Ces données viennent de quelque part : une API, un webhook N8N, une base de données (Supabase, Airtable), un Google Sheet. Le front-end fait des requêtes pour récupérer ces données et les afficher.
La logique : filtres, interactions, rafraîchissement
Les filtres par date, par catégorie. Le tri des tableaux. Le rafraîchissement automatique toutes les 5 minutes ou en temps réel. Les interactions : cliquer sur un KPI pour voir le détail. Tout ça, c'est du JavaScript que Claude Code génère pour toi.
Étape 1 — Définir les KPIs
C'est la base. Avant d'écrire le moindre prompt, tu dois savoir ce que le dashboard va afficher.
Pose-toi ces questions : Qui va utiliser ce dashboard ? Quelles décisions cette personne doit prendre ? Quelles données l'aident à prendre ces décisions ?
Exemples de KPIs selon le contexte :
| Contexte | KPIs principaux |
|---|---|
| Agence marketing | Leads générés, taux de conversion, coût par lead, CA mensuel |
| E-commerce | Commandes du jour, panier moyen, taux d'abandon, stock critique |
| SaaS | MRR, churn rate, nouveaux utilisateurs, tickets support ouverts |
| Consultant | Projets en cours, heures facturées, pipeline commercial, satisfaction client |
Choisis 4 à 6 KPIs maximum pour la vue principale. Pas plus. Un dashboard surchargé est un dashboard que personne n'utilise.
Étape 2 — Construire l'interface avec Claude Code
C'est là que le Vibe Coding entre en jeu. Tu ouvres Claude Code et tu décris ton dashboard.
Voici un exemple de prompt efficace :
"Crée un dashboard avec une sidebar de navigation à gauche (logo, menu : Vue d'ensemble, Leads, Ventes, Paramètres). En haut de la zone principale, 4 cartes KPI : Leads ce mois (icone utilisateur), Taux de conversion (icone pourcentage), CA Mensuel (icone euro), Tâches en cours (icone check). Au centre, un graphique linéaire qui montre l'évolution des leads sur 12 mois. En bas, un tableau des 10 derniers leads avec colonnes : Nom, Email, Source, Date, Statut. Design sombre (#0a0a1a de fond), accents bleus (#7084FF), police Inter, responsive."
Claude Code va générer un fichier HTML complet avec le CSS intégré et le JavaScript pour les graphiques (Chart.js). Le premier résultat sera déjà utilisable à 70-80%.
Ensuite, tu itères :
- "Augmente la taille des chiffres dans les cartes KPI."
- "Ajoute un filtre par période en haut à droite : 7 jours, 30 jours, 90 jours."
- "Le tableau doit être triable en cliquant sur les en-têtes de colonnes."
- "Ajoute une animation de chargement quand les données sont en cours de récupération."
En 5 à 10 itérations, tu as un dashboard pro. Le genre d'interface qu'une agence facturerait des milliers d'euros.
Étape 3 — Connecter aux données via N8N
Le dashboard est beau. Maintenant, il faut qu'il affiche de vraies données.
La méthode la plus directe : un webhook N8N. Tu crées un workflow N8N avec un noeud Webhook en entrée. Ce workflow récupère les données depuis ta source (Google Sheets, CRM, base de données), les formate en JSON, et les retourne.
Côté front-end, ton dashboard fait un appel fetch() vers l'URL du webhook au chargement de la page. Il récupère le JSON et met à jour les KPIs, les graphiques, les tableaux.
Tu veux les détails techniques ? Le guide Connecter une interface à N8N couvre toutes les méthodes : webhooks, API exposée, base de données partagée.
Pour un rafraîchissement automatique, tu ajoutes un setInterval() qui rappelle le webhook toutes les 5 minutes. Le dashboard se met à jour sans que l'utilisateur ne touche à rien.
Étape 4 — Déployer et livrer
Ton dashboard fonctionne en local. Il est connecté aux données. Il est temps de le mettre en ligne.
Options de déploiement
| Plateforme | Coût | Difficulté | Idéal pour |
|---|---|---|---|
| Vercel | Gratuit (hobby) | Très simple | Projets front-end statiques ou avec API |
| Netlify | Gratuit (starter) | Très simple | Sites statiques, formulaires intégrés |
| Serveur propre (VPS) | 5-20 euros/mois | Moyenne | Contrôle total, projets en production |
Pour un dashboard client, Vercel ou Netlify suffisent dans 90% des cas. Tu déploies en quelques clics. Tu obtiens une URL propre. Tu peux ajouter un nom de domaine personnalisé.
La livraison au client
Ton livrable : un dashboard en ligne, accessible par URL, connecté aux données du client en temps réel. Tu fournis l'accès, une courte documentation d'utilisation, et tu proposes un contrat de maintenance pour les évolutions et le support.
"Un dashboard construit avec Claude Code et connecté à N8N, c'est une solution complète que tu peux vendre. Pas un side project."
C'est un produit. Un vrai livrable qui apporte de la valeur concrète au client. Et qui te positionne comme un expert en solutions IA, pas juste un "consultant en automatisation" de plus.
Pour aller plus loin sur les cas d'usage concrets de l'IA générative en business, consulte notre guide dédié.
Guide complet du Vibe Coding Construire des interfaces sans coderApprends à construire et vendre des dashboards IA
Le programme LE LABO IA t'enseigne la construction de dashboards avec Claude Code, la connexion aux données via N8N, et le positionnement pour vendre ces solutions à tes clients.
Découvrir la Formation Vibe Coding + Automatisation IATu veux aller plus loin que l'automatisation ?
Avec le Vibe Coding et Claude Code, tu construis des interfaces complètes connectées à tes workflows N8N. Découvre le programme.
Découvrir le programme
+110 entrepreneurs formés au Vibe Coding et à l'automatisation IA avec N8N. Fondateur du Labo IA.