J'ai essayé de créer un chatbot à l'aide de l'API OpenAI [next.js + tailwind CSS]

L'URL a été copiée!

Récemment, de plus en plus de gens utilisent l'API d'Openai pour créer leurs propres chatbots et assistants commerciaux.
Dans cet article, nous vous montrerons comment utiliser Next.js (routeur d'application) et CSS Tailwind

chat / complétion d'Openai pour activer une expérience de conversation de type chatppt sur votre navigateur, de manière simple.

ceux qui trouvent un peu de tracas d'écrire un code vous-même ou
de vouloir un modèle avec une interface utilisateur qui fonctionne rapidement, nous vendons également des modèles sur les plates-formes .

Les modèles introduits dans cet article sont maintenant en vente!

Ce modèle d'interface utilisateur de chatbot est disponible à la vente sur plusieurs plates-formes.

La structure est parfaite pour ceux qui veulent essayer quelque chose qui fonctionne en premier, "Je veux l'utiliser tout de suite sans construire un environnement" ou "Je veux vérifier l'intégralité du code".

Acheter sur gumroad acheter sur note

Vous pouvez également consulter d'autres modèles à partir de chaque page:

Note de gumroad

table des matières

À propos de la technologie utilisée

Cette interface utilisateur de chatbot est construite en utilisant les technologies suivantes:

Next.js (configuration du routeur de l'application): Un cadre basé sur React vous permet de créer des pages unifiées et des itinéraires API. J'utilise une configuration de routeur d'application à partir de SRC / App
CSS du vent arrière: Un framework CSS d'abord utilitaire qui vous permet d'organiser efficacement vos conceptions à l'aide de classes. Créez rapidement une interface utilisateur réactive et simple
API OpenAI (CHAT ACHELIONS): Il s'agit d'un mécanisme d'interaction avec les modèles basés sur GPT à l'aide du / V1 / Chat / Completions nous avons facilité la commutation entre les variables d'environnement GPT-4.1-min et GPT-3.5-Turbo
Routes API + récupérer: J'écrit le traitement du serveur qui relaie entre le navigateur et l'API OpenAI à l'aide de la racine API suivante ( / API / CHAT des clients utilisant fetch ("/ api / chat")

Créer une clé API OpenAI

Cette fois, nous utiliserons l'API OpenAI, nous devrons donc créer une clé API OpenAI.
Vous serez redirigé vers les touches API dans le tableau de bord API OpenAI. Sélectionnez "Créer une nouvelle clé secrète".

Vous pouvez avoir le projet sélectionné comme vous le souhaitez et sélectionner les autorisations en fonction du modèle que vous souhaitez utiliser, ou sélectionnez tout pour le générer.

Une fois la création terminée, une chaîne commençant par "sk-" sera créée, nous l'utiliserons donc après cela.
Faites attention à ne pas laisser partir cette clé.

Construction environnementale

Tout d'abord, préparez un environnement de développement pour next.js.

Créer un projet

Je vais créer un projet.
Fondamentalement, je pense que c'est bien de tout laisser aux valeurs par défaut, mais c'est bien tant que vous pouvez le changer au besoin.
(Ce projet utilise Tailwind CSS, il est donc préférable de le définir sur oui. La valeur par défaut est oui.)

$ npx create-next-app @ le dernier my-chatbot --TypeScript Besoin pour installer les packages suivants: create-next-pp@15.4.4 ok pour continuer? (y) y ✔ Souhaitez-vous utiliser Eslint? … Non / Oui ✔ Souhaitez-vous utiliser CSS à vent arrière? … Non / Oui ✔ Souhaitez-vous votre code dans un répertoire `src /`? … Non / Oui ✔ Souhaitez-vous utiliser l'application Router? (recommandé)… Non / Oui ✔ Souhaitez-vous utiliser Turbopack pour `Next Dev`? … Non / Oui ✔ Souhaitez-vous personnaliser l'alias d'importation (`@ / *` par défaut)? … Non / Oui Création d'une nouvelle application Next.js dans / my-chatbot. Utilisation de NPM. Initialisation du projet avec modèle: App-TW Installation des dépendances: - React - React-Dom - Ensuite, installation de DevDependces: - TypeScript - @ Types / Node - @ Types / React - @ Types / React-Dom - @ TailwindCSS / POSTCSSS - TailwindCSS - ESLINT - ESLINT-CONFIG-NEXT - @ ESLINT / ESLIN Les packages 14S 137 recherchent un financement exécuté «NPM Fund» pour les détails trouvés 0 vulnérabilités initialisées un référentiel Git. Succès! Création de My-chatbot à / my-chatbot novice npm novice nouvelle version mineure de NPM disponible! 11.0.0 -> 11.5.1 Avis NPM Changelog: https://github.com/npm/cli/releases/tag/v11.5.1 Avis NPM à mettre à jour Run: NPM Install -g npm@11.5.1 Avis NPM Avis NPM

Si "Success! Création de mon chatbot à / my-chatbot" apparaît, la création de projet est terminée.
Une fois que vous avez créé le projet, déplacez le répertoire.

CD mon chatbot

Définir la touche API Openai

Créez un .env dans la racine

Openai_api_key = sk -... openai_model = gpt-4.1-mini system_prompt = vous êtes un assistant utile.

Brève description:

Openai_api_key: clé privée requise pour l'accès à l'API OpenAI (émis par un compte personnel)
Openai_model: le nom du modèle à utiliser. Selon l'objectif, GPT-3.5-turbo , GPT-4.1-min , etc.
System_Prompt: Message initial spécifiant la personnalité et le rôle de l'IA (efficace au début du chat)

Démarrer le serveur de développement

L'exécution de la commande suivante lancera le modèle:

NPM Run Dev

Implémentation de l'interface utilisateur (écran de chat)

L'interface utilisateur de chat est consolidée dans
src / app / page.tsx Le montant total du code source est le suivant:

"Utiliser le client"; import {useState, useref, useEffecte} de "react"; // Interface de chat réutilisable à l'aide de l'interface de chat Openai API // Utilisation de la fonction par défaut de par défaut de l'API OpenAi () {const [input, setInput] = useState (""); const [messages, setMessages] = useState <{rôle: "utilisateur" | "assistant"; Content: String} []> ([]); const [chargement, setLoading] = useState (false); const chatendref = useref<HTMLDivElement> (nul); // Gérer la soumission de message à l'API // Le processus d'envoi d'un message à l'API const SendMessage = async () => {if (! Input.trim ()) return; // Ajouter un message utilisateur à l'historique du chat // Ajouter un message utilisateur à l'historique const newMessages = [... messages, {rôle: "utilisateur", contenu: entrée} comme const,]; SetMessages (NewMessages); setInput (""); setLoading (true); // Envoyer un message à la route API Backend // Envoi du message dans Backend API Endpoint const Res = Await Fetch ("/ api / Chat", {Method: "Post", en-têtes: {"Content-Type": "Application / JSON"}, body: json.stringify ({message: entrée}),}); const data = attendre res.json (); // Ajouter une réponse de l'assistant à l'historique du chat // Ajouter une réponse assistant à History setMessages ((prev) => [... prev, {Role: "Assistant", contenu: data.reply},]); setLoading (false); }; // Faites défiler vers le bas de la vue de chat sur la mise à jour // faites défiler vers le bas de la vue de chat lors de la mise à jour d'un message useEffct (() => {chatenDref.current? .ScrolLintoView ({comportement: "smooth"});}, [messages, chargement]); retour ( <main className="h-screen flex items-center justify-center bg-gray-100 text-gray-800"><div className="flex flex-col w-full max-w-3xl h-[90vh] border-x border-gray-300 bg-white"> {/ * En-tête * /} {/ * En-tête * /}<header className="p-4 border-b text-lg font-semibold"> Chatbot-chatpt</header> {/ * Affichage du message de chat * /} {/ * Zone d'affichage du message de chat * /} <div className="flex-1 overflow-y-auto p-6 space-y-4 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100"> {messages.map ((msg, idx) => ( <div key={idx} className={`flex ${ msg.role === "user" ? "justify-end" : "justify-start" }`} ><div className={`max-w-xl px-4 py-2 rounded-lg text-sm whitespace-pre-wrap ${ msg.role === "user" ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-900" }`} > {msg.content}</div></div> ))} {/ * Taping indicateur lors du chargement * /} {/ * Indicateur pendant le chargement * /} {chargement && ( <div className="flex justify-start"><div className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm animate-pulse"> Pensée...</div></div> )}<div ref={chatEndRef} /></div> {/ * Zone d'entrée * /} {/ * Field de saisie * /}<footer className="border-t p-4"><div className="flex gap-2"><input value={input} onChange={(e) => setInput (e.target.value)} onkeydown = {(e) => e.key === "Entrée" && sendMessage ()} className = "Flex-Grow p-2 Border Routed <button onClick={sendMessage} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition" >Focus:</button></div></footer></div></main> )); }

Gestion de l'état du message

const [input, setInput] = useState (""); const [messages, setMessages] = useState <{rôle: "utilisateur" | "assistant"; Content: String} []> ([]); const [chargement, setLoading] = useState (false);

Brève description:

Entrée: Gardez la valeur d'entrée de la zone de texte
Messages: Historique de chat précédent (conversations utilisateur et assistant)
Chargement: qu'il s'agisse ou non d'une réponse de l'API

Envoyer un traitement et des appels API

const SendMessage = async () => {if (! input.trim ()) return; const newMessages = [... messages, {rôle: "utilisateur", contenu: entrée}]; SetMessages (NewMessages); setInput (""); setLoading (true); const Res = attendre fetch ("/ api / chat", {méthode: "post", en-têtes: {"contenu-type": "application / json"}, body: json.stringify ({message: input}),}); const data = attendre res.json (); setMessages ((prev) => [... prev, {rôle: "Assistant", contenu: data.reply}]); setLoading (false); };

Brève description:

Envoyez des messages à l'API tout en ajoutant une entrée utilisateur à l'historique
Si vous obtenez une réponse, ajoutez-le à l'histoire en tant qu'assistant

Disposition de l'écran de chat (formatage avec le vent arrière)

<div className="flex-1 overflow-y-auto p-6 space-y-4">{messages.map ((msg, idx) => ( <div key={idx} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}><div className={`max-w-xl px-4 py-2 rounded-lg text-sm whitespace-pre-wrap ${ msg.role === "user" ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-900" }`}> {msg.content}</div></div> ))} {chargement && ( <div className="flex justify-start"><div className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm animate-pulse"> Pensée...</div></div> )}</div>

Brève description:

Les messages utilisateur et assistant sont affichés sur les côtés gauche et droit
En attendant une réponse, "Penser ..." sera affiché pour créer une sensation de conversation.

Champ de saisie et bouton Envoyer

<footer className="border-t p-4"><div className="flex gap-2"><input value={input} onChange={(e) => setInput (e.target.value)} onkeydown = {(e) => e.key === "Entrée" && sendMessage ()} className = "Flex-Grow p-2 Border Rondaged <button onClick={sendMessage} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition" >focus</button></div></footer>

Brève description:

Spécifications qui peuvent être envoyées à l'aide de l'entrée ou du bouton du clavier
En utilisant CSS Tailwind, nous avons créé une forme simple et facile à lire.

Implémentation côté serveur (Intégration API OpenAI)

L'interaction de chat implique un client envoyant une demande à
/ API / CHAT puis le relais et les réponses sont retournés à l'API de chat d'Openai sur le serveur.

La quantité totale de code source côté serveur est la suivante:

// src / app / api / chat / root.ts import {nexTequest, nexTResponse} depuis "next / server"; // Handler de publication pour les demandes de chat // Handler Post qui gère les demandes de chat Export Async Fonction Post (req: nexTeQuest) {const {message} = attendre req.json (); // Appel API OpenAI à l'aide de la clé secrète et des paramètres côté serveur // System_Prompt définit la personnalité, le ton ou le comportement de l'assistant. // Openai avec la clé privée côté serveur et les paramètres appellent API // System_Prompt spécifie la personnalité, la parole et le comportement de l'assistant. const Response = Await Fetch ("https://api.openai.com/v1/chat/completions", {méthode: "Post", en-têtes: {autorisation: `Bearer $ {process.env.openai_api_key}`, "Content-Type": "application / json",}, body: json.stringify ({model: process.env.openai_model || "gpt-4.1-mini", messages: [{Role: "System", contenu: process.env.system_prompt || "Vous êtes un assistant AI utile.",}); const data = attendre réponse.json (); // Gire la réponse d'erreur d'OpenAI // Gérer la réponse d'erreur d'OpenAI // Gérer la réponse d'erreur d'OpenAI if (data.error) {Console.Error (data.Error); return nexTResponse.json ({Répondre: "Une erreur s'est produite. Veuillez réessayer plus tard."}, {Status: 500}); } // RETOUR ASSISTANT Répondre // Réponse Assistant Retour NEXTRESPONSE.JSON ({Répondre: data.choices [0] .Message.Content}); }

Configuration de base de `la route.ts`

import {nexTeQuest, nexTResponse} depuis "next / server"; Exporter la fonction asynchrone post (req: nexTeQuest) {const {message} = attendre req.json ();

Brève description:

Les routes API sont limitées aux post-post
Reçoit le corps du message envoyé du côté client

Demandes d'API OpenAI

const Response = Await Fetch ("https://api.openai.com/v1/chat/completions", {méthode: "Post", en-têtes: {autorisation: `Bearer $ {process.env.openai_api_key}`, "Content-Type": "application / json",}, body: json.stringify ({model: process.env.openai_model || "gpt-4.1-mini", messages: [{Role: "System", contenu: process.env.system_prompt || "Vous êtes un assistant utile." const data = attendre réponse.json ();

Brève description:

Chargez dynamiquement les touches API , les noms de modèle et les invites à partir des variables environnementales
Créez un de messages à envoyer à un modèle GPT

Traitement de la réponse et gestion des erreurs

if (data.error) {Console.Error (data.Error); return nexTResponse.json ({réponse: "Une erreur s'est produite."}, {status: 500}); } return nexTResponse.json ({réponse: data.choices [0] .Message.Content}); }

Brève description:

Si l'API Openai échoue, émettez l'erreur à la console
Si vous obtenez une réponse avec succès, renvoyez le message de l'assistant au client en réponse

[Bonus] choses à noter

Assurez-vous de gérer
avec .Env afin qu'ils ne soient jamais exposés Si votre touche API est divulguée, supprimez la touche API du tableau de bord OpenAI.

Le nom du modèle est une variable d'environnement, veuillez donc le remplacer en fonction de l'objectif.
Le montant d'argent impliqué varie en fonction du modèle, alors soyez prudent lors de la sélection d'un modèle.

Informations sur les ventes de modèles

L'interface utilisateur du chatbot introduit dans cet article est également vendue comme un modèle qui peut être utilisé à des fins commerciales

Pourquoi vendre des modèles?

Nous avons préparé cela à ceux qui subissent les besoins suivants:

"Même si vous suivez les étapes, l'environnement ne fonctionne pas ..."
"Je veux juste commencer par un échantillon en mouvement."
"J'ai regardé mon blog et je l'ai trouvé utile, donc je voudrais l'acheter dans le but de soutenir et de faire un don."

Même ceux qui n'ont pas l'habitude de développer le jeu peuvent démarrer et l'essayer rapidement avec un minimum d'effort

Exemples d'utilisation du modèle (idées de personnalisation)

Ce modèle est parfait à des fins de développement personnel et d'apprentissage.
Par exemple, nous vous recommandons de modifier et d'étendre ce qui suit:

Ajouter l'histoire et le contexte aux réponses API
Essayez d'enregistrer l'historique des entrées au stockage local
Essayez d'ajouter une fonction pour sortir des journaux de chat à PDF ou CSV
la lecture de la parole et la génération d'images peuvent être intéressantes

C'est également une bonne pratique de l'essayer sur une base de "série" pour la programmation des débutants.

Ce qui est inclus dans le modèle

contient
tout le code source du projet que nous avons introduit ici Par conséquent, vous n'avez pas à créer ou à configurer votre propre projet à partir de zéro, et vous pouvez le démarrer immédiatement .

Chat ui avec next.js (routeur de l'application)
Implémentation côté serveur avec intégration API
Structure du code propre avec des commentaires
Simple et facile à améliorer la conception en utilisant le vent arrière CSS
Fichiers de configuration de démarrage Docker ( dockerfile , docker-compose.yml )

* Pour exécuter, un environnement d'exécution de base tel que node.js et docker est requis.

Les modèles introduits dans cet article sont maintenant en vente!

Acheter sur gumroad acheter sur note

Vous pouvez également consulter d'autres modèles à partir de chaque page:

Note de gumroad

résumé

nous avons introduit comment construire
une interface utilisateur de chatbot simple à l'aide de l'API OpenAI et Next.js.

En regardant les points:

L'API de chat vous permet de créer des chatbots de haute qualité avec juste un peu de code
Le routeur de l'application Tailwind CSS + Next.js facilite l'expansion et la réutilisation
L'utilisation de modèles vous permet de vérifier rapidement l'opération en omettant la construction de l'environnement.

Non seulement il convient en tant que démarreur pour le développement et les projets personnels, mais il est également recommandé comme base pour ajouter des fonctionnalités uniques et personnaliser l'interface utilisateur.

Partagez si vous le souhaitez!

L'URL a été copiée!

Qui a écrit cet article

Taku

Ceci est un blog que j'ai commencé à étudier la sécurité de l'information. En tant que nouvel employé, je serais heureux si vous pouviez regarder avec un cœur large.
Il y a aussi Teech Lab, qui est l'occasion d'étudier le plaisir en programmation, donc si vous êtes intéressé par le développement de logiciels, assurez-vous de jeter un œil!