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

Écrire du code peut être à la fois gratifiant et satisfaisant, mais passer de code fonctionnel à code 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 de code, à trouver des erreurs avant vos réviseurs humains et à effectuer de nombreuses autres tâches pour faciliter votre workflow de codage.

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

Vous pouvez modifier Pipet pour que ces fonctions existantes fonctionnent mieux pour vous ou créer de nouvelles commandes pour mieux prendre en charge votre workflow de développement.

Pour obtenir une présentation vidéo du projet et découvrir comment l'étendre, y compris des insights de ses créateurs, regardez la vidéo AI Code Assistant - Build with Google AI (Assistant de code IA : créer avec l'IA de Google). Sinon, vous pouvez commencer à étendre le projet en suivant les instructions ci-dessous.

Configuration du projet

Ces instructions vous expliquent comment configurer le projet Pipet Code Agent pour le développement et les tests. Les étapes générales consistent à installer des logiciels préalables, à 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 Pipet Code Agent s'exécute en tant qu'extension de Visual Studio Code de Microsoft. Il utilise Node.js et l'outil npm pour gérer les packages et exécuter l'application. Les instructions d'installation suivantes s'appliquent à 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 pour votre plate-forme.

Cloner et configurer le projet

Téléchargez le code du projet et utilisez la commande d'installation npm pour télécharger les dépendances requises et configurer le projet. Vous avez besoin du logiciel de contrôle des versions git pour récupérer le code source du projet.

Pour télécharger et configurer le code du projet:

  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 également configurer votre dépôt Git local pour qu'il utilise un "checkout" clairsemé 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 Pipet Code Agent. 
    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 Pipet Code Agent en tant qu'extension de développement dans VS Code sur votre appareil. Le test ouvre une fenêtre Extension Development Host (Hôte de développement d'extension) VS Code distincte dans laquelle la nouvelle extension est disponible. Dans cette nouvelle fenêtre, vous configurez la clé API utilisée par l'extension pour accéder à l'API Google Gemini.

Agent de code Pipet exécuté dans la fenêtre de l'hôte de développement de l'extension Figure 1 : Fenêtre de l'hôte de développement d'extension VS Code 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 Pipet Code Agent en sélectionnant File > Open Folder (Fichier > Ouvrir un 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 Extension Development Host (Hôte de développement d'extension) VS Code distincte.
  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 des développeurs de l'IA générative, puis copiez la chaîne de clé.
  8. Définissez la clé API comme 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: Api Key (Google > Gemini : clé d'API), cliquez sur le lien Edit in settings.json (Modifier dans settings.json), puis ajoutez votre clé d'API Gemini : 
    "google.gemini.apiKey": "your-api-key-here"
  9. Enregistrez les modifications apportées au fichier settings.json et fermez les onglets des paramètres.

Pour tester les commandes de l'extension:

  1. Dans la fenêtre Extension Development Host (Hôte de développement d'extension) de VS Code, sélectionnez du code 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, puis sélectionnez l'une des commandes avec ce préfixe.

Modifier une commande existante

Modifier les commandes fournies dans Pipet Code Agent est le moyen le plus simple de modifier le comportement et les fonctionnalités de l'extension. Les commandes de commentaire et d'examen utilisent une approche d'invites avec quelques clichés avec des exemples de code et des commentaires sur 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 formulation d'une réponse. En modifiant les instructions de requête, les exemples ou les deux dans les commandes de commentaire ou d'avis, 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 de l'invite de la commande.

Pour vous préparer à modifier la commande review.ts:

  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 Pipet Code Agent en sélectionnant File > Open Folder (Fichier > Ouvrir un 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:

  1. Dans le fichier review.ts, remplacez le début de la constante PROMPT par différentes instructions. 
    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. Dans le fichier review.ts, vous pouvez ajouter un autre exemple à la liste des exemples de code et d'examen du 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 apportées au fichier review.ts.

Pour tester la commande modifiée:

  1. Dans la fenêtre de votre projet d'extension Pipet VS Code, 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 (Hôte de développement d'extension) 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 Pipette: examiner le code sélectionné.

Créer une commande

Vous pouvez étendre Pipet en créant des commandes qui effectuent des tâches complètement nouvelles avec l'API Gemini. Chaque fichier de commande (comment.ts et review.ts) est principalement autonome et inclut du code permettant de collecter du texte à partir de l'éditeur actif, de composer une requête, de se connecter à l'API Gemini, d'envoyer une requête et de gérer 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 VS Code.

Cet ensemble d'instructions explique comment créer une commande à l'aide du 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 appelé name.ts dans le répertoire src/.
  2. Dans VS Code, ouvrez le fichier src/name.ts.
  3. Modifiez les instructions de requête 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. Modifiez 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 la sortie 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 apportées au fichier review.ts.

Intégrer la nouvelle commande

Une fois le code de la nouvelle commande terminé, 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 activez VS Code pour qu'il appelle la nouvelle commande.

Pour intégrer la commande name au 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 apportées au 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 apportées au fichier package.json.

Tester la nouvelle commande

Une fois que vous avez terminé 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 (Hôte de développement de l'extension) de VS Code, et pas 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 votre projet d'extension Pipet VS Code, 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 (Hôte de développement de l'extension) distincte.
  2. Dans la fenêtre Extension Development Host (Hôte de développement d'extension) 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 Pipette: Nommer la fonction sélectionnée.

Ressources supplémentaires

Pour en savoir plus sur le projet Pipet Code Agent, 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 pour collaborer, consultez le serveur Discord de la communauté des développeurs Google.

Applications de production

Si vous prévoyez de déployer l'Agent Docs pour une large audience, notez que votre utilisation de l'API Google Gemini peut être soumise à une limitation de 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, consultez les services Google Cloud Vertex AI pour améliorer la scalabilité et la fiabilité de votre application.