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. e
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:
Formatação do uso da ferramenta #
O uso da ferramenta é formatado usando tags no estilo XML. O nome da ferramenta é colocado em tags de abertura e fechamento, e cada parâmetro é colocado de forma semelhante em seu próprio conjunto de tags. O nome da ferramenta é colocado em tags de abertura e fechamento, e cada parâmetro é colocado de forma semelhante em seu próprio conjunto de tags.
<nome_da_ferramenta
valor1
valor2
...
</tool_name
Por exemplo.
src/main.js
</read_file
Sempre siga esse formato para o uso da ferramenta a fim de garantir a análise e a execução adequadas.
Ferramentas #
## execute_command
## write_to_file
...
## Exemplo 4: Solicitação de uso de uma ferramenta MCP
<use_mcp_tool
servidor_do_tempo
get_forecast</nome_da_ferramenta
<argumentos
{
"cidade": "São Francisco",
"days": 5
}
O servidor MCP também é injetado na palavra de prompt do sistema.
SERVIDORES MCP
Os Modelo de protocolo de contexto (MCP) permite a comunicação entre o sistema e os servidores MCP em execução local que fornecem ferramentas e recursos adicionais para ampliar seus recursos .
Servidores MCP conectados ao #
....
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, // o número de mensagens a serem enviadas para o cliente.
temperature: 0, // definido como 0
stream: true, // definido como 0
stream_options: { include_usage: true }, })
})
Primeira entrada
Existem várias entradas para o usuário, respectivamente:
- Cópia digitada diretamente com
incorporar
- 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:
Implementar um efeito 3D envolvente do sistema solar 'app/page.tsx' (veja abaixo o conteúdo do arquivo) 'https://stackoverflow.com/questions/23673275/orbital-mechanics-for-a- solar-system-visualisation-in-three-js-x-y-z-for-planet' (veja abaixo o conteúdo do site)
</task
importar Image de "next/image";
exportar função padrão 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:
Implementar um efeito envolvente do sistema solar em 3D
</task
<detalhes_do_ambiente
Arquivos visíveis do # VSCode
(Não há arquivos visíveis)
# VSCode Abrir abas
(Não há guias abertas)
# Hora atual
1/23/2025, 4:41:03 PM (Ásia/Shanghai, UTC+8:00)
# Diretório de trabalho atual (/Users/nazha/nazha-all/cline-dev/nazha) Arquivos
.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
Modo atual do #
MODO ACT
</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 e as duas partes da operação. Por exemplo:
Analisar os requisitos da tarefa.
1. é necessário criar um efeito surround do sistema solar em 3D
2. o projeto atual é um projeto Next.js (de acordo com next.config.ts e a estrutura do diretório do aplicativo)
3. preciso adicionar funcionalidade 3D, posso usar a biblioteca Three.js
4. preciso criar um novo componente para exibir o efeito 3D
Próximas etapas:
1. instalar a dependência do Three.js
2. criar um novo componente para exibir o sistema solar em 3D
3. introduzir o componente na página
</thinking
<execute_command
npm install three @types/three
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:
- executar um comando
- Ler e gravar arquivos
- Pesquisar conteúdo
- 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.
função: sistema
conteúdo: [... omitido]
função: usuário
conteúdo: [
{
type: 'text',, \n
text: '\nImplementar um efeito surround 3D do sistema solar\n';
}, {
{
type: 'text', {
text:"... "
}
]
role: 'assistant',, text: "..." } ]
content: '\nAnálise dos requisitos da tarefa:\n1. preciso criar um efeito envolvente do sistema solar em 3D\n2. o projeto atual é um projeto Next.js (a julgar pelo next.config.ts e pela estrutura do diretório do aplicativo)\n3. preciso adicionar funcionalidade 3D, o que pode ser feito usando a biblioteca Three.js\n4. preciso criar um novo componente, que pode ser usado no projeto next.js (a julgar pelo next.config.ts e pela estrutura do diretório do aplicativo)\n5. n4. preciso criar um novo componente para mostrar o efeito 3D\n\nPróximas etapas:\n1. instalar a dependência do Three.js\n2. criar um novo componente para mostrar o sistema solar 3D\n3. introduzir o componente na página\n\n\n\nnpm install three @types/three\nfalse\n'
função: 'usuário',
conteúdo: [
{
type: 'text',
text: ' [execute_command for 'npm install three @types/three'] Result:'
}, {
{
type: 'text', {
text: 'Command executed.\nOutput:\n⠙⠹⠸⠼⠴⠦ ⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦ ⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦ ⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦ ⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦ ⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦ procurando financiamento\n⠏ execute `npm fund` para obter detalhes\n⠏\nfound 0 vulnerabilidades\n⠏'.
}, {
{
type: 'text', {
content: '\n# VSCode Visible Files\n(Nenhum arquivo visível)\n\n# VSCode Open Tabs\n(Nenhuma guia aberta)\n\n# Hora atual\n1/23/2025, 10:01:33 PM (Ásia/Shanghai, UTC+8:00)\n\n# Modo atual\nModo ATIVO\n'
}]
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.