「AIエージェントキャッチアップ #10 - Cline (旧Claude Dev)」を開催しました

ジェネラティブエージェンツの大嶋です。

「AIエージェントキャッチアップ #10 - Cline (旧Claude Dev)」という勉強会を開催しました。

generative-agents.connpass.com

アーカイブ動画はこちらです。

youtube.com

Cline

今回は、Visual Studio Codeの拡張機能として使える「Cline (旧Claude Dev)」について、実際に動かしてみたりソースコードを読んだりしてみました。

ClineのGitHub リポジトリはこちらです。

github.com

今回のポイント

ClineでのTODOアプリの実装

Clineのセットアップは、Visual Studio CodeにClineの拡張機能をインストールして、AnthropicなどのAPIキーを設定するだけです。

PythonでシンプルなTODOアプリ（Webアプリ）を実装してもらうと、次々とファイルが作成されコードが実装されていきました。

パッケージのインストールが必要な場合は、poetry add fastapi "uvicorn[standard]" sqlalchemy といったコマンドを実行していいか確認され、承認するとVisual Studio Codeのターミナル上でそのコマンドが実行されます。

もしもClineが実装したコードにMypyなどのエラーがあれば、エラーを踏まえてコードを修正してくれます。

次々とコードを生成したりコマンドを実行したりする動作としてはBolt.newなどと似ていますが、Visual Studio Codeの拡張機能として使えるためClineのほうが実用性がありそうだと感じました。

Computer useを使ったブラウザでの動作確認

Clineでは、開発しているのがWebアプリケーションの場合、実装が完了するとComputer useを使ってブラウザを操作しながら動作確認してもらうことができます。

Computer useの動作はClaudeを何度も呼び出す関係でとても遅いため、実用性は微妙かもしれませんが、その様子を見るとなかなかインパクトがあります。

Computer useで動作確認する様子は、アーカイブ動画の以下のあたりから確認できます。

https://www.youtube.com/live/OkJWfrX39mo?t=1037s

プロンプト

Clineの実装が知りたかったので、ソースコードも見ていきました。

まず、システムプロンプトはsrc/core/prompts/system.tsにありました。

You are Cline, a highly skilled software engineer with extensive knowledge in many programming languages, frameworks, design patterns, and best practices.

====

TOOL USE

You have access to a set of tools that are executed upon the user's approval. You can use one tool per message, and will receive the result of that tool use in the user's response. You use tools step-by-step to accomplish a given task, with each tool use informed by the result of the previous tool use.

# Tool Use Formatting
    :

「execute_command」「read_file」「write_to_file」「list_code_definition_names」「browser_action」などのツールが使えることや、出力の形式といった説明が手厚く記載されています。

以前Bolt.newのシステムプロンプトも見ましたが、同じように手厚く記述されていました。これらのシステムプロンプトは、Claudeにコードを生成させるときに参考になりそうです。

ちなみに、Clineで設定できるCustom instructionsについては、システムプロンプトに追加するかたちで入れられます。

        if (this.customInstructions && this.customInstructions.trim()) {
            // altering the system prompt mid-task will break the prompt cache, but in the grand scheme this will not change often so it's better to not pollute user messages with it the way we have to with <potentially relevant details>
            systemPrompt += addCustomInstructions(this.customInstructions)
        }

コードの引用元：https://github.com/cline/cline/blob/main/src/core/Cline.ts#L755-758