Tworzenie asystenta kodu AI z agentem Pipet Code

Pisanie kodu może być satysfakcjonujące i satysfakcjonujące, ale przechodzenie z pracy do prezentacji dla współpracowników jest często męczące. Generatywne modele sztucznej inteligencji mogą pomóc Ci dodawać komentarze do kodu, znajdować błędy, zanim zrobią to weryfikatorzy, oraz wykonywać wiele innych zadań ułatwiających kodowanie.

Ten samouczek pokazuje, jak rozszerzyć Pipet Code Agent – oparte na AI narzędzie do obsługi kodu opracowane przez zespół Google ds. współpracy z deweloperami AI. Ten projekt open source jest rozszerzeniem programu Microsoft Visual Studio Code (VS Code), i pomaga Ci zająć się niektórymi ważnymi, choć mniej śmiesznymi zadaniami kodowania, takimi jak komentowanie kodu, znajdowanie błędów i sugerowanie ulepszeń. Rozszerzenie wysyła żądania pomocy przy kodowaniu do interfejsu Gemini API i umieszcza odpowiedzi w oknie edycji kodu.

Możesz zmodyfikować Pipet, aby istniejące funkcje lepiej służyły Ci do obsługi, lub utworzyć nowe polecenia, aby wspomóc proces programowania.

Film z omówieniem projektu i jego rozbudowy, w tym informacji od osób, które go stworzyli, znajdziesz w filmie AI Code Assistant – Build with Google AI. W przeciwnym razie możesz rozszerzyć projekt, postępując zgodnie z poniższymi instrukcjami.

Konfigurowanie projektu

Te instrukcje przeprowadzą Cię przez proces konfigurowania projektu agenta kodu Pipet na potrzeby programowania i testowania. Ogólne czynności to zainstalowanie wymaganego oprogramowania, ustawienie kilku zmiennych środowiskowych, skopiowanie projektu z repozytorium kodu i uruchomienie instalacji konfiguracji.

Instalowanie wymagań wstępnych

Projekt agenta Pipet Code Agent jest rozszerzeniem kodu Microsoft Visual Studio Code i wykorzystuje Node.js oraz narzędzie npm do zarządzania pakietami i uruchamiania aplikacji. Poniższe instrukcje instalacji dotyczą hosta z systemem Linux.

Aby zainstalować wymagane oprogramowanie:

  1. Zainstaluj Visual Studio Code na swojej platformie.
  2. Zainstaluj node i npm, postępując zgodnie z instrukcjami instalacji dotyczącymi Twojej platformy.

Klonowanie i konfigurowanie projektu

Pobierz kod projektu i użyj polecenia instalacji npm, aby pobrać wymagane zależności i skonfigurować projekt. Aby pobrać kod źródłowy projektu, musisz mieć oprogramowanie do kontroli źródła na git.

Aby pobrać i skonfigurować kod projektu:

  1. Sklonuj repozytorium git za pomocą tego polecenia.
    git clone https://github.com/google/generative-ai-docs
  2. Opcjonalnie skonfiguruj lokalne repozytorium git tak, aby korzystało z rzadkiego procesu płatności, aby mieć tylko pliki dla projektu agenta Dokumentów. 
    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/pipet-code-agent/
  3. Przejdź do katalogu głównego projektu agenta Pipet Code. 
    cd generative-ai-docs/examples/gemini/node/pipet-code-agent/
  4. Uruchom polecenie instalacji, aby pobrać zależności i skonfigurować projekt:
    npm install

Konfigurowanie i testowanie rozszerzenia

Możesz teraz przetestować instalację, uruchamiając na urządzeniu agenta Pipet Code jako rozszerzenie programistyczne w VS Code. W ramach testu otworzy się osobne okno VS Code Extension Development Host (Host programowania rozszerzeń), gdzie jest dostępne nowe rozszerzenie. W nowym oknie skonfigurujesz klucz interfejsu API, którego rozszerzenie używa, aby uzyskać dostęp do interfejsu Google Gemini API.

Agent kodu Pipet działa w oknie hosta tworzenia rozszerzeń Rysunek 1. okno hosta VS Code Extension Development Host z poleceniami rozszerzenia Pipet.

Aby skonfigurować i przetestować konfigurację:

  1. Uruchom aplikację VS Code.
  2. W VS Code utwórz nowe okno, wybierając Plik > Nowe okno.
  3. Otwórz projekt agenta kodu Pipet, wybierając File > Open folder (Plik > Otwórz folder) i wybierając folder pipet-code-agent/.
  4. Otwórz plik pipet-code-agent/package.json.
  5. Aby uruchomić rozszerzenie w trybie debugowania, wybierz Uruchom > Rozpocznij debugowanie. Ten krok otwiera osobne okno Host Development Development Host (Host programowania rozszerzenia) VS Code.
  6. Otwórz ustawienia VS Code, wybierając Kod > Ustawienia > Ustawienia.
  7. Pobierz klucz interfejsu Google Gemini API ze strony dla deweloperów generatywnej AI i skopiuj ciąg klucza.
  8. Ustaw klucz interfejsu API jako ustawienie konfiguracji. W polu Search Settings (Ustawienia wyszukiwania) wpisz pipet, wybierz kartę User (Użytkownik) i w ustawieniu Google > Gemini: API Key (Klucz interfejsu API Google) kliknij link Edit in settings.json (Edytuj w pliku settings.json) i dodaj klucz interfejsu API Gemini:
    "google.gemini.apiKey": "your-api-key-here"
  9. Zapisz zmiany w pliku settings.json i zamknij karty ustawień.

Aby przetestować polecenia rozszerzenia:

  1. W oknie VS Code Extension Development Host (Host programowania rozszerzenia) wybierz dowolny kod w oknie edytora.
  2. Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.
  3. Na palecie poleceń wpisz Pipet i wybierz jedno z poleceń z tym prefiksem.

Zmodyfikuj istniejące polecenie

Modyfikowanie poleceń dostępnych w agencie kodu Pipet jest najprostszym sposobem zmiany działania i możliwości rozszerzenia. Zarówno polecenia komentarza, jak i opinii są oparte na promptach typu „kilka ujęć” z przykładami kodu i komentarzami do tego kodu, a także ogólnymi instrukcjami dotyczącymi modelu generatywnego AI. Informacje o kontekście promptu pomagają modelowi generatywnemu Gemini tworzyć odpowiedzi. Zmieniając instrukcje, przykłady lub oba te sposoby w poleceniach dotyczących komentarza lub opinii, możesz zmodyfikować działanie każdego z dotychczasowych poleceń.

Z tego zestawu instrukcji dowiesz się, jak zmodyfikować polecenie review.ts przez zmianę tekstu promptu polecenia.

Aby przygotować się do edytowania polecenia review.ts:

  1. Uruchom aplikację VS Code.
  2. W VS Code utwórz nowe okno, wybierając Plik > Nowe okno.
  3. Otwórz projekt agenta kodu Pipet, wybierając File > Open folder (Plik > Otwórz folder) i wybierając folder pipet-code-agent/.
  4. Otwórz plik pipet-code-agent/src/review.ts.

Aby zmienić działanie polecenia review.ts:

  1. W pliku review.ts zmień początek stałej PROMPT na inne instrukcje. 
    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. Opcjonalnie w pliku review.ts dodaj kolejny przykład do listy kodów i przykładów weryfikacji kodu. 
    ...
${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. Zapisz zmiany w pliku review.ts.

Aby przetestować zmodyfikowane polecenie:

  1. W oknie projektu rozszerzenia VS Code Pipet ponownie uruchom debuger, wybierając Uruchom > Ponownie uruchom debugowanie.
  2. W oknie VS Code Extension Development Host (Host programowania rozszerzenia) wybierz dowolny kod w oknie edytora.
  3. Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.
  4. Na palecie poleceń wpisz Pipet i wybierz polecenie Pipet: sprawdź wybrany kod.

Utwórz nowe polecenie

Możesz rozszerzyć Pipet, tworząc nowe polecenia, które wykonują zupełnie nowe zadania za pomocą interfejsu Gemini API. Każdy plik poleceń (comment.ts i review.ts) jest w większości samodzielny i zawiera kod służący do zbierania tekstu z aktywnego edytora, tworzenia promptu, łączenia się z interfejsem Gemini API, wysyłania promptu i obsługi odpowiedzi.

Agent kodu Pipet z wyświetlaną funkcją wyboru Nazwa Rysunek 2. Nowe polecenie rekomendacji nazwy funkcji w oknie hosta programowania rozszerzenia kodu VS.

Ten zestaw instrukcji zawiera instrukcje, jak utworzyć nowe polecenie z użyciem kodu istniejącego polecenia comment.ts jako szablonu.

Aby utworzyć polecenie zalecające nazwy funkcji:

  1. Utwórz kopię pliku pipet-code-agent/src/comment.ts o nazwie name.ts w katalogu src/.
  2. W aplikacji VS Code otwórz plik src/name.ts.
  3. Zmień instrukcje dotyczące promptów w pliku name.ts, edytując wartość 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. Zmień nazwę funkcji polecenia i jej komunikat informacyjny. 
    export async function generateName() {
  vscode.window.showInformationMessage('Generating function name...');
  5. Zaktualizuj kod zestawu promptu, aby zawierał tylko wartość PROMPT i tekst zaznaczony w edytorze. 
      // Build the full prompt using the template.
  const fullPrompt = `${PROMPT}
"
${selectedCode}
"
`;
  6. Zmień dane wyjściowe odpowiedzi, aby opisać, co generuje. 
        // update prefix to describe output
    let commentIntro = padding + commentPrefix + "Recommended name: (generated)\n";
    editBuilder.insert(selection.start, commentIntro);
    editBuilder.insert(selection.start, pyComment);
  7. Zapisz zmiany w pliku review.ts.

Zintegruj nowe polecenie

Po zakończeniu kodu nowego polecenia musisz zintegrować go z resztą rozszerzenia. Zaktualizuj pliki extension.ts i package.json, aby nowe polecenie stało się częścią rozszerzenia, i włącz funkcję VS Code na wywoływanie nowego polecenia.

Aby zintegrować polecenie name z kodem rozszerzenia:

  1. W aplikacji VS Code otwórz plik pipet-code-agent/src/extension.ts.
  2. Dodaj do rozszerzenia nowy plik z kodem, dodając nową instrukcję importu. 
    import { generateName } from './name';
  3. Zarejestruj nowe polecenie, dodając poniższy kod do funkcji activate(). 
    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.nameFunction', generateName);
}
  4. Zapisz zmiany w pliku extension.ts.

Aby zintegrować polecenie name z pakietem rozszerzeń:

  1. W aplikacji VS Code otwórz plik pipet-code-agent/package.json.
  2. Dodaj nowe polecenie do sekcji commands pliku pakietu. 
      "contributes": {
    "commands": [
      ...
      {
        "command": "pipet-code-agent.nameFunction",
        "title": "Pipet: Name the selected function."
      }
    ],
  3. Zapisz zmiany w pliku package.json.

Testowanie nowego polecenia

Po zakodowaniu polecenia i integracji z rozszerzeniem możesz je przetestować. Nowe polecenie jest dostępne tylko w oknie VS Code Extension Development Host, a nie w oknie VS Code, w którym edytowano kod rozszerzenia.

Aby przetestować zmodyfikowane polecenie:

  1. W oknie projektu rozszerzenia VS Code Pipet ponownie uruchom debuger, wybierając Uruchom > Ponownie uruchom debugowanie, co spowoduje ponowne uruchomienie osobnego okna Host tworzenia rozszerzeń.
  2. W oknie VS Code Extension Development Host (Host programowania rozszerzenia) wybierz kod w oknie edytora.
  3. Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.
  4. Na palecie poleceń wpisz Pipet i wybierz polecenie Pipet: Nazwij wybraną funkcję.

Dodatkowe materiały

Więcej informacji o projekcie agenta Pipet Code Agent znajdziesz w repozytorium kodu. Jeśli potrzebujesz pomocy w tworzeniu aplikacji lub szukasz współpracowników programistów, zajrzyj na stronę Google Developers Community Discord.

Aplikacje produkcyjne

Jeśli planujesz wdrożyć agenta Dokumentów dla dużej grupy odbiorców, pamiętaj, że korzystanie z interfejsu Google Gemini API może podlegać ograniczeniom liczby żądań i innym ograniczeniom użytkowania. Jeśli zastanawiasz się nad utworzeniem aplikacji produkcyjnej za pomocą interfejsu Gemini API, np. Document Agent, zapoznaj się z usługami Google Cloud Vertex AI, aby zapewnić większą skalowalność i niezawodność aplikacji.