Site Web de Chatbot : Plateforme de Chat IA Personnalisable

Chatbot IA Personnalisable / App Web / Projet Next.js 14

Résumé en une ligne : Une interface de chatbot interactive et extensible pour les sites web modernes, construite avec Next.js 14 App Router, TypeScript, Tailwind CSS et Shadcn UI. Intègre plusieurs fournisseurs de LLM et présente une architecture modulaire prête pour la production.

Durée du développement : En cours (2025)

Note(s) :

• Clause de non-responsabilité sur l'hébergement/le code : La démo est hébergée sur chatbot.franzdomingo.tech en utilisant une API propriétaire. Le code source n'est pas public ; contactez l'auteur pour plus de détails.
• Contact pour plus d'infos ou démos : Contactez Franz Phillip G. Domingo via franzdomingo.tech.
• Note sur la navigation : L'application web du chatbot est accessible via le lien de démo en direct ci-dessus.

---

Fonctionnalités

• Intégration de LLM personnalisés (OpenAI, Gemini, Ollama, xAI et API personnalisées)
• Chat en temps réel avec interface responsive
• Architecture modulaire pilotée par les composants
• Style prêt pour la production (Tailwind CSS, Shadcn UI, Radix UI)
• Système d'Artéfacts : code, images, feuilles de calcul, notes avec mises à jour en direct
• Authentification (Auth.js)
• Persistance des données (Neon Serverless Postgres, Vercel Blob)
• Optimisations de performance : streaming, chargement différé, compression d'images
• Configuration de fournisseur extensible
• Tests de bout en bout (Playwright)

---

Mes Contributions (Rôle et Responsabilités)

Intégration et Déploiement :

• Déploiement et configuration du Chatbot IA open-source de Vercel dans un environnement dédié pour une démonstration en direct.

Connectivité Backend :

• Connexion à une API backend propriétaire pour simuler le support multi-modèle.

Exploration d'Architecture :

• Exploration de l'architecture de l'AI SDK et des modèles d'extensibilité des LLM.

UI/UX et Évolutivité :

• Étude de l'évolutivité de l'UI/UX et planification des remplacements de composants pour de futures améliorations.

Améliorations Prévues :

• Étendre le support pour Gemini, Ollama et les points de terminaison personnalisés
• Refonte de l'UI/UX pour des flux de travail définis par l'utilisateur
• Couche middleware pour l'ingénierie de prompts spécifiques à l'utilisateur

---

Défis Rencontrés

• Extensibilité des fournisseurs : Conception d'une architecture flexible pour basculer entre les fournisseurs de LLM et les points de terminaison personnalisés.

• Performance : Optimisation du streaming serveur, du chargement différé et de la gestion des artéfacts pour le chat en temps réel.

• Authentification et Persistance : Intégration d'Auth.js et du stockage serverless pour une gestion des données sécurisée et évolutive.

• UI/UX : Garantie de l'accessibilité et d'un design responsive sur tous les appareils.

---

Architecture du Projet

• Style d'Architecture : Next.js 14 App Router modulaire avec React Server Components.

• Organisation des Composants :

  • app/ : Routes Next.js (chat, auth, mise en page)
  • components/ : Composants réutilisables d'interface et de logique
  • lib/ai/ : Configurations LLM, logique de prompt, registre de fournisseurs
  • artifacts/ : Logique de gestion des artéfacts (texte, images, code, etc.)
  • hooks/ : Hooks React personnalisés pour le chat, l'état, l'interface
  • tests/ : Tests E2E et assistants de test

• Gestion d'État : React Context, Actions Serveur

• Intégrations : Vercel AI SDK, Auth.js, Neon Serverless Postgres, Vercel Blob

---

Aperçu de la Démo

• Captures d'écran/Vidéo : Vous pouvez voir la démo en direct sur chatbot.franzdomingo.tech. Toutes les fonctionnalités et l'interface sont disponibles pour exploration directe.

• Vues Plateforme : Web (responsive, mobile-first)

• Fonctionnalités Présentées :

  • Chat en temps réel
  • Basculement de fournisseur LLM
  • Système d'artéfacts (code, images, notes)
  • Authentification et persistance des données
  • Interface modulaire prête pour la production

• Instructions Démo : Visitez chatbot.franzdomingo.tech pour interagir avec l'application web du chatbot.

---

Ressources de Développement

• Guides/Docs :
  • Documentation Next.js, Vercel AI SDK, Tailwind CSS, Shadcn UI, Radix UI

---

Développeur : Franz Phillip G. Domingo
Dernière mise à jour : 11-07-2025

---

Construit sur la base du chatbot open-source de Vercel (sous licence MIT). Personnalisé pour un usage et une intégration personnels.