-p-500.webp.svg)
Start Your AI Journey Today
- Access 100+ AI APIs in a single platform.
- Compare and deploy AI models effortlessly.
- Pay-as-you-go with no upfront fees.
Dans ce didacticiel, nous allons créer un assistant personnel IA à l'aide de Next.js, React, Convex et Eden AI, avec des interactions en temps réel, une authentification sécurisée, des paramètres personnalisés et une intégration de paiement pour les crédits AI.
.jpg)
Les assistants personnels alimentés par l'IA sont devenus des outils inestimables, nous aidant dans tous les domaines, de la gestion des tâches à la réponse à des questions.
Dans cet article, basé sur Tube Gurji 'Dans le didacticiel YouTube, nous vous guiderons tout au long du processus de création d'un assistant personnel IA sophistiqué utilisant des technologies Web modernes telles que Next.js, React, Convex et Eden AI. »
À la fin, vous disposerez d'un assistant entièrement fonctionnel capable de répondre aux entrées des utilisateurs, d'être personnalisé pour répondre à différents besoins et même de traiter les paiements pour les crédits, tout en étant déployé sur le Web.
Ce projet impliquera la création d'un frontend en utilisant Next.js et Réagir, permettant aux utilisateurs d'interagir avec l'assistant IA via une interface de discussion.
Le backend sera alimenté par Convexe, une plateforme sans serveur, pour gérer les données des utilisateurs et les interactions avec l'IA en temps réel. Eden AI fournira les modèles d'IA qui traitent les entrées des utilisateurs et génèrent des réponses intelligentes.
We mettrons also in work user authentication, Personnalisation de l'assistant IA, et payments integration pour gérer les crédits de jetons pour l'utilisation de l'IA. Enfin, l'application sera déployée sur Vercel pour un accès en direct.
Pour un didacticiel vidéo très détaillé, vous pouvez regarder la vidéo Youtube de TubeGuruji, qui fournit un guide étape par étape pour faciliter le suivi du processus.
La première étape de la création de votre assistant IA consiste à configurer un nouveau Next.js projet. Pour commencer, ouvrez votre terminal et créez une nouvelle application Next.js à l'aide de la commande suivante :
Ensuite, nous allons installer CSS Tailwind pour gérer le style de l'application. Tailwind permet une conception rapide et réactive avec un minimum de CSS personnalisé. Commencez par installer les packages nécessaires :
Configurez maintenant Tailwind CSS en modifiant le fichier tailwind.config.js et en ajoutant les chemins nécessaires à votre contenu. Une fois que Tailwind est configuré, vous pouvez commencer à travailler sur la mise en page de l'interface utilisateur, qui comprend un barre de navigation, lateral bar, et un main discussion zone où les utilisateurs interagiront avec leur assistant IA.
Pour gérer le changement de thème dans votre application, vous pouvez utiliser React Context pour gérer l'état global du thème dans votre application.
En tirant parti du American State hook, vous pouvez facilement basculer entre les modes clair et sombre, offrant ainsi aux utilisateurs une expérience fluide. En outre, pour vous assurer que les préférences de thème de l'utilisateur persistent d'une session à l'autre, vous pouvez stocker le thème sélectionné dans LocalStorage.
Cela permet à l'application de mémoriser le choix de l'utilisateur même après avoir actualisé la page ou revisité le site. Grâce à cette approche, vous pouvez créer un système thématique réactif et convivial qui s'adapte aux préférences de chacun.
Pour des raisons de sécurité, il est essentiel de mettre en œuvre authentification afin que seuls les utilisateurs autorisés puissent accéder à l'assistant. Vous pouvez utiliser NextAuth.js, une bibliothèque conçue pour l'authentification dans les applications Next.js, qui prend en charge plusieurs fournisseurs, notamment Google OAuth et e-mail/mot de passe connexion.
Commencez par configurer Google OAuth ou un système d'authentification par e-mail. Cela permettra aux utilisateurs de se connecter en toute sécurité et d'accéder à leurs assistants IA personnalisés. En outre, vous devrez mettre en place des itinéraires protégés pour restreindre l'accès à certaines pages ou fonctionnalités au moins que l'utilisateur ne soit connecté.
Vous pouvez facilement intégrer NextAuth à votre projet en suivant la documentation officielle, en vous assurant que le processus d'authentification est à la fois fluide et sécurisé.
Le backend de ce projet est alimenté par Convexe, une plateforme backend sans serveur conçue pour gérer les données et l'état en temps réel. Convex simplifie la gestion des bases de données, la gestion des sessions utilisateur et l'exécution d'autres fonctions principales sans avoir à configurer un serveur traditionnel.
Commencez par installer le Convexe client :
Une fois installé, vous pouvez initialiser votre backend Convex et commencer à définir les fonctions de backend nécessaires, telles que :
La nature en temps réel de Convex le rend idéal pour une application comme celle-ci, où les entrées des utilisateurs et les réponses des assistants doivent être traitées immédiatement.
Concevez une interface utilisateur qui affiche la liste des assistants IA disponibles. Récupère les détails de l'assistant depuis Convex et affichez-les de manière dynamique.
Pour gérer l'espace de travail, créez un tableau de bord disposition, y compris une barre latérale pour faciliter la navigation.
Cette mise en page sera réactive, garantissant ainsi une bonne apparence sur les ordinateurs de bureau et les appareils mobiles. Utiliser American State ou Use the context pour gérer la sélection des différents assistants IA au sein de l'application.
Pour intégrer des modèles d'IA dans votre application à l'aide d'Eden AI, la première étape consiste à vous inscrire sur la plateforme Eden AI et à obtenir une clé API.
Cette clé vous permettra de vous connecter en toute sécurité à leurs services et d'utiliser divers modèles d'IA puissants. Une fois que vous aurez votre clé d'API, vous devrez installer axios, un client HTTP basé sur des promesses, pour gérer les demandes d'API et interagir avec les points de terminaison d'Eden AI. Vous pouvez le faire en exécutant la commande suivante :
Ensuite, vous allez configurer une fonction d'API qui prendra les données des utilisateurs et les enverra aux serveurs d'Eden AI. La fonction doit gérer l'envoi de la demande et la réception des réponses générées par l'IA, que vous pouvez ensuite afficher ou traiter plus avant dans votre application.
Pour plus de flexibilité, vous pouvez créer une fonction qui vous permet de basculer entre différents modèles d'IA en fonction de la tâche à accomplir. Par exemple, vous pouvez utiliser un modèle pour un chatbot qui fournit des réponses conversationnelles et un autre modèle pour des tâches telles que la génération de code.
Les utilisateurs peuvent créer et personnaliser des assistants IA en définissant des attributs tels que le nom, la personnalité et le ton. Ces préférences sont stockées dans Convex, ce qui garantit leur persistance d'une session à l'autre.
Nous proposerons des options de modification et de suppression, permettant aux utilisateurs de mettre à jour ou de supprimer facilement des assistants. L'édition impliquera un formulaire prérempli pour des modifications rapides, tandis que la suppression comprendra une étape de confirmation pour éviter les suppressions accidentelles. Cela garantit une expérience d'assistant entièrement personnalisée et flexible.
L'interface utilisateur du chat est le principal point d'interaction pour les utilisateurs. Vous devrez créer une interface de discussion dynamique dans laquelle les utilisateurs peuvent envoyer des messages et recevoir des réponses de la part de l'assistant. Les hooks React sont utilisés pour gérer l'état du chat, en affichant dynamiquement la conversation au fur et à mesure de son évolution.
Le chat doit inclure :
Pour améliorer l'expérience utilisateur, vous pouvez également gérer les erreurs avec élégance, en affichant des messages conviviaux en cas de problème avec la demande d'API.
Pour alimenter l'assistant IA, nous allons créer une API Next.js qui se connecte aux modèles NLP d'Eden AI, garantissant ainsi une communication fluide entre l'interface de chat et l'IA.
Tout d'abord, nous allons configurer une route d'API Next.js (/api/ai) pour recevoir les messages des utilisateurs, les envoyer à Eden AI via Axios et renvoyer les réponses au frontend.
Pour éviter une utilisation excessive de l'API, nous allons implémenter une limitation du débit, en limitant la fréquence des demandes par utilisateur afin de contrôler les coûts et d'optimiser les performances. Cela garantit que l'assistant IA reste rapide, efficace et réactif.
Permettre aux utilisateurs de créer leurs propres assistants IA personnalisés est une fonctionnalité puissante. Vous pouvez fournir un formulaire dans lequel les utilisateurs peuvent définir :
Ces paramètres seront stockés dans Convex et chaque utilisateur pourra gérer plusieurs assistants en fonction de ses préférences. Vous devrez également implémenter des fonctionnalités permettant de modifier et de supprimer des assistants, afin de rendre le processus de gestion des assistants aussi fluide que possible.
Nous allons créer une page de profil utilisateur affichant le nom, l'adresse e-mail et les statistiques d'utilisation de l'assistant, permettant aux utilisateurs de suivre leurs interactions avec l'IA.
Les utilisateurs peuvent mettre à jour leur photo de profil et leurs préférences, telles que les notifications et les thèmes, via un formulaire modifiable. Les modifications seront stockées en toute sécurité pour être conservées d'une session à l'autre.
Pour garantir la sécurité, nous mettrons en œuvre un contrôle d'accès basé sur l'authentification, permettant uniquement aux utilisateurs autorisés de modifier leurs données, créant ainsi une expérience fluide et personnalisée.
Étant donné que les modèles d'Eden AI peuvent avoir des coûts d'utilisation, vous pouvez implémenter un système de crédit dans lequel les utilisateurs achètent des crédits ou des jetons pour effectuer des appels d'API. Cela ajoute une couche de monétisation et permet aux utilisateurs de gérer leur budget pour les interactions avec l'IA.
Pour gérer cela, vous pouvez suivre les crédits dans Convex et déduire des jetons du solde de l'utilisateur chaque fois qu'il interagit avec l'assistant. En outre, vous pouvez avertir les utilisateurs lorsque leurs crédits sont épuisés, afin de les inciter à en acheter davantage.
Pour faciliter l'achat de crédits d'IA, nous allons intégrer Razorpay, une passerelle de paiement populaire. Razorpay permettra aux utilisateurs d'acheter des crédits et des jetons en toute sécurité. Après avoir effectué le paiement, vous pouvez utiliser webhooks pour mettre à jour le solde de l'utilisateur dans Convex, en veillant à ce que la transaction soit traitée en toute sécurité.
Installez le SDK Razorpay :
Integrez le flux de paiement Razorpay dans votre application, permettant aux utilisateurs d'effectuer des paiements et de mettre à jour automatiquement leurs soldes créditeurs. L'API de Razorpay fournit tous les points de terminaison nécessaires pour gérer les paiements, les remboursements et la vérification des transactions.
Pour finaliser le débogage et l'optimisation :
Enfin, une fois votre application terminée, il est temps de la déployer. Transférez le projet à GitHub et connectez-le à Vercel, qui fournit un processus de déploiement fluide pour les applications Next.js. Vercel gère tout, de l'hébergement à la gestion des variables d'environnement, ce qui facilite la mise en ligne de votre application.
Après le déploiement, configurez vos variables d'environnement, y compris la clé API Eden AI et les informations d'identification Razorpay, afin de garantir la sécurité des informations sensibles.
En suivant ce guide, vous avez créé un puissant assistant personnel IA capable de répondre intelligemment aux entrées de l'utilisateur, d'être personnalisé selon les préférences de l'utilisateur et de gérer les paiements de crédits à l'aide de Razorpay.
La combinaison de Next.js, React, Convex et Eden AI crée une plateforme robuste et évolutive pour créer des applications interactives alimentées par l'IA.
Ce projet peut être encore amélioré en intégrant la reconnaissance vocale, en ajoutant la collaboration multi-assistants et en explorant des fonctionnalités d'IA plus avancées, telles que l'analyse des sentiments ou la détection des émotions.
Avec tout ce qui est déployé sur Vercel, votre application est prête à être utilisée dans le monde réel, offrant une expérience élégante et moderne aux utilisateurs !
Vous pouvez commencer à créer dès maintenant. Si vous avez des questions, n'hésitez pas à discuter avec nous !
CommencezContactez le service commercialLaissez votre e-mail et nous vous contacterons dès que possible pour répondre à toutes vos questions ou simplement pour vous dire bonjour. Nous nous engageons à ne pas vous envoyer de spam !
-p-500.webp){kind=small}
