【VS Code】拡張機能「Cline」× OpenAI互換APIで始めるエージェント開発環境の構築

VS Code上でAIに自律的なコーディングを行わせる拡張機能「Cline」。チャットで指示を出すだけで、ファイルの新規作成から編集、ターミナルコマンドの実行までをAIが自律的に進めてくれる「バイブコーディング」環境を手軽に構築できます。

Clineは標準でOpenAI互換（OpenAI Compatible）仕様をサポートしているため、商用クラウドAPIから自宅サーバーのローカルLLMまで、エンドポイントとAPIキーさえあれば自由に接続先を切り替えられます。

本記事では、OpenAI互換APIを使った初期セットアップ手順と、Clineの自律動作を体験するための実践プロンプトを紹介します。

1. APIキーの発行

まずはAIモデルを利用するためのAPIキーを取得します。 各種サービスや自作サーバなどから接続用apiキーを取得してください。

2. Clineのインストール

1. VS Codeを開きます。

2. 左側の「拡張機能（プラグイン）」アイコンをクリックし、”cline”と検索。

3. インストールし有効化する。

3. Clineの各種設定（⚠️エンドポイントの注意点あり）

有効化すると左のサイドバーにclineのアイコンが追加されるのでクリックし、設定を行います。

このようにどんな方法で使うか？(無料？clineアカウント？など）を聞かれるので、一番下にある”Bring my own API key”(自分のAPIキーを利用する)を選択します。

すると以下のような設定欄が出てくるはずなので、上から順に設定していきます。

API Provider: OpenAI Compatible を選択します。

openAI 互換 (Open AI Compatible)

Base URL: APIのエンドポイント

APIのエンドポイントを設定します。このとき 末尾に/があると　404エラーが出ることがあるので注意。

API Key:

手順1でコピーしたAPIキーをペーストします。

モデル Model

Model: 提供されているモデル名（利用したいモデル）を入力します。多くのプロバイダの提供するOpenAI互換APIではモデルの問い合わせの仕組みがあるので、APIやエンドポイントの設定がうまくいっていたら、ドロップダウンで選択できるはずです。

4. 接続テスト

設定が完了したら、正しくAPIと通信できるかテストしてみましょう。
Clineのチャット入力欄に以下のように打ち込んで送信します。

Say "This is a test."

これは、LLMテストにおける “Hello World”的な構文です。AIから「This is a test.」といった返答が返ってくれば、無事に接続チェックは完了です。

this is test と正常に返答を得られた例

実践：Clineに適当なHTMLを作ってもらおう

環境が整ったので、実際にClineにウェブアプリを作ってもらいましょう。 Clineの強みは「複数ファイルの分割作成」や「OSコマンドの実行」まで一貫して行える点です。

今回は「日報のフォーマット生成ツール」を作ってもらいます。以下のプロンプトをそのままClineに投げてみてください。

使用するプロンプトの雛形

日々の業務で使える「日報・フォーマット生成ツール」をローカルのWebアプリとして作成してください。

【基本ルール】
・環境構築（Node.jsやPythonなど）は一切不要にするため、標準のHTML, CSS, JavaScriptの3ファイル（index.html, style.css, app.js）に分割して作成してください。
・外部ライブラリは使用しないでください。
・完成したら、OS標準のコマンドを使って自動でブラウザで index.html を開いてください。

【必要な機能】
1. 画面左側（入力エリア）：
 「本日の業務内容」「発生した課題」「明日の予定」を入力できるシンプルなテキストエリアを配置してください。
2. 画面右側（プレビューエリア）：
 左側で入力した内容が、SlackやTeams、ビジネスメールでそのまま報告しやすい綺麗なテキストフォーマット（見出しや箇条書きの記号付き）でリアルタイムに自動反映されるようにしてください。
3. コピーボタン：
 ワンクリックでプレビューエリアのテキスト全体をクリップボードにコピーできるボタンを設置してください。
4. 自動保存機能（LocalStorage）：
 誤ってタブを閉じてもデータが消えないように、入力内容をブラウザに自動保存し、次回開いたときに復元できるようにしてください。

【デザイン】
・ビジネス用途で使いやすい、シンプルで清潔感のある白と青（またはグレー）を基調としたモダンなデザインにしてください。
・画面を左右に分割したレイアウト（PC閲覧時）にしてください。

生成が始まると、Clineが自動的にファイルを作成し、コードを記述していく様子がリアルタイムで確認できます。生成時、コマンドの実行をするかどうか聞かれますので許可し進めてください。

プロンプトから修正する

scrollできないので左の入力欄が見切れる

修正用追加プロンプトの例

うまくいけばよいですが、たまに、スクロールできないページを生成したりすることがあります。　バイブコーディングの強みである、指示を追加し修正できることを体験してみましょう。

実装完了後、以下のテスト及び確認をCline自身で必ず行い、問題がないことを報告してください。

1. スクロール・レイアウトチェック:
   - 入力・プレビューが長文になった際に、画面全体のレイアウトが崩れず、各エリア内で個別にスクロール（overflow-y: auto等）できるか。
   - ブラウザのウィンドウサイズを小さくした際に、要素が見切れたり重なったりせず、レスポンシブ（または適切な最小幅とスクロールバー）が機能するか。

2. データ検証:
   - 超長文、改行、特殊文字、絵文字を入力してもバグが起きないか。
   - 「コピー」を押したときに、表示上だけでなくクリップボードに改行や記号を含めて正確に格納されているか（JavaScriptの挙動確認）。
   - 自動保存機能がリロード時にも100%復元されるか。

3. 動作テスト＆起動:
   上記を確認後、OS標準のコマンドを使って自動でブラウザで index.html を開き、すべての機能が「実用レベル」で動くことを確認したと私に報告してください。

成果物の例

見切れが治った例

サンプルとして入力してみました。

記入例：記入後右上のコピーで成形してコピペできる

まとめ

OpenAI互換機能を使えば、Clineのバックエンドをご自身の好きなAPIに手軽に差し替えることができます。

今回は比較的どの環境でもある程度の者が作れるはずのサンプルとして、とてもシンプルな日報ツールを作らせてみましたが、.clineruleやトークンや思考の調整を行えばもっと複雑なタスクにも利用可能です。エンドポイントの末尾のスラッシュ（/）にさえ気をつければ設定は非常にシンプルです。 ぜひお好みのモデルでエージェント開発を体験してみてください！