Cursor Composer Agent Mode 实战：构建全栈 Web 应用

打开 Cursor，创建新文件夹 startup-valuator。按下 Cmd+K 打开 Composer 输入框，输入：

初始化一个 React + Vite 项目，包含以下功能：
- 首页表单：输入年收入、增长率、行业
- 估值计算：基于公式 估值 = 年收入 × 增长率 × 行业系数
- 结果展示：显示估值数字和可视化图表

使用 TypeScript，配置 ESLint 和 Prettier。

Composer 会分析需求，生成文件树和实现计划。审查后点击 Accept，它会自动执行 npm create vite@latest 并安装依赖。

初始化完成后，点击右上角的模式切换，选择 Agent Mode。输入下一步需求：

创建以下组件：
1. ValuationForm：表单组件，包含三个输入字段（收入、增长率、行业选择）
2. ResultCard：结果卡片，显示估值数字和环形进度条
3. HistoryChart：使用 Recharts 绘制历史估值对比图

同时创建 types/valuation.ts 定义类型接口。

Agent Mode 会并行编辑多个文件，并在右侧显示 Diff 预览。逐项审查后接受变更。

对于复杂功能，先用 Plan Mode（Shift+Tab）生成实现策略：

实现一个功能：连接外部 API 获取行业平均估值倍数。
1. 创建 services/industry-api.ts
2. 调用 mock API 返回不同行业的系数
3. 在表单选择行业时自动更新系数
4. 添加错误处理和加载状态

请先输出实现计划，不要写代码。

审查计划后，输入"执行计划"让 Agent 开始编码。

运行 npm run dev 后，点击 Cursor 内置浏览器图标预览。如果 UI 有问题，直接截图并输入：

表单按钮与输入框间距太小，在移动端重叠。
请调整响应式布局，增加 padding，优化字体大小。

Composer 会分析截图，定位 CSS 问题，生成修复代码。

要连接真实 API，使用 MCP（Model Context Protocol）。在项目根目录创建 .cursor/mcp.json：

{
  "mcpServers": {
    "valuation-api": {
      "command": "npx",
      "args": ["-y", "@mcp/valuation-server@latest"],
      "env": {
        "API_KEY": "${env:VALUATION_API_KEY}"
      }
    }
  }
}

在 Composer 中输入：

使用 MCP 服务器 valuation-api 的 tools/list 工具，
实现获取真实行业数据和保存估值历史的功能。

使用 Moment AI 一键部署。在 Composer 中输入：

配置 Vercel 部署：
1. 创建 vercel.json 配置文件
2. 设置构建命令和输出目录
3. 添加环境变量配置示例

生成配置后，运行：

npm i -g vercel
vercel login
vercel --prod

Composer 会自动处理部署流程，并在完成后提供预览链接。

如果运行时报错，Composer 可以自主诊断：

运行 npm run build 时出现 TypeScript 错误：
"Property 'value' does not exist on type 'FormData'"

请分析终端输出并修复。

Composer 会读取终端输出，定位类型错误，生成修复代码并重新运行构建。