Créez un générateur de code alimenté par l'IA (Nextjs, CopilotKit, gemini-pro, Langchain)

DEV - 07/05
Introduction Aux prises avec la tâche ardue de trouver des solutions de code précises, je...

Introduction

Aux prises avec la tâche ardue de trouver des solutions de code précises, j'ai créé CodeGPT. Ce générateur de code alimenté par l'IA convertit rapidement les descriptions en langage naturel en extraits de code, atténuant ainsi la frustration des recherches fastidieuses. Dites adieu aux problèmes de codage et adoptez des solutions simples avec CodeGPT.

Nous verrons comment :

  • créer des applications Web avec Next.js,

  • langchain, Gemini pour les capacités d'IA générative,

  • intégrez l'IA dans les applications logicielles avec CopilotKit.

Conditions préalables

Avant de plonger dans ce didacticiel, assurez-vous d'avoir les éléments suivants :

  1. Compréhension de base de la programmation.
  2. Familiarité avec Next.js, TypeScript et Tailwind CSS.
  3. Confortable à utiliser la ligne de commande pour npm et Git.
  4. Node.js et npm installés.

Configuration du projet et installation du package

Pour démarrer votre projet, commençons par créer une application Next.js. Ouvrez votre terminal et exécutez la commande suivante :

npx create-next-app codeGPT
Entrer en mode plein écran Quitter le mode plein écran

Enfin, installons les packages CopilotKit. Ces packages nous permettent d'interagir avec l'état React et d'intégrer un copilote IA dans notre application :

npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend
Entrer en mode plein écran Quitter le mode plein écran

Pour l'authentification, vous pouvez utiliser Auth.js avec Drizzle ORM pour stocker le message. Pour la base de données, vous pouvez utiliser tuso.tech

Code du bâtimentGPT

Dans cette section, je vais parcourir le développement du point de terminaison de l'API avec l'interface utilisateur de chat.

Structure du fichier

|-src ----|-app ------|-api --------|-auth ----------|-[[...nextauth]] ------------|-route.ts --------|-copilotkit ----------|-route.ts ------| -layout.tsx ------|-page.tsx ------|-action.ts ------|-chat --------|-[id] -- --------|-page.tsx --------|-new-chat.tsx ----|-components ------|-ui ------ |-chat-content.tsx ------|-chat-list.tsx ------|-growing-text-area.tsx ------|-NavBar.tsx ---- |-db ------|-index.ts ------|-schema.ts ----|-lib ------|-utils.ts ----|-auth .ts |-drizzle.config.ts |-.env
Entrer en mode plein écran Quitter le mode plein écran

Point de terminaison de l'API

src/app/api/copilotkit/route.tsPOST /route Ce point de terminaison fait partie du kit Copilot et utilise l'IA générative de Google pour générer des réponses basées sur l'entrée fournie.

Requête Le corps de la requête doit contenir un objet forwardedProps. Si forwardedProps.choices n'est pas défini, il sera défini sur un tableau vide. Si forwardedProps.choices n’est pas un tableau, une erreur sera renvoyée.

Réponse Le point de terminaison répond avec une chaîne générée par l'IA générative de Google. L'IA reçoit une invite décrivant le comportement attendu de l'IA, suivie des choix fournis dans forwardedProps.choices.

Si une erreur survient lors de la génération de la réponse, la chaîne "Une erreur s'est produite" est renvoyée. Si forwardedProps.choices n'est pas un tableau, la chaîne « Entrée invalide : forwardedProps.choices n'est pas un tableau » est renvoyée.

importer { CopilotRuntime, LangChainAdapter, LangChainReturnType, } depuis "@copilotkit/backend" ; importer { GoogleGenerativeAI } depuis "@google/generative-ai" ; importer { StreamingTextResponse } depuis "ai" ; const genAI = new GoogleGenerativeAI(process.env.GENERATIVE_AI_API_KEY!); exporter la fonction asynchrone POST(req: Request) { const copilotKit = new CopilotRuntime(); return copilotKit.response( req, new LangChainAdapter( async (forwardedProps) : Promesse=> { console.log("forwardedProps", forwardedProps); // Si forwardedProps.choices n'est pas défini, définissez-le sur un tableau vide if (forwardedProps.choices === undefined) { forwardedProps.choices = []; } // Vérifiez si forwardedProps.choices est un tableau if (Array.isArray(forwardedProps.choices)) { // Transformez forwardedProps au format attendu const prompt = `En tant qu'expert en développement de logiciels, vous excellez dans l'utilisation des dernières technologies et méthodologies dans tous les langages et frameworks de programmation. Votre expertise s’étend à la création de conceptions d’interface utilisateur visuellement attrayantes et fonctionnellement robustes. Vos réponses sont exclusivement sous forme de code, axées sur la fourniture de solutions complètes et exécutables sans texte explicatif. Votre approche met l'accent sur la clarté du code, le respect des meilleures pratiques et l'utilisation d'outils de pointe. Vous suivez méticuleusement les exigences spécifiées concernant les bibliothèques et les langages, garantissant que vos contribut...
[Courte citation de 8% de l'article original]