AI Coding Editor: Descubra cómo funciona Cline

En los últimos años, la tecnología de Inteligencia Artificial (IA) ha provocado un profundo cambio en la programación. Desde v0 y bolt.new, hasta herramientas de programación que integran tecnología de agentes como Cursor y Windsurf, la codificación asistida por IA ha demostrado tener un gran potencial para desempeñar un papel clave en el proceso de desarrollo de software, especialmente en las fases de creación rápida de prototipos y pruebas de concepto. ¿Cuáles son los principios técnicos que subyacen a la evolución de la codificación asistida por IA a la generación directa de proyectos?

En este artículo utilizaremos el proyecto de código abierto Cline A modo de ejemplo, analizamos la aplicación actual de los productos de AI Coding para ayudar a los lectores a comprender los principios subyacentes, de modo que puedan aplicar mejor los editores de AI para mejorar la eficacia del desarrollo.

Debe tenerse en cuenta que puede haber diferencias de implementación entre los editores de AI Coding. Además, este artículo no profundizará en los detalles de implementación de Uso de herramientas.

Resumen del flujo de trabajo de Cline

Para mostrar más claramente cómo funciona Cline, veamos un esquema de su flujo de trabajo:

El mecanismo central de Cline es el uso eficiente de los avisos del sistema y las capacidades de seguimiento de comandos del Modelo de Lenguaje Extenso (LLM). Al iniciar una tarea de programación, Cline recopila toda la información relevante, incluidas las indicaciones del sistema, las indicaciones definidas por el usuario, las entradas del usuario y la información sobre el entorno del proyecto (por ejemplo, la lista de archivos del proyecto, la pestaña del editor abierta en ese momento, etc.), consolida esta información y la envía al LLM.

Cuando LLM recibe esta información, genera una solución e instrucciones basadas en el comando, y Cline analiza las instrucciones devueltas por LLM, como por ejemplo <execute_command /> (ejecutar comando) y <read_file /> (leer archivo), etc., e invocar la capacidad preescrita Tool Use para realizar estas operaciones y devolver los resultados al LLM para su posterior procesamiento. Cabe destacar que Cline suele necesitar interactuar con el LLM varias veces en el transcurso de la realización de una única tarea de programación, de modo que las tareas complejas pueden completarse paso a paso a través de múltiples rondas de diálogo.

El papel del sistema de avisos

Los avisos del sistema de Cline están diseñados siguiendo las líneas de v0 y están escritos en formatos Markdown y XML. El papel principal del sistema de avisos es definir en detalle las reglas y ejemplos del Uso de Herramientas de LLM, para guiar a LLM en el uso efectivo de varias herramientas para completar tareas de programación.

Las indicaciones del sistema de Cline detallan las especificaciones de formato para el uso de herramientas:

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

Además, la información sobre el servidor MCP (Model Context Protocol) se inyecta en el prompt del sistema para que LLM pueda ampliar sus capacidades con herramientas y recursos adicionales proporcionados por el servidor 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
...

Los usuarios pueden personalizar aún más el comportamiento de Cline inyectando comandos personalizados en el prompt del sistema a través del archivo .clinerules.

Cabe suponer que editores de AI Coding como Cursor y WindSurf pueden haber adoptado un mecanismo similar de inyección de comandos definidos por el usuario a través de archivos de configuración como .cursorrules.

Como puede verse, el núcleo de Cline se basa en la capacidad del LLM para seguir instrucciones con el fin de completar la tarea de programación. Por lo tanto, para garantizar la precisión y coherencia de los resultados de salida del LLM, Cline establece el parámetro de temperatura del modelo en 0. El parámetro de temperatura controla la aleatoriedad de las salidas del LLM, y establecerlo en 0 significa que el LLM siempre seleccionará el resultado de salida más probable, garantizando así el determinismo en la ejecución de la tarea.

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

Primera ronda de aportaciones: recopilación de la intención del usuario y de información contextual.

Los principales tipos de información de entrada que los usuarios proporcionan a Cline son los siguientes:

• Comandos de texto de entrada directaLos usuarios pueden introducir directamente descripciones en lenguaje natural de los requisitos de las tareas de programación, y Cline envuelve estas instrucciones textuales en etiquetas.
• Rutas de archivos, archivos y URL especificados mediante símbolos @.: Los usuarios pueden utilizar el @ Cline analiza las referencias a archivos, directorios o URL externas en un proyecto y recupera el contenido. Para archivos y directorios, Cline lista la estructura de directorios; para archivos, Cline lee el contenido del archivo; y para URLs, Cline rastrea el contenido de la página web utilizando herramientas como Puppeteer.

Por ejemplo, una entrada de usuario típica podría tener el siguiente aspecto:

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

Además de la información introducida directamente por el usuario, Cline recopila automáticamente información sobre el contexto del proyecto, como la lista de archivos del directorio de trabajo actual, las pestañas abiertas en el editor VS Code, etc. Esta información ayuda a LLM a comprender mejor el contexto del proyecto y a generar una solución más realista. Esta información ayuda a LLM a comprender mejor el contexto del proyecto y a generar una solución que se ajuste mejor a los requisitos reales.

A continuación se muestra un ejemplo de entrada completa con información del entorno:

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

Del enfoque de Cline sobre la información del proyecto se desprende claramente que otros editores de AI Coding (por ejemplo, Cursor) pueden emplear técnicas más avanzadas de indexación de la base de código (por ejemplo, Embedding) para recuperar y utilizar más eficientemente la información de la base de código. En cambio, el enfoque de Cline es relativamente sencillo y de "fuerza bruta".

Devoluciones de primera vuelta: LLM Thinking and Operating Instructions

Tras recibir la entrada consolidada, el LLM la analiza y reflexiona sobre ella basándose en las indicaciones del sistema y las instrucciones del usuario, y devuelve un resultado consistente en ambas cosas (el proceso de reflexión) y las instrucciones. Por ejemplo, para la tarea "Realizar un efecto envolvente de un sistema solar en 3D" mencionada anteriormente, LLM puede devolver lo siguiente:

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

En este ejemplo, LLM realiza primero un análisis de la tarea, define los requisitos de la tarea y el entorno del proyecto, y crea un plan de ejecución preliminar. A continuación, LLM genera el comando , que indica a Cline que ejecute el comando npm install three @types/three para instalar la biblioteca Three.js.

Cline puede invocar una variedad de operaciones predefinidas del sistema mediante el análisis sintáctico de las instrucciones devueltas por LLM, incluyendo pero no limitado a:

• Ejecutar comandos del sistema (execute_command)
• Leer y escribir archivos (read_file, write_to_file)
• Buscar en la web (búsqueda)
• Operaciones MCP (use_mcp_tool)

A medida que se realizan estas operaciones, Cline recoge el estado de ejecución y los resultados de las operaciones para informar al LLM en interacciones posteriores.

Segunda ronda de aportaciones: información contextual incorporada a los resultados de la operación

A continuación, Cline integrará el resultado de la ejecución de la operación anterior, la información sobre el estado de la operación, así como las palabras de aviso anteriores del sistema, las entradas del usuario, etc., y las enviará como nuevas entradas al LLM, solicitándole que le oriente sobre el siguiente paso de ejecución. Este proceso se repite hasta que se completa la tarea.

A continuación se muestra un ejemplo de diálogo más completo que muestra cómo Cline trabaja con LLM para completar una tarea a través de múltiples rondas de diálogo:

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 este ejemplo de diálogo, podemos ver que para completar una tarea de programación sencilla, Cline necesita llamar a LLM varias veces en un bucle, y a través de la interacción continua con LLM, refina gradualmente el objetivo de la tarea y realiza las operaciones correspondientes hasta que finalmente completa la tarea.

Además, Cline "sube" toda la información relevante al LLM cuando procesa una tarea, lo que da como resultado una única tarea Ficha es muy elevado. Al mismo tiempo, este enfoque puede chocar fácilmente con el límite de ventana de contexto de LLM. Para hacer frente al problema de la limitación de la ventana de contexto, Cline adopta una estrategia de procesamiento relativamente sencilla y directa, es decir, el truncamiento por fuerza bruta del contenido de entrada, y la parte que supere la limitación de la ventana se descartará directamente.

Este también puede ser un tratamiento común utilizado por otros editores de AI Coding. En el caso de utilizar el Windsurf Cuando se utiliza un editor de IA como éste, los usuarios pueden preguntarse por qué la IA parece no estar limitada por la ventana de contexto LLM y es capaz de manejar tareas que parecen exceder la longitud de la ventana. Sin embargo, en cuestionarios interactivos posteriores, la IA puede volver a parecer que repite respuestas anteriores, lo que puede tener algo que ver con el mecanismo de truncamiento del contexto.