Aprende cómo funciona la codificación de IA, ¡empezando por Cline!

Inesperadamente, AI ha puesto en marcha un cielo medio cambiante en el campo de la programación. De v0, bolt.new a todo tipo de herramientas de programación Cursor, Windsurf combinado con Agant, AI Codificación ya tiene un enorme potencial de idea MVP. De la codificación tradicional asistida por IA, a la generación directa de proyectos de hoy detrás, al final ¿cómo lograr?

En este artículo se examinan los productos de código abierto Cline A partir de ahí, echaremos un vistazo a algunas de las ideas de implementación de los productos de AI Coding en esta etapa. Al mismo tiempo, podrás comprender los principios más profundos y utilizar mejor el editor de IA.

La implementación final puede no ser consistente en todos los editores de AI Coding. Además, este artículo no entrará en los detalles de implementación de Uso de herramientas.

Cline hice un esbozo del proceso general:

En esencia, Cline se basa en las instrucciones del sistema y en las capacidades de adhesión a comandos del Big Language Model. Al comienzo de una tarea de programación, se recopilan las indicaciones del sistema, las indicaciones definidas por el usuario, las entradas del usuario y la información sobre el entorno del proyecto (qué archivos, pestañas abiertas, etc.) y se envían al LLM, que emite soluciones y acciones de acuerdo con las directivas, y al LLM, que emite soluciones y acciones de acuerdo con las directivas, y al LLM, que emite soluciones y acciones de acuerdo con las directivas. <execute_command />y<read_file />Cline llama a la capacidad de uso de herramientas escritas para realizar el procesamiento y pasa los resultados al LLM para su procesamiento. Cline realiza varias llamadas al LLM para completar una única tarea.

señal del sistema

Las instrucciones del sistema de Cline son similares a las de v0, escritas en Markdown y XML. Las reglas de uso de la herramienta LLM y los ejemplos de uso se definen en detalle:

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

El servidor MCP también se inyecta en la palabra de aviso del sistema.

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 comandos de usuario también se pueden pasar a través de .clinerules inyectada en la palabra clave del sistema.

De esto podemos aventurarnos a suponer que Cursor y WindSurf Inyectar .cursorrules es similar

Se puede observar que Cline depende en su esencia de la capacidad de la LLM para seguir instrucciones, por lo que la temperatura del modelo se fija en 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 },
})

Primera entrada

Existen múltiples entradas para el usuario, respectivamente:

1. Copia mecanografiada directamente con <task /> abarcar
2. aprobar (una factura o inspección, etc.) @ Directorio, archivo y url del archivo de entrada

En Cline.@ No hay mucha tecnología involucrada, para directorios de archivos, lista la estructura del directorio de archivos; para archivos, lee el contenido del archivo; y para url, lee el contenido directamente desde puppeteer. Luego toma el contenido y la entrada del usuario y lo envía a LLM.

Un ejemplo de entrada es el siguiente:

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

La entrada del usuario también contiene un tipo de información sobre el entorno del proyecto, como la lista de archivos en el directorio de trabajo actual, las pestañas que vscode abre, etc.

Una tarea sencilla da la siguiente entrada al 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>

Como puedes ver aquí, otros editores de AI Coding (como Cursor)es posibleIncrustar la base de código, pero cline es un poco más de fuerza bruta y directa.

La primera ronda devuelve #

El LLM se devuelve según lo requerido por el comando (la temperatura se establece en 0) y normalmente contiene <thinking /> y funcionamiento en dos partes. Por ejemplo:

<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, Cline invoca varias operaciones del sistema mediante el análisis sintáctico de las instrucciones emitidas por LLM, entre las que se incluyen:

1. ejecutar un comando
2. Leer y escribir archivos
3. Buscar contenido
4. Funcionamiento del MCP

Al mismo tiempo, Cline recopila varios tipos de información sobre el estado de funcionamiento.

Segunda entrada

A continuación, Cline enviará de nuevo al LLM el comportamiento del usuario, el estado de la salida y el resultado de la operación anterior, incluyendo el prompt anterior del sistema y la entrada del usuario, solicitando al LLM que le oriente sobre el siguiente paso a dar. Y así sucesivamente.

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

Como puedes ver, procesar una sola tarea requiere hacer bucles de ida y vuelta para llamar a la LLM varias veces hasta que la tarea termina. La otra cosa es que Cline básicamente mete todo en el LLM, una tarea a la vez. Ficha El uso es muy elevado.

Otro problema es que es fácil disparar el límite de la ventana contextual de LLM, y la estrategia de Cline para lidiar con esto es truncarla violentamente.

Esto es presumiblemente como otros editores de AI Coding lo manejan también. Cuando usaba windsurf antes, tenía curiosidad por saber por qué no estaba limitado por la ventana contextual de LLM. Sin embargo, la respuesta anterior se repite a menudo en preguntas y respuestas posteriores.