本节课代码：

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

https://github.com/AI-FE/dify-mcp-server/tree/第16课

上节课，通过 Cline（俗称：“开源版的 Cursor”） 集成了 AI 应用。

本节课，通过 Cursor 集成了 AI 应用：

• Cursor 基本介绍

• 集成 AI 应用

  • 方式一：.cursorrules
  • 方式二：Notepad
  • 方式三：cursorrules + prompt file
  • 方式四：.cursor/rules
  • 方式五：自定义 Composer Agent Command Tools

Cursor 介绍

基于 VScode 魔改的 AI IDE

• 强悍的 Tab 补全

• Chat：基于 IDE 中的任意上下文，进行对话，适用于问题答疑场景

• Composer Agent：针对任务，自主规划、调度工具、执行命令，适用于相对复杂的代码处理场景

集成 AI 应用

方式一：.cursorrules

集成步骤

1. 在项目根目录下创建 .cursorrules 文件（or cursor settings 中配置 Rules for AI）

2. 写入antd-component-codegen.md 中的提示词

效果测试

Todolist 组件

提示词调度分析

• 类似于 Cline 的clinerules调度机制

• 通过 system prompt 注入的方式

方式二：Notepad

基本介绍

Cursor Notepad

集成步骤

1. 新建 Notepad 文件，写入antd-component-codegen.md 中的提示词

2. 打开 Composer Agent，输入@，选择 Notepads，选择刚刚新建的 Notepad 文件

效果测试

Todolist 组件

提示词调度分析

• 类似于continue中的 context provider

• 注入到了 user prompt 中

方式三：cursorrules + prompt file

集成步骤

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

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

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

效果测试

Todolist 组件

提示词调度分析

• 类似于clinerules + prompt file 的调度机制

方式四：.cursor/rules

集成步骤

1. 在项目根目录下创建.cursor/rules文件

2. 写入antd-component-codegen.md 中的提示词

效果测试

Todolist 组件

提示词调度分析

• 将方案三的cursorrules + prompt file 调度机制，迁移到了cursor/rules中

方式五：自定义 Composer Agent Command Tools

原理

• composer 的 agent 模式可以直接执行 command

• command 执行的输出，agent 能感知到

• 在全局cursorrules中，注入生成业务组件场景需要调度执行的 command tools

集成步骤

1. 修改dify-mcp-server，兼容通过 command 执行直接输出console log

帮我新建一个同级的 ts 代码文件，能够将上面所选代码的功能封装到一个函数中，编译后可以通过运行 `DIFY_API_KEY=**** node dify-command-tool.js`来运行，并实时输出 stream 的日志

2. 新增 package.json 中的 script：npm run biz-component-codegen

{
  "scripts": {
    "biz-component-codegen": "DIFY_API_KEY=app-wT7iLq0uGhEvjKrx9lgeGhmj node /Users/lv/workspace/dify-mcp-server/build/dify-command-tool.js"
  }
}

3. 修改cursorrules，注入生成业务组件场景需要调度执行的 command tools

请帮我在 cursorrules 生成 command tools 调度的提示词，其中一个 tool 是：

- 当用户提出生成业务组件相关的需求时，能够调度执行 `npm run biz-component-codegen` 来生成业务组件
- 执行`biz-component-codegen` 时，可以传递两个参数：
  - 第一个参数：query：用户的原始需求
  - 第二个参数：imageFilePath：用户传递的图片路径
- `biz-component-codegen`执行完之后，会输出业务组件的 code string
- assistant 需要解析生成的 code string，并在 `app/components/`目录下，创建对应的 code 文件

效果测试

Todolist 组件

提示词调度分析

• 在cursorrules中，system prompt 中注入了生成业务组件场景需要执行的 command tools

• 在 command 执行过程中的console log，会传递到user prompt中

Continue VS Cline VS Cursor

选择的标准是什么呢？

场景：基于开源组件库生成业务组件

• 从功能上来说，理论上面的三款都能够满足所有的编码需求。

• 从使用体验 + 数据私密性 + 成本来进行选择

思考与作业

到目前为止：

• 基于 Dify 构建 AI 应用：可以基于开源组件库，生成业务组件

作业一：基于 Dify 构建 AI 应用：基于私有组件库，生成业务组件

• 将 AI 应用集成到 IDE 中：Continue、Cline、Cursor

作业二：尝试将生成业务组件之外的其它编码工作流，也集成到 IDE 中，比如集成页面对接联调的场景。