Création d'un chatbot React.dev RAG à l'aide du SDK Vercel AI

Introduction

Dans cet article de blog, je partagerai mon parcours de création d'un assistant IA React.dev qui récupère les informations du site Web React.dev et répond à l'invite fournie par l'utilisateur. L'objectif principal est d'utiliser les informations disponibles sur le site React.dev comme base de connaissances de l'assistant.

Pile technologique

• Next.js : un framework basé sur React pour le rendu et le routage côté serveur.
• ChatGPT : un LLM d'IA générative populaire utilisé pour l'assistant
• Vercel AI SDK : l'AI SDK est la boîte à outils TypeScript conçue pour aider les développeurs à créer des applications basées sur l'IA. Suivez davantage leur documentation ici.
• Supabase : une base de données Postgres pour stocker les intégrations vectorielles avec l'extension pgvector.
• Tailwind CSS : un framework CSS axé sur les utilitaires qui offre de la flexibilité tout en gardant l'interface utilisateur propre et personnalisable.
• Drizzle ORM : cette bibliothèque fournit des utilitaires pour interagir avec la base de données et exécuter une recherche de similarité vectorielle sur la base de données vectorielle.

Prérequis :

Ce projet nécessite les conditions préalables ci-dessous pour la configuration.

• Base de données Supabase avec l'extension Pgvector activée - elle sera utilisée pour stocker les intégrations vectorielles du contenu du site Web.
• Clé API Open AI – si vous n’avez pas de clé API OpenAI – obtenez-en une ici

Veuillez suivre ce lien pour activer l'extension pgvector pour la base de données fournie dans supabase.

Configuration du projet

Ce projet comprend Next.js, Supabase et Tailwind CSS comme interface utilisateur frontale, Vercel ai comme intégration de chat backend avec l'API OpenAI. Il utilise cheerio pour supprimer des pages Web et stocke le...
[Courte citation de 8% de l'article original]