クラインからAIコーディングの仕組みを学ぶ

思いがけず、AIはプログラミングの分野に半端ない変革の風を巻き起こした。v0、bolt.newからあらゆる種類のプログラミングツールCursor、WindsurfとAgantの組み合わせまで、AIコーディングはすでにアイデアMVPの巨大な可能性を秘めている。伝統的なAIアシストコーディングから、今日の直接的なプロジェクト生成まで、最終的にどのように達成するのか？

この記事では、オープンソース製品について見ていく。 クライン そこから始めて、現段階でのAI Coding製品の実装アイデアの一部を覗いてみましょう。同時に、より深い原理を理解し、AIエディターをより使いこなすことができます。

最終的な実装は、AI Codingエディター間で一貫していないかもしれません。また、この記事ではTool Useの実装の詳細については触れない。

クライン 全体のプロセスのスケッチを描いたんだ：

Clineはその中核において、システムプロンプトとビッグ・ランゲージ・モデルのコマンド順守機能に依存している。プログラミング・タスクの開始時に、システム・プロンプト、ユーザー定義プロンプト、ユーザー入力、プロジェクトの環境に関する情報（どのファイル、開いているタブなど）が収集され、LLMに提出され、LLMはディレクティブに従って解とアクションを出力する。 <実行コマンドそして<read_fileクラインは、書き込まれたツール使用ケイパビリティを呼び出して処理を実行し、その結果をLLMに渡して処理させる。 クラインは一つのタスクを完了させるためにLLMを複数回呼び出す。

システムキュー

Clineのシステムプロンプトはv0のようなプロンプトで、MarkdownとXMLで書かれている。LLMツールの使用ルールと使用例が詳細に定義されている：

# ツール使用のフォーマット
ツールの使用は、XML スタイルのタグを使用してフォーマットされます。 ツール名は開閉タグで囲まれ、各パラメータも同様にタグで囲まれます。ツール名は開始タグと終了タグで囲まれ、各パラメータも同様にタグで囲まれます。
<ツール名
値1。
値2</パラメータ2_name
...
</tool_name
例えば

src/main.js</パス
</read_file
適切なパースと実行を保証するために、ツールの使用には常にこの形式を守ってください。
#ツール
## execute_command
## write_to_file
...
## 例 4: MCP ツールの使用を要求する
<use_mcp_tool
weather-server</サーバー名
get_forecast</ツール名
<引数
{
"city": "San Francisco"、
「日数": 5
}

を使用する。

MCPサーバーはシステム・プロンプト・ワードにも注入される。

MCPサーバー
について モデル・コンテキスト・プロトコル (MCP)は、システムとローカルで動作するMCPサーバーとの間の通信を可能にし、機能を拡張するための追加ツールやリソースを提供します。.
#接続MCPサーバー
....

ユーザーコマンドは クリナール をシステムのキューワードに注入した。

このことから、我々はあえてカーソルと ウインドサーフ .cursorrulesのインジェクションも同様である。

クラインの核心はLLMの指示に従う能力に依存していることがわかる。 0.

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 }, })
})

最初の入力

ユーザーにはそれぞれ複数の入力が存在する：

1. 直接タイプされたコピー <タスク 組み込む
2. とおす @ 入力ファイルのディレクトリ、ファイル、URL

クラインでは@ ファイル・ディレクトリの場合は、ファイルのディレクトリ構造をリストアップし、ファイルの場合は、ファイルの内容を読み込み、urlの場合は、puppeteerから直接内容を読み込みます。そして、コンテンツとユーザーの入力を受け取り、LLMに出力します。

入力例は以下の通り：

太陽系の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

ユーザー入力には、現在の作業ディレクトリにあるファイルのリストや、vscodeが開くタブなど、プロジェクト環境に関する一種の情報も含まれる。

簡単なタスクは、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
# 現在のモード
アクトモード
</環境詳細

ここにあるように、他のAIコーディングエディター（カーソルなど）は有り得るコードベースの埋め込みだが、クラインはもう少しブルートフォースでストレートだ。

第1ラウンドリターン #

LLMは、コマンドの要求に応じて返され（温度は0に設定される）、通常、以下の内容が含まれる。 <考えていること と2つのパートに分かれる。例えば

<思考
タスクの要件を分析する
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が出力した命令を解析することによって、さまざまなシステム操作を呼び出している：

1. コマンドを実行する
2. ファイルの読み書き
3. 検索内容
4. MCPオペレーション

同時に、クラインはさまざまな種類の稼働状況情報を収集する。

2番目の入力

次に、クラインは、前回のシステムプロンプトとユーザー入力を含む、ユーザーの行動、出力状況、前回の操作結果を再度LLMに出力し、LLMに次に取るべきステップのガイダンスを要求する。といった具合である。

役割：システム
content: [...省略］
役割: ユーザー
コンテンツ: [
{
type: 'text',, n
text: 'Implement a 3D surround effect of the solar system'；
}, {
{
type: 'text', { {
text:"..."
}
]
role: 'assistant', text: "..." } ].
next.jsプロジェクトで使用できる新しいコンポーネントを作成する必要がある。install three @types/threefalsefalsen&#39；
role: 'user'、
content: [
{
type: 'text'、
text: ' [execute_command for 'npm install three @types/three'] Result:&#39；
}, {
{
type: 'text'、{ {。
text: 'コマンド実行。⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦looking for fundingn⠏ run `npm fund` for details
}, {
{
type: 'text', { {
content: 'VSCode Visible FilesCurrent Timen1/23, 2025, 10:01:33 PM (Asia/Shanghai, UTC+8:00)￤ Current ModenACT MODE￤&#39；
}]

見てわかるように、ひとつのタスクを処理するのに、タスクが終わるまで何度もLLMを呼び出してループを繰り返す必要がある。もうひとつは、クラインは基本的にすべてをLLMに押し込むだけで、一度にひとつのタスクを処理することだ。 トークン 使用率は非常に高い。

もう一つの問題は、LLMのコンテキストウィンドウの制限を簡単に発動させてしまうことで、クラインの対処法は、これを激しく切り捨てることだ。

これはおそらく、他のAI Codingエディターも同じように扱っていると思われる。以前windsurfを使っていたとき、なぜLLMのコンテキストウィンドウで制限されないのか不思議でした。しかし、以前の回答は後のQ&Aでもよく繰り返されています。