AIコーディング・エディター：クラインの仕組みを解き明かす

近年、人工知能（AI）技術がプログラミングに大きな変化をもたらしている。v0やbolt.newから、以下のようなAgent技術を統合したプログラミング・ツールへと。 カーソル やWindsurfのように、AIコーディングはソフトウェア開発プロセス、特にラピッドプロトタイピングや概念実証のフェーズで重要な役割を果たす大きな可能性を示している。AIアシスト・コーディングから直接プロジェクト生成への進化の背後にある技術原則とは？

この記事では、オープンソースプロジェクト クライン 一例として、AIコーディング製品の現在の実装を分析し、読者が根本的な原理を理解し、開発効率を向上させるためにAIエディターをよりよく適用できるようにする。

AI Codingエディターによって実装に違いがあるかもしれないことに注意すべきである。また、この記事ではTool Useの実装の詳細については触れない。

クラインのワークフロー概要

クラインの働きをより明確に示すために、ワークフローの概略図を見てみよう：

Clineの中核となるメカニズムは、システムプロンプトとLarge Language Model (LLM)のコマンドフォロー機能を効率的に利用することである。プログラミングタスクの開始時に、Clineはシステムプロンプト、ユーザ定義プロンプト、ユーザ入力、プロジェクト環境に関する情報（プロジェクトファイルのリスト、現在開いているエディタタブなど）を含むすべての関連情報を収集し、これらの情報を統合してLLMに送信する。

LLMはこの情報を受け取ると、コマンドに基づいて解決策と命令を生成し、クラインはLLMから返された命令を解析する。 <execute_command /> (コマンドの実行）と <read_file /> (ファイルを読み込む) などの操作を実行し、事前に書き込まれたツール使用機能を呼び出してこれらの操作を実行し、結果を LLM に送り返す。クラインは通常、1つのプログラミング・タスクを完了する過程でLLMと数回対話する必要があり、複雑なタスクが複数回の対話を通じて段階的に完了できることは注目に値する。

システムプロンプトの役割

Clineのシステムプロンプトはv0に沿って設計されており、MarkdownとXML形式で記述されている。システムプロンプトの中心的な役割は、LLMのツール使用のルールと例を詳細に定義することであり、プログラミングタスクを完了するためにさまざまなツールを効果的に使用する方法をLLMにガイドすることである。

Clineのシステムプロンプトは、Tool Useのフォーマット仕様を詳細に説明する：

# Tool Use Formatting
Tool use is formatted using XML-style tags. The tool name is enclosed in opening and closing tags, and each parameter is similarly enclosed within its own set of tags. Here's the structure:
<tool_name>
<parameter1_name>value1</parameter1_name>
<parameter2_name>value2</parameter2_name>
...
</tool_name>
For example:
<read_file>
<path>src/main.js</path>
</read_file>
Always adhere to this format for the tool use to ensure proper parsing and execution.
# Tools
## execute_command
## write_to_file
...
## Example 4: Requesting to use an MCP tool
<use_mcp_tool>
<server_name>weather-server</server_name>
<tool_name>get_forecast</tool_name>
	<arguments>
{
"city": "San Francisco",
"days": 5
}
</arguments>
</use_mcp_tool>

さらに、MCP（モデルコンテキストプロトコル）サーバーの情報がシステムプロンプトに注入され、LLMはMCPサーバーが提供する追加のツールやリソースを使って機能を拡張できる。

MCP SERVERS
The Model Context Protocol (MCP) enables communication between the system and locally running MCP servers that provide additional tools and resources to extend your capabilities.
# Connected MCP Servers
...

ユーザーは、.clinerulesファイルを介してシステムプロンプトにカスタムコマンドを注入することにより、クラインの動作をさらにカスタマイズすることができる。

CursorやWindSurfのようなAI Codingエディターも、.cursorrulesのような設定ファイルを介してユーザー定義コマンドを注入するために、同様のメカニズムを採用しているのではないかと推測される。

このように、Clineの中核は、プログラミング・タスクを完了させるためにLLMの指示に従う能力に依存している。したがって、LLMの出力結果の正確さと一貫性を保証するために、Clineはモデルの温度パラメータを0に設定する。温度パラメータはLLMの出力のランダム性を制御し、これを0に設定することは、LLMが常に最も確率の高い出力結果を選択することを意味し、タスクの実行における決定性を保証する。

const stream = await this.client.chat.completions.create({
model: this.options.openAiModelId ?? "",
messages: openAiMessages,
temperature: 0, // 被设置成了 0
stream: true,
stream_options: { include_usage: true },
})

インプットの第一ラウンド：ユーザーの意図とコンテキスト情報の収集

ユーザーがクラインに提供する主な入力情報には以下のようなものがある：

• 直接入力テキストコマンドユーザーは、プログラミング・タスクの要件を自然言語で直接入力することができ、Clineはこれらのテキスト命令をタグで囲む。
• ファイルパス、@記号で指定されたファイルおよびURLユーザーは @ Clineは、プロジェクト内のファイル、ディレクトリ、外部URLへの参照を解析し、コンテンツを取得します。ファイルやディレクトリについては、Clineはディレクトリ構造をリストアップし、ファイルについては、Clineはファイルの内容を読み込み、URLについては、ClineはPuppeteerなどのツールを使ってウェブページをクロールする。

例えば、典型的なユーザー入力は次のようなものだ：

<task>实现一个太阳系的 3D 环绕效果 'app/page.tsx' (see below for file content)  'https://stackoverflow.com/questions/23673275/orbital-mechanics-for-a-solar-system-visualisation-in-three-js-x-y-z-for-planet' (see below for site content)
</task>
<file_content path="app/page.tsx">
import Image from "next/image";
export default function Home() {...}
</file_content
<site_content>
...
</site_content>

ユーザが直接入力した情報に加え、Clineは、現在の作業ディレクトリ内のファイルリスト、VS Codeエディタで開いているタブなど、プロジェクトのコンテキストに関する情報を自動的に収集します。この情報は、LLMがプロジェクトのコンテキストをより良く理解し、より現実的なソリューションを生成するのに役立ちます。この情報は、LLMがプロジェクトのコンテキストをよりよく理解し、実際の要件により適合したソリューションを生成するのに役立ちます。

環境情報を含む完全な入力例を以下に示す：

<task>
实现一个太阳系的 3D 环绕效果
</task>
<environment_details>
# VSCode Visible Files
(No visible files)
# VSCode Open Tabs
(No open tabs)
# Current Time
1/23/2025, 4:41:03 PM (Asia/Shanghai, UTC+8:00)
# Current Working Directory (/Users/nazha/nazha-all/cline-dev/nazha) Files
.gitignore
eslint.config.mjs
next.config.ts
package-lock.json
package.json
postcss.config.mjs
README.md
tailwind.config.ts
tsconfig.json
app/
app/favicon.ico
app/globals.css
app/layout.tsx
app/page.tsx
public/
public/file.svg
public/globe.svg
public/next.svg
public/vercel.svg
public/window.svg
# Current Mode
ACT MODE
</environment_details>

Clineのプロジェクト情報へのアプローチから明らかなように、他のAIコーディングエディター（Cursorなど）は、コードベースから情報をより効率的に検索して利用するために、より高度なコードベース索引付け技術（Embeddingなど）を採用している可能性がある。対照的に、Clineのアプローチは比較的単純で「総当たり的」である。

一次リターン：LLMの考え方と操作方法

統合入力を受けたLLMは、システムのプロンプトとユーザの指示に基づいて分析・思考し、（思考過程）と指示の両方からなる結果を返す。例えば、前述の「3D太陽系のサラウンド効果を実現せよ」というタスクに対して、LLMは以下のような結果を返す：

<thinking>
分析任务需求:
1. 需要创建一个3D太阳系环绕效果
2. 当前项目是一个Next.js项目（根据next.config.ts和app目录结构判断）
3. 需要添加3D功能，可以使用Three.js库
4. 需要创建新的组件来展示3D效果
下一步行动：
1. 安装Three.js依赖
2. 创建一个新的组件来展示3D太阳系
3. 在页面中引入该组件
</thinking>
<execute_command>
<command>npm install three @types/three</command>
<requires_approval>false</requires_approval>
</execute_command>

この例では、LLMはまずタスク分析を行い、タスクの要件とプロジェクト環境を定義し、予備的な実行計画を作成する。次にLLMはコマンドを出力し、Clineにnpm install three @types/threeコマンドを実行してThree.jsライブラリをインストールするよう指示する。

クラインは、LLMから返された命令を解析することで、定義済みのさまざまなシステム操作を呼び出すことができる：

• システムコマンドの実行 (execute_command)
• ファイルの読み書き (read_file, write_to_file)
• ウェブを検索する（検索）
• MCPオペレーション（use_mcp_tool）

これらのオペレーションが実行されると、クラインはオペレーションの実行状況と結果を収集し、その後のやり取りでLLMにフィードバックする。

第2ラウンドのインプット：作戦結果に組み込まれた文脈情報

次に、Cline は、直前の操作の実行結果、操作状況情報、直前のシステムプロンプト、ユーザ入力などを統合し、新たな入力として LLM に提出し、LLM に次の実行ステップのガイダンスを要求する。このプロセスをタスクが完了するまで繰り返す。

以下は、クラインがLLMと複数回の対話を通じてタスクを完了させる様子を示す、より完全な対話の例である：

role: system
content: [...省略系统提示词内容...]
role: user
content: [
{
type: 'text',
text: '<task>\n实现一个太阳系的 3D 环绕效果\n</task>'
},
{
type: 'text',
text: "<environment_details>...<environment_details>"
}
]
role: 'assistant',
content: '<thinking>\n分析任务需求：\n1. 需要创建一个3D太阳系环绕效果\n2. 当前项目是一个Next.js项目（根据next.config.ts和app目录结构判断）\n3. 需要添加3D功能，可以使用Three.js库\n4. 需要创建新的组件来展示3D效果\n\n下一步行动：\n1. 安装Three.js依赖\n2. 创建一个新的组件来展示3D太阳系\n3. 在页面中引入该组件\n</thinking>\n\n<execute_command>\n<command>npm install three @types/three</command>\n<requires_approval>false</requires_approval>\n</execute_command>'
role: 'user',
content: [
{
type: 'text',
text: '[execute_command for 'npm install three @types/three'] Result:'
},
{
type: 'text',
text: 'Command executed.\nOutput:\n⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏\nadded 9 packages and audited 385 packages in 5s\n⠏\n⠏142 packages are looking for funding\n⠏  run `npm fund` for details\n⠏\nfound 0 vulnerabilities\n⠏'
},
{
type: 'text',
content: '<environment_details>\n# VSCode Visible Files\n(No visible files)\n\n# VSCode Open Tabs\n(No open tabs)\n\n# Current Time\n1/23/2025, 10:01:33 PM (Asia/Shanghai, UTC+8:00)\n\n# Current Mode\nACT MODE\n</environment_details>'
}]

この対話例から、簡単なプログラミングタスクを完了させるために、クラインはLLMをループで何度も呼び出す必要があり、LLMとの継続的な対話を通じて、タスクのゴールを徐々に絞り込み、最終的にタスクを完了させるまで対応する操作を実行することがわかる。

さらに、クラインはタスクを処理する際、基本的にすべての関連情報をLLMに "上げる"。 トークン 消費は非常に大きい。同時に、このアプローチはLLMのコンテキストウィンドウの限界に簡単にぶつかる。コンテキストウィンドウの制限問題に対処するため、Clineは比較的単純で直接的な処理戦略を採用している。すなわち、入力内容をブルートフォースで切り捨て、ウィンドウの制限を超える部分は直接破棄される。

また、これは他のAI Codingエディターで使用されている一般的な処理方法かもしれません。を使用する場合 ウィンドサーフ このようなAIエディタを使用するとき、ユーザーは、AIがLLMのコンテキストウィンドウに制約されず、ウィンドウの長さを超えるようなタスクを処理できるように見えることを不思議に思うかもしれない。しかし、その後の対話型クイズでは、AIが以前の答えを繰り返すように見えることがあり、これはコンテキストの切り捨てメカニズムと関係があるかもしれません。