Apprenez comment fonctionne le codage de l'IA, en commençant par Cline !

De manière inattendue, l'IA a déclenché un ciel en demi-teinte dans le domaine de la programmation. De v0, bolt.new à toutes sortes d'outils de programmation Cursor, Windsurf combinés à Agant, AI Coding a déjà un énorme potentiel d'idées MVP. Du codage traditionnel assisté par l'IA à la génération directe de projets d'aujourd'hui, comment y parvenir ?

Cet article se penche sur les produits open source Cline À partir de là, nous jetterons un coup d'œil sur certaines idées de mise en œuvre des produits de codage de l'IA à ce stade. En même temps, vous pourrez comprendre les principes profonds et mieux utiliser les éditeurs d'IA.

La mise en œuvre finale peut ne pas être cohérente entre les éditeurs d'AI Coding. Par ailleurs, cet article n'entrera pas dans les détails de la mise en œuvre de l'utilisation des outils.

Cline J'ai fait une esquisse du processus global :

Cline s'appuie essentiellement sur les invites du système et sur les capacités d'adhésion aux commandes du Big Language Model. Au début d'une tâche de programmation, les invites du système, les invites définies par l'utilisateur, les données de l'utilisateur et les informations sur l'environnement du projet (fichiers, onglets ouverts, etc.) sont collectées et soumises au LLM, qui produit des solutions et des actions conformément aux directives, et au LLM, qui produit des solutions et des actions conformément aux directives, et au LLM, qui produit des solutions et des actions conformément aux directives. <execute_command />,<read_file />Cline appelle la capacité d'utilisation de l'outil écrit pour effectuer le traitement et transmet les résultats au LLM pour traitement. Cline fait plusieurs appels au LLM pour réaliser une seule tâche.

repère du système

Les invites du système de Cline sont des invites de type v0, écrites en Markdown et XML. Les règles d'utilisation de l'outil LLM et les exemples d'utilisation sont définis en détail :

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

Le serveur MCP est également injecté dans le mot-clé du système.

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 commandes de l'utilisateur peuvent également être transmises par l'intermédiaire de la fonction .clinerules injecté dans le mot-clé du système.

Nous pouvons donc supposer que le curseur et les WindSurf L'injection de .cursorrules est similaire

On constate que Cline dépend essentiellement de la capacité du LLM à suivre des instructions, et la température du modèle est donc réglée sur 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 },
})

Première entrée

L'utilisateur dispose respectivement de plusieurs entrées :

1. Copie directement dactylographiée avec <task /> incorporer
2. faire passer (un projet de loi, une inspection, etc.) @ Répertoire du fichier d'entrée, fichier et url

Dans Cline.@ Il n'y a pas beaucoup de technique à mettre en œuvre : pour les répertoires de fichiers, il s'agit de lister la structure des répertoires de fichiers ; pour les fichiers, il s'agit de lire le contenu du fichier ; et pour l'url, il s'agit de lire le contenu directement à partir du marionnettiste. Ensuite, il prend le contenu et les données de l'utilisateur et les transmet à LLM.

Un exemple d'entrée est le suivant :

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

L'entrée utilisateur contient également un type d'informations sur l'environnement du projet, comme la liste des fichiers dans le répertoire de travail actuel, les onglets que vscode ouvre, etc.

Une tâche simple donne les informations suivantes au LLM :

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

Comme vous pouvez le voir ici, d'autres éditeurs AI Coding (tels que Cursor)c'est possibleL'intégration de la base de code, mais cline est un peu plus brutale et directe.

Retour premier tour #

Le LLM est renvoyé conformément à la commande (la température est fixée à 0) et contient généralement les éléments suivants <thinking /> et les deux parties de l'opération. A titre d'exemple :

<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, Cline invoque diverses opérations du système en analysant les instructions produites par LLM, y compris mais sans s'y limiter :

1. exécuter une commande
2. Lire et écrire des fichiers
3. Contenu de la recherche
4. Fonctionnement du MCP

Parallèlement, Cline recueille divers types d'informations sur l'état des opérations.

Deuxième entrée

Ensuite, Cline transmet au LLM le comportement de l'utilisateur, l'état de la sortie et le résultat de l'opération précédente, y compris l'invite précédente du système et l'entrée de l'utilisateur, en demandant au LLM de donner des conseils sur la prochaine étape à suivre. Et ainsi de suite.

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

Comme vous pouvez le voir, le traitement d'une seule tâche nécessite de faire des boucles pour appeler le LLM plusieurs fois jusqu'à ce que la tâche soit terminée. D'autre part, Cline se contente de tout envoyer dans le LLM, une tâche à la fois. Jeton L'utilisation est très élevée.

Un autre problème est qu'il est facile de déclencher la limite de la fenêtre contextuelle de LLM, et la stratégie de Cline pour y remédier est de la tronquer violemment.

C'est probablement ainsi que les autres éditeurs d'AI Coding le gèrent également. Lorsque j'utilisais windsurf auparavant, j'étais curieux de savoir pourquoi il n'était pas limité par la fenêtre contextuelle LLM. Cependant, la réponse précédente est souvent répétée dans les questions-réponses ultérieures.