Création de NOTRE ChatGPT avec React – Tutoriel (Next.js 13, Tailwind, CSS, TypeScript)
Introduction
Dans ce tutoriel, nous allons créer notre propre ChatGPT à l’aide de React en utilisant les dernières technologies telles que Next.js 13, Tailwind CSS et TypeScript. ChatGPT est un modèle de langage de génération de texte généré par l’IA qui peut être utilisé pour créer des chatbots conversationnels.
Étapes du tutoriel
- Prérequis et installation de l’environnement de développement
- Création du composant de chat et de l’interface utilisateur en React
- Intégration de Tailwind CSS pour styliser notre ChatGPT
- Utilisation de TypeScript pour ajouter des types statiques à notre application
- Déploiement de notre ChatGPT sur Internet à l’aide de Next.js 13
Conclusion
En suivant ce tutoriel pas à pas, vous serez en mesure de créer votre propre ChatGPT en utilisant React, Next.js 13, Tailwind CSS et TypeScript. Vous pourrez ensuite personnaliser et améliorer votre chatbot pour répondre aux besoins spécifiques de votre projet. Profitez de cette occasion pour explorer les fonctionnalités avancées de React et les outils modernes de développement web pour créer des applications conversationnelles interactives et innovantes.
C'est top Bravo ! As-tu un lien de repo github à partager ?
Petite question, je ne suis pas sûr d'avoir eu l'info. Tu travailles sous Windows ou Linux, stp ?
En tout, cas, j'ai envie de tenter l'aventure, même si je ne connais pas node.js…
Le tuto notion en lien directe : https://codelynx.notion.site/Cr-er-un-chatbot-avec-OpenAI-3aad998401774e35861b00190fff811c
là tu nous as plus appris à copier coller des fichiers :p
Sympa ce gepeto 😀
Par contre la clé elle est accessible en faisant comme ça, faudrait la protéger en utilisant ChatGPT coté serveur, tu fais une route dans le dossier "api" qui va charger la clé dans le .env (du coup tu peux virer "NEXT_PUBLIC", pas besoin quand on fait le taf coté serveur) l'api prends l'historique de conversation en request et retourne le message de ChatGPT en reponse
Et coté client tu fais juste un fetch vers ta route api en donnant l'historique
Au moins comme ça la clé ne sera pas visible :p
Je viens de découvrir ta chaine, super boulot mec !
Aïe le "op" qui est resté, c'est FinalCutPro il est méchant.
Le boss