新しい Gemini API クックブックとコミュニティフォーラムをご覧ください。

このページは Cloud Translation API によって翻訳されました。

Pipet Code Agent を使用して AI コードアシスタントを構築する

コードの記述はやりがいがあり、満足感も得られますが、コードが機能するから、同僚に提示できるものにすることは、多くの場合面倒な作業です。人工知能の生成モデルを使用すると、コードコメントを追加したり、人間のレビュアーが行う前に間違いを見つけたり、コーディングワークフローを容易にするさまざまなタスクを実行したりできます。

このチュートリアルでは、Google の AI デベロッパーリレーションズチームが開発した、AI を活用したコード支援ツールである Pipet Code Agent を拡張する方法について説明します。このオープンソースプロジェクトは、Microsoft Visual Studio Code（VS Code）の拡張機能で、コードにコメントする、間違いを見つける、改善を提案するなど、重要ではあるもののあまり楽しくないコーディングタスクに対処するのに役立ちます。この拡張機能は、コーディングサポートリクエストを Gemini API に送信し、その返信内容をコード編集ウィンドウに組み込みます。

これらの既存の関数をより適切に機能するように Pipet を変更することも、開発ワークフローをより適切にサポートするように新しいコマンドを作成することもできます。

プロジェクトの概要と、プロジェクト作成者からの分析情報を含むプロジェクトを拡張する方法については、AI Code Assistant - Build with Google AI をご覧ください。まだ作成していない場合は、次の手順でプロジェクトの拡張を開始できます。

プロジェクトの設定

以下では、Pipet Code Agent プロジェクトを開発とテスト用に設定する手順について説明します。一般的な手順は、前提条件のソフトウェアのインストール、いくつかの環境変数の設定、コードリポジトリからのプロジェクトのクローン作成、構成のインストールの実行です。

前提条件をインストールする

Pipet Code エージェントプロジェクトは、Microsoft Visual Studio Code の拡張機能として実行され、Node.js と npm ツールを使用してパッケージを管理し、アプリケーションを実行します。次のインストール手順は、Linux ホストマシン用です。

必要なソフトウェアをインストールするには:

プラットフォーム用の Visual Studio Code をインストールします。
お使いのプラットフォームのインストール手順に沿って、node と npm をインストールします。

プロジェクトのクローンを作成して構成する

プロジェクトコードをダウンロードし、npm インストールコマンドを使用して必要な依存関係をダウンロードし、プロジェクトを構成します。プロジェクトのソースコードを取得するには、git ソース管理ソフトウェアが必要です。

プロジェクトコードをダウンロードして構成するには:

次のコマンドを使用して、git リポジトリのクローンを作成します。
```
git clone https://github.com/google/generative-ai-docs
```
必要に応じて、スパースチェックアウトを使用するようにローカルの Git リポジトリを構成し、ドキュメントエージェントプロジェクトのファイルのみが含まれるようにします。
```
cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/pipet-code-agent/
```
Pipet Code Agent プロジェクトのルートディレクトリに移動します。
```
cd generative-ai-docs/examples/gemini/node/pipet-code-agent/
```
インストールコマンドを実行して依存関係をダウンロードし、プロジェクトを構成します。
```
npm install
```

拡張機能を構成してテストする

これで、デバイスで VS Code の開発拡張機能として Pipet Code Agent を実行し、インストールをテストできるようになりました。テストでは、新しい拡張機能が利用できる別の VS Code の [Extension Development Host] ウィンドウが開きます。この新しいウィンドウで、拡張機能が Google Gemini API へのアクセスに使用する API キーを設定します。

[Extension Development Host] ウィンドウで実行されている Pipet Code エージェント 図 1. Pipet 拡張機能コマンドが表示された [VS Code Extension Development Host] ウィンドウ。

設定を構成してテストするには:

VS Code アプリケーションを起動します。
VS Code で、[File] > [New Window] を選択して新しいウィンドウを作成します。
[File] > [Open Folder] を選択し、pipet-code-agent/ フォルダを選択して、Pipet Code Agent プロジェクトを開きます。
pipet-code-agent/package.json ファイルを開きます。
[Run] > [Start Debugging] を選択して、デバッグモードで拡張機能を実行します。この手順では、VS Code の [Extension Development Host] ウィンドウが別途開きます。
[Code] > [Settings] > [Settings] を選択し、VS Code の設定を開きます。
生成 AI デベロッパーサイトから Google Gemini API キーを取得し、キー文字列をコピーします。
API キーを構成として設定します。[Search Settings] フィールドに「pipet」と入力し、[User] タブを選択し、[Google] > [Gemini: Api Key] の設定で、[Edit in settings.json] リンクをクリックして、Gemini API キーを追加します。
```
"google.gemini.apiKey": "your-api-key-here"
```
変更を settings.json ファイルに保存して、設定タブを閉じます。

拡張機能コマンドをテストするには:

VS Code の [Extension Development Host] ウィンドウで、エディタウィンドウで任意のコードを選択します。
[表示] > [コマンドパレット] を選択して、コマンドパレットを開きます。
コマンドパレットで「Pipet」と入力し、その接頭辞を持つコマンドを 1 つ選択します。

既存のコマンドを変更する

Pipet Code Agent で提供されるコマンドを変更することは、拡張機能の動作と機能を変更する最も簡単な方法です。コメントコマンドとレビューコマンドはどちらも、少数ショットプロンプトアプローチを使用し、そのコードのサンプルとコメント、AI 生成モデルの一般的な手順を使用します。このプロンプトコンテキスト情報は、Gemini 生成モデルがレスポンスを形成する際の指針となります。コメントコマンドまたはレビューコマンドでプロンプトの手順、例、またはその両方を変更することで、既存の各コマンドの動作を変更できます。

この手順では、review.ts コマンドのプロンプトテキストを変更して、コマンドを変更する方法について説明します。

review.ts コマンドの編集を準備するには:

VS Code アプリケーションを起動します。
VS Code で、[File] > [New Window] を選択して新しいウィンドウを作成します。
[File] > [Open Folder] を選択し、pipet-code-agent/ フォルダを選択して、Pipet Code Agent プロジェクトを開きます。
pipet-code-agent/src/review.ts ファイルを開きます。

review.ts コマンドの動作を変更するには:

review.ts ファイルで、PROMPT 定数の先頭を別の命令に変更します。

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}
...

必要に応じて、review.ts ファイルで、コードとコードレビューの例のリストに別の例を追加します。

...
${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.
';

変更を review.ts ファイルに保存します。

変更したコマンドをテストするには:

VS Code Pipet 拡張機能プロジェクトウィンドウで、[Run] > [Restart Debugging] を選択してデバッガを再起動します。
VS Code の [Extension Development Host] ウィンドウで、エディタウィンドウで任意のコードを選択します。
[表示] > [コマンドパレット] を選択して、コマンドパレットを開きます。
コマンドパレットで「Pipet」と入力し、[Pipet: Review the selected code] コマンドを選択します。

新しいコマンドを作成

Gemini API を使用して、まったく新しいタスクを実行する新しいコマンドを作成することで、Pipet を拡張できます。各コマンドファイル（comment.ts と review.ts）はほとんどが自己完結型であり、アクティブなエディタからのテキストの収集、プロンプトの作成、Gemini API への接続、プロンプトの送信、レスポンスの処理を行うコードが含まれています。

名前選択関数が表示されたピペットコードエージェント 図 2. VS Code Extension Development Host ウィンドウの新しい関数名の推奨コマンド

この手順では、既存のコマンド comment.ts のコードをテンプレートとして使用し、新しいコマンドを作成する方法について説明します。

関数名の候補を表示するコマンドを作成するには:

src/ ディレクトリに name.ts という pipet-code-agent/src/comment.ts ファイルのコピーを作成します。
VS Code で src/name.ts ファイルを開きます。

PROMPT の値を編集して、name.ts ファイルのプロンプト手順を変更します。

// Provide instructions for the AI generative model
const PROMPT = `Recommend a name for this function. Explain your
reasoning in 3 sentences or less:`;

コマンド関数の名前と情報メッセージを変更します。

export async function generateName() {
  vscode.window.showInformationMessage('Generating function name...');

PROMPT 値とエディタで選択されたテキストのみが含まれるように、プロンプトのアセンブリコードを更新します。
```
  // Build the full prompt using the template.
  const fullPrompt = `${PROMPT}
"
${selectedCode}
"
`;
```

レスポンスの出力を変更して、何が生成されているかを説明します。

    // update prefix to describe output
    let commentIntro = padding + commentPrefix + "Recommended name: (generated)\n";
    editBuilder.insert(selection.start, commentIntro);
    editBuilder.insert(selection.start, pyComment);

変更を review.ts ファイルに保存します。

新しいコマンドを統合する

新しいコマンドのコードが完了したら、拡張機能の他の部分と統合する必要があります。extension.ts ファイルと package.json ファイルを更新して、新しいコマンドを拡張機能の一部にして、VS Code が新しいコマンドを呼び出せるようにします。

name コマンドを拡張機能コードと統合するには:

VS Code で pipet-code-agent/src/extension.ts ファイルを開きます。
新しい import ステートメントを追加して、新しいコードファイルを拡張機能に追加します。
```
import { generateName } from './name';
```

次のコードを activate() 関数に追加して、新しいコマンドを登録します。

export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.nameFunction', generateName);
}

変更を extension.ts ファイルに保存します。

name コマンドを拡張機能パッケージと統合するには:

VS Code で pipet-code-agent/package.json ファイルを開きます。

新しいコマンドをパッケージファイルの commands セクションに追加します。

  "contributes": {
    "commands": [
      ...
      {
        "command": "pipet-code-agent.nameFunction",
        "title": "Pipet: Name the selected function."
      }
    ],

変更を package.json ファイルに保存します。

新しいコマンドをテストする

コマンドのコーディングと拡張機能との統合が完了したら、コマンドをテストできます。新しいコマンドは、VS Code の [Extension Development Host] ウィンドウでのみ使用でき、拡張機能のコードを編集した VS Code ウィンドウでは使用できません。