AI Coding Editor: Aufdecken, wie Cline funktioniert

In den letzten Jahren hat die Technologie der künstlichen Intelligenz (KI) einen tiefgreifenden Wandel in der Programmierung ausgelöst. Von v0 und bolt.new bis hin zu Programmierwerkzeugen, die Agententechnologie integrieren, wie z. B. Cursor und Windsurf hat gezeigt, dass KI-Coding ein großes Potenzial hat, eine Schlüsselrolle im Softwareentwicklungsprozess zu spielen, insbesondere in der Rapid-Prototyping- und Proof-of-Concept-Phase. Welche technischen Grundsätze stehen hinter der Entwicklung vom KI-gestützten Coding zur direkten Projekterstellung?

In diesem Artikel werden wir das Open-Source-Projekt Cline Als Beispiel analysieren wir die aktuelle Implementierung von KI-Coding-Produkten, um den Lesern zu helfen, die zugrundeliegenden Prinzipien zu verstehen, damit sie KI-Editoren besser einsetzen können, um die Entwicklungseffizienz zu verbessern.

Es ist zu beachten, dass es zwischen den AI Coding-Editoren Implementierungsunterschiede geben kann. Darüber hinaus wird in diesem Artikel nicht auf die Implementierungsdetails von Tool Use eingegangen.

Cline's Workflow Übersicht

Um die Funktionsweise von Cline zu verdeutlichen, werfen wir einen Blick auf ein Schema des Arbeitsablaufs:

Der Kernmechanismus von Cline ist die effiziente Nutzung von System Prompts und der Befehlsfolgefähigkeiten des Large Language Model (LLM). Beim Start einer Programmieraufgabe sammelt Cline alle relevanten Informationen, einschließlich System Prompts, benutzerdefinierte Prompts, Benutzereingaben und Informationen über die Projektumgebung (z. B. die Liste der Projektdateien, die aktuell geöffnete Editor-Registerkarte usw.), und führt diese Informationen zusammen, um sie an das LLM zu übermitteln.

Wenn LLM diese Informationen erhält, generiert es eine Lösung und Anweisungen auf der Grundlage des Befehls, und Cline analysiert dann die von LLM zurückgegebenen Anweisungen, z. B. <execute_command /> (Befehl ausführen) und <read_file /> (Datei lesen) usw., und rufen die vorformulierte Tool Use-Fähigkeit auf, um diese Operationen auszuführen und die Ergebnisse zur weiteren Verarbeitung an den LLM zurückzusenden. Es ist erwähnenswert, dass Cline in der Regel mehrere Male mit dem LLM interagieren muss, um eine einzelne Programmieraufgabe zu erledigen, so dass komplexe Aufgaben Schritt für Schritt durch mehrere Dialogrunden abgeschlossen werden können.

Die Rolle des System Prompts

Die System-Prompts von Cline sind nach dem Vorbild von v0 gestaltet und in den Formaten Markdown und XML geschrieben. Die Hauptaufgabe des System-Prompts besteht darin, die Regeln und Beispiele für die Verwendung von LLM-Werkzeugen im Detail zu definieren, um LLM zu zeigen, wie man verschiedene Werkzeuge effektiv für Programmieraufgaben einsetzt.

Die Cline-Systemaufforderungen enthalten detaillierte Angaben zu den Formatierungsvorgaben für Tool Use:

# Werkzeugverwendung Formatierung
Der Name des Werkzeugs wird in öffnende und schließende Tags eingeschlossen, und jeder Parameter wird in ähnlicher Weise in eine eigene Gruppe von Tags eingeschlossen. Der Werkzeugname wird in öffnende und schließende Tags eingeschlossen, und jeder Parameter wird in ähnlicher Weise in einen eigenen Satz von Tags eingeschlossen.
<tool_name
Wert1
Wert2
...
</tool_name
Beispiel.

src/main.js
</read_file
Halten Sie sich bei der Verwendung des Tools immer an dieses Format, um eine korrekte Analyse und Ausführung zu gewährleisten.
#-Werkzeuge
## Ausführen_Befehl
## write_to_file
...
## Beispiel 4: Aufforderung zur Verwendung eines MCP Werkzeug

wetter-server
get_forecast
<arguments
{
"city": "San Francisco",
"days": 5
}

Darüber hinaus werden Informationen über den MCP-Server (Model Context Protocol) in die Eingabeaufforderung des Systems eingefügt, so dass der LLM seine Fähigkeiten mit zusätzlichen Werkzeugen und Ressourcen erweitern kann, die vom MCP-Server bereitgestellt werden.

MCP-SERVER
Die Modell-Kontext-Protokoll (MCP) ermöglicht die Kommunikation zwischen dem System und lokal betriebenen MCP-Servern, die zusätzliche Tools und Ressourcen zur Erweiterung Ihrer Möglichkeiten bereitstellen .
#-Verbundene MCP-Server
....

Die Benutzer können das Verhalten von Cline weiter anpassen, indem sie über die Datei .clinerules benutzerdefinierte Befehle in die Eingabeaufforderung des Systems einfügen.

Es kann vermutet werden, dass AI Coding-Editoren wie Cursor und WindSurf einen ähnlichen Mechanismus zur Einspeisung benutzerdefinierter Befehle über Konfigurationsdateien wie .cursorrules eingeführt haben.

Wie man sieht, verlässt sich der Kern von Cline auf die Fähigkeit des LLM, Anweisungen zu befolgen, um die Programmieraufgabe zu erfüllen. Um die Genauigkeit und Konsistenz der LLM-Ausgangsergebnisse zu gewährleisten, setzt Cline den Temperaturparameter des Modells auf 0. Der Temperaturparameter steuert die Zufälligkeit der LLM-Ausgangsergebnisse, und wenn er auf 0 gesetzt wird, bedeutet dies, dass der LLM immer das wahrscheinlichste Ausgangsergebnis auswählt, wodurch der Determinismus bei der Ausführung der Aufgabe gewährleistet wird.

const stream = await this.client.chat.completions.create({
model: this.options.openAiModelId ?? "",
messages: openAiMessages, // die Anzahl der Nachrichten, die an den Client gesendet werden sollen.
temperature: 0, // auf 0 gesetzt
stream: true, // auf 0 gesetzt
stream_options: { include_usage: true }, })
})

Erste Runde der Eingaben: Erfassung von Nutzerabsichten und kontextbezogenen Informationen

Zu den wichtigsten Arten von Eingabedaten, die die Benutzer an Cline übermitteln, gehören die folgenden:

• Direkt eingegebene TextbefehleBenutzer können direkt natürlichsprachliche Beschreibungen von Anforderungen an Programmieraufgaben eingeben, und Cline verpackt diese Textanweisungen in Etiketten.
• Dateipfade, Dateien und URLs, die durch @-Symbole angegeben werdenBenutzer können die @ Cline analysiert Verweise auf Dateien, Verzeichnisse oder externe URLs in einem Projekt und ruft den Inhalt ab. Bei Dateien und Verzeichnissen listet Cline die Verzeichnisstruktur auf, bei Dateien liest Cline den Inhalt der Datei und bei URLs durchsucht Cline die Webseite mit Tools wie Puppeteer.

Eine typische Benutzereingabe könnte zum Beispiel wie folgt aussehen:

Implementieren eines 3D-Wraparound-Effekts des Sonnensystems 'app/page.tsx' (siehe unten für den Dateiinhalt) 'https://stackoverflow.com/questions/23673275/orbital-mechanics-for-a- solar-system-visualisation-in-three-js-x-y-z-for-planet' (Inhalt der Seite siehe unten)
</task

import Image from "next/image";
export default function Home() {...}
</file_content
<site_content
...
</site_content

Zusätzlich zu den vom Benutzer direkt eingegebenen Informationen sammelt Cline automatisch Informationen über den Projektkontext, wie z. B. die Liste der Dateien im aktuellen Arbeitsverzeichnis, offene Registerkarten im VS Code-Editor usw. Diese Informationen helfen LLM, den Projektkontext besser zu verstehen und eine realistischere Lösung zu generieren. Diese Informationen helfen LLM, den Projektkontext besser zu verstehen und eine Lösung zu generieren, die besser zu den tatsächlichen Anforderungen passt.

Ein Beispiel für eine vollständige Eingabe mit Umgebungsinformationen ist unten dargestellt:

Implementiere einen 3D-Sonnensystem-Wraparound-Effekt
</task
<umwelt_details
# VSCode Sichtbare Dateien
(Keine sichtbaren Dateien)
# VSCode Offene Registerkarten
(Keine offenen Registerkarten)
# Aktuelle Zeit
23.1.2025, 4:41:03 PM (Asien/Shanghai, UTC+8:00)
# Aktuelles Arbeitsverzeichnis (/Users/nazha/nazha-all/cline-dev/nazha) Dateien
.gitignore
eslint.config.mjs
nächste.config.ts
paket-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
öffentlich/
öffentlich/file.svg
public/globe.svg
öffentlich/next.svg
öffentlich/vercel.svg
öffentlich/Fenster.svg
# Aktueller Modus
ACT-MODUS
</umwelt_details

Anhand von Clines Ansatz für Projektinformationen wird deutlich, dass andere AI Coding-Editoren (z. B. Cursor) fortschrittlichere Codebase-Indexierungstechniken (z. B. Embedding) einsetzen, um Informationen aus der Codebase effizienter abzurufen und zu nutzen. Im Gegensatz dazu ist der Ansatz von Cline relativ einfach und "brute force".

Erste Runde kehrt zurück: LLM-Denkweise und Betriebsanleitung

Nach Erhalt der konsolidierten Eingaben analysiert LLM diese auf der Grundlage der Systemaufforderungen und der Benutzeranweisungen und gibt ein Ergebnis zurück, das sich aus beidem (dem Denkprozess) und den Anweisungen zusammensetzt. Für die oben erwähnte Aufgabe "Realisieren Sie einen 3D-Sonnensystem-Surround-Effekt" könnte LLM beispielsweise Folgendes zurückgeben:

Analysieren Sie die Anforderungen der Aufgabe.
1. Es soll ein 3D-Sonnensystem-Surround-Effekt erstellt werden.
2. das aktuelle Projekt ist ein Next.js-Projekt (laut next.config.ts und App-Verzeichnisstruktur)
3. 3D-Funktionalität muss hinzugefügt werden, kann Three.js-Bibliothek verwenden
4. Sie müssen eine neue Komponente erstellen, um den 3D-Effekt anzuzeigen.
Nächste Schritte:
1. installieren Sie die Three.js-Abhängigkeit
2. eine neue Komponente zur Anzeige des 3D-Sonnensystems erstellen
3. die Komponente in die Seite einfügen
</thinking
<execute_command
npm install three @types/three
false</requires_approval
</execute_command

In diesem Beispiel führt LLM zunächst eine Aufgabenanalyse durch, definiert die Aufgabenanforderungen und die Projektumgebung und erstellt einen vorläufigen Ausführungsplan. LLM gibt dann den Befehl aus, der Cline anweist, den Befehl npm install three @types/three auszuführen, um die Bibliothek Three.js zu installieren.

Cline kann eine Vielzahl von vordefinierten Systemoperationen aufrufen, indem es die von LLM zurückgegebenen Anweisungen analysiert, einschließlich aber nicht beschränkt auf:

• Ausführen von Systembefehlen (execute_command)
• Dateien lesen und schreiben (read_file, write_to_file)
• Suche im Web (Suche)
• MCP-Vorgänge (use_mcp_tool)

Bei der Durchführung dieser Vorgänge sammelt Cline den Ausführungsstatus und die Ergebnisse der Vorgänge für die Rückmeldung an den LLM in nachfolgenden Interaktionen.

Zweite Runde von Inputs: kontextbezogene Informationen, die in die Ergebnisse der Operation einfließen

Als Nächstes integriert Cline das Ausführungsergebnis des vorherigen Vorgangs, die Informationen über den Status des Vorgangs sowie die vorherigen Systemaufforderungen, Benutzereingaben usw. und übermittelt sie als neue Eingaben an das LLM mit der Aufforderung, den nächsten Ausführungsschritt anzuweisen. Dieser Vorgang wird so lange wiederholt, bis die Aufgabe abgeschlossen ist.

Nachfolgend finden Sie ein ausführlicheres Dialogbeispiel, das zeigt, wie Cline mit LLM arbeitet, um eine Aufgabe durch mehrere Dialogrunden zu erledigen:

Rolle: System
Inhalt: [... Inhalt des Systemprompts auslassen...]
Rolle: Benutzer
Inhalt: [
{
type: 'text', text: '\n Implementiere einen 3D-Sonnensystem-Umgebungseffekt
text: '\nImplementiere einen 3D-Umgebungseffekt des Sonnensystems\n'
}, { type: 'text', text.
{
Typ: 'Text', Text: '<Umgebungsdetails
text: '... "
}
]
role: 'assistant',
content: '\nAnalyse der Aufgabenanforderungen:\n1. Es muss ein 3D-Sonnensystem-Umgebungseffekt erstellt werden\n2. Das aktuelle Projekt ist ein Next.js-Projekt (nach next.config.ts und der App-Verzeichnisstruktur zu urteilen)\n3. Es muss eine 3D-Funktionalität hinzugefügt werden, was mit der Three.js-Bibliothek möglich ist\n4. Es muss eine neue Komponente erstellen, um den 3D-Effekt anzuzeigen\n\nNächste Schritte:\n1. die Three.js-Abhängigkeit installieren\n2. eine neue Komponente erstellen, um das 3D-Sonnensystem anzuzeigen\n3. die Komponente in die Seite einfügen\n\n\n\nnpm install three @ types/three\nfalse\n'
Rolle: 'Benutzer',
content: [
{
type: 'text',
text: '[execute_command für 'npm install three @types/three'] Ergebnis:'
},
{
type: 'text', text: '[execute_command for 'npm install three @types/three'] Result:' }, {
text: 'Befehl ausgeführt.\nOutput:\n⠙⠹⠸⠼⠴⠦⠧⠇ ⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇ ⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇ ⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇ ⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇ ⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇ ⠏\nadded 9 packages and audited 385 packages in 5s\n⠏\n⠏\n⠏⠏ 142 packages are looking for funding\n⠏ run `npm fund` for details\n⠏\nfound 0 vulnerabilities\n⠏'
}, {
{
Typ: 'Text', { Inhalt: '', {
content: '\n# VSCode Sichtbare Dateien\n(Keine sichtbaren Dateien)\n\n# VSCode Offene Tabs\n(Keine offenen Tabs)\n\n# Aktuelle Zeit \n1/23/2025, 10:01:33 PM (Asien/Shanghai, UTC+8:00)\n\n# Aktueller Modus\nACT MODE\n'
}]

Anhand dieses Dialogbeispiels können wir sehen, dass Cline, um eine einfache Programmieraufgabe zu erledigen, den LLM mehrmals in einer Schleife aufrufen muss. Durch die kontinuierliche Interaktion mit dem LLM verfeinert es schrittweise das Aufgabenziel und führt die entsprechenden Operationen aus, bis es die Aufgabe schließlich erledigt hat.

Darüber hinaus schiebt Cline bei der Bearbeitung einer Aufgabe alle relevanten Informationen "nach oben" in den LLM, was zu einer einzigen Aufgabe führt Token Verbrauch ist sehr hoch. Gleichzeitig kann dieser Ansatz leicht an die Kontextfenstergrenze des LLM stoßen. Um das Problem der Begrenzung des Kontextfensters zu lösen, wendet Cline eine relativ einfache und direkte Verarbeitungsstrategie an, d. h., der Eingabeinhalt wird brute-force gekürzt und der Teil, der die Fensterbegrenzung überschreitet, wird direkt verworfen.

Dies kann auch eine generische Verarbeitungsmethode sein, die von anderen AI Coding-Editoren verwendet wird. Im Falle der Verwendung des Windsurfen Bei der Verwendung eines KI-Editors wie diesem kann sich der Benutzer wundern, warum die KI nicht durch das LLM-Kontextfenster eingeschränkt zu sein scheint und in der Lage ist, Aufgaben zu bearbeiten, die die Länge des Fensters zu überschreiten scheinen. In nachfolgenden interaktiven Quizzen kann es jedoch vorkommen, dass die KI frühere Antworten wiederholt, was mit dem Mechanismus der Kontextabschneidung zu tun haben könnte.