有興趣看看全新的 Gemini API 教戰手冊和我們的社群論壇。

本頁面由 Cloud Translation API 翻譯而成。

透過 Pipet Code 代理程式建構 AI 程式設計助理

編寫程式碼既實用又滿足，但讓同事的「工作」到「可呈現」程式碼都很常見。人工智慧生成式模型可協助您新增程式碼註解、在人工審查員之前找出錯誤，並執行一系列其他工作，讓程式設計工作流程變得更加輕鬆。

本教學課程說明如何擴充 Pipet Code Agent，這是由 Google 的 AI 開發人員關係團隊建構的 AI 技術輔助程式碼輔助工具。這個開放原始碼專案是 Microsoft Visual Studio Code (VS Code) 的擴充功能，可協助您處理一些較不有趣的程式設計工作，例如為程式碼加上註解、找出錯誤及提出改善建議。這項擴充功能會將程式碼協助要求傳送至 Gemini API，並將回覆內容整合至程式碼編輯視窗。

您可以修改 Pipet，讓這些現有的函式更臻完善，或建構新指令，進一步支援您的開發工作流程。

如需專案簡介影片並瞭解如何延伸，包括建構程式開發人員的深入分析，請查看 AI Code Assistant - Build with Google AI。否則，您可以按照下列操作說明開始擴充專案。

專案設定

這些操作說明會逐步引導您設定 Pipet Code Agent 專案，以便進行開發與測試。一般步驟包括安裝一些必備軟體、設定一些環境變數、從程式碼存放區複製專案，以及執行設定安裝。

安裝必備條件

Pipet Code Agent 專案會以 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
```

設定及測試擴充功能

現在您可以在裝置上將 Pipet Code Agent 做為開發擴充功能執行，藉此測試安裝情形。測試會開啟獨立的 VS Code 的「Extension Development Host」視窗，其中包含新的擴充功能。在這個新視窗中，您將設定擴充功能存取 Google Gemini API 的 API 金鑰。

在「Extension Development Host」視窗中執行的 Pipet Code Agent 圖 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」連結，然後新增 Genmini API 金鑰：
```
"google.gemini.apiKey": "your-api-key-here"
```
儲存 settings.json 檔案的變更，並關閉設定分頁。

如何測試擴充功能指令：

在 VS Code 的「Extension Development Host」視窗中，選取編輯器視窗中的任何程式碼。
依序選取「View」>「Command Palette」，開啟指令區塊面板。
在「Command Palette」(指令面板) 中輸入 Pipet，然後選取含有該前置字串的其中一個指令。

修改現有指令

如要變更擴充功能的行為和功能，最簡單的方法就是修改 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」視窗中，選取編輯器視窗中的任何程式碼。
依序選取「View」>「Command Palette」，開啟指令區塊面板。
在「Command Palette」(指令面板) 中輸入 Pipet，然後選取「Pipet: Review the selected code」指令。

建立新指令

您可以建立新的指令，利用 Gemini API 執行全新工作，藉此擴充 Pipet。每個指令檔案 (comment.ts 和 review.ts) 大多獨立，且包含會從使用中的編輯器收集文字、撰寫提示、連結至 Gemini API、傳送提示及處理回應的程式碼。

含有「Name」選項名稱的 Pipet Code 代理程式 圖 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 { 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 視窗中使用。

如要測試修改後的指令：

在 VS Code Pipet 擴充功能專案視窗中，依序選取「Run」>「Restart Debugging」，重新啟動偵錯工具；系統會重新啟動另一個「Extension Development Host」視窗。
在 VS Code 的「Extension Development Host」視窗中，在編輯器視窗中選取一些程式碼。
依序選取「View」>「Command Palette」，開啟指令區塊面板。
在「Command Palette」(指令面板) 中輸入 Pipet，然後選取「Pipet: Name the selected function」(選擇函式名稱) 指令。

其他資源

如要進一步瞭解 Pipet Code Agent 專案，請參閱程式碼存放區。如果您在建構應用程式時需要協助，或尋找開發人員協作夥伴，請前往 Google Developers Community Discord 伺服器。

正式版應用程式

如果您打算為大量目標對象部署文件代理程式，請注意使用 Google Gemini API 時可能會受到頻率限制和其他使用限制的規範。如果您考慮使用 Gemini API (例如文件代理程式) 建構正式版應用程式，請查看 Google Cloud Vertex AI 服務，以提高應用程式的擴充性和可靠性。