Clineとは？

VSCodeなどのIDEで使用することができるオープンソースのAIエージェント拡張機能です。
コードの記述はもちろんのこと、コマンドの入力、ブラウザの操作まで行ってくれるため、
開発効率をはるかに高めることが可能となっています。

対象読者

・AIエージェントに興味がある
・VSCodeを使用している
・ChatGPTをよく使っている

セットアップ

Cline拡張機能の追加

Cline (prev. Claude Dev)をインストールします。

キーとモデルを設定

左のタブからClineを選択します。

以上で設定は完了です、続いて使い方に移ります。

使い方

権限の設定

Auto-approveのテキストをクリックして様々な権限の設定が可能です。
今回は全て許可する設定にしています。

認識させるファイルやディレクトリを追加する

入力欄に"@"を入力することでファイルやディレクトリなどを追加することが可能です。
これにより作業をさせる場所を具体的に指定することができます。

指示を出す

入力欄から指示を出すことができます、
今回はNextJSで簡単なコンポーネントを作成させた例です。

上からタスク内容、APIからのレスポンスと使用料金、Clineが行ったファイルなどへの作業内容が表示されています。（注：APIリクエストの度にチャージしたクレジットを使用します）

完了した時点でこのようにコストやトークン数が表示されます。

今までChatGPTなどでは1ステップごとに追加の指示などが必要でしたが、Clineの場合は指示を完了するまで自動で作業を継続してくれます。

作業を巻き戻す

Clineの便利な機能として、特定の段階までファイルの変更内容とタスクの状況を巻き戻せる機能があります。

まずはAIが加えた変更のログに対してRestoreを選択してから、

ファイルの状況(Workspace)だけを戻すのか、タスクの状況も戻すのかなどを選択することができます。

これにより、想定外の変更が発生した場合でも簡単に巻き戻すことが可能です。

複雑なタスクを解決させる

例えば、わざと問題を20個近く発生させたファイルがあったとします。

以下のような命令を与えてみます。

@/src/app/page.tsx 
このファイルの問題をすべて解決してください
動作確認までお願いします。

数分間APIへのリクエストとファイルの変更を繰り返したのち、問題を全て解決しました。

動作確認を依頼した文も覚えており、コマンドを実行しています。

既に開発サーバーを起動していたためエラーとなりますがエラー内容も把握しており、原因を報告してくれます。

手動で開発サーバーを停止してから、再開すると

タスクを完了することができました。
このように、Clineでは複雑な問題も自律的に解決できるようです。

タスク完了時に通知

タスクを依頼してからブラウザなどを操作していると、完了時に通知をしてくれます。

まるで人にタスクを依頼したような気分になります。
続いてレビューに移ります。

良いと感じた点

指示を与える煩わしさが激減する

今まではChatGPTなどの補助によって問題を解決したいとき、
何度もコピペを繰り返す必要があったり追加の指示が必要でした。

しかしエージェントはより大きなタスクをまとめてこなしてくれるため、煩わしさが激減したと感じました。

制御しやすい

Clineに関しては具体的に指示を出したり簡単に巻き戻しができるため、開発の状況を制御しやすい点は評価できると思います。

日本語での入力に対応している

OpenAIのAPIを使用する場合、日本語での指示に対応している点はとても良いと思いました。
また出力は基本的に英語ですが、指示をすれば日本語での報告も可能です。

いまいちだと感じた点

コストがかかる

唯一欠点があるとすれば現時点では精度の高いAIを使う場合コストがかかる点です。

今回の例で紹介した20個の構文エラーをOpenAI APIで解決した場合、
日本円で100円ほどのコストが発生しており、簡単なタスクの場合でも毎回数十円発生しています。

個人的には金額以上の価値があると感じていますが、ChatGPTなどの価格と比較するとコストが高いことは否めないでしょう。

まとめ

トークンの上限がある以上、大規模な開発ができるレベルではありませんが個人開発レベルで問題を早く解決したいときには選択肢の一つになり得ると感じました。しばらく使用して気づきがあれば更新したいと思います。

ご一読いただきありがとうございました。

参考

Cline Gitリポジトリ

OpenAI API価格