Editor de codificação de IA: descobrindo como o Cline funciona

Nos últimos anos, a tecnologia de Inteligência Artificial (IA) provocou uma profunda mudança na programação. De v0 e bolt.new a ferramentas de programação que integram a tecnologia de agentes, como Cursor e Windsurf, a codificação com IA demonstrou grande potencial para desempenhar uma função importante no processo de desenvolvimento de software, especialmente nas fases de prototipagem rápida e prova de conceito. Quais são os princípios técnicos por trás da evolução da codificação assistida por IA para a geração direta de projetos?

Neste artigo, usaremos o projeto de código aberto Cline Como exemplo, analisamos a implementação atual dos produtos de codificação de IA para ajudar os leitores a entender os princípios subjacentes, de modo que possam aplicar melhor os editores de IA para aumentar a eficiência do desenvolvimento.

Deve-se observar que pode haver diferenças de implementação entre os editores do AI Coding. Além disso, este artigo não se aprofundará nos detalhes de implementação do Tool Use.

Visão geral do fluxo de trabalho do Cline

Para mostrar mais claramente como o Cline funciona, vamos dar uma olhada em um esquema do seu fluxo de trabalho:

O mecanismo principal do Cline é o uso eficiente dos prompts do sistema e dos recursos de acompanhamento de comandos do modelo de linguagem grande (LLM). Ao iniciar uma tarefa de programação, o Cline coleta todas as informações relevantes, incluindo System Prompts, prompts definidos pelo usuário, entrada do usuário e informações sobre o ambiente do projeto (por exemplo, a lista de arquivos do projeto, a guia do editor aberta no momento etc.), consolida essas informações e as envia ao LLM.

Quando o LLM recebe essas informações, ele gera uma solução e instruções com base no comando, e o Cline analisa as instruções retornadas pelo LLM, como <execute_command /> (executar comando) e <read_file /> (ler arquivo) etc., e invocar o recurso pré-escrito Tool Use para executar essas operações e enviar os resultados de volta ao LLM para processamento posterior. É importante observar que o Cline geralmente precisa interagir com o LLM várias vezes durante a conclusão de uma única tarefa de programação, de modo que tarefas complexas possam ser concluídas passo a passo por meio de várias rodadas de diálogo.

A função do prompt do sistema

Os prompts do sistema do Cline são projetados de acordo com as linhas da v0 e são escritos nos formatos Markdown e XML. A função principal do prompt do sistema é definir detalhadamente as regras e os exemplos de uso de ferramentas do LLM, de modo a orientar o LLM sobre como usar efetivamente várias ferramentas para concluir tarefas de programação.

Os prompts do sistema Cline detalham as especificações de formatação do Tool Use:

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

Além disso, as informações sobre o servidor MCP (Model Context Protocol) são injetadas no prompt do sistema para que o LLM possa ampliar seus recursos com ferramentas e recursos adicionais fornecidos pelo 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
...

Os usuários podem personalizar ainda mais o comportamento do Cline injetando comandos personalizados no prompt do sistema por meio do arquivo .clinerules.

Pode-se supor que os editores de AI Coding, como o Cursor e o WindSurf, podem empregar um mecanismo semelhante para injetar comandos definidos pelo usuário por meio de arquivos de configuração, como .cursorrules.

Como pode ser visto, o núcleo do Cline depende da capacidade do LLM de seguir instruções para concluir a tarefa de programação. Portanto, para garantir a precisão e a consistência dos resultados de saída do LLM, o Cline define o parâmetro de temperatura do modelo como 0. O parâmetro de temperatura controla a aleatoriedade das saídas do LLM, e defini-lo como 0 significa que o LLM sempre selecionará o resultado de saída mais provável, garantindo assim o determinismo na execução da tarefa.

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

Primeira rodada de entradas: coleta da intenção do usuário e de informações contextuais

Os principais tipos de informações de entrada que os usuários fornecem ao Cline incluem o seguinte:

• Comandos de texto de entrada diretaOs usuários podem inserir diretamente descrições em linguagem natural dos requisitos de tarefas de programação, e o Cline agrupa essas instruções textuais em tags.
• Caminhos de arquivos, arquivos e URLs especificados por símbolos @Usuários podem usar o @ O Cline analisa referências a arquivos, diretórios ou URLs externos em um projeto e recupera o conteúdo. Para arquivos e diretórios, o Cline lista a estrutura do diretório; para arquivos, o Cline lê o conteúdo do arquivo; e para URLs, o Cline rastreia o conteúdo da página da Web usando ferramentas como o Puppeteer.

Por exemplo, uma entrada de usuário típica pode ser parecida com a seguinte:

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

Além das informações inseridas diretamente pelo usuário, o Cline coleta automaticamente informações sobre o contexto do projeto, como a lista de arquivos no diretório de trabalho atual, as guias abertas no editor do VS Code etc. Essas informações ajudam o LLM a entender melhor o contexto do projeto e a gerar uma solução mais realista. Essas informações ajudam o LLM a entender melhor o contexto do projeto e a gerar uma solução mais adequada aos requisitos reais.

Um exemplo de uma entrada completa com informações sobre o ambiente é mostrado abaixo:

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

A abordagem de Cline em relação às informações do projeto deixa claro que outros editores de codificação de IA (por exemplo, Cursor) podem empregar técnicas mais avançadas de indexação de base de código (por exemplo, incorporação) para recuperar e utilizar com mais eficiência as informações da base de código. Em contrapartida, a abordagem de Cline é relativamente simples e de "força bruta".

Devoluções da primeira rodada: Instruções operacionais e de raciocínio do LLM

Depois de receber a entrada consolidada, o LLM analisa e pensa sobre ela com base nos prompts do sistema e nas instruções do usuário, e retorna um resultado que consiste em ambos (o processo de pensamento) e as instruções. Por exemplo, para a tarefa "Realize a 3D solar system surround effect" mencionada acima, o LLM pode retornar o seguinte:

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

Neste exemplo, o LLM primeiro realiza uma análise da tarefa, define os requisitos da tarefa e o ambiente do projeto e cria um plano de execução preliminar. Em seguida, o LLM emite o comando , que instrui o Cline a executar o comando npm install three @types/three para instalar a biblioteca Three.js.

O Cline pode invocar uma variedade de operações predefinidas do sistema analisando as instruções retornadas pelo LLM, incluindo, entre outras, as seguintes:

• Executar comandos do sistema (execute_command)
• Ler e gravar arquivos (read_file, write_to_file)
• Pesquisar na web (search)
• Operações de MCP (use_mcp_tool)

À medida que essas operações são executadas, o Cline coleta o status de execução e os resultados das operações para dar feedback ao LLM nas interações subsequentes.

Segunda rodada de inputs: informações contextuais incorporadas aos resultados da operação

Em seguida, o Cline integrará o resultado da execução da operação anterior, as informações de status da operação, bem como as palavras de aviso do sistema anterior, as entradas do usuário, etc., e as enviará como novas entradas para o LLM, solicitando que o LLM forneça orientação sobre a próxima etapa de execução. Esse processo é repetido até que a tarefa seja concluída.

Abaixo está um exemplo de diálogo mais completo que mostra como Cline trabalha com o LLM para concluir uma tarefa por meio de várias rodadas 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 desse exemplo de diálogo, podemos ver que, para concluir uma tarefa simples de programação, o Cline precisa chamar o LLM várias vezes em um loop e, por meio da interação contínua com o LLM, ele refina gradualmente o objetivo da tarefa e executa as operações correspondentes até finalmente concluir a tarefa.

Além disso, o Cline basicamente empurra todas as informações relevantes "para cima" do LLM ao processar uma tarefa, o que resulta em uma única tarefa Token O consumo é muito alto. Ao mesmo tempo, essa abordagem pode facilmente atingir o limite da janela de contexto do LLM. Para lidar com o problema da limitação da janela de contexto, o Cline adota uma estratégia de processamento relativamente simples e direta, ou seja, truncamento de força bruta do conteúdo de entrada, e a parte que excede a limitação da janela será descartada diretamente.

Esse também pode ser um método de processamento genérico usado por outros editores do AI Coding. No caso de usar o Windsurf Ao usar um editor de IA como este, os usuários podem se perguntar por que a IA parece não ser limitada pela janela de contexto do LLM e é capaz de lidar com tarefas que parecem exceder o tamanho da janela. Entretanto, em questionários interativos subsequentes, a IA pode parecer repetir respostas anteriores, o que pode estar relacionado ao mecanismo de truncamento de contexto.