Site Web de Chatbot : Plateforme de Chat IA

Exploration et déploiement du modèle de Chatbot IA de Vercel comme première étape dans le développement de l'IA.

LIEN DE DÉMO

Aperçu

• Rôle : Développeur / Intégrateur
• Technologies : Next.js 14, TypeScript, Tailwind CSS, Vercel AI SDK, NextAuth.js
• Résultat Clé : Configuration et déploiement réussis d'un modèle IA complexe et multi-fournisseurs.
• Résumé : Il s'agissait de mon premier projet d'IA pratique. Au lieu de réinventer la roue, j'ai utilisé le modèle de Chatbot IA open source de Vercel. J'ai exploré son architecture, apporté quelques ajustements personnels et me suis concentré sur sa configuration et son déploiement avec succès pour apprendre comment fonctionnent les applications d'IA modernes.

Le Problème

• Défi : Comprendre une base de code vaste et préexistante (le modèle de Vercel) et découvrir comment configurer ses variables d'environnement, ses connexions de base de données et ses fournisseurs d'IA pour un déploiement en direct.
• Public : Moi-même (pour l'apprentissage) et les visiteurs du portfolio souhaitant tester un chat IA en direct.
• Contraintes : Naviguer dans la courbe d'apprentissage du Vercel AI SDK et configurer la persistance sans serveur (serverless) pour la première fois.

Approche et Décisions

• Architecture : J'ai tiré parti de la configuration prête à l'emploi Modular Next.js 14 App Router et des React Server Components du modèle.
• Décisions Clés : J'ai décidé d'utiliser un modèle robuste sous licence MIT comme bac à sable d'apprentissage. Cela m'a permis d'étudier un code prêt pour la production au lieu de lutter pour construire des mécanismes de streaming de base à partir de zéro.
• Compromis : J'ai sacrifié la personnalisation complète au profit d'un point de départ fiable et complet pour étudier et déployer.
• Flux de Données : J'ai étudié comment le modèle achemine les entrées de l'utilisateur via le Vercel AI SDK vers différents fournisseurs LLM et diffuse la réponse vers l'interface utilisateur.

Résultats Clés et Impact

• Résultat : J'ai acquis une expérience pratique de la configuration, de la modification et du déploiement d'une application Next.js 14 moderne avec des capacités d'IA.
• Impact : Cela a démystifié le processus d'intégration des LLM dans les applications web, servant de base solide pour mes futurs projets d'IA plus personnalisés.

Plongée Technique

(Note : Ce sont des fonctionnalités natives du modèle Vercel que j'ai explorées et apprises au cours de ce projet.)

• Détails Notables : J'ai exploré le système "Artifacts" intégré au modèle qui gère le code, les images et les notes.
• Vérification : J'ai appris comment le projet utilise Playwright pour des tests de bout en bout (E2E) prêts à l'emploi.
• Optimisations : J'ai étudié comment le lazy loading et les React Server Components maintiennent les performances de l'interface de chat pendant la diffusion active.
• Qualité du Code : J'ai examiné et appris de la structure basée sur les composants et fortement typée du projet.

Réflexions

• Autrement : Dans mes futurs projets, je prévois de construire ma propre interface utilisateur personnalisée par-dessus le AI SDK à partir de zéro, maintenant que je comprends les concepts de base.
• Succès : J'ai géré avec succès les configurations d'environnement, connecté les bases de données nécessaires et fait fonctionner la démo en direct de manière fluide.
• Leçons : Lire et comprendre du code prêt pour la production écrit par d'autres développeurs est l'un des moyens les plus rapides d'apprendre de nouvelles technologies comme le Vercel AI SDK.

Mes Contributions

• Configuration et Déploiement : Configuration des variables d'environnement, connexion des bases de données nécessaires (Neon Serverless Postgres / Vercel Blob) et déploiement du modèle dans un environnement de production.
• Exploration du Code : Exploration approfondie de l'architecture du AI SDK et des modèles d'extensibilité LLM fournis par le modèle.
• Ajustements : Apport de modifications personnelles mineures à l'UI/UX et aux connexions des fournisseurs pour répondre à mes besoins spécifiques de démonstration.

Architecture du Projet

Ce projet utilise l'architecture fournie par le modèle de Vercel :

• Organisation des Composants :
  • app/ : Routes Next.js gérant les flux principaux de chat et d'authentification.
  • components/ : Composants d'interface utilisateur pré-construits et réutilisables.
  • lib/ai/ : Fichiers de configuration pour les LLMs et la logique de prompt.
• Gestion de l'État : Utilise React Context et Server Actions pour les transitions d'état.
• Intégrations : Propulsé par Vercel AI SDK, NextAuth pour l'authentification et des bases de données sans serveur pour l'historique du chat.

Aperçu de la Démo

Vous pouvez voir le déploiement modifié en direct sur chatbot.franzdomingo.dev. Toutes les fonctionnalités et l'interface utilisateur sont disponibles pour être explorées directement.

• Vue Web : Design réactif et axé sur le mobile (mobile-first).
• Chat en Temps Réel : Testez les capacités de diffusion des LLMs intégrés.
• Artifacts : Expérimentez comment le chatbot génère du code et des notes à la volée.

Note sur l'Hébergement :
La démo est hébergée sur chatbot.franzdomingo.dev en utilisant une configuration API propriétaire. Le code source est basé sur le modèle de Vercel ; contactez l'auteur via franzdomingo.dev pour plus de détails.