Zenn
🍒

🚀 VS Code拡張機能「Cline」でVertex AI と Claude をもっと便利に使う方法 🤖

に公開
Google Cloud
Cline
tech

はじめに

どもども！LLM（大規模言語モデル）がますます身近になってきましたね！僕も色々なモデルを試しては、その進化に日々驚かされています😂

さて、今回は「VS Code上でサクッとClaude APIを使いたいんや！」という方に加え、「開発サポートAIエージェント『Cline』からVertex AI上のClaudeをスマートに使いたい！」という熱いご要望にお応えして、VS Code拡張機能「Cline」とGoogle CloudのVertex AIを連携させ、Anthropic社の強力なClaudeモデルを利用する具体的な方法をお届けします。

**「Cline」**は、単なるコード生成ツールを超えた、VS Code向けのオープンソースAIコーディングアシスタントです。ファイルやフォルダの操作、ターミナルコマンドの実行、コード分析、デバッグ支援までこなし、まるでAIとペアプログラミングしているかのような体験を提供してくれます。特に、AIが実行前に計画を提示し、ユーザーと対話しながら作業を進める協調的なアプローチが魅力です。

この記事では、VS Code拡張機能「Cline」のセットアップから、Vertex AI経由でAnthropicのClaudeモデルを利用する手順、そして「これええやん！」と感じた便利なポイントまで、詳しく解説していきますね！

🎯 今回のゴール：VS Code拡張機能「Cline」でClaudeとスムーズに連携！

最終的には、こんな感じでVS Codeと「Cline」拡張機能の中で、Vertex AI上のClaudeモデルとのやり取りが完結するイメージです。

  1. VS Codeに「Cline」拡張機能をインストール＆初期設定
  2. 「Cline」の設定画面で、APIプロバイダーとして「GCP Vertex AI」を選択し、必要な情報を入力
  3. 「Cline」のチャットインターフェースやコマンドを通じて、Claudeにリクエストを送信
  4. 「Cline」のインターフェース内にClaudeからの応答が表示され、開発作業に活用！
[VS Code Window with Cline Extension]
+-----------------------------------------------------------------+
| [Cline Chat Interface]                                          |
| Cline: 何かお手伝いできることはありますか？                   |
|        Vertex AI上のClaudeモデル (claude-3-7-sonnet) が       |
|        利用可能です。                                           |
| User: "src/utils.py" の内容をレビューして、改善点を教えて。     |
| Claude (via Vertex AI): (レビュー結果と改善提案)               |
|                                                                 |
| [Cline Settings - GCP Vertex AI Provider]                     |
| API Provider: GCP Vertex AI                                     |
| Google Cloud Project ID: YOUR_PROJECT_ID                      |
| Region: us-east5 (推奨)                                       |
| Model: claude-3-7-sonnet@20250219                             |
| Authentication: gcloud CLI (Clineが自動認識)                  |
+-----------------------------------------------------------------+

🏗️ システム構成

  • Google Cloud Platform (GCP)
  • Vertex AI (Anthropic Claude モデルへのアクセスを提供)
  • Anthropic Claude モデルファミリー (Vertex AI経由で利用)
  • Google Cloud CLI (gcloud) (Clineの認証に利用)
  • VS Code (Visual Studio Code)
  • Cline (VS Code拡張機能) - Cline Bot Inc.が開発・運営

🚀 ClineのセットアップとVertex AI上のClaude API利用手順

1. 前提条件の確認 ✅

以下が完了していることを確認してください：

  • Google Cloudプロジェクトの作成済み
  • 該当プロジェクトで Vertex AI APIが有効化されていること
  • ローカル環境に gcloud CLIがインストールされ、Vertex AIを利用するプロジェクトとユーザーで認証済みであること (gcloud auth application-default login の実行など)
  • 認証に使用するアカウントに、適切なIAM権限（例: Vertex AI ユーザーロール）が付与されていること
  • VS Codeがインストールされていること

2. Cline VS Code拡張機能のインストール 🧩

ClineをVS Codeに導入します。

  1. VS Codeを開きます
  2. アクティビティバーの拡張機能アイコン (Ctrl+Shift+X or Cmd+Shift+X) をクリック
  3. 検索バーに「Cline」と入力し、saoudrizwan によって公開されている拡張機能を見つけます
  4. 「インストール」ボタンをクリックします
  5. インストール後、アクティビティバーにClineのアイコンが表示されるか、コマンドパレット (Cmd/Ctrl + Shift + P) からCline関連のコマンドが利用可能になります。表示されない場合はVS Codeを再起動してみてください

3. ClineでGCP Vertex AIプロバイダーを設定 🔧

いよいよClineからVertex AI上のClaudeモデルにアクセスするための設定です。

  1. VS CodeでClineのアイコンをクリックするか、コマンドパレットからClineの設定画面を開きます（通常、歯車アイコンなどから「設定を開く」や「Configure Cline」といった項目です）

  2. APIプロバイダー (API Provider) の選択肢の中から「GCP Vertex AI」を選択します

  3. 以下の情報を入力します：

    • Google Cloud Project ID: Vertex AIを利用するGCPプロジェクトのIDを入力
    • Region (リージョン): Claudeモデルが利用可能なリージョンを選択。us-east5 (Ohio) や europe-west1 (Belgium) などが推奨
    • Model (モデル): 利用したいClaudeモデルを選択。Clineが利用可能なモデルリストを提示してくれます

  4. 認証 (Authentication):

    • Clineは、gcloud auth application-default login で設定された認証情報を自動的に利用しようと試みます
    • または、サービスアカウントのJSONキーファイルパスを指定するオプションがClineにあれば、それを利用することも可能です

  5. 設定を保存します（「完了(Done)」や「保存(Save)」ボタンなど）

4. Clineを使ってVertex AI上のClaudeと対話！ 🗣️

設定が完了すれば、Clineのインターフェースを通じてVertex AI上のClaudeモデルと対話を開始できます。

主な使い方：

  • チャットインターフェース: Clineのチャットウィンドウを開き、質問や指示を入力します。例えば、「このPython関数をリファクタリングしてほしいんだけど、どう思う？」や「@current_file の内容に基づいてテストケースを生成して」といった具体的なリクエストが可能です

  • コンテキストの活用: Clineの強力な機能である @メンションを使い、現在のファイル (@current_file)、開いているフォルダ (@folder_name)、ターミナルの出力 (@terminal_last_command) などを簡単にコンテキストとしてAIに渡せます

  • プランと実行: Clineは、複雑なタスクに対してまず計画を提示し、ユーザーの承認を得てから実行に移る「プランモード」と「アクトモード」を持っています。これにより、AIの動作を理解し、コントロールしながら作業を進められます

🌟 利用可能なClaudeモデル（Vertex AI経由・2025年6月現在）

Vertex AI Model Gardenを通じて実際に利用可能なAnthropic Claudeモデルには、以下のようなものがあります。Clineの設定画面で、これらのモデルを選択できるはずです。

モデル Vertex AIでの識別子 特徴 最適な用途
Claude 3.7 Sonnet claude-3-7-sonnet@20250219 拡張思考機能付き最新モデル エージェントコーディング、段階的推論
Claude 3.5 Sonnet claude-3-5-sonnet@20241022 ツール使用最適化 エージェントタスク、ツール利用
Claude 3.5 Haiku claude-3-5-haiku@20241022 高速・低コスト、マルチモーダル対応 チャットボット、簡単なタスク
Claude 3 Opus claude-3-opus@20240229 高性能モデル 複雑な推論、高度なタスク

📍 推奨リージョン

Google Cloudでは、Anthropicモデルの利用に際して、us-east5 (Ohio) または europe-west1 (Belgium) のリージョンが最高の利用可能容量を持つため推奨されています。ClineでGCP Vertex AIプロバイダーを設定する際に、これらのリージョンを選択すると良いでしょう。

🤔 Cline + Vertex AI (Claude) で「ええやん！」なポイント

1. VS Code内で全て完結！コンテキストスイッチ激減

ブラウザとエディタを行き来する必要がなくなり、開発に集中できます。ClineがVS Codeに深く統合されている恩恵は大きいです。

2. 対話的な開発支援

Clineのチャットインターフェースや計画提示機能を通じて、Claudeと自然な形で協力しながら開発を進められます。単にコードを生成するだけでなく、「相談相手」がいる感覚です。

3. 豊富なコンテキスト連携

@メンションでファイル、フォルダ、ターミナル出力、Gitの差分などを簡単にClaudeに伝えられるため、より質の高い、文脈に即したサポートが期待できます。

4. AIの動作をコントロール

ClineはAIの提案を事前に確認し、承認するステップを挟めるため、意図しない変更を防ぎ、安心してAIを活用できます。チェックポイント機能でロールバックも可能です。

5. 多様なLLMへのアクセスハブ

ClineはGCP Vertex AIだけでなく、他の多くのAPIプロバイダー（Anthropic直接、OpenAI、Gemini、OpenRouterなど）もサポート。プロジェクトやタスクに応じて最適なモデルを柔軟に切り替えられます。

6. カスタムルールの設定

.clinerules ファイルを使えば、プロジェクト固有の指示やClineの振る舞いをカスタマイズでき、よりパーソナライズされたAI支援を実現できます。

😥 ハマりポイントと注意点 (Cline + Vertex AI)

1. GCP Vertex AIの認証

Clineが gcloud の認証情報を正しく認識しているか確認が必要です。うまくいかない場合は、gcloud auth application-default login を再実行したり、サービスアカウントキーの利用を検討したりしてください。

2. Vertex AIのクォータ制限

GCPプロジェクトにはAPIごとのクォータ（利用上限）が設定されています。特に online_prediction_requests_per_base_model のようなクォータに達するとエラーが発生します。GCPコンソールでクォータを確認し、必要に応じて引き上げ申請を行いましょう。

3. モデルのリージョン互換性

選択したClaudeモデルが、Clineで設定したGCPリージョンで利用可能か確認してください。404エラーが出る場合は、モデルがそのリージョンで利用できない可能性があります。

4. APIキーではなくgcloud認証

Vertex AIプロバイダーの場合、AnthropicのAPIキーを直接入力するのではなく、GCPの認証を通じて利用する点に注意が必要です（Clineが内部で処理します）。

5. Clineのバージョンと設定UI

Clineは活発に開発されているため、バージョンによって設定画面のUIや項目名が若干変わることがあります。公式ドキュメントやGitHubリポジトリで最新情報を確認しましょう。

6. コスト管理

Vertex AI上のClaudeモデル利用は従量課金です。Clineが提供するトークン使用量やコスト追跡機能を活用し、意図しない高額請求を避けるため、利用状況を把握しましょう。

7. モデル対応制限

現在、ClineのVertex AI統合ではClaudeモデルのみが利用可能で、Geminiモデルはまだサポートされていません。

8. 新しいモデルの利用可能性

発表されたばかりの新しいモデル（Claude 4ファミリーなど）は、実際にVertex AIで利用できるまで時間がかかる場合があります。まずは実績のあるモデル（Claude 3.7 Sonnet など）から始めることをおすすめします。

📊 料金体系 (Vertex AI上のClaudeモデル)

Vertex AI経由でAnthropic Claudeモデルを利用する場合の料金は、Google CloudのVertex AIの料金体系に従います。基本的には以下の要素で課金されます。

  • 入力トークン数と出力トークン数: モデルに送信したテキスト（プロンプト）と、モデルが生成したテキストの量に基づいて課金
  • モデルの種類: Claude 3.7 Sonnet、Claude 3 Opusなど、モデルの性能によって単価が異なる
  • プロビジョニング済みスループット: 一定量の処理能力を予約することで、コストを最適化できるオプションもあります（大規模利用向け）

詳細な料金は、必ずGoogle CloudのVertex AI公式ドキュメントで最新情報をご確認ください。

🚀 実際に試してみよう

まずは以下のモデルから始めることをおすすめします：

claude-3-7-sonnet@20250219

このモデルは現在最新で、拡張思考機能を持つため、複雑なコーディングタスクに適しています。

📝 まとめ：VS Code拡張機能「Cline」でClaudeとの連携を次のレベルへ！

今回は、VS Code拡張機能「Cline」を使って、Vertex AI経由でAnthropic社の強力なClaudeモデルを利用する方法を詳しくご紹介しました。

重要なポイント：

  • 「Cline」を導入することで、VS Code内でシームレスかつ対話的にClaudeのAI支援を受けられる
  • GCP Vertex AIプロバイダー設定では、gcloudによる認証と、プロジェクトID・リージョン・モデルの指定がキモ
  • Clineのコンテキスト管理機能や協調的な動作が、開発体験を格段に向上させる
  • Vertex AIのクォータやコスト管理には注意が必要
  • 新しいモデルは段階的にロールアウトされるため、実際に利用可能かの確認が大切

使い慣れたVS Code環境で、まるで経験豊富なペアプログラマーのようにClaudeがサポートしてくれるのは、想像以上に開発が捗ります。「Cline」を導入して、AIとの新しい開発スタイルを体験してみてはいかがでしょうか。

もし、「Clineのこんな設定使ったらもっと便利だよ！」とか、「Vertex AIとこんな風に連携させてるで！」みたいな情報があれば、ぜひコメントで教えてくださいね！

それでは、引き続き良きAI開発を！🚀

📚 参考リンク

Cline 公式関連:

Google Cloud / Vertex AI 関連:

Anthropic 関連:

Discussion