새로운 Gemini API 설명서와 커뮤니티 포럼을 확인하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Pipet Code Agent로 AI 코드 어시스턴트 빌드

코드를 작성하는 것은 보람과 만족을 모두 줄 수 있지만 코드가 동료에게 작동하는 것에서 발표 가능으로 바뀌는 일은 종종 까다로울 수 있습니다. 인공지능 생성 모델을 사용하면 코드 주석을 추가하고, 검토자보다 먼저 실수를 찾아내고, 기타 여러 작업을 수행하여 코딩 워크플로를 더 쉽게 만들 수 있습니다.

이 가이드에서는 Google의 AI 개발자 관계팀이 빌드한 AI 기반 코드 지원 도구인 Pipet 코드 에이전트를 확장하는 방법을 보여줍니다. 이 오픈소스 프로젝트는 Microsoft Visual Studio Code (VS Code)의 확장 프로그램으로, 코드에 주석 달기, 실수 찾기, 개선사항 제안과 같이 중요하지만 덜 재미있는 코딩 작업을 처리하는 데 도움이 됩니다. 확장 프로그램은 Gemini API에 코딩 지원 요청을 전송하고 코드 수정 창에 응답을 통합합니다.

Pipet을 수정하여 이러한 기존 함수가 더 잘 작동하도록 하거나 새로운 명령어를 빌드하여 개발 워크플로를 더 효과적으로 지원할 수 있습니다.

AI Code Assistant - Build with Google AI(AI Code Assistant - Google AI로 빌드)에서 프로젝트 및 프로젝트 확장 방법에 관한 동영상 개요와 프로젝트 전문가들의 유용한 정보를 확인하세요. 그렇지 않은 경우 아래 안내에 따라 프로젝트 확장을 시작할 수 있습니다.

프로젝트 설정

이 안내는 개발 및 테스트를 위해 Pipet 코드 에이전트 프로젝트를 설정하는 방법을 안내합니다. 일반적인 단계는 사전 필수 소프트웨어를 설치하고, 몇 가지 환경 변수를 설정하고, 코드 저장소에서 프로젝트를 클론하고, 구성 설치를 실행하는 것입니다.

기본 요건 설치

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
```

확장 프로그램 구성 및 테스트

이제 기기의 VS Code에서 Pipet Code Agent를 개발 확장 프로그램으로 실행하여 설치를 테스트할 수 있습니다. 테스트를 실행하면 새 확장 프로그램이 제공되는 별도의 VS Code Extension Development Host 창이 열립니다. 새 창에서 확장 프로그램이 Google Gemini API에 액세스하는 데 사용하는 API 키를 구성합니다.

확장 프로그램 개발 호스트 창에서 실행 중인 Pipet 코드 에이전트 그림 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 파일을 엽니다.
실행 > 디버깅 시작을 선택하여 디버그 모드로 확장 프로그램을 실행합니다. 이 단계에서는 별도의 VS Code Extension Development Host 창이 열립니다.
Code > Settings > Settings를 선택하여 VS Code 설정을 엽니다.
생성형 AI 개발자 사이트에서 Google Gemini API 키를 가져오고 키 문자열을 복사합니다.
API 키를 구성 설정으로 지정합니다. Search Settings(검색 설정) 필드에 pipet를 입력하고 User(사용자) 탭을 선택한 후 Google > Gemini: Api Key(Google > Gemini: API 키) 설정에서 Edit in settings.json(settings.json에서 수정) 링크를 클릭하고 Gemini API 키를 추가합니다.
```
"google.gemini.apiKey": "your-api-key-here"
```
변경사항을 settings.json 파일에 저장하고 설정 탭을 닫습니다.

확장 프로그램 명령어를 테스트하려면 다음 안내를 따르세요.

VS Code Extension Development Host 창의 편집기 창에서 코드를 선택합니다.
View(보기) > Command Palette(명령 팔레트)를 선택하여 명령어 팔레트를 엽니다.
명령어 팔레트에 Pipet를 입력하고 이 프리픽스가 있는 명령어 중 하나를 선택합니다.

기존 명령어 수정

Pipet 코드 에이전트에 제공된 명령어를 수정하는 것은 확장 프로그램의 동작과 기능을 변경하는 가장 간단한 방법입니다. 의견 및 리뷰 명령어는 모두 해당 코드의 코드 및 주석 예시와 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(명령 팔레트)를 선택하여 명령어 팔레트를 엽니다.
명령어 팔레트에서 Pipet를 입력하고 Pipet: 선택된 코드 검토 명령어를 선택합니다.

새 명령어 만들기

Gemini API로 완전히 새로운 작업을 실행하는 새로운 명령어를 만들어 Pipet을 확장할 수 있습니다. 각 명령어 파일 (comment.ts 및 review.ts)은 대부분 독립적이며 활성 편집기에서 텍스트를 수집하고, 프롬프트를 작성하고, Gemini API에 연결하고, 프롬프트를 보내고, 응답을 처리하는 코드가 포함되어 있습니다.

이름 선택 함수가 표시된 Pipet 코드 에이전트 그림 2. VS Code 확장 프로그램 개발 호스트 창의 새 함수 이름 추천 명령어

이 안내에서는 기존 명령어 코드 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 창에서는 사용할 수 없습니다.

수정된 명령어를 테스트하려면 다음 안내를 따르세요.

VS Code Pipet 확장 프로그램 프로젝트 창에서 Run > Restart debugging을 선택하여 디버거를 다시 시작합니다. 그러면 별도의 Extension Development Host 창이 다시 시작됩니다.
VS Code Extension Development Host 창의 편집기 창에서 일부 코드를 선택합니다.
View(보기) > Command Palette(명령 팔레트)를 선택하여 명령어 팔레트를 엽니다.
명령어 팔레트에서 Pipet를 입력하고 Pipet: Name the selected function(선택한 함수 이름 지정) 명령어를 선택합니다.

추가 리소스

Pipet 코드 에이전트 프로젝트에 대한 자세한 내용은 코드 저장소를 참조하세요. 애플리케이션을 빌드하는 데 도움이 필요하거나 개발자 공동작업자를 찾고 있다면 Google Developers Community Discord 서버를 확인하세요.

프로덕션 애플리케이션

대규모 사용자를 대상으로 Docs 에이전트를 배포하려는 경우 Google Gemini API 사용에 비율 제한 및 기타 사용 제한이 적용될 수 있습니다. Docs 에이전트와 같은 Gemini API로 프로덕션 애플리케이션을 빌드하려는 경우 Google Cloud Vertex AI 서비스를 확인하여 앱의 확장성과 안정성을 높이세요.