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 diesem Stadium werfen. Gleichzeitig können Sie die tieferen Prinzipien verstehen und die KI-Editoren 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. , undCline ruft die geschriebene Tool Use-Fähigkeit 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:

# 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-Tools
<use_mcp_tool
Wetter-Server
get_forecast</tool_name
<arguments
{
"city": "San Francisco",
"days": 5
}

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

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

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, // 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 Eingabe

Es gibt jeweils mehrere Eingaben für den Benutzer:

1. Direkt getippte Kopie mit  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.

Eine Beispieleingabe lautet wie folgt:

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

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:

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

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.

Die erste Runde bringt #

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

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 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 Ausgabestatus und das Ergebnis des vorherigen Vorgangs, einschließlich der vorherigen Eingabeaufforderung des Systems und der Benutzereingabe, erneut an das LLM aus und bittet das LLM, Hinweise zum nächsten Schritt zu geben. Und so weiter.

Rolle: System
Inhalt: [... weggelassen]
Rolle: Benutzer
Inhalt: [
{
type: 'text',, \n
text: '\nImplementiere einen 3D-Surround-Effekt des Sonnensystems\n';
}, {
{
Typ: 'Text', {
text:"... "
}
]
role: 'assistant',, text: "..." } ]
content: '\nAnalyse der Anforderungen der Aufgabe:\n1. Es muss ein 3D-Sonnensystem mit Wrap-Around-Effekt erstellt werden\n2. Das aktuelle Projekt ist ein Next.js-Projekt (nach der 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 erstellt werden, die im next.js-Projekt verwendet werden kann (nach der next.config.ts und der App-Verzeichnisstruktur zu urteilen)\n5. n4. 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: [
{
Typ: 'Text',
text: ' [execute_command for 'npm install three @types/three'] Ergebnis:'
}, {
{
Typ: 'text', {
text: 'Befehl ausgeführt.\nOutput:\n⠙⠹⠸⠼⠴⠦ ⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦ ⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦ ⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦ ⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦ ⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦  Suche nach Geldmitteln\n⠏ Führen Sie `npm fund` für Details\n⠏\nfundiert 0 Schwachstellen\n⠏&#39.
}, {
{
Typ: 'Text', {
Inhalt: '\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'
}]

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.