AI Coding Editor : Découvrir le fonctionnement de Cline

近年来，人工智能（AI）技术在编程领域引发了一场深刻的变革。从 v0、bolt.new，到集成 Agent 技术的编程工具如 Curseur 和 Windsurf，AI Coding 展现出了在软件开发流程中扮演关键角色的巨大潜力，尤其是在快速原型开发和概念验证阶段。从最初的 AI 辅助编码发展到如今的直接项目生成，背后的技术原理究竟是怎样的？

本文将以开源项目 Cline 为例，深入剖析当前 AI Coding 产品的实现思路，帮助读者了解其深层原理，从而更好地应用 AI 编辑器提升开发效率。

需要注意的是，不同的 AI Coding 编辑器在具体实现上可能存在差异。此外，本文暂不深入探讨 Tool Use（工具调用）的具体实现细节。

Cline 的工作流程概览

为了更清晰地展示 Cline 的运作方式，我们先来看一下其工作流程的示意图：

Cline 的核心机制是有效利用系统提示词 (System Prompt) 和大语言模型 (LLM) 的指令遵循能力。在启动编程任务时，Cline 会收集包括系统提示词、用户自定义提示、用户输入以及项目环境信息（例如项目文件列表、当前打开的编辑器标签页等）在内的所有相关信息，并将这些信息整合后提交给 LLM。

LLM 接收到这些信息后，会根据指令生成相应的解决方案和操作指令。Cline 随后解析 LLM 返回的操作指令，例如 <execute_command /> (执行命令) 和 <read_file /> (读取文件) 等，并调用预先编写好的 Tool Use（工具调用）能力来执行这些操作，并将操作结果反馈给 LLM 进行后续处理。值得注意的是，Cline 在完成单次编程任务的过程中，通常需要多次与 LLM 进行交互，通过多轮对话逐步完成复杂任务。

系统提示词 (System Prompt) 的作用

Cline 的系统提示词设计借鉴了 v0 的思路，并采用 Markdown 和 XML 格式编写。系统提示词的核心作用是详细定义 LLM 的 Tool Use（工具调用）规则和使用示例，从而指导 LLM 如何有效地利用各种工具来完成编程任务。

Cline 的系统提示词中，详细规定了 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>

此外，系统提示词中还会注入 MCP (Model Context Protocol) 服务器的相关信息，以便 LLM 能够利用 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
...

用户还可以通过 .clinerules 文件将自定义指令注入到系统提示词中，从而进一步定制 Cline 的行为。

由此可以推测，Cursor 和 WindSurf 等 AI Coding 编辑器可能也采用了类似的机制，通过 .cursorrules 等配置文件来注入用户自定义指令。

可以看出，Cline 的核心是依赖 LLM 的指令遵循能力来完成编程任务。因此，为了确保 LLM 输出结果的准确性和一致性，Cline 将模型的 temperature 参数设置为 0。Temperature 参数控制着 LLM 输出的随机性，设置为 0 意味着 LLM 将始终选择最有可能的输出结果，从而保证任务执行的确定性。

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

第一轮输入：收集用户意图和环境信息

用户向 Cline 提供的输入信息主要包括以下几种类型：

• 直接输入的文本指令：用户可以直接输入自然语言描述的编程任务需求，Cline 会将这些文本指令用 标签包裹起来。
• 通过 @ 符号指定的文件路径、文件和 URL：用户可以使用 @ 符号来引用项目中的文件、目录或外部 URL。Cline 能够解析这些引用，并获取相应的内容。对于文件目录，Cline 会列出目录结构；对于文件，Cline 会读取文件内容；对于 URL，Cline 则会使用 Puppeteer 等工具抓取网页内容。

例如，一个典型的用户输入可能如下所示：

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

除了用户直接输入的信息外，Cline 还会自动收集项目环境信息，例如当前工作目录的文件列表、VS Code 编辑器中打开的标签页等。这些环境信息可以帮助 LLM 更好地理解项目 context，从而生成更贴合实际需求的解决方案。

一个包含环境信息的完整输入示例如下：

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

从 Cline 对项目信息的处理方式可以看出，其他 AI Coding 编辑器（例如 Cursor）可能采用了更高级的代码库索引技术 (Codebase Indexing)，例如 Embedding，以便更高效地检索和利用代码库中的信息。相比之下，Cline 的方法则显得相对直接和 "粗暴"。

第一轮返回：LLM 的思考与操作指令

在接收到整合后的输入信息后，LLM 会根据系统提示词和用户指令进行分析和思考，并返回包含 (思考过程) 和操作指令两部分的结果。例如，针对上述 “实现太阳系 3D 环绕效果” 的任务，LLM 可能返回如下内容：

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

在这个例子中，LLM 首先进行了任务分析，明确了任务需求和项目环境，并制定了初步的执行计划。随后，LLM 输出了 <execute_command> 指令，指示 Cline 执行 npm install three @types/three 命令来安装 Three.js 库。

Cline 通过解析 LLM 返回的指令，可以调用各种预设的系统操作，包括但不限于：

• 执行系统命令 (execute_command)
• 读写文件 (read_file, write_to_file)
• 搜索网络内容 (search)
• MCP 操作 (use_mcp_tool)

在执行这些操作的过程中，Cline 会收集操作的执行状态和结果，以便在后续的交互中反馈给 LLM。

第二轮输入：融入操作结果的上下文信息

接下来，Cline 会将上一步操作的执行结果、操作状态信息，以及之前的系统提示词、用户输入等信息再次整合，并作为新的输入提交给 LLM，请求 LLM 给出下一步的执行指导。这个过程会循环往复进行，直到任务完成。

以下是一个更完整的对话示例，展示了 Cline 如何通过多轮对话与 LLM 协同完成任务：

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

从这个对话示例可以看出，完成一个简单的编程任务，Cline 需要多次循环调用 LLM，通过不断地与 LLM 进行交互，逐步细化任务目标并执行相应的操作，直至最终完成任务。

此外，Cline 在处理任务时，基本上是将所有相关信息都 "一股脑" 地塞给 LLM，这导致单次任务的 Jeton 消耗量非常高。同时，这种方式也很容易触及 LLM 的上下文窗口限制。为了应对上下文窗口限制问题，Cline 采取了一种相对简单直接的处理策略，即暴力截断输入内容，超出窗口限制的部分将被直接丢弃。

这可能也是其他 AI Coding 编辑器所采用的通用处理方法。在使用 Planche à voile 等 AI 编辑器时，用户可能会感到疑惑，为什么 AI 似乎不受 LLM 上下文窗口的限制，能够处理看似超出窗口长度的任务。然而，在后续的交互问答中，AI 又可能会出现重复之前回答的情况，这或许就与上下文截断机制有关。