話題のClineを軽く触ってみた
まず感じたのは、LLM APIの課金コスト感覚がないから怖い
Clineは API Provider を選択できるのだが、
持っていたOpenAIアカウントを利用しようとしたところ、いきなり「現在のクォータを超過した」とのエラーが発生した
OpenAIの場合、1 分あたりのトークン数 (TPM)、1 分または 1 日あたりのリクエスト数 (RPM/RPD)の上限がモデルによって設けられているので、これを超えている可能性がある
このクォータを下回ったとて大量のトークン数になる可能性があり、ちょっと怖いなと感じた
というわけで、クレカに紐づいてない、かつ、OpenAIよりクォータが緩い Geminiを使ってみることにした
GeminiのAPIのトークン取得は以下より可能 ai.google.dev
設定
その後、設定画面を開いて先ほどのAPIキーなどを設定する
この時、Custom Instructions には日本語でやり取りするために以下の指示をしておいた
必ず日本語で応対してください。
あとはこの辺の設定
上から訳すと
- ファイルとディレクトリを読み取る
コンピュータ上の任意のファイルを読み取るためのアクセスを許可するかどうか - ファイルを編集する
コンピュータ上のあらゆるファイルの変更を許可するかどうか - 安全なコマンドを実行する
安全なターミナルコマンドの実行を許可する。モデルによってコマンドが潜在的な破壊的であると判断された場合、承認が必要になる - ブラウザを使用する
ヘッドレスブラウザで任意のWEBサイトを起動して操作できるようにするかどうか - MCPサーバーを使用する
ファイルシステムを変更したりAPIと対話したりする可能性のある構成済みのMCPサーバーの使用を許可する
今回はファイルとディレクトリを読み取るとブラウザを使用するにチェックを入れた
デモ
２つの入力を与えて、その差分を描画するWEBアプリを作ってもらうことにした
前提として、Next.jsのプロジェクトはすでにあり、renderDiffという２つの入力の差分をレンダリングする関数もすでにあったので、これを利用してブラウザ表示までできるようにしてもらった
まず、目標と手順が書かれていておぉと思ったのと、ファイルを読むためにアクセス許可を求められたので設定がちゃんと機能していることがわかった
ファイルを読んでrenderDiffが何をしているのかを理解したら、今度は新しいファイルdiff-viewer.tsxを作ろうとしている
これもちゃんと許可が求められるので、許可を出すと作成された
次に、page.tsxを修正しようとするのだが、これは失敗していた
よくみると、page.tsx はNext.jsのプロジェクトのインストール時からあるファイルでサンプルの実装がされているのだが、そのコードを残したままその上に追記するようなコードになっていた
これは意図的かもしれないし、これくらいなら良い
最後にこのアプリを立ち上げてブラウザで確認というところまでやろうとしたが、トークン切れてできなかった
課金して続きは後日やることにする
まとめ
これくらい程度ならClineじゃなくてもできるかもしれないが、VSCodeからかなりお手軽に試すことができた
１つのプロンプトでここまでやってくれるのはすごいなぁと思いつつ、参画プロジェクトでの活用方法を考えたいと思った
