클라인을 시작으로 AI 코딩의 원리를 알아보세요!

뜻밖에도 인공지능은 프로그래밍 분야에 반전의 바람을 불러일으켰습니다. v0, bolt.new부터 모든 종류의 프로그래밍 도구 커서, 윈드서프, Agant와 결합한 AI 코딩은 이미 아이디어 MVP의 엄청난 잠재력을 가지고 있습니다. 기존의 AI 보조 코딩부터 오늘날의 직접 프로젝트 생성까지, 결국 어떻게 달성할 수 있을까요?

이 문서에서는 오픈 소스 제품에 대해 살펴봅니다. Cline 이 단계부터 AI 코딩 제품의 구현 아이디어 몇 가지를 살펴볼 것입니다. 동시에 더 깊은 원리를 이해하고 AI 에디터를 더 잘 사용할 수 있습니다.

최종 구현은 AI 코딩 편집기마다 일관되지 않을 수 있습니다. 또한 이 문서에서는 도구 사용의 구현에 대한 자세한 내용은 다루지 않습니다.

클라인 전체 프로세스의 스케치를 만들었습니다:

Cline의 핵심은 시스템 프롬프트와 빅 언어 모델의 명령어 준수 기능에 의존합니다. 프로그래밍 작업을 시작할 때 시스템 프롬프트, 사용자 정의 프롬프트, 사용자 입력, 프로젝트 환경에 대한 정보(어떤 파일, 열려 있는 탭 등)가 수집되어 지시어에 따라 솔루션과 작업을 출력하는 LLM에 제출되고, LLM은 지시어에 따라 솔루션과 작업을 출력하고, 지시어에 따라 솔루션과 작업을 출력하는 LLM에 다시 제출됩니다. <execute_command />및<read_file />Cline은 작성된 도구 사용 기능을 호출하여 처리를 수행하고 그 결과를 LLM에 전달하여 처리합니다. Cline은 하나의 작업을 완료하기 위해 LLM을 여러 번 호출합니다.

시스템 큐

Cline의 시스템 프롬프트는 마크다운과 XML로 작성된 v0과 유사한 프롬프트입니다. 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 를 시스템의 시스템 큐 워드에 주입합니다.

이를 통해 우리는 커서와 윈드서핑 .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의 경우 퍼펫티어에서 직접 내용을 읽는 등 많은 기술이 필요하지 않습니다. 그런 다음 이러한 콘텐츠와 사용자 입력을 받아 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 코딩 편집기(예: 커서)가능합니다.코드베이스를 임베드하지만 클라인은 좀 더 무차별적이고 간단합니다.

첫 번째 라운드는 #를 반환합니다.

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은 사용자의 동작, 출력 상태 및 이전 시스템 프롬프트와 사용자 입력을 포함한 이전 작업의 결과를 다시 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 코딩 에디터도 이와 같은 방식으로 처리하는 것 같습니다. 이전에 윈드서프를 사용할 때는 왜 LLM 컨텍스트 창으로 제한되지 않는지 궁금했습니다. 하지만 이후 Q&A에서 이전 답변이 반복되는 경우가 많습니다.