Cline, the Amazing AI Agent

It's a common type of VS Code extension where you give instructions to an AI via chat, but its execution capabilities and the accuracy of the generated code are amazing.

GitHub - cline/cline: Autonomous coding agent right in your IDE, capable of creating/editing files, executing commands, using the browser, and more with your permission every step of the way.

Autonomous coding agent right in your IDE, capable of creating/editing files, executing commands, using the browser, and more with your permission every step of the way. - cline/cline

github.com

It can execute commands in the terminal and automatically fix errors.

And a high percentage of the generated code can be used as is. With Cursor, only about 40% is usable, but with Cline, it produces about 70% that can be used directly.

実際の開発で使っているところを紹介する｡

この記事を書いているこのサイトに､以下の画像のようなフローティングメニューが欲しかった｡原文だけ表示したり訳文だけ表示したりする機能だ｡

なので､以下のファイル名とさっきの画像を渡して､上スクロールした時だけふわっと出るようにこのメニューを作ってくれとお願いした｡
/web/app/routes/$userName+/page+/$slug+/index.tsx

すると以下のような返答が来た｡

After granting permission, it created the following file for me.

この時点でかなりすごい｡cursorだとcomposerでも似たようなことができるが､clineで作らせるとかなり精度が高いものが最初からできる｡
web/app/routes/$userName+/page+/$slug+/components/FloatingControls.tsx
ファイルの場所もほしいところにまさにある｡
saveを押すと今度は別のファイルを更新し始めたが､以下のように色んなところを変え始めた｡

So, when I instructed it that it was changing too much, it started reading multiple files and then generated the appropriate code.

もちろんまだ完璧ではないので､ちょっとした修正は必要だったが､それで完成したのがまさにこのページを少し上にスクロールすると出てくる右下のメニューだ｡
すごい｡これまで試してきたコード生成系エージェントで一番だと思う｡特に既存のコードのルールに従って生成するのがうまい｡未来を感じる｡

あとサーバーを起動してcline自身がテストしてくれる機能もあるみたいだが､以下画像のようにsaveボタンがグレーアウトして押せなくて試せなかった｡これもできたらめちゃめちゃすごそうだ｡