本节课代码：

https://github.com/AI-FE/ai-friendly-clean-business-component-template/tree/第15课

上节课：通过 Continue 集成了 AI 应用

• 客制化能力强：Command、Context Provider、Model Provider、MCP 等

• Agent 调度的能力较弱

• 跟 IDE 之间的协同能力较弱

导致整体的体验不够流畅

本节课：

• 介绍 Cline 系列的产品

• 基于 Cline 集成 AI 应用

  • clinerules
  • rules + prompt file
  • 自定义 prompt 系统角色
  • MCP

Cline 介绍

"开源版的 Cursor"，Vscode IDE AI Coding Agent 插件

集成 AI 应用

初始化配置

1. 在 Settings 中配置Provider Settings

2. 选择OpenAI Compatible的 API Provider

3. 配置 302 的 BaseUrl 和 API Key

方式一：.clinerules

集成步骤

1. 在项目根目录下创建 .clinerules 文件

2. 在文件中写入提示词

效果测试

Todolist 组件

提示词调度分析

302.AI api 请求日志

方式二：clinerules + prompt file

集成步骤

1. 在项目的根目录下新建clinerules文件

2. 让 AI 根据下面的提示词生成对应的clinerules prompt

帮我重构clinerules中的prompt，当用户提出“生成业务组件”相关的需求的时候，能够去读取@antd-component-codegen.md 中规则，并按照规则来生成业务组件的代码

效果测试

Todolist 组件

提示词调度分析

302.AI api 请求日志

方式三：自定义 prompt 系统角色

集成步骤

1. 打开 Prompt 配置

2. 新增一个 prompt role

效果测试

提示词调度分析

302.AI api 请求日志

方式四：MCP

集成步骤

1. 打开 MCP setting 文件

2. 写入下面的内容

{
  "mcpServers": {
    "dify": {
      "command": "node",
      "args": ["/Users/lv/workspace/dify-mcp-server/build/index.js"],
      "env": {
        "DIFY_API_KEY": "app-wT7iLq0uGhEvjKrx9lgeGhmj"
      },
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

效果测试

Todolist 组件

提示词调度分析

302.AI api 请求日志