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

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

https://github.com/cline/clinehttps://github.com/cline/cline

ターミナルでコマンド実行したり､エラーを自動で修復してくれたりする。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. With Cursor, only about 40% is usable, but with Cline, it produces about 70% that can be used directly.

実際の開発で使っているところを紹介する｡ この記事を書いているこのサイトに､以下の画像のようなフローティングメニューが欲しかった｡原文だけ表示したり訳文だけ表示したりする機能だ｡I'll show you how I use 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. It's a feature to display only the original text or only the translated text.

なので､以下のファイル名とさっきの画像を渡して､上スクロールした時だけふわっと出るようにこのメニューを作ってくれとお願いした｡ /web/app/routes/$userName+/page+/$slug+/index.tsx すると以下のような返答が来た｡So, I provided the following file name and the image, and asked it to create this menu that would smoothly appear only when scrolling up: /web/app/routes/$userName+/page+/$slug+/index.tsx. Then, I received the following response.

許可をすると､以下のようなファイルを作成してくれた｡After granting permission, it created the following file for me.

この時点でかなりすごい｡cursorだとcomposerでも似たようなことができるが､clineで作らせるとかなり精度が高いものが最初からできる｡ web/app/routes/$userName+/page+/$slug+/components/FloatingControls.tsx ファイルの場所もほしいところにまさにある｡ saveを押すと今度は別のファイルを更新し始めたが､以下のように色んなところを変え始めた｡This is already quite impressive. With Cursor, you can do something similar with a composer, but Cline can create highly accurate results right from the start. The file location, web/app/routes/$userName+/page+/$slug+/components/FloatingControls.tsx, is exactly where I wanted it. When I pressed save, it started updating other files and began changing things in various places, as shown below.

なので変えすぎだと指示をすると今度は複数のファイルを読み始め､今度は適切なコードを生成した｡So, when I instructed 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 some minor adjustments were necessary, but what was completed is the menu at the bottom right that appears when you scroll up this page a bit. It’s 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 makes me feel like I’m in the future. Also, it seems that there is a function where Cline itself starts the server and tests it, 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. If this worked, it would be incredibly awesome too.