Construire une application alimentée par GPT-3 avec NextJS et Replit en 20 minutes

Pourquoi devriez-vous créer une application alimentée par GPT-3 ?

Plongez dans le monde révolutionnaire de l'intelligence artificielle avec GPT-3 d'OpenAI. En moins de 20 minutes, vous apprendrez à exploiter les capacités immenses d'un transformateur de texte de 175 milliards de paramètres pour développer votre propre application. Ce tutoriel est conçu pour les personnes ayant des compétences de base en React et NextJS, vous guidant étape par étape à travers le processus facile de création et de déploiement d'une application web.

Conditions préalables

Avant de commencer, assurez-vous d'avoir une compréhension de base de React et NextJS. Si vous êtes nouveau dans ces technologies, ne vous inquiétez pas - de nombreuses ressources sont disponibles en ligne pour vous aider à vous mettre à jour.

Configuration de Replit et importation de votre projet depuis GitHub

La première étape consiste à créer un compte sur Replit, ce qui vous permettra d'importer et d'initialiser votre projet en douceur. Cette configuration vous permet de voir les mises à jour en temps réel pendant que vous développez.

Commencer avec Replit

1. Connectez-vous à Replit ou créez un nouveau compte.
2. Cliquez sur le signe + dans le coin supérieur droit pour créer un nouveau projet.
3. Importez le modèle de départ GPT-3 depuis GitHub pour lancer votre projet. Utilisez le lien suivant :
• URL GitHub : GPT-3 NextJS Tailwind Starter
4. Cliquez sur le bouton Importer depuis GitHub.

Installation des dépendances et configuration de votre projet

Pour commencer, vous aurez besoin de votre clé API GPT-3 d'OpenAI. Si vous n'en avez pas, rendez-vous sur le site d'OpenAI pour vous inscrire.

Intégration de votre clé API

1. Cliquez sur l'icône de verrouillage sur le côté droit et créez une nouvelle clé.
2. Dans le champ de clé, entrez OPENAI_API_KEY et dans le champ de valeur, collez votre clé API, qui ressemble à quelque chose comme sk-tKyMX1XbOS***Agaa5qx89UToRCy.
3. Ajustez la commande d'exécution de npm run start à npm run dev et cliquez sur le bouton Terminé.

Installation des dépendances

Cliquez ici pour installer les dépendances

Après avoir cliqué sur le grand bouton vert Exécuter, attendez que l'environnement s'installe et démarre. Cela affichera la sortie dans la fenêtre de console confirmant l'installation de vos paquets et le démarrage du serveur.

Creez votre application alimentée par GPT-3

Maintenant que vous avez un frontend de base connecté à votre backend alimenté par GPT-3, testons-le !

1. Entrez du texte dans le champ de texte et cliquez sur le bouton de création.
2. Votre saisie générera une réponse de GPT-3.

Personnaliser votre application alimentée par GPT-3

Avec une application GPT-3 fonctionnelle, la prochaine étape est la personnalisation en fonction de vos besoins spécifiques. Par exemple, vous pourriez vouloir créer un outil qui résume les articles pour des publications sur les réseaux sociaux.

Configuration de l'API Endpoint

Allez à /pages/api/openai.js. Ce fichier vous permettra de modifier les prompts envoyés à GPT-3 en utilisant des variables telles que $beforePrompt et $afterPrompt.

Éditez /pages/index.js pour ajuster le <H1> et d'autres balises, reflétant les fonctionnalités de votre application.

Tester les résultats de votre application

Pour tester, copiez un court article comme celui-ci depuis TechCrunch : Instagram vient d'annoncer une nouvelle fonctionnalité qui permet aux entreprises de promouvoir leurs Reels...

Derniers mots

Félicitations d'avoir terminé ce tutoriel rapide sur GPT-3 ! Vous avez posé les bases pour construire diverses applications. Pourquoi ne pas aller un peu plus loin ? Rejoignez nos hackathons AI, où en seulement sept heures, vous pouvez collaborer avec une communauté mondiale de plus de 52 000 passionnés pour créer un prototype d'application AI fonctionnel.

Façonnons l'avenir avec l'IA !

Pour une compréhension plus détaillée, consultez nos articles sur Les bases de NextJS et Comprendre les technologies IA.