Узнайте, как работает кодирование искусственного интеллекта, начиная с Клайна!

Неожиданно, AI запустил полу-изменение неба в области программирования. От v0, bolt.new до всех видов инструментов программирования Cursor, Windsurf в сочетании с Agant, AI Coding уже имеет огромный потенциал идеи MVP. От традиционного кодирования с помощью ИИ, до сегодняшнего прямого создания проекта позади, в конце концов, как достичь?

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

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

Клайн Я сделал набросок общего процесса:

В своей основе Cline опирается на системные подсказки и возможности Big Language Model по соблюдению команд. При запуске задачи программирования системные подсказки, пользовательские подсказки, пользовательский ввод и информация об окружении проекта (какие файлы, открытые вкладки и т. д.) собираются и передаются в LLM, который выводит решения и действия в соответствии с директивами, и в LLM, который выводит решения и действия в соответствии с директивами, и в LLM, который выводит решения и действия в соответствии с директивами. <execute_command />, и<read_file />Cline вызывает написанную функцию Tool Use для выполнения обработки и передает результаты в LLM для обработки. Cline выполняет несколько вызовов LLM для выполнения одной задачи.

системная подсказка

Системные подсказки Cline - это v0-подобные подсказки, написанные в Markdown и XML. Подробно описаны правила использования инструмента LLM и примеры использования:

# 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 также вводится в слово системной подсказки.

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 введенное в систему слово-кий.

Исходя из этого, мы можем рискнуть предположить, что Cursor и WindSurf Инъекция .cursorrules аналогична

Видно, что Cline в своей основе зависит от способности LLM следовать инструкциям, поэтому температура модели устанавливается на 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 },
})

Первый вход

Для пользователя существует несколько входов, соответственно:

1. Прямая машинописная копия с <task /> охватывать
2. пройти (законопроект, проверку и т.д.) @ Каталог входного файла, файл и url

В Клайне.@ Здесь нет ничего сложного: для каталогов файлов - список структуры каталогов файлов; для файлов - чтение содержимого файла; для url - чтение содержимого непосредственно из puppeteer. Затем он принимает содержимое и пользовательский ввод и выводит его в LLM.

Пример ввода выглядит следующим образом:

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

Пользовательский ввод также содержит информацию об окружении проекта, например, список файлов в текущем рабочем каталоге, вкладки, которые открывает vscode, и так далее.

Простая задача дает следующий входной сигнал для 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)возможноВстраивание кодовой базы, но cline - это более грубый и простой способ.

Первый раунд возвращается #

LLM возвращается в соответствии с требованиями команды (температура устанавливается на 0) и обычно содержит <thinking /> и две части операции. Например:

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

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

1. выполнить команду
2. Чтение и запись файлов
3. Содержание поиска
4. Эксплуатация MCP

В то же время Cline собирает различные виды информации о состоянии работы.

Второй вход

Затем Cline выведет поведение пользователя, состояние вывода и результат предыдущей операции, включая предыдущий запрос системы и ввод пользователя, на 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 несколько раз, пока задача не будет завершена. Другое дело, что Cline, по сути, просто запихивает все в LLM, по одной задаче за раз. Токен Использование очень высокое.

Другая проблема заключается в том, что в LLM легко сбить ограничение контекстного окна, и стратегия Клайна по борьбе с этим заключается в его насильственном усечении.

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