Créer un assistant de code IA avec l'agent Pipet Code

Écrire du code peut être à la fois gratifiant et gratifiant, mais faire passer votre code en état de marche à présentable pour vos collègues est souvent une corvée. Les modèles génératifs d'intelligence artificielle peuvent vous aider à ajouter des commentaires dans le code, à détecter des erreurs avant vos examinateurs manuels et à effectuer de nombreuses autres tâches pour faciliter votre workflow de codage.

Ce tutoriel explique comment étendre Pipet Code Agent, un outil d'aide au code optimisé par l'IA et conçu par l'équipe Google chargée des relations avec les développeurs d'IA. Ce projet Open Source est une extension de Microsoft Visual Studio Code (VS Code) qui vous aide à effectuer certaines des tâches de codage importantes, mais moins amusantes, telles que l'ajout de commentaires au code, la recherche d'erreurs et la suggestion d'améliorations. Celle-ci envoie des requêtes d'aide au codage à l'API Gemini et intègre les réponses dans votre fenêtre de modification du code.

Vous pouvez modifier Pipet pour optimiser le fonctionnement de ces fonctions existantes ou créer des commandes pour mieux faciliter votre workflow de développement.

Pour une présentation vidéo du projet et de la manière de l'étendre, y compris les insights de ses créateurs, regardez la vidéo AI Code Assistant - Build with Google AI. Sinon, vous pouvez commencer à prolonger le projet en suivant les instructions ci-dessous.

Configuration du projet

Ces instructions vous guident dans la configuration du projet d'agent de code Pipet pour le développement et les tests. Les étapes générales consistent à installer des logiciels prérequis, à définir quelques variables d'environnement, à cloner le projet à partir du dépôt de code et à exécuter l'installation de la configuration.

Installer les prérequis

Le projet de l'agent Pipet Code s'exécute en tant qu'extension de Microsoft Visual Studio Code. Il utilise Node.js et l'outil npm pour gérer les packages et exécuter l'application. Les instructions d'installation suivantes concernent une machine hôte Linux.

Pour installer le logiciel requis:

  1. Installez Visual Studio Code pour votre plate-forme.
  2. Installez node et npm en suivant les instructions d'installation correspondant à votre plate-forme.

Cloner et configurer le projet

Téléchargez le code du projet, puis exécutez la commande d'installation npm pour télécharger les dépendances requises et configurer le projet. Vous aurez besoin du logiciel de contrôle du code source git pour récupérer le code source du projet.

Pour télécharger et configurer le code du projet, procédez comme suit:

  1. Clonez le dépôt git à l'aide de la commande suivante.
    git clone https://github.com/google/generative-ai-docs
  2. Vous pouvez éventuellement configurer votre dépôt Git local pour utiliser le paiement creux afin de n'avoir que les fichiers du projet de l'agent Docs.
    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/pipet-code-agent/
  3. Accédez au répertoire racine du projet de l'agent Pipet Code. 
    cd generative-ai-docs/examples/gemini/node/pipet-code-agent/
  4. Exécutez la commande d'installation pour télécharger les dépendances et configurer le projet : 
    npm install

Configurer et tester l'extension

Vous devriez maintenant pouvoir tester votre installation en exécutant l'agent Pipet Code en tant qu'extension de développement dans VS Code sur votre appareil. Le test ouvre une fenêtre distincte Extension Development Host dans VS Code dans laquelle la nouvelle extension est disponible. Dans cette nouvelle fenêtre, vous allez configurer la clé API utilisée par l'extension pour accéder à l'API Google Gemini.

Agent de code Pipet s'exécutant dans la fenêtre de l'hôte de développement des extensions Figure 1. VS Code Extension Development Host avec les commandes de l'extension Pipet.

Pour configurer et tester votre configuration:

  1. Lancez l'application VS Code.
  2. Dans VS Code, créez une fenêtre en sélectionnant File > New Window (Fichier > Nouvelle fenêtre).
  3. Ouvrez le projet de l'agent de code Pipet en sélectionnant File > Open Folder (Fichier > Ouvrir le dossier), puis en sélectionnant le dossier pipet-code-agent/.
  4. Ouvrez le fichier pipet-code-agent/package.json.
  5. Exécutez l'extension en mode débogage en sélectionnant Run > Start Debugging (Exécuter > Démarrer le débogage). Cette étape ouvre une fenêtre distincte de VS Code Extension Development Host.
  6. Ouvrez les paramètres de VS Code en sélectionnant Code > Settings > Settings (Code > Paramètres > Paramètres).
  7. Obtenez une clé API Google Gemini sur le site pour les développeurs d'IA générative, puis copiez la chaîne de la clé.
  8. Définissez la clé API en tant que paramètre de configuration. Dans le champ Search Settings (Paramètres de recherche), saisissez pipet, sélectionnez l'onglet User (Utilisateur), puis dans le paramètre Google > Gemini : Clé API, cliquez sur le lien Edit in settings.json (Modifier dans le fichier settings.json), puis ajoutez votre clé API Gemini : 
    "google.gemini.apiKey": "your-api-key-here"
  9. Enregistrez les modifications apportées au fichier settings.json, puis fermez les onglets de paramètres.

Pour tester les commandes de l'extension:

  1. Dans la fenêtre Extension Development Host de VS Code, sélectionnez le code de votre choix dans la fenêtre de l'éditeur.
  2. Ouvrez la palette de commandes en sélectionnant Affichage > Palette de commandes.
  3. Dans la palette de commandes, saisissez Pipet et sélectionnez l'une des commandes portant ce préfixe.

Modifier la commande existante

La modification des commandes fournies dans l'agent de code Pipet est le moyen le plus simple de modifier le comportement et les fonctionnalités de l'extension. Les commandes "comment" et "review" utilisent toutes deux une approche de requête brève avec des exemples de code et de commentaires pour ce code, ainsi que des instructions générales pour le modèle génératif d'IA. Ces informations contextuelles de requête guident le modèle génératif Gemini dans la formation d'une réponse. En modifiant les instructions de requête, les exemples ou les deux dans les commandes "comment" ou "review", vous pouvez modifier le comportement de chacune des commandes existantes.

Cet ensemble d'instructions explique comment modifier la commande review.ts en modifiant le texte d'invite de la commande.

Pour préparer la modification de la commande review.ts, procédez comme suit:

  1. Lancez l'application VS Code.
  2. Dans VS Code, créez une fenêtre en sélectionnant File > New Window (Fichier > Nouvelle fenêtre).
  3. Ouvrez le projet de l'agent de code Pipet en sélectionnant File > Open Folder (Fichier > Ouvrir le dossier), puis en sélectionnant le dossier pipet-code-agent/.
  4. Ouvrir le fichier pipet-code-agent/src/review.ts.

Pour modifier le comportement de la commande review.ts, procédez comme suit:

  1. Dans le fichier review.ts, remplacez le début de la constante PROMPT par des instructions différentes. 
    const PROMPT = '
Write review comments for following code, identifying bugs and ways to improve code quality. Examples of bugs are syntax errors or typos, out of memory errors, and boundary value errors. Examples of improving code quality are reducing complexity of code, eliminating duplicate code, and ensuring other developers
are able to understand the code.
${CODE_LABEL}
...
  2. Si vous le souhaitez, dans le fichier review.ts, ajoutez un autre exemple à la liste des exemples de code et de revue de code. 
    ...
${REVIEW_LABEL}
There are duplicate lines of code in this control structure.
${CODE_LABEL}
const fixed_value = 128;
${REVIEW_LABEL}
Make sure constant names are in all capitals (FIXED_VALUE) for clarity.
';
  3. Enregistrez les modifications dans le fichier review.ts.

Pour tester la commande modifiée:

  1. Dans la fenêtre de projet de l'extension VS Code Pipet, redémarrez le débogueur en sélectionnant Run > Restart Debugging (Exécuter > Redémarrer le débogage).
  2. Dans la fenêtre Extension Development Host de VS Code, sélectionnez le code de votre choix dans la fenêtre de l'éditeur.
  3. Ouvrez la palette de commandes en sélectionnant Affichage > Palette de commandes.
  4. Dans la palette de commandes, saisissez Pipet, puis sélectionnez la commande Pipet : Review the selected code (Pipet : examiner le code sélectionné).

Créer une commande

Vous pouvez étendre Pipet en créant des commandes qui effectuent des tâches entièrement nouvelles avec l'API Gemini. Chaque fichier de commande (comment.ts et review.ts) est pour la plupart autonome et inclut du code permettant de collecter du texte à partir de l'éditeur actif, de rédiger une requête, de se connecter à l'API Gemini, d'envoyer une invite et de traiter la réponse.

Agent de code Pipet avec le nom de la fonction de sélection affiché Figure 2 : Nouvelle commande de recommandation de nom de fonction dans la fenêtre de l'hôte de développement de l'extension de VS Code.

Cet ensemble d'instructions explique comment créer une commande en utilisant le code d'une commande existante, comment.ts, comme modèle.

Pour créer une commande qui recommande des noms pour les fonctions:

  1. Créez une copie du fichier pipet-code-agent/src/comment.ts nommé name.ts dans le répertoire src/.
  2. Dans VS Code, ouvrez le fichier src/name.ts.
  3. Modifiez les instructions d'invite dans le fichier name.ts en modifiant la valeur PROMPT. 
    // Provide instructions for the AI generative model
const PROMPT = `Recommend a name for this function. Explain your
reasoning in 3 sentences or less:`;
  4. Modifiez le nom de la fonction de commande et son message d'information. 
    export async function generateName() {
  vscode.window.showInformationMessage('Generating function name...');
  5. Mettez à jour le code d'assemblage de l'invite pour n'inclure que la valeur PROMPT et le texte sélectionné dans l'éditeur. 
      // Build the full prompt using the template.
  const fullPrompt = `${PROMPT}
"
${selectedCode}
"
`;
  6. Modifiez le résultat de la réponse pour décrire ce qu'elle génère. 
        // update prefix to describe output
    let commentIntro = padding + commentPrefix + "Recommended name: (generated)\n";
    editBuilder.insert(selection.start, commentIntro);
    editBuilder.insert(selection.start, pyComment);
  7. Enregistrez les modifications dans le fichier review.ts.

Intégrer la nouvelle commande

Une fois que vous avez terminé le code de la nouvelle commande, vous devez l'intégrer au reste de l'extension. Mettez à jour les fichiers extension.ts et package.json pour intégrer la nouvelle commande à l'extension, puis autorisez VS Code pour l'appeler.

Pour intégrer la commande name dans le code de l'extension:

  1. Dans VS Code, ouvrez le fichier pipet-code-agent/src/extension.ts.
  2. Ajoutez le nouveau fichier de code à l'extension en ajoutant une instruction d'importation. 
    import { generateName } from './name';
  3. Enregistrez la nouvelle commande en ajoutant le code suivant à la fonction activate(). 
    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.nameFunction', generateName);
}
  4. Enregistrez les modifications dans le fichier extension.ts.

Pour intégrer la commande name au package d'extension:

  1. Dans VS Code, ouvrez le fichier pipet-code-agent/package.json.
  2. Ajoutez la nouvelle commande à la section commands du fichier de package. 
      "contributes": {
    "commands": [
      ...
      {
        "command": "pipet-code-agent.nameFunction",
        "title": "Pipet: Name the selected function."
      }
    ],
  3. Enregistrez les modifications dans le fichier package.json.

Tester la nouvelle commande

Une fois que vous avez fini de coder la commande et de l'intégrer à l'extension, vous pouvez la tester. Votre nouvelle commande n'est disponible que dans la fenêtre Extension Development Host de VS Code, et non dans la fenêtre VS Code dans laquelle vous avez modifié le code de l'extension.

Pour tester la commande modifiée:

  1. Dans la fenêtre de projet d'extension VS Code Pipet, redémarrez le débogueur en sélectionnant Run > Restart Debugging (Exécuter > Redémarrer le débogage), ce qui redémarre une fenêtre Extension Development Host distincte.
  2. Dans la fenêtre Extension Development Host de VS Code, sélectionnez du code dans la fenêtre de l'éditeur.
  3. Ouvrez la palette de commandes en sélectionnant Affichage > Palette de commandes.
  4. Dans la palette de commandes, saisissez Pipet, puis sélectionnez la commande Barre verticale: Nommer la fonction sélectionnée.

Ressources supplémentaires

Pour en savoir plus sur le projet d'agent de code Pipet, consultez le dépôt de code. Si vous avez besoin d'aide pour créer l'application ou si vous recherchez des développeurs, consultez le serveur Google Developers Community Discord.

Applications de production

Si vous envisagez de déployer l'agent Docs pour un large public, notez que votre utilisation de l'API Google Gemini peut être soumise à une limitation du débit et à d'autres restrictions d'utilisation. Si vous envisagez de créer une application de production avec l'API Gemini, comme l'agent Docs, découvrez les services Google Cloud Vertex AI pour améliorer l'évolutivité et la fiabilité de votre application.