🌟

Cline 活用備忘録

2025/01/24に公開

最近話題のAIエージェント「Cline」だが、実際に開発に使うときには何かと工夫が必要。
Clineで開発するときに役立つ考え方をまとめておく。

Copilotとの比較

VSCodeのCopilotは一度にあまり多くの処理ができないし、参照しているコード範囲も狭い印象。
インラインで簡単な編集をするには向いているが、ファイル全体を大きく変えたり、プロジェクト全体に関わる編集をするには、Cline方が圧倒的に優秀な印象。

API Provider

ModelはClaude-3.5-sonnet:betaが良さそう。
普通にAnthropicのAPIを使うと、RateLimitに引っかかる可能性があるので、OpenRouterを使うのが良い。

パッケージ管理

何も言わないと、package.jsonを勝手に書き換えようとする。
すると、依存関係が崩れてしまい、依存関係をLLMで直そうとする無限エラー地獄になる可能性がある。
そのため、ClineのCustom Instructionに

パッケージ操作はpackage.jsonを直接編集せず、必ずnpmを用いる

などと指示を書いておく。

Gitについて

何か変なことをしたら戻せるように、コミットはこまめに行なっておいたほうがいい。
Clineは一度に大量のファイルを修正することがあるので、貯めてしまうと、何を修正したんだかわからなくなる。

実際に使ってみた技術スタック

  • フレームワーク:Next.js (14系)
  • 言語:TypeScript
  • CSS: TailwindCSS
  • DB:Supabase → migrationsで管理するように明示するのが良い
  • サーバ:Vercel
  • 決済機能:Stripe

UIライブラリ

MaterialUIやNextUIは使いたくなるが、無限エラー地獄の原因になるのであまり推奨しない。
TailwindCSSだけで構築するほうがスムーズだった。

Cron(定期実行)

VercelにCronがあるので、それを使うように依頼するのが良い。

ブラウザ操作

Clineがブラウザ操作をして動作をチェックすることがあるが、まあまあ精度が低く、それによって現状のステータスを誤って理解してしまう可能性があるので、あまりおすすめしない。場合によっては、キャンセルしたほうがいいくらい。

Discussion