VSCodeでClineとwatsonx.aiを連携してAIコーディングを始める方法

## はじめに

VSCodeでAIペアプログラミングを始めたいけれど、企業環境でセキュアにAIを活用したい―そんなニーズにお応えするのが、ClineとwatsonxAIの連携です。

この記事では、VSCode拡張機能のClineを使って、IBMのエンタープライズAIプラットフォームwatsonx.aiのモデルと対話しながらコーディングする環境の構築方法を解説します。

**この記事で実現できること:**
- VSCode内でwatsonx.aiのAIモデルと対話
- セキュアな企業環境でのAIコーディング支援
- 複数のAIモデル（Granite、Llama、Mistral）の使い分け

**必要な技術要素:**
- **Cline**: VSCode内でAIとペアプログラミングができる拡張機能
- **LiteLLM**: 様々なLLMプロバイダーを統一APIで利用できるプロキシサーバー
- **watsonx.ai**: IBMのエンタープライズ向けAIプラットフォーム

## 構成図

今回構築する環境の構成は以下のようになります：

```
VSCode (Cline拡張) → LiteLLM (Docker) → watsonx.ai
```

LiteLLMがプロキシとして動作し、Clineからのリクエストをwatsonx.aiに転送します。これにより、Clineは標準的なOpenAI互換APIを使用しながら、watsonx.aiのモデルを利用できます。

## 前提条件

以下の環境が整っていることを前提とします：

- VSCodeがインストール済み
- [Cline拡張機能](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev)がインストール済み
- Dockerが利用可能
- watsonx.aiのアカウントとプロジェクトが利用可能

:::note info
watsonx.aiのアカウントをお持ちでない場合は、[IBM watsonx.ai](https://www.ibm.com/jp-ja/watsonx/ai)から無料トライアルを申し込めます。
:::

## STEP1: watsonx.ai環境情報の確認

### 必要な認証情報

watsonx.aiを利用するために、以下3つの情報を取得します：

| 項目 | 説明 | 取得方法 |
|------|------|----------|
| プロジェクトID | watsonx.aiプロジェクトの識別子 | プロジェクト管理画面から確認 |
| watsonx URL | watsonx.aiのエンドポイントURL | 同上 |
| APIキー | 認証用のAPIキー | IBM Cloud IAMで作成 |

### 情報の取得手順

**1. プロジェクトIDとwatsonx URLの確認**

watsonx.aiのプロジェクト管理画面から、以下の情報を確認します：

![watsonx.ai管理画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302134/9ea2bd41-b392-4552-a0fd-8461a32f3809.png)


**2. APIキーの作成**

「APIキーの作成」ボタンをクリックしてAPIキーを生成します：

![APIキー作成画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302134/9f803508-d3b6-4db6-990f-eee493a7e768.png)

:::note warn
APIキーは一度しか表示されないため、必ず安全な場所に保存してください。
:::

## STEP2: LiteLLMの設定と起動

### 2-1. 環境変数ファイルの準備

プロジェクトのルートディレクトリに`.env`ファイルを作成し、watsonx.aiの接続情報を設定します：

```bash
# LiteLLM認証キー（任意の文字列、セキュアなものを推奨）
# 以下のコマンドでランダム生成可能:
# openssl rand -base64 32 | tr -dc 'A-Za-z0-9' | head -c 32
LITELLM_MASTER_KEY=your-secure-random-key

# watsonx.ai接続情報（STEP1で取得した値を設定）
WATSONX_API_KEY=your-WATSONX_API_KEY
WATSONX_PROJECT_ID=your-WATSONX_PROJECT_ID
WATSONX_URL=your-WATSONX_URL
```

### 2-2. モデル設定ファイルの作成

`config.yaml`ファイルを作成し、使用するAIモデルを定義します：

```yaml
model_list:
  # IBM Granite - 軽量で高速、日常的なコーディング作業に最適
  - model_name: granite-instruct
    litellm_params:
      model: watsonx/ibm/granite-3-8b-instruct
      api_key: os.environ/WATSONX_API_KEY
      url: os.environ/WATSONX_URL
      project_id: os.environ/WATSONX_PROJECT_ID
      
  # Meta Llama - 高性能、複雑なロジックや詳細な説明が必要な場合
  - model_name: llama-3-3
    litellm_params:
      model: watsonx/meta-llama/llama-3-3-70b-instruct
      api_key: os.environ/WATSONX_API_KEY
      url: os.environ/WATSONX_URL
      project_id: os.environ/WATSONX_PROJECT_ID
      
  # Mistral Large - 多言語対応、国際的なプロジェクトに適している
  - model_name: mistral-large
    litellm_params:
      model: watsonx/mistralai/mistral-large
      api_key: os.environ/WATSONX_API_KEY
      url: os.environ/WATSONX_URL
      project_id: os.environ/WATSONX_PROJECT_ID
```

### 2-3. LiteLLMコンテナの起動

以下のコマンドでLiteLLMをDockerコンテナとして起動します：

```bash
docker run \
  --env-file .env \
  -v $(pwd)/config.yaml:/app/config.yaml \
  -p 127.0.0.1:4000:4000 \
  ghcr.io/berriai/litellm:main-latest \
  --config /app/config.yaml --detailed_debug
```

正常に起動すると、`http://localhost:4000`でLiteLLMサーバーにアクセスできます。

:::note info
`--detailed_debug`オプションにより、接続エラー時の詳細なログが出力されます。本番環境では外すことを推奨します。
:::

## STEP3: Clineの設定

### API設定の手順

**1. Cline設定画面を開く**
VSCodeでClineを開き、右上の歯車アイコン（設定）をクリックします。

**2. API Configuration設定**
Settings > API Configurationを選択し、以下を設定します：

| 設定項目 | 設定値 | 説明 |
|----------|--------|------|
| **API Provider** | LiteLLM | プロバイダーとしてLiteLLMを選択 |
| **Base URL** | `http://localhost:4000` | LiteLLMサーバーのエンドポイント |
| **API Key** | `.env`の`LITELLM_MASTER_KEY`の値 | LiteLLM認証用キー |
| **Model ID** | `granite-instruct` | 使用するモデル名（config.yamlで定義した値） |

![Cline API設定画面1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302134/26be6cd5-57f2-4ad1-a259-ced8d3099bf4.png)

**3. 接続テスト**
設定完了後、Clineで「Hello」など簡単なメッセージを送信し、watsonx.aiからの応答があることを確認してください。

![Cline API設定画面2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302134/80bd944b-7ff9-4870-8184-9388178457ac.png)

## STEP4: 使用開始とトラブルシューティング

### 基本的な使い方

設定が完了したら、以下のような作業をAIと協力して進められます：

- **コード生成**: 「Pythonでクイックソートを実装して」
- **リファクタリング**: 「この関数をより読みやすくリファクタリングして」
- **デバッグ支援**: 「このエラーの原因と修正方法を教えて」
- **レビュー**: 「このコードの問題点を指摘して」

### よくある問題と解決方法

**問題1: LiteLLMサーバーに接続できない**
```bash
# LiteLLMサーバーの状態確認
curl http://localhost:4000/health
```

**問題2: watsonx.ai認証エラー**
- `.env`ファイルの認証情報を再確認
- APIキーの有効期限をチェック
- プロジェクトIDが正しいか確認

**問題3: モデルが見つからない**
- `config.yaml`のモデル名と、Clineの設定値が一致するか確認

## まとめ

Clineとwatsonx.aiの連携により、エンタープライズグレードのAIペアプログラミング環境を構築できました。この組み合わせの主なメリットは以下の通りです：

### 🚀 技術的メリット
- **複数モデルの使い分け**: Granite（軽量・高速）、Llama（高性能）、Mistral（多言語）を用途に応じて選択
- **統合開発環境**: VSCode内で完結するワークフロー
- **柔軟な構成**: LiteLLMにより他のプロバイダーへの切り替えも容易

### 🔒 エンタープライズ対応
- **セキュリティ**: オンプレミス・プライベートクラウド対応
- **コンプライアンス**: IBM watsonx.aiの企業向けガバナンス機能
- **スケーラビリティ**: チーム・組織レベルでの展開が可能

### 💡 開発効率向上
- **コード品質向上**: AIによるレビューと改善提案
- **学習加速**: 新しい技術・フレームワークの習得支援
- **時間短縮**: 定型的なコーディング作業の自動化

企業でのAI活用や、セキュアな環境でのコーディングアシスタンスをお求めの方は、ぜひこの構成を試してみてください。

---

**参考リンク:**
- [Cline拡張機能](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev)
- [LiteLLM公式ドキュメント](https://docs.litellm.ai/)
- [IBM watsonx.ai](https://www.ibm.com/jp-ja/watsonx/ai)