CLINE+Cluade実験

CLINE+CluadeによるAI開発が流行ってきたので実験。イメージとしてはClaudeが頭脳でCLINEが手足という感じで、人間は指示だけ出して実際にコードを書いたりはしない。AIが試行錯誤して出力したものを修正する指示を出したりする。

Claude

APIキーの取得はここからしておく

とりあえず$5だけcreditを購入する(購入しないと使えない)

Cline

clineはOSSのコーディングエージェントでVSCodeの拡張機能として提供されてる。コードもGitHubで公開されている。

複雑なシステム開発にも耐えうる機能

柔軟なコンテキスト管理

モデルの切り替え

チェックポイント機能

実行時認識

Plan/Actモード

Model Context Protocol（MCP）

VSCodeかCursorか、拡張機能としてClineを入れる

cmd+shift+pでClineをOpen in NewTabで入れる

ClaudeのAPI Keyを追加

Hello World

TODOアプリを作ってみる

プロンプトはこれ

code:txt

Reactを使って簡単なTODOリストアプリを作成してください。必要なファイル構成と依存関係も含めて。実際に実装を始める前にREADME.mdを作成し、実装しようとしてるアプリのディレクトリ構成と設計についてドキュメントも作成してください。

actモードで実行していく

actモードとは

実行ごとにいくらくらいかかったか表示されて面白い

Connection Errorみたいなエラーがちょくちょく発生する。時間をおいて再度試すとうまくいく。

なんか依存をインストールしないせいでエラーが出てそれを直そうと頑張ってる

一旦package.jsonの依存関係をnpm installなどでインストールしてください。と言って実行させた

出来た

https://scrapbox.io/files/67b896f567b707d6e4bd14bb.png

費用は$0.5157だった模様。

TODO 事例増やす