VS Code 익스텐션 | git diff 기반 커밋 메시지, PR 설명, 브랜치명, 코드 리뷰 자동 생성 Ollama(로컬) / Claude / OpenAI — 제공자를 UI에서 즉시 전환 가능

gitpilot은 git diff를 읽어 개발 워크플로우에 필요한 문서를 자동으로 생성하는 VS Code 익스텐션입니다. 커밋 메시지 작성, PR 설명, 브랜치 네이밍, 코드 리뷰 같은 반복적인 작업을 AI가 대신하여 개발에만 집중할 수 있도록 합니다.

코드 리뷰, PR 설명 등 긴 응답은 전체 생성을 기다리지 않고 토큰 단위로 즉시 화면에 출력됩니다.

LLM이 토큰 생성
    ↓ yield (AsyncGenerator)
streamLLM()이 토큰마다 반환
    ↓ for await
Webview 패널 즉시 업데이트

내부적으로 AsyncGenerator와 SSE(Server-Sent Events) 스트리밍을 조합해 구현했습니다:

// llm.ts — LLM 응답을 토큰 단위로 yield
async function* streamOllama(...): AsyncGenerator<string> {
  const reader = res.body.getReader()
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    // JSON 청크 파싱 후 즉시 yield
    if (json.message?.content) yield json.message.content
  }
}

// codeReview.ts — 토큰이 올 때마다 패널 갱신
for await (const token of streamLLM(prompt, SYSTEM)) {
  accumulated += token
  panel.webview.html = getBaseHtml(accumulated) // 토큰마다 화면 업데이트
}

Ollama, Claude, OpenAI 모두 동일한 AsyncGenerator 인터페이스로 추상화되어 제공자가 달라도 스트리밍 로직은 동일하게 작동합니다.

주의: Claude Pro(claude.ai 월 구독)와 Anthropic API는 별개 서비스입니다. Pro 구독으로는 API를 사용할 수 없으며, console.anthropic.com에서 별도로 크레딧을 충전해야 합니다.

settings.json을 직접 편집하지 않아도 UI에서 즉시 전환할 수 있습니다.

VS Code 좌측 하단 모델명 클릭 (예: ⬡ llama3.2:3b)

Cmd+Shift+P → gitpilot: LLM 제공자 전환

1. 제공자 선택   Ollama (Local) / Claude (Anthropic) / OpenAI (GPT)
        ↓
2. 모델 선택     llama3.2:3b / claude-haiku-4.5 / gpt-4o 등
        ↓
3. API 키 입력   (Claude/OpenAI 사용 시, 제공자 변경마다 재입력)
        ↓
4. settings.json 자동 저장 + StatusBar 즉시 갱신

제공자를 전환할 때마다 API 키 입력창이 표시됩니다. 이전 제공자의 키가 남아 인증 오류가 발생하는 문제를 방지합니다.

LLM 호출 중 오류(Rate Limit, Unauthorized, 연결 실패 등)가 발생하면 알림에 "제공자 변경" 버튼이 함께 표시됩니다.

❌ OpenAI API 요청 한도 초과 (429)   [제공자 변경]

버튼 클릭 시 바로 전환 UI가 열립니다.

# 설치
brew install ollama

# 모델 다운로드 (3b: 가볍고 빠름 / 더 좋은 품질은 7b 이상 권장)
ollama pull llama3.2:3b

# 서버 실행 (VS Code 사용 중 항상 켜두기)
ollama serve

1. console.anthropic.com → API Keys → 키 발급
2. Billing → 크레딧 충전 (Claude Pro 구독과 별개)
3. gitpilot StatusBar 클릭 → Claude 선택 → sk-ant-... 키 입력

1. platform.openai.com → API Keys → 키 발급
2. Billing → 크레딧 충전
3. gitpilot StatusBar 클릭 → OpenAI 선택 → sk-... 키 입력

code --install-extension gitpilot-0.1.3.vsix

VS Code 재시작 후 git 레포가 있는 프로젝트를 열고 Cmd+Shift+P → gitpilot 으로 사용합니다.

UI 대신 settings.json에서 직접 설정도 가능합니다 (Cmd+, → gitpilot 검색):

{
  "gitpilot.llm.provider": "ollama",
  "gitpilot.llm.model": "llama3.2:3b",
  "gitpilot.llm.baseUrl": "http://localhost:11434",
  "gitpilot.llm.apiKey": "",
  "gitpilot.language": "ko"
}

src/
├── extension.ts          # 진입점, 커맨드 등록, StatusBar
├── config.ts             # VS Code 설정 읽기
├── commands/
│   ├── commitMessage.ts  # 커밋 메시지 생성
│   ├── prDescription.ts  # PR 설명 생성 (Webview 패널)
│   ├── branchName.ts     # 브랜치명 제안 (QuickPick)
│   ├── codeReview.ts     # 코드 리뷰 (스트리밍 Webview)
│   └── switchProvider.ts # LLM 제공자/모델 전환 UI (QuickPick 2단계)
├── services/
│   ├── git.ts            # git 추상화 (diff, log, branch)
│   └── llm.ts            # LLM 스트리밍 클라이언트 (Ollama/Claude/OpenAI)
└── utils/
    └── errorHandler.ts   # LLM 오류 시 "제공자 변경" 버튼 알림

Node.js v20 필수 — vsce 패키징 시 v18 이하에서 ReadableStream is not defined 오류 발생

nvm use 20

git clone https://github.com/your-username/gitpilot
cd gitpilot
npm install
npm run build

VS Code에서 프로젝트 열고 F5 → Extension Development Host 실행

nvm use 20
npx @vscode/vsce package --no-dependencies
# gitpilot-0.1.x.vsix 생성