Mit Pipet Code Agent einen KI-Codeassistenten erstellen

Code zu schreiben kann sowohl bereichernd als auch zufriedenstellend sein. Das Arbeiten bis zur Präsentation für Kollegen ist oft eine lästige Pflicht. Künstlich können Sie mit generativen Intelligenz-Modellen Codekommentare hinzufügen, Fehler vor Ihren menschlichen Prüfern machen und eine Reihe anderer Aufgaben ausführen, Ihren Programmier-Workflow zu vereinfachen.

In diesem Tutorial erfahren Sie, wie Sie Pipet Code Agent ein KI-gestütztes Code-Assist-Tool, das vom AI Developer Relations-Team bei Google. Dieses Open-Source-Projekt ist eine Erweiterung für Microsoft Visual Studio Code (VS Code), mit dem Sie sich um einige der wichtigen, aber weniger unterhaltsamen Programmieraufgaben kümmern, wie z. B. das Kommentieren Fehler zu finden und Verbesserungsvorschläge machen. Die Erweiterung sendet Programmierungsunterstützungsanfragen an die Gemini API gesendet und die Antworten in das Fenster zur Codebearbeitung.

Sie können Pipetten ändern um diese vorhandenen Funktionen für Sie zu optimieren, oder erstellen Sie neue Befehle, Ihren Entwicklungsworkflow besser zu unterstützen.

Videoübersicht über das Projekt und wie Sie es erweitern können, einschließlich Erkenntnissen von den Entwicklern, AI Code Assistant – Build with Google AI. Andernfalls können Sie mit der Erweiterung des Projekts beginnen, indem Sie der Anleitung folgen. weiter unten.

Projekt einrichten

Diese Anleitung führt Sie durch die Einrichtung des Pipet Code Agent-Projekts für Entwicklung und Tests. Die allgemeinen Schritte umfassen die Installation einiger ein paar Umgebungsvariablen festlegen, das Projekt aus dem Code klonen und die Konfigurationsinstallation auszuführen.

Erforderliche Komponenten installieren

Das Pipet Code Agent-Projekt wird als Erweiterung von Microsoft Visual Studio ausgeführt Code und verwendet Node.js und das npm-Tool zur Verwaltung Pakete und die Anwendung ausführen. Die folgenden Installationsanleitungen sind für einen Linux-Hostcomputer.

So installieren Sie die erforderliche Software:

  1. Visual Studio Code installieren für Ihre Plattform.
  2. Installieren Sie node und npm gemäß der Installation für Ihre Plattform.

Projekt klonen und konfigurieren

Laden Sie den Projektcode herunter und verwenden Sie zum Herunterladen den Installationsbefehl npm die erforderlichen Abhängigkeiten und konfigurieren Sie das Projekt. Du brauchst Git-Versionsverwaltungssoftware, Projektquellcode.

So laden Sie den Projektcode herunter und konfigurieren ihn:

  1. Klonen Sie das Git-Repository mit dem folgenden Befehl.
    git clone https://github.com/google/generative-ai-docs
  2. Konfigurieren Sie optional Ihr lokales Git-Repository für den Sparse-Checkout. sodass Sie nur die Dateien für das Docs Agent-Projekt haben. 
    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/pipet-code-agent/
  3. Wechseln Sie zum Stammverzeichnis des Pipet Code Agent-Projekts. 
    cd generative-ai-docs/examples/gemini/node/pipet-code-agent/
  4. Führen Sie den Installationsbefehl aus, um Abhängigkeiten herunterzuladen und das Projekt zu konfigurieren: 
    npm install

Erweiterung konfigurieren und testen

Sie sollten jetzt Ihre Installation testen können, indem Sie Pipet Code Agent als eine Entwicklungserweiterung in VS Code auf Ihrem Gerät. Der Test öffnet eine separate Code-Fenster Extension Development Host, in dem die neue Erweiterung verfügbar ist. In diesem neuen Fenster konfigurieren Sie den API-Schlüssel, den die Erweiterung für den Zugriff auf die Google Gemini API

Pipet-Code-Agent wird im Fenster „Extension Development Host“ ausgeführtAbbildung 1. Fenster des VS Code Extension Development Hosts mit Pipet Erweiterungsbefehle.

So konfigurieren und testen Sie die Einrichtung:

  1. Starten Sie die VS Code-Anwendung.
  2. Erstellen Sie in VS Code ein neues Fenster, indem Sie File > Neues Fenster.
  3. Öffnen Sie das Pipet Code Agent-Projekt, indem Sie File > Ordner öffnen, und wählen Sie den Ordner pipet-code-agent/ aus.
  4. Öffnen Sie die Datei pipet-code-agent/package.json.
  5. Führen Sie die Erweiterung im Debug-Modus aus, indem Sie Ausführen > Debugging starten Dadurch wird ein separates VS Code-Fenster Extension Development Host geöffnet.
  6. Öffnen Sie die VS Code-Einstellungen, indem Sie Code > Einstellungen > Einstellungen.
  7. Fordern Sie einen Google Gemini API-Schlüssel aus dem Entwicklerwebsite für generative KI und kopieren Sie den Schlüsselstring.
  8. Legen Sie den API-Schlüssel als Konfigurationseinstellung fest. In den Sucheinstellungen Geben Sie pipet ein, wählen Sie den Tab Nutzer aus und geben Sie im Feld Google > Gemini: API-Schlüssel auf den Link In settings.json bearbeiten und fügen Sie die Gemini API-Schlüssel: 
    "google.gemini.apiKey": "your-api-key-here"
  9. Speichern Sie die Änderungen in der Datei settings.json und schließen Sie die Tabs mit den Einstellungen.

So testen Sie die Erweiterungsbefehle:

  1. Wählen Sie im VS Code-Fenster Extension Development Host einen beliebigen Code aus. im Editorfenster aus.
  2. Öffnen Sie die Befehlspalette, indem Sie Ansicht > Befehlspalette.
  3. Geben Sie in der Befehlspalette Pipet ein und wählen Sie einen der Befehle dieses Präfixes.

Vorhandenen Befehl ändern

Das Ändern der in Pipet Code Agent bereitgestellten Befehle ist die einfachste Möglichkeit, das Verhalten und die Funktionen der Erweiterung zu ändern. Sowohl der Kommentar als auch Review-Befehle verwenden eine wenige Shot-Prompts mit Beispielen für Code und Kommentaren für diesen Code sowie allgemeine Anweisungen für das generative KI-Modell. Dieser Prompt-Kontext Informationen helfen dem generativen Modell von Gemini beim Formulieren einer Antwort. Von die Prompt-Anleitung, die Beispiele oder beides entweder im Kommentar- oder überprüfen, können Sie das Verhalten der vorhandenen Befehle ändern.

In dieser Anleitung wird erläutert, wie Sie den Befehl review.ts ändern, indem Sie den Prompt-Text des Befehls ändern.

So bereiten Sie die Bearbeitung des Befehls review.ts vor:

  1. Starten Sie die VS Code-Anwendung.
  2. Erstellen Sie in VS Code ein neues Fenster, indem Sie File > Neues Fenster.
  3. Öffnen Sie das Pipet Code Agent-Projekt, indem Sie File > Ordner öffnen, und wählen Sie den Ordner pipet-code-agent/ aus.
  4. Datei „pipet-code-agent/src/review.ts“ öffnen.

So ändern Sie das Verhalten des Befehls review.ts:

  1. Ändern Sie in der Datei review.ts den Anfang von PROMPT. immer zu unterschiedlichen Anweisungen. 
    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. Optional können Sie in der Datei review.ts ein weiteres Beispiel zum eine Liste mit Code- und Code-Review-Beispielen. 
    ...
${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. Speichern Sie die Änderungen an der Datei review.ts.

So testen Sie den geänderten Befehl:

  1. Starten Sie den Debugger im Projektfenster der VS Code Pipet-Erweiterung neu, indem Sie wählen Sie Ausführen > Starten Sie das Debugging neu.
  2. Wählen Sie im VS Code-Fenster Extension Development Host einen beliebigen Code aus. im Editorfenster aus.
  3. Öffnen Sie die Befehlspalette, indem Sie Ansicht > Befehlspalette.
  4. Geben Sie in der Befehlspalette Pipet ein und wählen Sie Pipet: Review the ausgewählten Code.

Neuen Befehl erstellen

Sie können Pipet erweitern, indem Sie neue Befehle erstellen, die völlig neue Aufgaben ausführen mit der Gemini API. Jede Befehlsdatei (comment.ts und review.ts) besteht zum größten Teil und Code zum Erfassen von Text aus dem aktiven Editor, einen Prompt verfassen, eine Verbindung zur Gemini API herstellen, einen Prompt senden und auf die Antwort.

Pipet-Code-Agent mit dem angezeigten Namen der AuswahlfunktionAbbildung 2. Neuer Empfehlungsbefehl für Funktionsnamen in der VS Code-Erweiterung Entwicklungshostfenster.

In dieser Anleitung wird erklärt, wie Sie einen neuen Befehl mit dem Code den vorhandenen Befehl comment.ts als Vorlage.

So erstellen Sie einen Befehl, der Namen für Funktionen empfiehlt:

  1. Kopie der Datei pipet-code-agent/src/comment.ts erstellen mit dem Namen name.ts im Verzeichnis src/.
  2. Öffnen Sie in VS Code die Datei src/name.ts.
  3. Ändern Sie die Prompt-Anleitung in der Datei name.ts, indem Sie wenn Sie den Wert PROMPT bearbeiten. 
    // Provide instructions for the AI generative model
const PROMPT = `Recommend a name for this function. Explain your
reasoning in 3 sentences or less:`;
  4. Ändern Sie den Namen der Befehlsfunktion und ihre Informationsmeldung. 
    export async function generateName() {
  vscode.window.showInformationMessage('Generating function name...');
  5. Aktualisieren Sie den Assembly-Code der Eingabeaufforderung so, dass er nur PROMPT enthält. und den im Editor ausgewählten Text. 
      // Build the full prompt using the template.
  const fullPrompt = `${PROMPT}
"
${selectedCode}
"
`;
  6. Ändern Sie die Antwortausgabe, um zu beschreiben, was generiert wird. 
        // update prefix to describe output
    let commentIntro = padding + commentPrefix + "Recommended name: (generated)\n";
    editBuilder.insert(selection.start, commentIntro);
    editBuilder.insert(selection.start, pyComment);
  7. Speichern Sie die Änderungen an der Datei review.ts.

Neuen Befehl einbinden

Nachdem Sie den Code für den neuen Befehl fertiggestellt haben, müssen Sie ihn in den Rest der Erweiterung. Aktualisieren Sie die Dateien extension.ts und package.json auf den neuen Befehl Teil der Erweiterung machen und VS Code zum Aufrufen den neuen Befehl.

So binden Sie den Befehl name in den Erweiterungscode ein:

  1. Öffnen Sie in VS Code die Datei pipet-code-agent/src/extension.ts.
  2. Fügen Sie der Erweiterung die neue Codedatei hinzu, indem Sie einen neuen Import hinzufügen . 
    import { generateName } from './name';
  3. Registrieren Sie den neuen Befehl, indem Sie den folgenden Code zur activate(). 
    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.nameFunction', generateName);
}
  4. Speichern Sie die Änderungen an der Datei extension.ts.

So binden Sie den Befehl name in das Erweiterungspaket ein:

  1. Öffnen Sie in VS Code die Datei pipet-code-agent/package.json.
  2. Fügen Sie den neuen Befehl dem Abschnitt commands des Pakets hinzu. -Datei. 
      "contributes": {
    "commands": [
      ...
      {
        "command": "pipet-code-agent.nameFunction",
        "title": "Pipet: Name the selected function."
      }
    ],
  3. Speichern Sie die Änderungen an der Datei package.json.

Neuen Befehl testen

Sobald Sie die Codierung des Befehls abgeschlossen und ihn in den können Sie sie testen. Der neue Befehl ist nur im VS Code verfügbar Extension Development Host und nicht im VS Code-Fenster, in dem Sie den Code für die Erweiterung bearbeitet.

So testen Sie den geänderten Befehl:

  1. Starten Sie den Debugger im Projektfenster der VS Code Pipet-Erweiterung neu, indem Sie wählen Sie Ausführen > Debugging neu starten, wodurch ein separater Erweiterungsentwicklungshost.
  2. Wählen Sie im VS Code-Fenster Extension Development Host Code aus. im Editorfenster aus.
  3. Öffnen Sie die Befehlspalette, indem Sie Ansicht > Befehlspalette.
  4. Geben Sie in der Befehlspalette Pipet ein und wählen Sie Pipet: Name the ausgewählter Funktion.

Zusätzliche Ressourcen

Weitere Informationen zum Projekt Pipet Code Agent finden Sie in der Code-Repository gespeichert. Wenn Sie Hilfe bei der App-Entwicklung benötigen oder Collab-Partner finden Sie in der Google Developers-Community auf Discord Server.

Produktionsanwendungen

Wenn Sie den Docs Agent für eine große Zielgruppe bereitstellen möchten, beachten Sie, dass die Verwendung des unterliegt die Google Gemini API möglicherweise Ratenbegrenzung und anderen Nutzungsbeschränkungen. Wenn Sie erwägen, eine Produktionsanwendung mit der Gemini API wie Docs-Agent, schauen Sie sich Google Cloud Vertex AI um die Skalierbarkeit und Zuverlässigkeit Ihrer Anwendung zu erhöhen.