Crea un assistente del codice AI con Pipet Code Agent

Scrivere codice può essere sia gratificante sia gratificante, ma far sì che il codice passi da lavorare a presentabile per i colleghi è spesso un compito gravoso. I modelli di intelligenza artificiale generativa possono aiutarti ad aggiungere commenti al codice, a trovare gli errori prima che lo facciano i revisori e a eseguire una serie di altre attività per semplificare il flusso di lavoro di programmazione.

Questo tutorial mostra come estendere Pipet Code Agent, uno strumento di assistenza per la programmazione basato sull'IA, creato dal team AI Developer Relations di Google. Questo progetto open source è un'estensione di Microsoft Visual Studio Code (VS Code) che ti aiuta a occuparti di alcune delle attività di programmazione importanti, ma meno divertenti, come commentare il codice, trovare errori e suggerire miglioramenti. L'estensione invia richieste di assistenza per la programmazione all'API Gemini e incorpora le risposte nella finestra di modifica del codice.

Puoi modificare Pipet per migliorare il funzionamento di queste funzioni esistenti o creare nuovi comandi per supportare meglio il flusso di lavoro di sviluppo.

Per una panoramica video del progetto e di come estenderlo, inclusi approfondimenti dalle persone che lo hanno realizzato, dai un'occhiata ad AI Code Assistant - Build with Google AI. Altrimenti, puoi iniziare a estendere il progetto seguendo le istruzioni riportate di seguito.

Configurazione del progetto

Queste istruzioni illustrano come configurare il progetto Pipet Code Agent per lo sviluppo e i test. I passaggi generali prevedono l'installazione di un software prerequisito, l'impostazione di alcune variabili di ambiente, la clonazione del progetto dal repository di codice ed l'esecuzione dell'installazione della configurazione.

Installa i prerequisiti

Il progetto Pipet Code Agent viene eseguito come estensione del codice di Visual Studio di Microsoft e utilizza Node.js e lo strumento npm per gestire i pacchetti ed eseguire l'applicazione. Le seguenti istruzioni di installazione si riferiscono a una macchina host Linux.

Per installare il software richiesto:

  1. Installa il codice visivo di Studio per la tua piattaforma.
  2. Installa node e npm seguendo le istruzioni di installazione per la tua piattaforma.

Clona e configura il progetto

Scarica il codice del progetto e utilizza il comando di installazione npm per scaricare le dipendenze richieste e configurare il progetto. È necessario un software per il controllo del codice sorgente git per recuperare il codice sorgente del progetto.

Per scaricare e configurare il codice del progetto:

  1. Clona il repository git utilizzando il comando seguente.
    git clone https://github.com/google/generative-ai-docs
  2. Se vuoi, configura il tuo repository Git locale in modo che utilizzi il check-out sparse, in modo da avere solo i file per il progetto dell'agente di Documenti. 
    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/pipet-code-agent/
  3. Vai alla directory root del progetto Pipet Code Agent. 
    cd generative-ai-docs/examples/gemini/node/pipet-code-agent/
  4. Esegui il comando di installazione per scaricare le dipendenze e configurare il progetto: 
    npm install

Configurare e testare l'estensione

Ora dovresti riuscire a testare l'installazione eseguendo Pipet Code Agent come estensione di sviluppo in VS Code sul tuo dispositivo. Il test apre una finestra separata VS Code Extensions Development Host in cui è disponibile la nuova estensione. In questa nuova finestra, configurerai la chiave API utilizzata dall'estensione per accedere all'API Google Gemini.

Pipet Code Agent in esecuzione nella finestra dell'host per lo sviluppo dell'estensione Figura 1. VS Code Extensions Development Host con i comandi dell'estensione Pipet.

Per configurare e testare la configurazione:

  1. Avvia l'applicazione VS Code.
  2. In VS Code, crea una nuova finestra selezionando File > Nuova finestra.
  3. Apri il progetto Pipet Code Agent selezionando File > Apri cartella e selezionando la cartella pipet-code-agent/.
  4. Apri il file pipet-code-agent/package.json.
  5. Esegui l'estensione in modalità di debug selezionando Esegui > Avvia debug. Questo passaggio apre una finestra separata per Host per lo sviluppo dell'estensione di VS Code.
  6. Apri le impostazioni di VS Code selezionando Codice > Impostazioni > Impostazioni.
  7. Ottieni una chiave API di Google Gemini dal sito Generative AI Developer e copia la stringa della chiave.
  8. Imposta la chiave API come impostazione di configurazione. Nel campo Impostazioni di ricerca, digita pipet, seleziona la scheda Utente e, nell'impostazione Google > Gemini: Chiave API, fai clic sul link Modifica in impostazioni.json e aggiungi la tua chiave API Gemini:
    "google.gemini.apiKey": "your-api-key-here"
  9. Salva le modifiche apportate al file settings.json e chiudi le schede delle impostazioni.

Per testare i comandi dell'estensione:

  1. Nella finestra Extensions Development Host di VS Code, seleziona un codice qualsiasi nella finestra dell'editor.
  2. Per aprire la tavolozza dei comandi, seleziona Visualizza > Tavolozza dei comandi.
  3. Nella tavolozza dei comandi, digita Pipet e seleziona uno dei comandi con quel prefisso.

Modifica comando esistente

La modifica dei comandi forniti in Pipet Code Agent è il modo più semplice per cambiare il comportamento e le funzionalità dell'estensione. Entrambi i comandi di commento e di revisione utilizzano un approccio di prompt di alcuni casi con esempi di codice e commenti per quel codice, oltre ad alcune istruzioni generali per il modello generativo con l'IA. Queste informazioni sul contesto dei prompt guidano il modello generativo Gemini nella formazione di una risposta. Modificando le istruzioni dei prompt, gli esempi o entrambi nei comandi di commento o revisione, puoi modificare il comportamento di ciascuno dei comandi esistenti.

Questa serie di istruzioni spiega come modificare il comando review.ts cambiando il testo del prompt.

Per prepararti a modificare il comando review.ts:

  1. Avvia l'applicazione VS Code.
  2. In VS Code, crea una nuova finestra selezionando File > Nuova finestra.
  3. Apri il progetto Pipet Code Agent selezionando File > Apri cartella e selezionando la cartella pipet-code-agent/.
  4. Apri pipet-code-agent/src/review.ts file.

Per modificare il comportamento del comando review.ts:

  1. Nel file review.ts, modifica l'inizio della costante PROMPT in istruzioni diverse. 
    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. Se vuoi, nel file review.ts, aggiungi un altro esempio all'elenco di esempi di revisione del codice e del codice. 
    ...
${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. Salva le modifiche apportate al file review.ts.

Per testare il comando modificato:

  1. Nella finestra del progetto dell'estensione VS Code Pipet, riavvia il debugger selezionando Esegui > Riavvia debug.
  2. Nella finestra Extensions Development Host di VS Code, seleziona un codice qualsiasi nella finestra dell'editor.
  3. Per aprire la tavolozza dei comandi, seleziona Visualizza > Tavolozza dei comandi.
  4. Nella tavolozza dei comandi, digita Pipet e seleziona il comando Pipetta: esamina il codice selezionato.

Crea nuovo comando

Puoi estendere Pipet creando nuovi comandi che eseguono attività completamente con l'API Gemini. Ogni file di comando (comment.ts e review.ts) è per lo più indipendente e include il codice per raccogliere il testo dall'editor attivo, scrivere un prompt, connettersi all'API Gemini, inviare un prompt e gestire la risposta.

Agente di codice pipetta con il nome visualizzato dalla funzione di selezione Figura 2. Nuovo comando per suggerimenti sul nome della funzione nella finestra Host di sviluppo dell'estensione di codice VS.

Questo insieme di istruzioni spiega come creare un nuovo comando utilizzando il codice di un comando esistente, comment.ts, come modello.

Per creare un comando che consiglia i nomi delle funzioni:

  1. Crea una copia del file pipet-code-agent/src/comment.ts denominato name.ts nella directory src/.
  2. In VS Code, apri il file src/name.ts.
  3. Cambia le istruzioni della richiesta nel file name.ts modificando il valore 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. Modifica il nome della funzione di comando e il relativo messaggio informativo. 
    export async function generateName() {
  vscode.window.showInformationMessage('Generating function name...');
  5. Aggiorna il codice dell'assemblaggio del prompt in modo da includere solo il valore PROMPT e il testo selezionato nell'editor. 
      // Build the full prompt using the template.
  const fullPrompt = `${PROMPT}
"
${selectedCode}
"
`;
  6. Modifica l'output della risposta per descrivere cosa sta generando. 
        // update prefix to describe output
    let commentIntro = padding + commentPrefix + "Recommended name: (generated)\n";
    editBuilder.insert(selection.start, commentIntro);
    editBuilder.insert(selection.start, pyComment);
  7. Salva le modifiche apportate al file review.ts.

Integra il nuovo comando

Dopo aver completato il codice per il nuovo comando, devi integrarlo con il resto dell'estensione. Aggiorna i file extension.ts e package.json per inserire il nuovo comando nell'estensione e abilitare VS Code per richiamare il nuovo comando.

Per integrare il comando name con il codice dell'estensione:

  1. In VS Code, apri il file pipet-code-agent/src/extension.ts.
  2. Aggiungi il nuovo file di codice all'estensione aggiungendo una nuova istruzione di importazione. 
    import { generateName } from './name';
  3. Registra il nuovo comando aggiungendo il codice seguente alla funzione activate(). 
    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.nameFunction', generateName);
}
  4. Salva le modifiche apportate al file extension.ts.

Per integrare il comando name con il pacchetto dell'estensione:

  1. In VS Code, apri il file pipet-code-agent/package.json.
  2. Aggiungi il nuovo comando alla sezione commands del file del pacchetto. 
      "contributes": {
    "commands": [
      ...
      {
        "command": "pipet-code-agent.nameFunction",
        "title": "Pipet: Name the selected function."
      }
    ],
  3. Salva le modifiche apportate al file package.json.

Testa il nuovo comando

Dopo aver completato la codifica del comando e l'integrazione con l'estensione, puoi testarlo. Il nuovo comando è disponibile solo nella finestra Extensions Development Host di VS Code e non nella finestra VS Code in cui hai modificato il codice dell'estensione.

Per testare il comando modificato:

  1. Nella finestra del progetto dell'estensione VS Code Pipet, riavvia il debugger selezionando Esegui > Riavvia debug. In questo modo viene riavviata una finestra URL di sviluppo estensione separata.
  2. Nella finestra Extensions Development Host di VS Code, seleziona del codice nella finestra dell'editor.
  3. Per aprire la tavolozza dei comandi, seleziona Visualizza > Tavolozza dei comandi.
  4. Nella tavolozza dei comandi, digita Pipet e seleziona il comando Pipetta: assegna un nome alla funzione selezionata.

Altre risorse

Per ulteriori informazioni sul progetto Pipet Code Agent, consulta il repository del codice. Se hai bisogno di assistenza per creare l'applicazione o cerchi collaboratori per sviluppatori, visita il server discord della community di Google Developers.

Applicazioni di produzione

Se prevedi di eseguire il deployment dell'agente Documenti per un ampio pubblico, tieni presente che l'utilizzo dell'API Google Gemini potrebbe essere soggetto a limitazioni di frequenza e altre limitazioni di utilizzo. Se stai considerando la creazione di un'applicazione di produzione con l'API Gemini come l'agente di Documenti, dai un'occhiata ai servizi Vertex AI di Google Cloud per aumentare la scalabilità e l'affidabilità della tua app.