近年、人工知能（AI）技術がプログラミングに大きな変化をもたらしている。v0やbolt.newから、以下のようなAgent技術を統合したプログラミング・ツールへと。 カーソル やWindsurfのように、AIコーディングはソフトウェア開発プロセス、特にラピッドプロトタイピングや概念実証のフェーズで重要な役割を果たす大きな可能性を示している。AIアシスト・コーディングから直接プロジェクト生成への進化の背後にある技術原則とは？
この記事では、オープンソースプロジェクト クライン 一例として、AIコーディング製品の現在の実装を分析し、読者が根本的な原理を理解し、開発効率を向上させるためにAIエディターをよりよく適用できるようにする。
AI Codingエディターによって実装に違いがあるかもしれないことに注意すべきである。また、この記事ではTool Useの実装の詳細については触れない。
クラインのワークフロー概要
クラインの働きをより明確に示すために、ワークフローの概略図を見てみよう：
Clineの中核となるメカニズムは、システムプロンプトとLarge Language Model (LLM)のコマンドフォロー機能を効率的に利用することである。プログラミングタスクの開始時に、Clineはシステムプロンプト、ユーザ定義プロンプト、ユーザ入力、プロジェクト環境に関する情報（プロジェクトファイルのリスト、現在開いているエディタタブなど）を含むすべての関連情報を収集し、これらの情報を統合してLLMに送信する。
LLMはこの情報を受け取ると、コマンドに基づいて解決策と命令を生成し、クラインはLLMから返された命令を解析する。 <実行コマンド (コマンドの実行）と <read_file (ファイルを読み込む) などの操作を実行し、事前に書き込まれたツール使用機能を呼び出してこれらの操作を実行し、結果を LLM に送り返す。クラインは通常、1つのプログラミング・タスクを完了する過程でLLMと数回対話する必要があり、複雑なタスクが複数回の対話を通じて段階的に完了できることは注目に値する。
システムプロンプトの役割
Clineのシステムプロンプトはv0に沿って設計されており、MarkdownとXML形式で記述されている。システムプロンプトの中心的な役割は、LLMのツール使用のルールと例を詳細に定義することであり、プログラミングタスクを完了するためにさまざまなツールを効果的に使用する方法をLLMにガイドすることである。
Clineのシステムプロンプトは、Tool Useのフォーマット仕様を詳細に説明する：
# ツール使用のフォーマット
ツールの使用は、XML スタイルのタグを使用してフォーマットされます。 ツール名は開閉タグで囲まれ、各パラメータも同様にタグで囲まれます。ツール名は開始タグと終了タグで囲まれ、各パラメータも同様にタグで囲まれます。
<ツール名
値1。
値2</パラメータ2_name
...
</tool_name
例えば
src/main.js</パス
</read_file
適切なパースと実行を保証するために、ツールの使用には常にこの形式を守ってください。
#ツール
## execute_command
## write_to_file
...
##例4:コマンドの使用を要求する エムシーピー ツール
を使用する。
weather-server</サーバー名
get_forecast</ツール名
<引数
{
"city": "San Francisco"、
「日数": 5
}
を使用する。
さらに、MCP（モデルコンテキストプロトコル）サーバーの情報がシステムプロンプトに注入され、LLMはMCPサーバーが提供する追加のツールやリソースを使って機能を拡張できる。
MCPサーバー
について モデル・コンテキスト・プロトコル (MCP)は、システムとローカルで動作するMCPサーバーとの間の通信を可能にし、機能を拡張するための追加ツールやリソースを提供します。.
#接続MCPサーバー
....
ユーザーは、.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, // 0に設定
stream_options: { include_usage: true }, })
})
インプットの第一ラウンド：ユーザーの意図とコンテキスト情報の収集
ユーザーがクラインに提供する主な入力情報には以下のようなものがある：
- 直接入力テキストコマンドユーザーは、プログラミング・タスクの要件を自然言語で直接入力することができ、Clineはこれらのテキスト命令をタグで囲む。
- ファイルパス、@記号で指定されたファイルおよびURLユーザーは @ Clineは、プロジェクト内のファイル、ディレクトリ、外部URLへの参照を解析し、コンテンツを取得します。ファイルやディレクトリについては、Clineはディレクトリ構造をリストアップし、ファイルについては、Clineはファイルの内容を読み込み、URLについては、ClineはPuppeteerなどのツールを使ってウェブページをクロールする。
例えば、典型的なユーザー入力は次のようなものだ：
太陽系の3Dラップアラウンド効果を実装する 'app/page.tsx' (ファイルの内容は以下を参照) 'https://stackoverflow.com/questions/23673275/orbital-mechanics-for-a-太陽系可視化-in-three-js-x-y-z-for-planet' (サイトの内容は以下を参照)
</task
next/image "から画像をインポートします；
export default function Home() {...}.
</file_content
<サイト_コンテンツ
...
</site_content
ユーザが直接入力した情報に加え、Clineは、現在の作業ディレクトリ内のファイルリスト、VS Codeエディタで開いているタブなど、プロジェクトのコンテキストに関する情報を自動的に収集します。この情報は、LLMがプロジェクトのコンテキストをより良く理解し、より現実的なソリューションを生成するのに役立ちます。この情報は、LLMがプロジェクトのコンテキストをよりよく理解し、実際の要件により適合したソリューションを生成するのに役立ちます。
環境情報を含む完全な入力例を以下に示す：
<タスク
3D 太陽系の回り込みエフェクトを実装する
</task
<環境の詳細
# VSCode 可視ファイル
(可視ファイルなし)
# VSCode オープンタブ
(開いているタブなし）
# 現在の時刻
1/23/2025, 4:41:03 PM (アジア/上海, UTC+8:00)
# 現在の作業ディレクトリ (/Users/nazha/nazha-all/cline-dev/nazha) Files
.gitignore
eslint.config.mjs
next.config.ts
パッケージロック.json
パッケージロック.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/ファイル.svg
public/globe.svg
public/next.svg
public/vercel.svg
public/window.svg
# 現在のモード
アクトモード
</環境詳細
Clineのプロジェクト情報へのアプローチから明らかなように、他のAIコーディングエディター（Cursorなど）は、コードベースから情報をより効率的に検索して利用するために、より高度なコードベース索引付け技術（Embeddingなど）を採用している可能性がある。対照的に、Clineのアプローチは比較的単純で「総当たり的」である。
一次リターン：LLMの考え方と操作方法
統合入力を受けたLLMは、システムのプロンプトとユーザの指示に基づいて分析・思考し、（思考過程）と指示の両方からなる結果を返す。例えば、前述の「3D太陽系のサラウンド効果を実現せよ」というタスクに対して、LLMは以下のような結果を返す：
<思考
タスクの要件を分析する
1. 3D太陽系サラウンドエフェクトを作成する必要がある。
2. 現在のプロジェクトはNext.jsプロジェクトである（next.config.tsとアプリのディレクトリ構造による）。
3. 3D機能を追加する必要があり、Three.jsライブラリを使用できる。
4. 3D効果を表示するための新しいコンポーネントを作成する必要がある。
次のステップ
1. 依存関係Three.jsをインストールする。
2.3D太陽系を表示する新しいコンポーネントを作成する。
3.コンポーネントをページに導入する
</thinking
<実行コマンド
npm install three @types/three 3.
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と複数回の対話を通じてタスクを完了させる様子を示す、より完全な対話の例である：
役割：システム
content: [...システムプロンプトの内容は省略...].
役割: ユーザー
コンテンツ: [
{
type: 'text', text: 'n Implement a 3D Solar System Surrounding Effect
text: '太陽系の3Dサラウンド効果を実装する'
}, { type: 'text', text.
{
type: 'text', text: '<environment_details
text: '..."
}
]
role: 'assistant'、
3D効果を表示するために、新しいコンポーネントを作成する必要がある。types/threenfalsen'
role: 'user'、
content: [
{
type: 'text'、
text: '[execute_command for 'npm install three @types/three'] Result:'
},
{
type: 'text', text: '[execute_command for 'npm install three @types/three'] Result:' }, { {.
テキスト: 'コマンド 実行しました。⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇5sで9つのパッケージを追加し、385のパッケージを監査した⠏⠏ 142のパッケージが資金を探している⠏⠏。run `npm fund` for details ⠏0件の脆弱性が見つかった。
}, {
{
type: 'text', { content: '', {
content: 'VSCode Visible Files(可視ファイルなし)⑬ VSCode Open Tabs(開いてるタブなし)⑭ Current Time:01:33 PM (Asia/Shanghai, UTC+8:00)￤現在のモード￤ACT MODE￤'
}]
この対話例から、簡単なプログラミングタスクを完了させるために、クラインはLLMをループで何度も呼び出す必要があり、LLMとの継続的な対話を通じて、タスクのゴールを徐々に絞り込み、最終的にタスクを完了させるまで対応する操作を実行することがわかる。
さらに、クラインはタスクを処理する際、基本的にすべての関連情報をLLMに "上げる"。 トークン 消費は非常に大きい。同時に、このアプローチはLLMのコンテキストウィンドウの限界に簡単にぶつかる。コンテキストウィンドウの制限問題に対処するため、Clineは比較的単純で直接的な処理戦略を採用している。すなわち、入力内容をブルートフォースで切り捨て、ウィンドウの制限を超える部分は直接破棄される。
また、これは他のAI Codingエディターで使用されている一般的な処理方法かもしれません。を使用する場合 ウィンドサーフ このようなAIエディタを使用するとき、ユーザーは、AIがLLMのコンテキストウィンドウに制約されず、ウィンドウの長さを超えるようなタスクを処理できるように見えることを不思議に思うかもしれない。しかし、その後の対話型クイズでは、AIが以前の答えを繰り返すように見えることがあり、これはコンテキストの切り捨てメカニズムと関係があるかもしれません。
日本語 
简体中文 
English 
Deutsch (Sie) 
Português do Brasil