第2回です。
前回はAIコーディングを試せる環境を整理し、結果 VSCode + Cline で進めることとしました。今回はこれらの環境を実際に準備していきます。
また、今回も元ネタを食わせたAIに文章生成してもらっていますので、もしかするとおかしいところがあるかもしれません。ご了承ください。
前提条件と必要なもの
事前に準備した環境とアカウントです。
- 開発環境
- VSCode（Visual Studio Code）がインストール済みであること
- AIプロバイダのアカウント
各プロバイダのAPIキーを発行する
Clineから各AIモデルを呼び出すためにはAPIキーが必要で、各社のポータルから作成する必要がある、ということなので順番に作っていきます。
Claude（Fable / Opus / Sonnet）
Claude Platform にログインします。
↑「APIキーを取得」をクリックします。
↑APIキー作成に必要な情報を入力します。
- 名前
- APIキーの名前
- 有効期限
- このAPIキーがいつまで使えるかという期限
- リンクされたアカウント
- このAPIキーの権限や支払い（クレジット）をどのアカウント（または組織）に紐付けるか
- スコープ
- このAPIキーがアクセスできる範囲（権限）
↑APIキー（sk-ant- から始まる文字列）が発行されるので保管します。（この画面を消してしまうと再表示はされないため注意）
OpenAI（Astra / Sol / Terra / Luna）
Open AI Platform にログインします。
↑「API Keys」をクリックします。
↑「Create new secret key」をクリックします。
↑APIキー作成に必要な情報を入力します。個人で利用する分には Name と 有効期限 だけ指定し作成すれば良い感じです。
- Owned by（所有権の切り替え）
- キーの管理責任とライフサイクル（寿命）を誰に紐付けるかの設定。「You」は自身のアカウント、「Service account」はプロジェクトに対しサービスアカウント（疑似アカウント）が追加され、そのアカウントに対してキーが紐づく
- Name / Service Key Name
- APIキーの名前
- Project（プロジェクト）
- このAPIキーを紐づける Project を指定（特に作ってなければ Default Project を指定）
- 有効期限
- APIキーを利用する期間
- Permissions
- APIキーがアクセスできる機能の範囲を指定。ALL（フル）、Restricted（制限付き）、Read Only（読み取り専用）から選択
↑APIキー（sk-proj- から始まる文字列）が発行されるので保管します。（この画面を消してしまうと再表示はされないため注意）
Google（Gemini）
Google AI Studio にログインします。
↑鍵のアイコンをクリックします。
↑「APIキーを作成」をクリックします。
↑キー名紐づけるプロジェクト
- キー名の設定
- APIキーの名前
- インポートしたプロジェクトを選択
- このAPIキーを紐付けるプロジェクトを指定
↑APIキー（AQ. から始まる文字列）が発行されるので保管します。
VSCodeにClineを導入しAPIを設定する
続いて、メインのエージェントツールとなる「Cline」をVSCodeへセットアップしていきます。
拡張機能のインストール手順
- VSCodeの拡張機能タブ（Ctrl + Shift + X）を開く
- 検索窓に「Cline」と入力し、該当する拡張機能をインストール
- インストール完了後、VSCodeのサイドバーにClineのアイコンが追加されたことを確認
- Clineの初期画面で「Bring my own API key」を選択して「Continue」をクリックします。※ここでは自身で契約・取得したAPIキー（AnthropicやOpenAIなど）を直接登録して開発に利用するため、4番目のプランを選択します。
- Absolutely Free：アカウント登録のみで一部のAIモデルを無料で試せるフリープラン
- ClinePass：月額9.99ドルの定額で、オープンソース系AIを安価にたくさん使えるサブスクプラン
- Frontier Model：ClaudeやGPTなど最先端の商用AIを、Cline独自の従量課金クレジットで利用するプラン
- Bring my own API key：自分が別途用意した各AIサービスのAPIキーを直接登録して利用するプラン
プロバイダの設定
続いてプロバイダとAIモデルの設定画面が表示されます。基本的には「プロバイダの選択」「キーの入力」「モデルの選択」の3つを行い、最後に「Continue」をクリックします。
- API Provider：利用するAIサービス（Anthropic、OpenAI、OpenRouterなど）を選択
- API Key：選択した各AIサービスから取得した自身のAPIキーを入力
- Model：開発に使用するAIモデル（anthropic/claude-sonnet-5 など）をリストから選択
- Adaptive Thinking：AIに思考プロセスを出力させるかどうかの設定（通常は「None」でOK）
- Use different models for Plan and Act modes：設計時と開発実行時で別々の AI モデルを使い分けたい場合にチェックを入れる
Cline の動作確認をする
ここまでで利用できるようになっているはずなので試しにチャットしてみます。
↑
① メッセージの入力欄
② こちらから送ったメッセージ（いわゆるプロンプト）
③ モデルからの回答
ということで無事動いてくれました。
さいごに
今回は、VSCodeへのCline拡張機能の導入から各社のAPIキー設定、そして最初の動作確認までの一連の手順を進めました。
これで、手元のVSCode上で自律型AIエージェントを動かす「実動環境」が準備できたので、いつでもプロバイダやモデルを切り替えながら開発を行える状態です。
次回は、この環境を利用し簡単なChromeの拡張機能を作ってみます。
コメント