第2回です。
前回はAIコーディングを試せる環境を整理し、結果 VSCode + Cline で進めることとしました。今回はこれらの環境を実際に準備していきます。
また、今回も元ネタを食わせたAIに文章生成してもらっていますので、もしかするとおかしいところがあるかもしれません。ご了承ください。
前提条件と必要なもの
事前に準備した環境とアカウントです。
| 種類 | 必要なもの |
|---|---|
| 開発環境 | VSCode（Visual Studio Code）がインストール済みであること |
| AIプロバイダのアカウント | 各社のデベロッパーコンソール（Claude / OpenAI / Google AI）のアカウント |
| 支払い方法 | Claude・OpenAI は事前にクレジットのチャージ（または支払い方法の登録）が必要。Google は無料枠（一部のモデルのみ）なら不要 ※今回は各$20程チャージ |
各プロバイダのAPIキーを発行する
Clineから各AIモデルを呼び出すためにはAPIキーが必要で、各社のポータルから作成する必要がある、ということなので順番に作っていきます。
| プロバイダ | 発行する場所 | キーの形式 |
|---|---|---|
| Claude | Claude Platform | sk-ant- から始まる |
| OpenAI | OpenAI Platform | sk-proj- から始まる |
| Google AI Studio | AQ. から始まる |
Claude（Fable / Opus / Sonnet / Haiku）
Claude Platform にログインします。
↑「APIキーを取得」をクリックします。
| 項目 | 内容 |
|---|---|
| 名前 | APIキーの名前 |
| 有効期限 | このAPIキーがいつまで使えるかという期限 |
| リンクされたアカウント | このAPIキーの権限や支払い（クレジット）をどのアカウント（または組織）に紐付けるか |
| スコープ | このAPIキーがアクセスできる範囲（権限） |
↑APIキー作成に必要な情報を入力します。
↑APIキー（sk-ant- から始まる文字列）が発行されるので保管します。（この画面を消してしまうと再表示はされないため注意）
OpenAI（Astra / Sol / Luna）
Open AI Platform にログインします。
↑「API Keys」をクリックします。
↑「Create new secret key」をクリックします。
| 項目 | 内容 |
|---|---|
| Owned by（所有権の切り替え） | キーの管理責任とライフサイクルを誰に紐付けるか。「You」は自身のアカウント、「Service account」はプロジェクトに追加される疑似アカウントにキーが紐づく |
| Name / Service Key Name | APIキーの名前 |
| Project | このAPIキーを紐づける Project（特に作ってなければ Default Project） |
| 有効期限 | APIキーを利用する期間 |
| Permissions | APIキーがアクセスできる範囲。ALL（フル）/ Restricted（制限付き）/ Read Only（読み取り専用） |
↑APIキー作成に必要な情報を入力します。個人で利用する分には Name と 有効期限 だけ指定し作成すれば良い感じです。
↑APIキー（sk-proj- から始まる文字列）が発行されるので保管します。（この画面を消してしまうと再表示はされないため注意）
Google（Gemini）
Google AI Studio にログインします。
↑鍵のアイコンをクリックします。
↑「APIキーを作成」をクリックします。
| 項目 | 内容 |
|---|---|
| キー名の設定 | APIキーの名前 |
| インポートしたプロジェクトを選択 | このAPIキーを紐付けるプロジェクト |
↑キー名紐づけるプロジェクト
↑APIキー（AQ. から始まる文字列）が発行されるので保管します。
使い過ぎ防止の設定（おすすめ）
APIは使った分だけ請求されるので、使い過ぎを防ぐ設定を確認しておくと安心です。（実際、Vol.3では Claude で1回の構築に約$20かかりました…）
3社とも 前払い（プリペイド）のクレジット が基本なので、チャージした金額を使い切るとAPIが止まります。つまり 「自動チャージ（Auto reload）」をオフにしておけば、チャージした額以上は請求されません。これがいちばん確実な使い過ぎ対策です。
そのうえで、各社のコンソールでは次の設定ができます。
| プロバイダ | 場所 | 設定できること |
|---|---|---|
| Claude | Claude Console →「組織の設定」 | 「レート制限」でモデルごとのトークン上限を確認できる（※費用の上限ではない）。クレジット残高は画面左下に表示 |
| OpenAI | OpenAI Platform →「Limits」 | 「Organization spend limit」（月の予算）と「Spend alerts」（80%・100%到達でメール通知） |
| Google AI Studio → 課金（Billing） | プロジェクトごとの 月の上限額（spend cap） |
VSCodeにClineを導入しAPIを設定する
続いて、メインのエージェントツールとなる「Cline」をVSCodeへセットアップしていきます。
拡張機能のインストール手順
- VSCodeの拡張機能タブ（Ctrl + Shift + X）を開く
- 検索窓に「Cline」と入力し、該当する拡張機能をインストール
- インストール完了後、VSCodeのサイドバーにClineのアイコンが追加されたことを確認
初期画面でのプラン選択
Clineの初期画面では4つのプランが表示されます。
| プラン | 内容 |
|---|---|
| Absolutely Free | アカウント登録のみで一部のAIモデルを無料で試せるフリープラン |
| ClinePass | 月額9.99ドルの定額で、オープンソース系AIを安価にたくさん使えるサブスクプラン |
| Frontier Model | ClaudeやGPTなど最先端の商用AIを、Cline独自の従量課金クレジットで利用するプラン |
| Bring my own API key | 自分が別途用意した各AIサービスのAPIキーを直接登録して利用するプラン |
今回は自身で取得したAPIキーを直接登録して使うため、「Bring my own API key」 を選択して「Continue」をクリックします。
プロバイダの設定
続いてプロバイダとAIモデルの設定画面が表示されます。基本的には「プロバイダの選択」「キーの入力」「モデルの選択」の3つを行い、最後に「Continue」をクリックします。
| 項目 | 内容 |
|---|---|
| API Provider | 利用するAIサービス（Anthropic、OpenAI、Google Gemini、OpenRouterなど） |
| API Key | 選択したAIサービスで取得した自身のAPIキー |
| Model | 開発に使用するAIモデル（claude-sonnet-5-5 など） |
| Adaptive Thinking | AIに思考プロセスを出力させるかどうか（通常は「None」でOK） |
| Use different models for Plan and Act modes | 設計時と開発実行時で別々のAIモデルを使い分けたい場合にチェック |
※選択するプロバイダによって設定項目が若干変化するため、環境に合わせて調整してください。
あとからプロバイダを追加・変更する場合は、Clineの設定（歯車アイコン）→「API Provider」から行えます。
Cline の動作確認をする
ここまでで利用できるようになっているはずなので試しにチャットしてみます。
↑
① メッセージの入力欄
② こちらから送ったメッセージ（いわゆるプロンプト）
③ モデルからの回答
ということで無事動いてくれました。
チャット欄の上部には、そのタスクで使ったトークン数や API費用（$）が表示されます。使い過ぎていないか、ときどき確認しておくと安心です。
さいごに
今回は、VSCodeへのCline拡張機能の導入から各社のAPIキー設定、そして最初の動作確認までの一連の手順を進めました。
これで、手元のVSCode上で自律型AIエージェントを動かす「実動環境」が準備できたので、いつでもプロバイダやモデルを切り替えながら開発を行える状態です。
次回は、この環境を利用し簡単なChromeの拡張機能を作ってみます。
📣 ここから広告です（Amazonアソシエイト）
Cline はあくまで VSCode の拡張機能なので、ショートカットやターミナル、Git 連携など、VSCode 本体の使い方を知っておくと作業がかなり楽になります。というわけで、VSCode の本をいくつか紹介させてください。
📚 プログラマーのためのVisual Studio Codeの教科書【改訂2版】 エディタとしての基本から、開発で使う機能までまとめて押さえたい人向けの一冊。
📚 Visual Studio Codeで学ぶ！GitHub Copilot入門 Vol.3 の最後で紹介している GitHub Copilot が気になった人に。2026年発行です。
📚 これ1冊でできる! Visual Studio Code 超入門 VSCode 自体がはじめてならこちら。VSCode の入門書の中では、Amazonのレビュー数が多めの一冊です。
ここのリンクから購入していただくと、筆者にちょっぴり紹介料が入ります。もちろんお値段は変わりません。紹介料はブログを続ける燃料（とAI代）になりますので、気になる本があったらぜひ！
※Amazonのアソシエイトとして、うしブロは適格販売により収入を得ています。
AIコーディングシリーズ
- [Vol.1] – AIコーディングツール比較｜Cursor・Cline・Replit・v0の特徴と無料枠
- [Vol.2] – Cline（VSCode）の設定方法｜Claude・OpenAI・GeminiのAPIキー取得手順
- [Vol.3] – Cline×AIでChrome拡張機能を作ってみた｜Claude・OpenAI・Gemini比較
