Lernen Sie, wie AI Coding funktioniert, beginnend mit Cline!

Unerwartet hat AI einen sich halb verändernden Himmel im Bereich der Programmierung ausgelöst. Von v0, bolt.new zu allen Arten von Programmier-Tools Cursor, Windsurf kombiniert mit Agant, AI Coding hat bereits ein riesiges Potenzial von Idee MVP. Von der traditionellen KI-unterstützte Codierung, um die heutige direkte Projekterzeugung hinter, am Ende, wie zu erreichen?

Dieser Artikel befasst sich mit Open-Source-Produkten Cline Von dort aus werden wir einen Blick auf einige der Implementierungsideen von AI Coding-Produkten in dieser Phase werfen. Gleichzeitig können Sie die tieferen Prinzipien verstehen und den KI-Editor besser nutzen.

Die endgültige Implementierung wird möglicherweise nicht in allen AI Coding-Editoren einheitlich sein. Außerdem wird in diesem Artikel nicht auf die Implementierungsdetails von Tool Use eingegangen.

Cline Ich habe eine Skizze des gesamten Prozesses angefertigt:

Im Kern stützt sich Cline auf System-Eingabeaufforderungen und die Fähigkeiten des Big Language Model zur Einhaltung von Befehlen. Zu Beginn einer Programmieraufgabe werden System-Eingabeaufforderungen, benutzerdefinierte Eingabeaufforderungen, Benutzereingaben und Informationen über die Projektumgebung (welche Dateien, offene Registerkarten usw.) gesammelt und an das LLM übermittelt, das Lösungen und Aktionen entsprechend den Richtlinien ausgibt. <execute_command />und<read_file />Cline ruft die geschriebene Werkzeugverwendungsfunktion auf, um die Verarbeitung durchzuführen, und übergibt die Ergebnisse an den LLM zur Verarbeitung. Cline führt mehrere Aufrufe an den LLM durch, um eine einzelne Aufgabe zu erledigen.

System-Hinweis

Cline's System-Prompts sind v0-ähnliche Prompts, geschrieben in Markdown und XML. Die Regeln für die Verwendung des LLM-Tools und Beispiele für die Verwendung sind im Detail definiert:

# 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>

Der MCP-Server wird auch in das System-Prompt-Wort eingefügt.

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
...

Benutzerbefehle können auch über die .clinerules in das Systemstichwort des Systems eingespeist.

Daher können wir davon ausgehen, dass Cursor und WindSurf Die Injektion von .cursorrules ist ähnlich

Es wird deutlich, dass Cline in seinem Kern von der Fähigkeit des LLM abhängt, Anweisungen zu befolgen, und daher wird die Temperatur des Modells auf 0.

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

Erste Eingabe

Es gibt jeweils mehrere Eingaben für den Benutzer:

1. Direkt getippte Kopie mit <task /> einbeziehen.
2. passieren (eine Rechnung oder Inspektion etc.) @ Verzeichnis der Eingabedatei, Datei und Url

In Cline.@ Es ist nicht viel Technik involviert, für Dateiverzeichnisse wird die Struktur des Dateiverzeichnisses aufgelistet; für Dateien wird der Inhalt der Datei gelesen; und für URLs wird der Inhalt direkt aus Puppeteer gelesen. Dann nimmt es den Inhalt und die Benutzereingaben und gibt sie an LLM aus.

Ein Eingabebeispiel sieht wie folgt aus:

<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>

Die Benutzereingabe enthält auch eine Reihe von Informationen über die Projektumgebung, z. B. die Liste der Dateien im aktuellen Arbeitsverzeichnis, die Registerkarten, die vscode öffnet, usw.

Eine einfache Aufgabe gibt dem LLM die folgende Eingabe:

<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>

Wie Sie hier sehen können, sind andere AI Coding-Editoren (wie Cursor)es ist möglichDie Einbettung der Codebasis, aber Cline ist ein bisschen mehr Brute-Force und einfach.

Rückgabe in der ersten Runde #

Das LLM wird entsprechend den Anforderungen des Befehls zurückgegeben (die Temperatur wird auf 0 gesetzt) und enthält normalerweise <thinking /> und die beiden Teile des Vorgangs. Zum Beispiel:

<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>

In diesem Beispiel ruft Cline verschiedene Systemoperationen auf, indem es die vom LLM ausgegebenen Befehle analysiert, einschließlich, aber nicht beschränkt auf:

1. einen Befehl ausführen
2. Lesen und Schreiben von Dateien
3. Inhalt suchen
4. MCP-Betrieb

Gleichzeitig sammelt Cline verschiedene Arten von Betriebsstatusinformationen.

Zweite Eingabe

Als Nächstes gibt Cline das Verhalten des Benutzers, den Ausgangszustand und das Ergebnis der vorangegangenen Operation, einschließlich der vorangegangenen Eingabeaufforderung des Systems und der Benutzereingabe, erneut an das LLM aus und bittet das LLM um Anweisungen für den nächsten Schritt, der zu tun ist. Und so weiter.

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>'
}]

Wie Sie sehen können, erfordert die Verarbeitung einer einzigen Aufgabe eine Schleife hin und her, um den LLM mehrfach aufzurufen, bis die Aufgabe abgeschlossen ist. Die andere Sache ist, dass Cline im Grunde nur alles in den LLM schiebt, eine Aufgabe nach der anderen. Token Die Nutzung ist sehr hoch.

Ein weiteres Problem ist, dass es leicht ist, das LLM-Kontextfensterlimit auszulösen, und Clines Strategie, damit umzugehen, besteht darin, es gewaltsam abzuschneiden.

Vermutlich handhaben andere AI Coding-Editoren das auch so. Als ich früher Windsurf benutzt habe, war ich neugierig, warum es nicht durch das LLM-Kontextfenster begrenzt wurde. Die vorherige Antwort wird jedoch in späteren Fragen und Antworten oft wiederholt.