Lynvia Connect est une plateforme hébergée sur Vercel permettant de créer, configurer et gérer des agents IA spécialisés connectés à des workflows standards n8n.
Pour le cas des sales: Chaque agent peut converser avec des leads, qualifier automatiquement les réponses, prendre des rendez-vous et générer des résumés vocaux via ElevenLabs.
- Quick-start
- Vue d’ensemble
- Architecture
- Installation & lancement
- Gestion des routes
- Composant Dashboard
- Composant EditStrategy
- Connexion avec n8n
- Persistance des données
- Encodage et sécurité des URLs
- Événements & synchronisation
- Roadmap & prochaines évolutions
- Crédits & contact
The bot is already deployed with a working wired cloud solution. Let's try it 🚀.
- Use the bot in telegram (web) : @AIdventure_message_bot
- Use the bot in telegram (mobile app) : @AIdventure_message_bot
Lynvia Connect permet aux utilisateurs (TPE/PME, agences, etc.) de :
- Créer un agent IA adapté à leur secteur d'activité ;
- Orchestrer ses tâches avec n8n (prospection, qualification, éducation, relances, etc.) ;
- Converser automatiquement via WhatsApp ou Telegram, prendre des rendez-vous, et résumer les actions réalisées ;
- Piloter plusieurs agents IA depuis un tableau de bord unifié.
What technologies are used for this project?
There are several ways of editing your application.
Use your preferred IDE
If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.
The only requirement is having Node.js & npm installed - install with nvm
| Composant | Technologie |
|---|---|
| Frontend | React + TypeScript |
| UI | shadcn/ui + TailwindCSS + Lucide Icons |
| Routing | React Router DOM |
| Backend logique | n8n Cloud (webhook REST) |
| Hébergement | Vercel |
| Persistance locale | localStorage |
| Audio résumé | ElevenLabs (API TTS) |
lynvia-connect/
├── api/
│ └── strategy.ts
│
├── public/
│ ├── audios/
│ ├── favicon.ico
│ ├── logo.png
│ ├── placeholder.svg
│ └── robots.txt
│
├── src/
│ ├── assets/ # 🖼️ Images, icônes, ressources statiques
│ ├── components/ # 🧩 Composants UI réutilisables (Button, TopBar, Cards, etc.)
│ ├── hooks/ # 🪝 Hooks personnalisés (useAgent, useLocalStorage, etc.)
│ ├── lib/ # ⚙️ Fonctions utilitaires, API clients, helpers
│ ├── pages/ # 📄 Pages principales de l'application
│ │ ├── Analytics.tsx # 📊 Page d’analyse (inclut le bouton “Écouter le résumé”)
│ │ ├── Dashboard.tsx # 🧭 Tableau de bord principal
│ │ ├── AiAgents.tsx # 🤖 Liste et création d’agents IA
│ │ ├── EditStrategy.tsx # ⚙️ Éditeur de stratégie d’agent
│ │ └── ... # Autres pages React
│ │
│ ├── App.css
│ ├── App.tsx
│ ├── index.css
│ ├── main.tsx
│ └── vite-env.d.ts
│
├── .gitignore
├── README.md
├── bun.lockb
├── components.json
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vercel.json # ⚙️ Configuration du déploiement Vercel
└── vite.config.ts # ⚙️ Configuration du bundler Vite
- Node.js ≥ 18
- npm ou pnpm
- Un compte Vercel (optionnel)
- Un webhook n8n fonctionnel
git clone https://github.com//lynvia-connect.git cd lynvia-connect
npm install
npm run dev
Le déploiement de Lynvia Connect se fait facilement via Vercel.
-
Connecter votre dépôt GitHub à Vercel
- Rendez-vous sur https://vercel.com/import
- Cliquez sur “Add New Project”
- Sélectionnez le dépôt lynvia-connect
-
Choisir la branche de déploiement
- Sélectionnez la branche
main - (ou créez une branche
gh-pagessi vous souhaitez déployer une version spécifique)
- Sélectionnez la branche
-
Détection automatique du framework
- Vercel détecte automatiquement le framework Vite + React
- Aucun fichier de configuration supplémentaire n’est nécessaire
-
Configurer la commande de build
Dans la section “Build & Output Settings” :Build Command: npm run build Output Directory: dist
La navigation dans Lynvia Connect est gérée avec React Router DOM.
Chaque page correspond à un composant principal du dossier src/pages/.
| Route | Composant | Description |
|---|---|---|
/ |
Dashboard |
Affiche la liste des agents IA et permet d’en créer de nouveaux. |
/agents/edit/:id |
EditStrategy |
Formulaire de création ou de modification d’un agent IA. |
/analytics |
Analytics |
Affiche les statistiques (conversations, taux de booking, etc.). |
/integrations |
Integrations |
Gère les connexions avec n8n, GoHighLevel, WhatsApp, etc. |
/billing |
Billing |
Gère les abonnements et la facturation. |
/help |
HelpCenter |
Centre d’aide et documentation utilisateur. |
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Dashboard from "@/pages/Dashboard"; import EditStrategy from "@/pages/EditStrategy"; import Analytics from "@/pages/Analytics"; import Integrations from "@/pages/Integrations"; import Billing from "@/pages/Billing"; import HelpCenter from "@/pages/HelpCenter";
function App() { return ( <Route path="/" element={} /> <Route path="/agents/edit/:id" element={} /> <Route path="/analytics" element={} /> <Route path="/integrations" element={} /> <Route path="/billing" element={} /> <Route path="/help" element={} /> ); }
export default App;
Le composant Dashboard est le point d’entrée principal de Lynvia Connect.
Il affiche tous les agents IA enregistrés localement, permet d’en créer de nouveaux et de visualiser des statistiques globales.
Le Dashboard a pour objectif de :
- Lister tous les agents IA enregistrés dans le navigateur ;
- Offrir un bouton “➕ Create new agent” pour créer un nouvel agent ;
- Afficher les indicateurs clés : nombre de conversations, taux de booking, statut, etc. ;
- Fournir une navigation fluide vers la page d’édition
/agents/edit/:id.
✅ Lecture et affichage dynamique des agents
Un clic sur le bouton “Create new agent” ouvre le formulaire d’édition.
L’agent est ensuite sauvegardé dans le localStorage via le composant EditStrategy.
Le Dashboard affiche un aperçu global des performances :
- Conversations récentes 📩
- Taux de conversion / réservations 📊
- Agents actifs 🟢 vs inactifs 🔴
Ces statistiques permettent d’avoir une vue rapide sur l’activité et l’efficacité des agents IA. (V2)
navigate(/agents/edit/${encodeURIComponent(agent.name.toLowerCase())});
Permet de créer ou d’éditer un agent IA : Nom, secteur, contexte Niveau de gestion d’objections & qualification Instructions IA personnalisées
const res = await fetch("https://iadventure.app.n8n.cloud/webhook/strategie-ai", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), });
const existing = JSON.parse(localStorage.getItem("agents") || "[]"); localStorage.setItem("agents", JSON.stringify([...existing, newAgent])); window.dispatchEvent(new Event("agentsUpdated"));
https://iadventure.app.n8n.cloud/webhook/strategie-ai
{ "name": "Agent Solar", "sector": "immobilier", "context": "Prospection de leads via WhatsApp", "goal": "Générer des leads qualifiés avec un ton amical", "delay": { "hr": 0, "min": 0, "sec": 30 }, "sliders": { "objection": 50, "qualification": 33 }, "prompt": "Instructions IA personnalisées..." } n8n peut ensuite déclencher un workflow : envoi WhatsApp, ajout CRM (GoHighLevel), relance automatique, etc.
Les agents sont sauvegardés localement dans le localStorage : [ { "id": "uuid-v4", "name": "Formations UX/UI", "sector": "coaching", "context": "Formation en design et IA", "status": "Active", "conversations": 12, "bookings": 4 } ] Aucune base de données externe n’est utilisée pour l’instant.
✅ Encodage
navigate(/agents/edit/${encodeURIComponent(agent.name.toLowerCase())});
✅ Décodage
const decodedId = decodeURIComponent(agentId || "");
Cela permet de gérer correctement les agents comme :
/agents/edit/formations%20ux%2Fui
Événement custom : agentsUpdated Émission : window.dispatchEvent(new Event("agentsUpdated")); Écoute : window.addEventListener("agentsUpdated", loadAgents); ➡️ Assure la synchronisation temps réel entre création et affichage du Dashboard.
roadmap: README
Connexion directe au CRM GoHighLevel Authentification utilisateurs Synchronisation cloud des agents Intégration d’un générateur vocal ElevenLabs natif UI “drag-and-drop” pour les stratégies IA Monitoring des workflows n8n depuis le front
Projet : Lynvia Connect Auteurs : Sanae Ayda, Cyril Teisseire, Mathieu Audo Hébergement : https://lynvia-connect.vercel.app Support : sanaeayda@yahoo.fr © 2025 Lynvia Connect – Tous droits réservés. En collaboration avec l'entreprise qui a exprimé le besoin.