Tworzenie asystenta kodu AI z agentem Pipet Code

Pisanie kodu może być satysfakcjonujące i satysfakcjonujące, ale praca dla współpracowników przedstawioną jest często pracą. Sztuczne modele generatywne mogą pomóc Ci dodawać komentarze do kodu, popełniać błędy przed weryfikatorami i wykonywać inne zadania, i ułatwiają kodowanie.

W tym samouczku pokazujemy, Agent Pipet Code, oparte na AI narzędzie pomocy w kodowaniu opracowane przez zespół AI Developer Relations w firmie Google. Ten projekt open source jest rozszerzeniem Microsoft Visual Studio kod (VS Code), który ułatwia wykonywanie czynności zajmuje się ważnymi zadaniami dotyczącymi kodowania, takimi jak komentowanie w tworzeniu kodu, znajdowaniu błędów i sugerowaniu ulepszeń. Rozszerzenie wysyła żądań pomocy w kodowaniu do Gemini API i uwzględnia odpowiedzi w oknie edycji kodu.

Możesz zmodyfikować Pipet aby poprawić działanie istniejących funkcji, lub utworzyć nowe polecenia ułatwiają proces programowania.

Filmowe omówienie projektu i sposobów jego rozszerzenia, w tym statystyki od twórców gry, AI Code Assistant – Build with Google AI (Asystent tworzenia kodu oparty na AI od Google). W przeciwnym razie możesz rozpocząć przedłużanie projektu, postępując zgodnie z instrukcjami. poniżej.

Konfigurowanie projektu

Te instrukcje przeprowadzą Cię przez konfigurację projektu agenta Pipet Code do programowania i testowania. Ogólne czynności wymagają instalacji pewnych wymagań wstępnych w oprogramowaniu, ustawić kilka zmiennych środowiskowych i skopiować projekt z kodu i uruchomić instalację konfiguracji.

Zainstaluj wymagania wstępne

Projekt agenta Pipet Code działa jako rozszerzenie Microsoft Visual Studio Code oraz Node.js i narzędzie npm do zarządzania i uruchomić aplikację. Poniższe instrukcje instalacji są dla hosta z systemem Linux.

Aby zainstalować wymagane oprogramowanie:

  1. Instalowanie kodu Visual Studio dla Twojej platformy.
  2. Zainstaluj node i npm, postępując zgodnie z instalacją odpowiednią dla Twojej platformy.

Klonowanie i konfigurowanie projektu

Pobierz kod projektu i użyj polecenia instalacyjnego npm, aby go pobrać określić wymagane zależności i skonfigurować projekt. Potrzebujesz oprogramowanie sterujące źródłem git do pobierania. do kodu źródłowego projektu.

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 możesz skonfigurować lokalne repozytorium Git tak, aby używało rozproszonego procesu płatności, więc masz tylko pliki związane z projektem Agent 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 agenta Pipet Code jako rozszerzenie programistyczne w VS Code na urządzeniu. Test otwiera osobną stronę VS Okno Host tworzenia rozszerzenia, w którym dostępne jest nowe rozszerzenie. W nowym oknie skonfigurujesz klucz interfejsu API, za pomocą którego rozszerzenie uzyska dostęp do Google Gemini API.

Agent Pipet Code uruchomiony w oknie Extension Development Host (Host tworzenia rozszerzeń) Rysunek 1. Okno VS Code Extension Development Host z systemem Pipet z rozszerzeniami.

Aby skonfigurować i przetestować konfigurację:

  1. Uruchom aplikację VS Code.
  2. W VS Code utwórz nowe okno, wybierając File > (Plik >) Nowe okno.
  3. Otwórz projekt agenta Pipet Code, wybierając File (Plik) > Otwórz folder, i wybierając folder pipet-code-agent/.
  4. Otwórz plik pipet-code-agent/package.json.
  5. Uruchom rozszerzenie w trybie debugowania, wybierając Uruchom > Rozpocznij debugowanie. Ten krok otwiera osobne okno Host tworzenia rozszerzeń VS Code.
  6. Otwórz ustawienia VS Code, wybierając Kod > Ustawienia > Ustawienia.
  7. Pobierz klucz interfejsu Google Gemini API ze strony witrynę dla deweloperów generatywnej AI, a następnie skopiuj ciąg znaków.
  8. Ustaw klucz interfejsu API jako ustawienie konfiguracji. W Ustawieniach wyszukiwania wpisz pipet, wybierz kartę Użytkownik i w polu Google > Gemini: Klucz interfejsu API, kliknij link Edytuj w pliku settings.json i dodaj Klucz interfejsu Gemini API: 
    "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 Extension Development Host (Host tworzenia rozszerzeń) VS Code 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ń tego prefiksu.

Zmodyfikuj istniejące polecenie

Zmodyfikowanie poleceń dostępnych w agencie kodu Pipet jest najprostszym sposobem zmienić działanie i funkcje rozszerzenia. Zarówno komentarz, jak i poleceń opinii używa prompt krótkoterminowy wraz z przykładami kodu i komentarzami dotyczącymi tego kodu, a także ogólne instrukcje dotyczące generatywnego modelu AI. Kontekst tego promptu które wspomagają generatywny model Gemini przy tworzeniu odpowiedzi. Według zmieniając instrukcje i przykłady promptów albo zarówno w komentarzu, jak i przeglądania poleceń, możesz zmienić sposób działania każdego z nich.

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

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

  1. Uruchom aplikację VS Code.
  2. W VS Code utwórz nowe okno, wybierając File > (Plik >) Nowe okno.
  3. Otwórz projekt agenta Pipet Code, wybierając File (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 instrukcji PROMPT od różnych instrukcji. 
    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 pola z listą przykładów kodu i 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 uruchom ponownie debugera do wybierając Uruchom > Ponownie uruchom debugowanie.
  2. W oknie Extension Development Host (Host tworzenia rozszerzeń) VS Code wybierz dowolny kod. w oknie edytora.
  3. Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.
  4. Na palecie poleceń wpisz Pipet i wybierz Pipet: Review the wybranego kodu.

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 przeważnie są niezależne i zawierają kod do zbierania tekstu z aktywnego edytora, tworzenia promptu, łączenia się z interfejsem Gemini API, wysyłania promptu i obsługi odpowiedź.

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

Ten zestaw instrukcji wyjaśnia, jak utworzyć nowe polecenie przy użyciu kodu z 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 VS Code otwórz plik src/name.ts.
  3. Zmień instrukcje dotyczące promptów w pliku name.ts o edytuje 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 promptów tak, aby zawierał tylko 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.

Integracja nowego polecenia

Po zakończeniu kodu nowego polecenia musisz zintegrować je z reszty rozszerzenia. Zaktualizuj pliki extension.ts i package.json do ustaw nowe polecenie jako część rozszerzenia i włącz funkcję VS Code do wywoływania nowego polecenia.

Aby zintegrować polecenie name z kodem rozszerzenia:

  1. W VS Code otwórz plik pipet-code-agent/src/extension.ts.
  2. Dodaj do rozszerzenia nowy plik z kodem, importując dane . 
    import { generateName } from './name';
  3. Zarejestruj nowe polecenie, dodając ten kod do pola 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 VS Code otwórz plik pipet-code-agent/package.json.
  2. Dodaj nowe polecenie do sekcji commands pakietu . 
      "contributes": {
    "commands": [
      ...
      {
        "command": "pipet-code-agent.nameFunction",
        "title": "Pipet: Name the selected function."
      }
    ],
  3. Zapisz zmiany w pliku package.json.

Przetestuj nowe polecenie

Po zakodowaniu polecenia i zintegrowaniu go z możesz je przetestować. Nowe polecenie jest dostępne tylko w kodzie VS Extension Development Host (Host tworzenia rozszerzeń), a nie w oknie VS Code, edytował(a) kod rozszerzenia.

Aby przetestować zmodyfikowane polecenie:

  1. W oknie projektu rozszerzenia VS Code Pipet uruchom ponownie debugera do wybierając Uruchom > Ponownie uruchom debugowanie, co spowoduje uruchomienie osobnego Okno Extension Development Host (Host tworzenia rozszerzeń).
  2. W oknie Extension Development Host (Host tworzenia rozszerzeń) przez VS Code wybierz kod. w oknie edytora.
  3. Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.
  4. Na palecie poleceń wpisz Pipet i wybierz Pipet: Name the wybranej funkcji.

Dodatkowe materiały

Więcej informacji o projekcie agenta Pipet Code znajdziesz w repozytorium kodu. Jeśli potrzebujesz pomocy przy tworzeniu aplikacji lub szukasz programisty współpracowników, zapoznaj się z Społeczność Google Developers na Discordzie serwera.

Aplikacje produkcyjne

Jeśli planujesz wdrożyć agenta Dokumentów dla dużej grupy odbiorców, pamiętaj, że wykorzystanie interfejs Google Gemini API może podlegać ograniczeniom liczby żądań, ograniczeniach korzystania. Jeśli rozważasz utworzenie aplikacji produkcyjnej z użyciem interfejsu Gemini API, takiej jak Agent Dokumentów, zapoznaj się Vertex AI Google Cloud usług zwiększających skalowalność i niezawodność aplikacji.