Cline（クライン）。結構衝撃うけました。
先日、「Computer Use」が話題となりました。詳細は、下記の記事をご確認ください。
これは、現在のPCの状態をスクリーンショットで把握しながら作業を進める仕組みです。
この機能をVS CodeやCursorで利用できる拡張機能「Cline（クライン）」が話題となっています。
実際に利用してみたいと思います。
この記事でわかること
・拡張機能のCline（クライン）がどういったものかわかる
コンテンツ
Cline（クライン）とは？
Cline（クライン）とはVScodeやCursorで使えるAI拡張機能です。旧称は「Claude-dev」という名称で知られていました。
この拡張機能はローカル環境でLLMのAPIを使って動くAIエージェントです。コード修正はもちろん、ターミナル操作もClineが行ってくれます。
Claude 3.5 Sonnet を使えばブラウザを勝手に開いてクリック、スクリーンショットを撮影しながら自発的に動いてくれます。ブラウザで
しかもオープンソースなんです。なので仕組みを見たい方はリポジトリから。
Github:https://github.com/cline/cline
Cline（クライン）の使い方
VScodeやCursorなどを使ったことのある方は説明はいらないかもしれませんが、拡張機能でClineと検索すればOKです。以下はVScodeの場合です。
そうするとサイドバーに
ちなみにCursorだと下記の画像のように開いてからピン止めしたほうが便利かもです。
ClineにAPIキーの設定
Clineは、各種LLMのAPIを利用して動作します。そのため、Cline自体は無料ですが、使用するAPIに応じた料金が発生します。
なお、現在利用可能な選択肢は以下の通りです。ただし、computer useを利用できる点を考えると、Clineを最大限に活用するには現状ではClaudeがほぼ一択となります。
ちなみに、Amazon Bedrockも利用可能です。ただし、以下の通りPrompt Cachingが使用できません。また、料金が比較的高額になるため、Prompt Cachingを活用したい場合は、現状ではネイティブなClaude APIの利用が適しています。
ただし、後述の通りClaudeには「Tier」という概念があり、APIには1日に使用できる制限があります。その場合、OpenRouterを利用したClaudeで制限を回避するという選択肢に入ります。
Clineの実際の挙動について
それでは、実際の挙動を見ていきましょう。（動画は2倍速）
ちなみに、今回デプロイから公開までにかかった時間は約4分、料金は0.1451ドル（約22円）でした。
なお、今回は挙動を確認することが目的なので、ホームページの質にはこだわっていません。
アクセスキーも実験的な利用ととらえてください。
（動画中に表示されるアクセスキーなどは、すでに削除済みです。）
コードを書く
これは言わずもがなです。もちろんのごとくこなしてくれますし、CSSなどの別ファイルも関係性を保ちながら生成してくれます。
CLI（コマンドラインインターフェース）を操作する
ここです。で今回注目したいのが「エラーを自動で確認」している点です。
いままでだと「これを入力してください。エラーでたらコピペして」がないんです。革命です。
ブラウザをチェックしながら操作する
これがComputer Use機能です。動画内ではありませんが、Amazon Cognito検証をしたときのスクショです。ちゃんと確認して状況確認をしています。
ちなみになんですが、「今の動作をSeleniumで保存して」といったらコード残してくれました。
やはり画像確認が想像以上にお金かかるポイントなので、これができれば同じようなテスト操作をする場合コスト軽減になります。
ClaudeのAPI制限について（Tierについて）
AnthropicのClaude APIを使うTierという概念があります。Clineを使うとよくこんなのが出ます。
429 {"type":"error","error":{"type":"rate_limit_error","message":"Number of tokens has exceeded your daily rate limit (https://docs.anthropic.com/en/api/rate-limits); see the response headers for current usage. Please reduce the prompt length or the maximum tokens requested, or try again later. You may also contact sales at https://www.anthropic.com/contact-sales to discuss your options for a rate limit increase."}}これは１分間当たりの制限です。でさらにこの上に１日あたりの制限というのがあります。以下がアンソロピックのドキュメントです。
https://docs.anthropic.com/en/api/rate-limits
※2024/11/20追記
日本語訳
明日、Anthropic APIにおける1日のトークン制限（TPD）を撤廃し、トークン/分（TPM）の制限を、各プランに応じて入力トークンと出力トークンの制限に分割します。
Rate limitsが緩和が発表されました。このタイミングを考えるときっと制限がかかる人が多かったのかと。
Day limit撤廃は大きいです。これにより1日のトークン制限撤廃で長時間の利用が容易になったことになります。
例えばTier2でいままで合算80000トークンだったのが、入力と出力を分けてとのことなのでIn:80000、Out:16000になるので実質緩和ともとれるしOut:16000までなので逆に出力多い場合厳しくなっているとも。最悪は１分待てばいいのでデイリー引っかかるよりかはありがたいです。詳しくはRate limitsドキュメントをご確認ください。
https://docs.anthropic.com/en/api/rate-limits
とはいえ、まずはTierを上げるしかないです。
ざっくりいうと累計課金（デポジット）４０ドルがTier2。２００ドルがTier3です。４００ドルがTier4です。
The limits outlined below are our standard limits. If you’re seeking higher, custom limits, contact sales through the Anthropic Console.
（翻訳：以下に記載されている制限は、当社の標準的な制限です。より高いカスタム制限を希望する場合は、Anthropicコンソールを通じて営業部門にお問い合わせください。）
それ以上欲しければ問い合わせって感じです。
OpenRouterを使う
OpenRouterはいろんなAPIを一つの場所から使えるAPI統合サービスみたいなものです。
こちらのあればClaudeの制限を回避できます。どうしても制限が厳しい場合はこちらを使うのもいいのかもしれません。
ただAnthropicのTierには関係ないので課金してTier上げしたい方はAnthropic直のアカウントでやはりデポジットを入れる感じになります。
Always approve read-only operations
設定の下のほうにこのようなチェックボックスがあります。
When enabled, Cline will automatically view directory contents and read files without requiring you to click the Approve button.
「読み取り専用操作を常に承認する」というチェックボックスがあります。これを有効にすると、Clineは[承認]ボタンをクリックしなくても、自動的にディレクトリの内容を表示し、ファイルを読み取ることができます。
ただし、Computer Useの場面で発生する読み取り承認は省略されるものの、Saveボタンの操作は省略されないため、承認作業から完全に解放されるわけではありません。それでも、このチェックを有効にしておくと便利かもしれません。（でもなんか承認減った感じはしないです…)
まとめ
何をしているかの知識がないと指示も出せませんし、ボタンを押すことすらできないのですがボタン承認でプログラムができるようになりますね。
また、これが許可されるようなエンタープライズ案件はすぐには実現が難しいことを十分理解しています。
そのため、小規模企業やスタートアップ企業、個人開発、などであれば、許容される場合もあるのではないかと思います。最終的にはものは考え方でケースバイケースでしょう。
なお、ブラウザサービスのテスト自動化では、一般的にSeleniumが使われますが、初回はAIを利用し、2回目以降のコードもAIに生成させる方法が考えられます。このような形でテスト自動化の効率化が実現する日も、そう遠くないかもしれません。
AWS CLIでデプロイできちゃうのはすごいですし。Claudeであるのも相性いいのかもしれないですね。Azureとかも試してみたいですが。
まだ課題は多いかもしれませんけど、今のうちにアーキテクチャとかの知識を少しずつでも理解しておきたいですよね。
この記事を書いた人
資料
ダウンロード
マスタデータのメンテナンスに関わる機能をまとめたSaaS「SMOOZ」
SMOOZはリレーショナルデータベースの課題を解決するサービスです。
オンラインデモで気軽に試すことが可能です。