AI Coding Editor : Découvrir le fonctionnement de Cline

Ces dernières années, la technologie de l'intelligence artificielle (IA) a déclenché un profond changement dans la programmation. De v0 et bolt.new, aux outils de programmation qui intègrent la technologie des agents tels que Curseur et Windsurf, le codage par l'IA a montré qu'il pouvait jouer un rôle clé dans le processus de développement de logiciels, en particulier dans les phases de prototypage rapide et de validation du concept. Quels sont les principes techniques qui sous-tendent l'évolution du codage assisté par l'IA vers la génération directe de projets ?

Dans cet article, nous utiliserons le projet open source Cline À titre d'exemple, nous analysons la mise en œuvre actuelle des produits de codage de l'IA pour aider les lecteurs à comprendre les principes sous-jacents, afin qu'ils puissent mieux appliquer les éditeurs d'IA pour améliorer l'efficacité du développement.

Il convient de noter qu'il peut y avoir des différences de mise en œuvre entre les éditeurs de codage de l'IA. En outre, cet article n'entrera pas dans les détails de la mise en œuvre de l'utilisation des outils.

Vue d'ensemble du flux de travail de Cline

Pour mieux comprendre le fonctionnement de Cline, examinons un schéma de son flux de travail :

Le mécanisme central de Cline est l'utilisation efficace des invites du système et des capacités de suivi des commandes du grand modèle de langage (LLM). Au début d'une tâche de programmation, Cline recueille toutes les informations pertinentes, y compris les invites du système, les invites définies par l'utilisateur, les entrées de l'utilisateur et les informations sur l'environnement du projet (par exemple, la liste des fichiers du projet, l'onglet de l'éditeur actuellement ouvert, etc.

Lorsque LLM reçoit ces informations, il génère une solution et une instruction d'opération basée sur la commande, et Cline analyse ensuite l'instruction d'opération renvoyée par LLM, par exemple <execute_command /> (exécuter la commande) et <read_file /> (lire un fichier), etc., et invoquer la capacité pré-écrite d'utilisation de l'outil pour effectuer ces opérations et renvoyer les résultats au LLM pour un traitement ultérieur. Il convient de noter que Cline doit généralement interagir avec le LLM plusieurs fois au cours de l'exécution d'une seule tâche de programmation, de sorte que les tâches complexes peuvent être accomplies étape par étape par le biais de plusieurs cycles de dialogue.

Le rôle de l'invite du système

Les messages-guides de Cline sont conçus selon les lignes de la v0 et sont écrits dans les formats Markdown et XML. Le rôle principal de l'invite système est de définir en détail les règles et les exemples d'utilisation des outils de LLM, afin de guider LLM dans l'utilisation efficace de divers outils pour accomplir des tâches de programmation.

Les invites du système de Cline détaillent les spécifications de formatage pour l'utilisation de l'outil :

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

En outre, des informations sur le serveur MCP (Model Context Protocol) sont injectées dans l'invite du système afin que le LLM puisse étendre ses capacités à l'aide d'outils et de ressources supplémentaires fournis par le serveur MCP.

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

Les utilisateurs peuvent personnaliser davantage le comportement de Cline en injectant des commandes personnalisées dans l'invite du système via le fichier .clinerules.

On peut supposer que les éditeurs AI Coding tels que Cursor et WindSurf ont adopté un mécanisme similaire d'injection de commandes définies par l'utilisateur par le biais de fichiers de configuration tels que .cursorrules.

Comme on peut le voir, le cœur de Cline repose sur la capacité du LLM à suivre les instructions afin de réaliser la tâche de programmation. Par conséquent, afin de garantir la précision et la cohérence des résultats de sortie du LLM, Cline règle le paramètre de température du modèle sur 0. Le paramètre de température contrôle le caractère aléatoire des sorties du LLM, et le régler sur 0 signifie que le LLM sélectionnera toujours le résultat de sortie le plus probable, garantissant ainsi le déterminisme dans l'exécution de la tâche.

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

Première série de données : collecte des intentions de l'utilisateur et des informations contextuelles

Les principaux types d'informations que les utilisateurs fournissent à Cline sont les suivants :

• Commandes de texte en saisie directeLes utilisateurs peuvent saisir directement des descriptions en langage naturel des exigences de la tâche de programmation, et Cline enveloppe ces instructions textuelles dans des balises.
• Chemins d'accès aux fichiers, fichiers et URL spécifiés par les symboles @Les utilisateurs peuvent utiliser l'outil @ Cline analyse les références à des fichiers, des répertoires ou des URL externes dans un projet et en extrait le contenu. Pour les fichiers et les répertoires, Cline répertorie la structure du répertoire ; pour les fichiers, Cline lit le contenu du fichier ; et pour les URL, Cline parcourt la page web à l'aide d'outils tels que Puppeteer.

Par exemple, une entrée utilisateur typique peut ressembler à ce qui suit :

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

En plus des informations saisies directement par l'utilisateur, Cline collecte automatiquement des informations sur le contexte du projet, telles que la liste des fichiers dans le répertoire de travail actuel, les onglets ouverts dans l'éditeur VS Code, etc. Ces informations aident LLM à mieux comprendre le contexte du projet et à générer une solution plus réaliste. Ces informations aident LLM à mieux comprendre le contexte du projet et à générer une solution qui correspond mieux aux exigences réelles.

Un exemple d'entrée complète avec des informations sur l'environnement est présenté ci-dessous :

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

L'approche de Cline en matière d'informations sur les projets montre clairement que d'autres éditeurs de codage d'IA (par exemple, Cursor) peuvent utiliser des techniques d'indexation de la base de code plus avancées (par exemple, Embedding) afin de récupérer et d'utiliser plus efficacement les informations de la base de code. En revanche, l'approche de Cline est relativement simple et "brute force".

Première série de retours : Instructions de réflexion et d'utilisation du LLM

Après avoir reçu l'entrée consolidée, le LLM l'analyse et y réfléchit sur la base des invites du système et des instructions de l'utilisateur, et renvoie un résultat comprenant à la fois (le processus de réflexion) et les instructions. Par exemple, pour la tâche "Réaliser un effet d'entourage de système solaire en 3D" mentionnée ci-dessus, le LLM peut renvoyer le résultat suivant :

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

Dans cet exemple, LLM effectue d'abord une analyse de la tâche, définit les exigences de la tâche et l'environnement du projet, et crée un plan d'exécution préliminaire. LLM produit ensuite la commande , qui demande à Cline d'exécuter la commande npm install three @types/three pour installer la bibliothèque Three.js.

Cline peut invoquer une variété d'opérations système prédéfinies en analysant les instructions renvoyées par LLM, y compris mais sans s'y limiter :

• Exécuter des commandes système (execute_command)
• Lecture et écriture de fichiers (read_file, write_to_file)
• Recherche sur le web (search)
• Opérations MCP (use_mcp_tool)

Au fur et à mesure que ces opérations sont effectuées, Cline recueille l'état d'exécution et les résultats des opérations pour les communiquer au LLM lors des interactions suivantes.

Deuxième série d'apports : informations contextuelles incorporées dans les résultats de l'opération

Ensuite, Cline intègre le résultat de l'exécution de l'opération précédente, les informations sur l'état de l'opération, ainsi que les invites précédentes du système, les entrées de l'utilisateur, etc. et les soumet en tant que nouvelles entrées au LLM, en demandant au LLM de donner des conseils sur l'étape d'exécution suivante. Ce processus est répété jusqu'à ce que la tâche soit terminée.

Vous trouverez ci-dessous un exemple de dialogue plus complet montrant comment Cline travaille avec LLM pour mener à bien une tâche par le biais de plusieurs cycles de dialogue :

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

A partir de cet exemple de dialogue, nous pouvons voir que pour accomplir une tâche de programmation simple, Cline doit appeler LLM plusieurs fois dans une boucle, et à travers une interaction continue avec LLM, il affine progressivement l'objectif de la tâche et effectue les opérations correspondantes jusqu'à ce qu'il achève finalement la tâche.

En outre, Cline fait essentiellement remonter toutes les informations pertinentes vers le LLM lors du traitement d'une tâche, ce qui se traduit par une tâche unique Jeton est très élevée. En même temps, cette approche viole facilement la limite de la fenêtre contextuelle de LLM. Afin de traiter le problème de la limitation de la fenêtre contextuelle, Cline adopte une stratégie de traitement relativement simple et directe, c'est-à-dire une troncature brute du contenu d'entrée, et la partie qui dépasse la limitation de la fenêtre sera directement rejetée.

Il peut également s'agir d'une méthode de traitement générique utilisée par d'autres éditeurs d'AI Coding. Dans le cas de l'utilisation de l'option Planche à voile Lors de l'utilisation d'un éditeur d'IA tel que celui-ci, les utilisateurs peuvent se demander pourquoi l'IA ne semble pas être limitée par la fenêtre de contexte LLM et est capable de gérer des tâches qui semblent dépasser la longueur de la fenêtre. Cependant, dans les quiz interactifs suivants, l'IA peut sembler répéter les réponses précédentes, ce qui peut avoir un rapport avec le mécanisme de troncature du contexte.