Saiba como funciona o AI Coding, começando com o Cline!

Inesperadamente, a IA desencadeou um céu de meia mudança no campo da programação. De v0, bolt.new a todos os tipos de ferramentas de programação Cursor, Windsurf combinadas com Agant, a codificação de IA já tem um enorme potencial de ideias MVP. Desde a tradicional codificação assistida por IA até a atual geração direta de projetos, como chegar ao final?

Este artigo examinará os produtos de código aberto Cline A partir daí, daremos uma olhada em algumas das ideias de implementação dos produtos de codificação de IA neste estágio. Ao mesmo tempo, você poderá entender os princípios mais profundos e fazer melhor uso dos editores de IA.

A implementação final pode não ser consistente em todos os editores do AI Coding. Além disso, este artigo não entrará em detalhes sobre a implementação do Tool Use.

Cline Fiz um esboço do processo geral:

Em sua essência, o Cline se baseia em prompts do sistema e nos recursos de adesão a comandos do Big Language Model. No início de uma tarefa de programação, os prompts do sistema, os prompts definidos pelo usuário, a entrada do usuário e as informações sobre o ambiente do projeto (quais arquivos, abas abertas etc.) são coletados e enviados ao LLM, que gera soluções e ações de acordo com as diretrizes, e ao LLM, que gera soluções e ações de acordo com as diretrizes, e ao LLM, que gera soluções e ações de acordo com as diretrizes, e ao LLM, que gera soluções e ações de acordo com as diretrizes. <execute_command />e<read_file />O Cline chama o recurso escrito Tool Use para executar o processamento e passa os resultados para o LLM para processamento. O Cline faz várias chamadas ao LLM para concluir uma única tarefa.

sinalização do sistema

Os prompts do sistema do Cline são prompts do tipo v0, escritos em Markdown e XML. Ele define regras detalhadas de uso da ferramenta LLM e exemplos de uso:

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

O servidor MCP também é injetado na palavra de prompt do 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
...

Os comandos do usuário também podem ser passados pelo .clinerules injetado na palavra-chave do sistema.

A partir disso, podemos nos arriscar a supor que o Cursor e o WindSurf A injeção de .cursorrules é semelhante

É possível observar que o Cline depende fundamentalmente da capacidade do LLM de seguir instruções, de modo que a temperatura do modelo é definida como 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 },
})

Primeira entrada

Existem várias entradas para o usuário, respectivamente:

1. Cópia digitada diretamente com <task /> incorporar
2. aprovar (um projeto de lei ou inspeção etc.) @ Diretório, arquivo e url do arquivo de entrada

Em Cline.@ Não há muita tecnologia envolvida: para diretórios de arquivos, liste a estrutura do diretório de arquivos; para arquivos, leia o conteúdo do arquivo; e para url, leia o conteúdo diretamente do titereiro. Em seguida, ele pega o conteúdo e a entrada do usuário e os envia para o LLM.

Um exemplo de entrada é o 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>

A entrada do usuário também contém um tipo de informação sobre o ambiente do projeto, como a lista de arquivos no diretório de trabalho atual, as guias que o vscode abre e assim por diante.

Uma tarefa simples fornece a seguinte entrada para o 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 você pode ver aqui, outros editores de codificação de IA (como o Cursor)é possívelIncorporar a base de código, mas o cline é um pouco mais direto e de força bruta.

Retorno da primeira rodada #

O LLM é retornado conforme exigido pelo comando (a temperatura é definida como 0) e, normalmente, contém <thinking /> e as duas partes da operação. Por exemplo:

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

Nesse exemplo, o Cline invoca várias operações do sistema analisando as instruções emitidas pelo LLM, incluindo, entre outras, as seguintes:

1. executar um comando
2. Ler e gravar arquivos
3. Pesquisar conteúdo
4. Operação da MCP

Ao mesmo tempo, a Cline coleta vários tipos de informações sobre o status da operação.

Segunda entrada

Em seguida, o Cline enviará o comportamento do usuário, o status da saída e o resultado da operação anterior, incluindo o prompt do sistema anterior e a entrada do usuário, para o LLM novamente, solicitando que o LLM forneça orientação sobre a próxima etapa a ser executada. E assim por diante.

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 você pode ver, o processamento de uma única tarefa requer um looping de ida e volta para chamar o LLM várias vezes até que a tarefa seja concluída. O outro aspecto é que o Cline basicamente empurra tudo para o LLM, uma tarefa de cada vez. Token O uso é muito alto.

Outro problema é que é fácil acionar o limite da janela de contexto do LLM, e a estratégia de Cline para lidar com isso é truncá-la violentamente.

Provavelmente, é assim que outros editores de codificação de IA também lidam com isso. Quando eu estava usando o windsurf antes, fiquei curioso para saber por que ele não era limitado pela janela de contexto do LLM. No entanto, a resposta anterior é frequentemente repetida em perguntas e respostas posteriores.