ClineというAIエージェントがすごいCline, the Amazing AI Agent

vscodeの拡張で、チャットでaiに指示を出すよくあるやつなんだけど、実行能力と生成されるコードの精度がすごい｡

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.

そして生成されるコードのそのまま使える割合が高い｡cursorだと40%くらいしか使えないが､clineなら70%くらいそのまま使えるの出してくる｡

And a high percentage of the generated code can be used as is. While only about 40% of Cursor's code is usable, Cline produces code that's about 70% usable right out of the box.

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

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

I'll show you how I'm using it in actual development. I wanted a floating menu like the one in the image below for this site where I'm writing this article. A feature to display only the original text or only the translated text.

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

So, I gave it the following file name and the image, and asked it to create this menu so that it would gently appear only when scrolling up. /web/app/routes/$userName+/page+/$slug+/index.tsx

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

Then, I received the following response.

許可をすると､以下のようなファイルを作成してくれた｡

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

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

This is already pretty amazing. Cursor can do something similar with Composer, but Cline creates something with much higher accuracy from the start. The web/app/routes/$userName+/page+/$slug+/components/FloatingControls.tsx file is exactly where I wanted it. When I pressed save, it started updating other files, and began changing various places as shown below.

なので変えすぎだと指示をすると今度は複数のファイルを読み始め､今度は適切なコードを生成した｡

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

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

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

Of course, it's not perfect yet, so I needed to make some minor corrections, but the result is the lower right menu that appears when you scroll up this page a little. Amazing. I think it's the best code-generating agent I've tried so far. It's especially good at generating code that follows the rules of existing code. It feels like the future. It also seems to have a feature that starts the server and Cline tests itself, but the save button was grayed out and I couldn't press it as shown in the image below, so I couldn't try it. It would be incredibly amazing if this worked too.