Редактор кодирования ИИ: раскрытие принципов работы Клина

В последние годы технология искусственного интеллекта (ИИ) вызвала глубокие изменения в программировании. От v0 и bolt.new до инструментов программирования, интегрирующих технологию агентов, таких как Курсор и Windsurf, кодирование с помощью искусственного интеллекта продемонстрировало огромный потенциал для того, чтобы играть ключевую роль в процессе разработки программного обеспечения, особенно на этапах быстрого создания прототипов и доказательства концепции. Какие технические принципы лежат в основе перехода от кодирования с помощью ИИ к непосредственной генерации проектов?

В этой статье мы будем использовать проект с открытым исходным кодом Клайн В качестве примера мы анализируем текущую реализацию продуктов AI Coding, чтобы помочь читателям понять основополагающие принципы, чтобы они могли лучше применять редакторы AI для повышения эффективности разработки.

Следует отметить, что в разных редакторах AI Coding могут быть различия в реализации. Кроме того, в этой статье мы не будем углубляться в детали реализации Tool Use.

Обзор рабочего процесса Клайна

Чтобы нагляднее показать, как работает Cline, давайте посмотрим на схему его рабочего процесса:

Основным механизмом Cline является эффективное использование системных подсказок и возможностей следования командам Большой языковой модели (LLM). При запуске задачи программирования Cline собирает всю необходимую информацию, включая системные подсказки, пользовательские подсказки, пользовательский ввод и информацию о среде проекта (например, список файлов проекта, открытую в данный момент вкладку редактора и т. д.), консолидирует эту информацию и отправляет ее в LLM.

Когда LLM получает эту информацию, он генерирует соответствующее решение и инструкции по выполнению операций на основе команд. Затем Cline анализирует инструкции по выполнению операций, возвращенные LLM, например <execute_command /> (выполнить команду) и <read_file /> (чтение файла) и т. д., и вызвать заранее написанную функцию Tool Use для выполнения этих операций и отправки результатов обратно в LLM для последующей обработки. Стоит отметить, что Клайн обычно должен взаимодействовать с LLM несколько раз в процессе выполнения одной задачи программирования, так что сложные задачи могут быть выполнены шаг за шагом через несколько раундов диалога.

Роль системной подсказки

Системные подсказки Клайна разработаны по образцу v0 и написаны в форматах Markdown и XML. Основная роль системной подсказки заключается в подробном определении правил и примеров использования инструментов LLM, чтобы подсказать 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
...

Пользователи могут дополнительно настроить поведение Cline, введя пользовательские команды в системный запрос через файл .clinerules.

Можно предположить, что редакторы AI Coding, такие как Cursor и WindSurf, могли использовать аналогичный механизм введения пользовательских команд через конфигурационные файлы, такие как .cursorrules.

Как видно, в основе Cline лежит способность LLM следовать инструкциям для выполнения задачи программирования. Поэтому, чтобы обеспечить точность и согласованность выходных результатов LLM, Cline устанавливает параметр температуры модели в 0. Параметр температуры контролирует случайность выходных результатов 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-адреса, указанные символами @: Пользователи могут использовать @ Cline анализирует ссылки на файлы, каталоги или внешние URL-адреса в проекте и извлекает их содержимое. Для файлов и каталогов 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 лучше понять контекст проекта и сгенерировать более реалистичное решение. Эта информация помогает 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>

Из подхода Клайна к работе с информацией о проекте ясно, что в других редакторах AI Coding (например, Cursor) могут использоваться более продвинутые методы индексирования кодовой базы (например, Embedding) для более эффективного извлечения и использования информации из кодовой базы. В отличие от этого, подход Клайна является относительно простым и "грубой силой".

Первый раунд возвращения: 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 выводит команду , которая предписывает Клайну выполнить команду npm install three @types/three для установки библиотеки Three.js.

Cline может вызывать различные предопределенные системные операции, разбирая инструкции, возвращаемые LLM, включая, но не ограничиваясь этим:

• Выполнение системных команд (execute_command)
• Чтение и запись файлов (read_file, write_to_file)
• Поиск в Интернете (поиск)
• MCP-операции (use_mcp_tool)

По мере выполнения этих операций Cline собирает статус выполнения и результаты операций для обратной связи с LLM в последующих взаимодействиях.

Второй раунд ввода: контекстная информация, включенная в результаты операции

Далее Cline интегрирует результат выполнения предыдущей операции, информацию о состоянии операции, а также предыдущие системные подсказки и пользовательские данные и передает их в качестве новых входных данных в LLM, запрашивая у LLM указания по следующему шагу выполнения. Этот процесс повторяется до тех пор, пока задача не будет выполнена.

Ниже приведен более полный пример диалога, показывающий, как Клайн работает с 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>'
}]

Из этого диалогового примера видно, что для выполнения простой задачи программирования Клайн должен несколько раз вызвать LLM в цикле, и в результате непрерывного взаимодействия с LLM он постепенно уточняет цель задачи и выполняет соответствующие операции, пока, наконец, не завершит задачу.

Кроме того, Cline по сути запихивает всю релевантную информацию "наверх" в LLM при обработке задачи, что приводит к единственной задаче Токен потребление очень велико. В то же время, такой подход может легко нарваться на ограничение контекстного окна LLM. Чтобы справиться с проблемой ограничения контекстного окна, Cline использует относительно простую и прямую стратегию обработки, т. е. усечение входного содержимого, а часть, превышающая ограничение окна, будет непосредственно отброшена.

Это также может быть общий метод обработки, используемый другими редакторами AI Coding. В случае использования Виндсерфинг При использовании редактора ИИ, подобного этому, пользователи могут задаться вопросом, почему ИИ кажется не ограниченным контекстным окном LLM и способен решать задачи, которые, как кажется, превышают длину этого окна. Однако в последующих интерактивных тестах ИИ может повторять предыдущие ответы, что может быть связано с механизмом усечения контекста.