9router/gitbook/content/ja/integration/cline.md
2026-05-11 11:50:24 +07:00

201 lines
6.8 KiB
Markdown

# Cline統合
9RouterをCline VSCode拡張機能と統合し、AIリクエストを9Routerのインテリジェントルーティングシステム経由でルーティングします。
## 前提条件
- Visual Studio Codeがインストール済み
- VSCodeマーケットプレイスからCline拡張機能がインストール済み
- 9Routerがローカルで動作中、またはクラウドエンドポイントが設定済み
- 9RouterダッシュボードからのAPIキー
## セットアップ
### 1. Cline設定を開く
1. Visual Studio Codeを開く
2. Cline拡張機能パネルを開く (サイドバーのClineアイコンをクリック)
3. Clineパネルの **Settings** アイコン (歯車アイコン) をクリック
### 2. APIプロバイダーを選択
1. Cline設定で **API Provider** ドロップダウンを見つける
2. リストから **Ollama** を選択
- 注: OpenAIスタイルAPIと互換性があるためOllamaプロバイダータイプを使用します
### 3. Base URLを設定
Base URLを9Routerエンドポイントに設定:
**ローカル9Router用:**
```
http://localhost:20128/v1
```
**クラウド9Router用:**
```
https://9router.com
```
**手順:**
1. **Base URL** フィールドに9Routerエンドポイントを入力
2. 末尾に `/v1` を必ず含める
### 4. APIキーを追加
1. **API Key** フィールドに9Router APIキーを入力
2. APIキーは9Routerダッシュボードの **Settings → API Keys** で確認できます
3. キーは `sk-9router-` で始まります
### 5. モデルを選択
1. **Model** ドロップダウンで、次のいずれかを実行:
- 利用可能なモデルから選択 (Clineが自動検出した場合)
- 9Router設定からモデル名を手動で入力
2. 一般的なモデル名:
- `gpt-4`
- `gpt-4o`
- `claude-opus-4-5`
- `claude-sonnet-4-5`
- `gemini-2.0-flash`
### 6. 設定を保存
**Save** をクリックするか、設定パネルを閉じます。Clineは設定を自動的に保存します。
## 設定例
Cline設定は次のようになります:
```
API Provider: Ollama
Base URL: http://localhost:20128/v1
API Key: sk-9router-xxxxxxxxxxxxx
Model: gpt-4
```
## 利用可能なモデル
9Routerダッシュボードで設定されたモデルを使用できます。一般的な例:
| モデル名 | プロバイダー | 説明 |
|------------|----------|-------------|
| `gpt-4` | OpenAI | GPT-4 Turbo |
| `gpt-4o` | OpenAI | GPT-4 Optimized |
| `claude-opus-4-5` | Anthropic | Claude Opus 4.5 |
| `claude-sonnet-4-5` | Anthropic | Claude Sonnet 4.5 |
| `gemini-2.0-flash` | Google | Gemini 2.0 Flash |
## 使用法
### AIとチャット
1. VSCodeでClineパネルを開く
2. チャット入力にメッセージを入力
3. Enterを押して送信
4. Clineは9Routerを使用してリクエストを処理
### コード生成
1. Clineにコード生成を依頼: 「Create a React component for a login form」
2. Clineは9Routerを使用してコードを生成
3. 生成されたコードを確認して受け入れる
### コード説明
1. エディタでコードを選択
2. Clineに質問: 「Explain this code」
3. 9Router経由でAIによる説明を取得
### ファイル操作
1. Clineにファイルの作成、変更、削除を依頼
2. Clineは9Routerを使用してコンテキストを理解し変更を加える
3. 受け入れる前に変更を確認
## トラブルシューティング
### 「Connection Failed」エラー
1. 9Routerが動作中か確認: `curl http://localhost:20128/health`
2. Base URLが正しく、`/v1` を含むことを確認
3. ファイアウォールがポート20128をブロックしていないか確認
4. VSCodeを再起動してみる
### 「Invalid API Key」エラー
1. 9RouterダッシュボードでAPIキーを確認
2. `sk-9router-` プレフィックスを含むキー全体をコピーしたか確認
3. APIキーが期限切れでないか確認
4. 新しいAPIキーを再生成してみる
### 「Model Not Found」エラー
1. モデル名が9Router設定と正確に一致するか確認
2. 9Routerダッシュボードでプロバイダー接続がアクティブか確認
3. 接続されたプロバイダーでモデルが利用可能か確認
4. フルモデル名を使用してみる (例: `gpt-4` の代わりに `openai/gpt-4`)
### Clineが応答しない
1. エラーメッセージについてCline出力パネルを確認
2. 9Routerインスタンスが動作中で正常か確認
3. VSCodeウィンドウをリロードしてみる (Cmd/Ctrl + Shift + P → 「Reload Window」)
4. エラーについて9Routerログを確認
## 高度な設定
### クラウドエンドポイントを使用
localhostの代わりに9Routerクラウドエンドポイントを使用:
1. Cline設定で、Base URLを設定: `https://9router.com`
2. 9RouterクラウドダッシュボードでAPIキーが設定されていることを確認
3. クラウドエンドポイントがアクティブでアクセス可能か確認
### 複数のモデル
モデルをすばやく切り替えることができます:
1. Cline設定を開く
2. **Model** フィールドを別のモデルに変更
3. 保存して新しいモデルでチャットを続行
### カスタムタイムアウト
大きなリクエストでタイムアウトの問題が発生した場合:
1. VSCode設定を開く (Cmd/Ctrl + ,)
2. 「Cline timeout」を検索
3. タイムアウト値を増やす (デフォルトは通常30秒)
## ベストプラクティス
1. **適切なモデルを使用**: シンプルなタスクには高速モデル (HaikuやFlash) を、複雑なタスクには強力なモデル (OpusやGPT-4) を選択
2. **使用量をモニター**: 9Routerダッシュボードで使用統計とコストを確認
3. **コンテキスト管理**: トークン使用量を減らすため、会話を焦点を絞ったものに保つ
4. **モデル切替**: タスクの複雑さに基づいてモデルを切り替え、コストとパフォーマンスを最適化
5. **APIキーセキュリティ**: APIキーをバージョン管理にコミットしない
## 9Router機能との統合
### モデルルーティング
9Routerは以下に基づいて最適な利用可能なプロバイダーにリクエストを自動的にルーティング:
- モデル可用性
- プロバイダーヘルスステータス
- コスト最適化
- ロードバランシング
### フォールバックサポート
プロバイダーが失敗した場合、9Routerは自動的にダッシュボードで設定された代替プロバイダーにフォールバックします。
### 使用量トラッキング
9Routerダッシュボード経由でCline使用量をモニター:
- 総リクエスト数
- トークン使用量
- モデルごとのコスト
- プロバイダー分布