豆包？哦不，是我菜包！新手AI全栈实战：Cursor开发复刻AI聊天助手

豆包？不，我是「菜包」！用Cursor从零复刻AI聊天助手

一、项目介绍：豆包？哦不，是我菜包！

1.1 项目背景

豆包、DeepSeek这类 AI 聊天助手，已经成为很多人日常学习、办公、写作和信息查询的常用工具。它们的交互形式并不复杂：左侧是发起新对话和历史会话，右侧是聊天窗口，底部是输入框，用户输入问题后，AI 返回回答。

本项目就从这个经典场景入手，带大家用 Cursor 从零做一个属于自己的 AI 聊天助手——菜包 AI 助手。这种项目足够经典，它有界面、有交互、有后端、有 API 调用、有调试、有部署。同时难度适中，非常适合作为 AI 编程入门实战项目。

1.2 项目目标

本项目的目标很明确：**模仿主流 AI 聊天助手的使用体验，做一个可以在线访问的「菜包 AI 助手」。**最终希望实现以下效果。

1. 界面

实现一个类豆包风格的聊天页面：

• 左侧历史对话列表；
• 右侧聊天主区域；
• 底部固定输入框；
• 深色模式界面；
• 清晰的聊天消息布局。

2. 交互

实现常见 AI 聊天助手的基础交互：

• 按 Enter 发送消息；
• 按 Shift + Enter 换行；
• 用户消息和 AI 消息样式区分；
• 发送后自动清空输入框；
• 聊天区域自动滚动到最新消息；
• AI 回复前显示加载状态。

3. 服务

使用 Node.js + Express 搭建后端服务：

• 接收前端发送的用户消息；
• 调用大模型 API；
• 获取 AI 回复；
• 将结果返回给前端页面。

4. 部署

通过云服务器 + 宝塔面板完成线上部署：

• 上传项目；
• 配置 Node.js 环境；
• 配置环境变量；
• 处理跨域问题；
• 启动后端服务；
• 通过公网 IP 或域名访问项目。

1.3 使用到的技术和工具

本项目使用的技术栈比较轻量，适合新手入门。

开发工具

• Cursor：核心 AI 编程工具，用来生成代码、修改代码、排查报错。

前端技术

• HTML；
• CSS；
• JavaScript；
• Vite。

用于搭建聊天页面和交互逻辑。

后端技术

• Node.js；
• Express。

用于搭建简单的后端接口服务。

AI 能力

• 火山引擎豆包大模型 API；
• 接收用户输入；
• 返回 AI 生成的回复。

部署工具

• 云服务器；
• 宝塔面板；
• Node 项目管理；
• Nginx 或宝塔站点配置。

可选工具

• Docker。

如果希望减少服务器环境差异，也可以使用 Docker 打包部署。

---

二、整体开发流程

很多新手做项目容易卡住，一个常见原因是： 一开始就想把所有功能都做完。

比如界面、聊天、历史记录、登录、数据库、模型切换、部署一起上，结果 Bug 越积越多，最后不知道从哪里开始修。

这个产品中我们遵循分步迭代的流程，即界面->交互->后端->调用大模型->本地调试->部署上线。每个阶段只做一件事，做完就验证，确认没问题，再进入下一步。这也是使用 Cursor 做 AI Coding 时非常重要的原则：

不要一次性让 AI 做太多。一次只提一个需求，逐轮修改，逐轮验证。

---

三、阶段一：快速搭建 AI 聊天界面原型

3.1 阶段目标

第一阶段不要急着接后端，也不要急着调用 AI 模型。先做一件事：把聊天助手的页面搭出来。也就是先确定它「长什么样」。页面原型做好后，后续无论是加交互、接接口，还是部署上线，都会更清晰。

---

3.2 用 Cursor 生成前端页面

这里我们采用以图片驱动和借鉴创新的打法，先把豆包截图，然后给 Cursor Agents面板里中输入类似下面的提示词：

请参照图片，帮我生成一个 AI 聊天助手前端页面，名称叫做菜包AI。 页面风格参考图片中豆包的风格、布局模式。 左侧包括logo、开启新对话、历史对话列表，右侧是聊天主区域，底部是固定输入框。 先只生成 HTML、CSS 和 JavaScript，不需要后端，不需要接 API。 页面要能直接在浏览器中预览。 布局要清晰，视觉要简洁，适合后续继续扩展。

Cursor 会根据提示生成基础页面代码。这一步的重点不是功能，而是界面是否舒服。

OK，很快Cursor就根据我们提示词，生成了index.html、styles.css和app.js三个文件。我们使用LiveServer这个插件来运行html，它的特点是支持热更新，修改代码秒刷新，插件市场搜索LiveServer安装后，在左侧的文件管理器里选择index.html，右键Open with Live Server即可，此时会打开浏览器展示当前的html内容。

我们可以看到，生成的页面内容布局、颜色、风格看起来和豆包是一样、一样的！

---

好，这个时候，我们继续在Cursor里点击Keep All，采纳AI生成的代码。

3.3 界面验收标准

生成页面后，先不要急着继续。可以按照下面几个标准检查：

• 左右分栏是否清晰；
• 左侧历史对话列表是否规整；
• 右侧聊天区域是否有足够空间；
• 底部输入框是否明显；
• 字体、间距、留白是否舒适；
• 页面是否有明显错位或样式混乱。
• 是否具备移动响应式布局。

如果页面看起来不舒服，先继续让 Cursor 改界面。

例如：

请调整聊天区域的间距，让整体更接近现代 AI 助手界面。不要增加新功能，只优化视觉样式。

或者：

请把左侧历史对话列表做得更精致一些，增加选中状态和 hover 效果。其他区域不要修改。

这一阶段的关键是：先把页面样子定下来，不要急着加功能。

---

四、阶段二：逐步优化聊天交互体验

界面基本完成后，就可以开始加交互。这里继续遵循一个原则：一次只改一个功能。不要一次性让 Cursor 同时修改侧边栏、输入框、消息气泡、滚动逻辑和加载状态。这样很容易导致代码变乱，出问题也不好定位。

---

4.1 第一轮：优化侧边栏

第一个小功能是：让左侧面板支持折叠和展开，历史记录可以删除。可以给 Cursor 这样的指令：

当前页面已经可以正常显示。 请只修改左侧边栏相关代码。 点击折叠按钮后，左侧边栏收起，再次点击展开。 历史对话记录，鼠标Hover时，增加删除按钮，点击后确认。 其他聊天区域和输入框逻辑不要修改。

完成后检查：

• 按钮是否可点击；
• 侧边栏是否能正常收起；
• 展开后布局是否恢复；
• 对话记录是否可以正常删除;
• 右侧聊天区域是否能自适应宽度。

---

4.2 第二轮：支持 Enter 发送消息

接着优化输入框操作。目标是：

• 按 Enter 发送消息；
• 按 Shift + Enter 换行。

提示词可以这样写：

请只修改输入框的键盘交互逻辑。 要求按 Enter 发送消息，按 Shift + Enter 换行。 如果输入内容为空，不允许发送。 其他样式和布局不要修改。

这个交互很重要，因为它决定聊天体验是否顺手。

---

4.3 第三轮：区分用户消息和 AI 消息

接下来调整消息气泡。目标是：

• 用户消息靠右，用户消息使用深色气泡；
• AI 回复靠左，AI 回复使用浅灰色气泡。

提示词：

请优化消息气泡样式。 用户发送的消息显示在右侧，使用深色气泡。 AI 回复显示在左侧，使用浅灰色气泡。 两种消息要有明显区分。 只修改消息展示相关代码，其他功能不要改。

完成后检查：

• 消息左右是否正确；
• 气泡颜色是否区分明显；
• 长文本是否能正常换行；
• 消息列表是否不会溢出页面。

---

4.4 第四轮：发送后自动清空并滚动到底部

接下来调整交互：

• 发送消息后清空输入框；
• 新消息出现后自动滚动到聊天底部；
• 等待 AI 回复时可以显示「AI 正在思考」。

提示词：

请优化消息发送后的交互。 用户发送消息后，自动清空输入框。 每次新增消息后，聊天区域自动滚动到底部。 AI 回复前先显示一条「AI 正在思考...」的临时消息。 接口返回后再替换成真实回复。 不要修改页面整体布局。

4.5 第五轮：响应式布局，适配移动设备

最后调整移动端的页面自适应布局适配：

• 隐藏侧边栏；
• 顶部展示新对话和对话历史按钮；
• 历史按钮点击，在右侧弹出历史列表。

提示词：

增加移动端布局适配 移动端隐藏左侧侧边栏 顶部添加新建对话、历史对话按钮 点击历史按钮从右侧弹出对话历史面板点击外部关闭面板 PC端布局保持不变

到这里，一个基础聊天助手的前端体验就基本成型了，以上五轮对话遵循一轮一改、一轮一验，直到对外观100%满意为止。PS：上述五轮对话仅为示例，实际上，通过第一次的指令及豆包的截图，Cursor生成的原型，完成度已经很高，未做到的只有“AI 回复前显示「AI 正在思考...」的临时消息”和“移动端适配”两处。

---

五、阶段三：打通前后端并接入 AI 模型

5.1 阶段目标

前端页面和交互完成后，才开始接入真实 AI 能力。这一阶段要完成三件事：

1. 搭建 Node.js + Express 后端服务；
2. 前端调用后端接口；
3. 后端调用大模型 API 并返回回复。

注意：大模型 API Key 不能写死在前端，也不要直接暴露在浏览器里，一旦泄密很容易被盗刷、产生不必要的经济损耗。

正确做法是：前端页面->请求后端接口->后端读取环境变量中的API Key->后端调用大模型 API->返回 AI 回复给前端

---

5.2 搭建后端服务

后端可以设计一个最简单的接口：

POST /api/chat

前端请求格式：

json{
  "message": "用户输入内容"
}

后端返回格式：

json{
  "reply": "AI 回复内容"
}

可以让 Cursor 生成后端代码：

请帮我用 Node.js + Express 搭建一个简单后端服务。 创建 POST /api/chat 接口。 前端会传入 { "message": "用户输入内容" }。 后端调用大模型 API，并返回 { "reply": "AI回复内容" }。

大模型使用火山引擎的豆包模型doubao-seed-1-8-251228，我的API Key是 ark-9a5a8a84-e854-431e-ba2f-a4d7ece23927-e4054 API Key 必须从环境变量读取，不能写死在代码里。 请加入基础错误处理，并告诉我如何启动服务。

这一阶段要特别关注：

• 端口是否正确；
• 接口路径是否一致；
• 请求格式是否一致；
• API Key 是否从环境变量读取；
• 报错时是否有清晰提示。

此时，查看项目目录，可以看到生成server后端文件夹、项目配置文件package.json以及环境变量示例文件.env.example，打开package.json可以看到，启动/开发命令和项目所需的依赖包名称和版本。PS：环境变量文件，存放的是我们的API_KEY敏感信息，需要我们复制示例文件.env.example并去掉.example后缀，填写我们自己的API_KEY，并命名为.env文件，方可生效。

{
  "name": "vegetable-bag-ai",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "start": "node server/index.js",
    "dev": "node --watch server/index.js"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^16.4.7",
    "express": "^4.21.2"
  }
}

此时，有经验的开发人员会看到系统依赖没有安装，不知道也没有关系，我们可以给AI发出启动后端服务指令，AI会识别语义，并进行依赖安装和后端启动工作。

启动后端服务

---

5.3 修改前端请求逻辑

后端服务完成后，需要让前端真正调用接口。可以给 Cursor 这样的指令：

当前前端页面已经可以发送假消息。 请把发送消息逻辑改成调用后端接口 POST /api/chat。 请求体格式是 { "message": 用户输入内容 }。 后端返回 { "reply": AI回复内容 }。 请把 AI 回复渲染到聊天区域。 发送期间显示 loading 状态，失败时显示错误提示。 不要修改页面整体样式。

完成后，本地启动前端和后端，测试是否可以真实对话。

---

六、阶段四：本地调试与问题修复

接入 AI 接口后，出问题很正常。这时候不要慌，也不要乱改代码。最有效的方法是：

把完整报错信息复制给 Cursor，让它分析原因，并要求给出最小修改方案。

---

6.1 常见问题一：API Key 没有配置

常见报错：

ARK_API_KEY is not defined

可以这样问 Cursor：

我运行后端时遇到这个错误： ARK_API_KEY is not defined 请修复。

通常需要检查：

• 是否创建了 .env 文件；
• 是否安装并引入 dotenv；
• 环境变量名称是否一致；
• 启动服务时是否正确加载环境变量。

---

6.2 常见问题二：接口路径或参数不一致

如果前端请求了 /chat，但后端写的是 /api/chat，就会请求失败。

如果前端传的是：

{
  "text": "你好"
}

但后端读取的是：

req.body.message

也会导致后端拿不到用户输入。

可以让 Cursor 检查：

请帮我检查前端请求格式和后端接口接收格式是否一致。 前端应该请求 POST /api/chat，传入 { "message": "用户输入内容" }。 后端应该返回 { "reply": "AI回复内容" }。

---

6.3 常见问题三：请求超时或等待体验差

AI 模型响应有时需要几秒钟。如果页面没有提示，用户会以为卡住了。可以让 Cursor 加上 loading 状态：

请在发送消息后增加 loading 状态。 等待 AI 回复时，在聊天区域显示「AI 正在思考...」。 如果请求超过一定时间或失败，显示友好的错误提示。 不要修改其他功能。

---

6.4 本地验收标准

上线前，至少要在本地确认以下内容：

• 前端页面能正常打开；
• 输入消息后能正常发送；
• 后端能收到请求；
• AI 能返回回复；
• 页面能显示 AI 回复；
• Enter 和 Shift + Enter 逻辑正常；
• 发送后输入框会清空；
• 聊天区域会自动滚动；
• 控制台没有明显报错；
• API Key 没有暴露在前端代码里。

确认本地没问题后，再进入部署阶段。

---

七、阶段五：通过宝塔面板部署上线

7.1 部署前准备

上线之前，需要准备好以下内容：

• 一台云服务器；
• 已安装宝塔面板；
• 本地项目可以正常运行；
• 已准备好大模型 API Key；
• 已确认前后端接口联调正常；
• 服务器安全组已开放必要端口。

如果有域名，也可以提前解析到服务器 IP。

---

7.2 部署流程概览

宝塔部署的基本流程如下：上传项目代码到服务器->安装 Node.js 环境->配置后端服务->配置环境变量->启动项目->配置站点和反向代理->测试公网访问

---

7.3 上传前后端代码

可以通过宝塔面板文件管理上传项目，如果项目代码托管到Git库，也可以使用 Git 拉取代码。

接下来，我们分别上传前后端代码，为了项目结构更为清晰，我们给AI发出整理结构的指令，将前后端分别建立文件夹存放。

请建立caibao-backend 和 caibao-frontend 文件夹，分别存放前后端代码。

执行完的项目目录结构如下图：

7.3.1 上传后端代码并配置环境变量

首先，上传后端代码。我们通过面板的文件菜单，定位到根目录>www>wwwroot目录，新建一个caibao-backend的文件夹，用于存放我们的后端代码。

接下来，我们把本地的caibao-backend中的文件进行上传。

线上环境一定要配置环境变量文件，在目录下创建并配置.env文件，里面填写与本地一直的内容。如：

ARK_API_KEY=*****
ARK_MODEL=doubao-seed-1-8-251228
PORT=3000

上传前要注意：

• 不要上传 node_modules；
• 不要上传包含真实密钥的文件；
• 可以上传 .env.example，但不要上传真实 .env；
• 确认项目目录结构清晰。
• 本项目文件较少，可以直接上传。如果项目文件较多，可本地压缩zip后，上传至服务器再解压。

7.3.2 创建网站并上传前端代码

接下来，我们建立网站，上传前端代码。此操作依赖于Nginx环境，请参照本文7.4章节进行安装。

点击侧边栏网站菜单，选择顶部的HTML项目选项卡，点击添加项目按钮，在弹出的对话框里，在绑定域名的文本框里填写服务器ip:端口，如本示例服务器101.36.126.25:9255，注意需要在服务器的安全组或防火墙里，将9255这个端口进行开放。

如已购买域名，也可填写域名，如www.caibao.com，前提是域名已解析，并备案。

同时，我们可以看到底部根目录会展示前端项目的文件夹路径，会自动创建它。

接下来，我们将本地的caibao-front目录下的文件，参照刚才后端的操作，上传到该文件夹里/www/wwwroot/101.36.126.25_9255里。

---

7.4 安装后端Node、前端Nginx环境

首先，安装Node.js版本管理器。点击软件商店，搜索node，在Node.js版本管理器点击安装。

然后，在Node.js版本管理器，更新版本列表，安装v22.22.3版本的Node。

同理，我们在软件商店安装好Nginx，一般而言，在服务器安装宝塔后，首次进入界面会提示安装必要的环境，包括Nginx组件，如果已安装，此步即可省略。

7.5 配置反向代理和跨域

前端和后端分开部署，可能会遇到跨域问题。

推荐的做法是前端项目中，通过 Nginx 反向代理，把接口代理到后端服务。宝塔的Nginx配置，在网站的配置文件中，点击项目名称，在弹出的界面中，复制配置文件代码，粘贴到Cursor对话中，让它帮你生成宝塔 / Nginx 配置：

这是我的Nginx配置。

server { listen 9255; server_name 101.36.126.25; index index.html index.htm default.htm default.html; root /www/wwwroot/101.36.126.25_9255;

​ 省略...

} 后端服务运行在服务器的3000端口。 我希望用户访问 https://101.36.126.25:9255/api/chat 时，转发到后端接口。 请帮我生成 Nginx 反向代理配置。

Cursor 生成了nginx.conf文件，如下：

server
{
    listen 9255;
    server_name 101.36.126.25;
    index index.html index.htm default.htm default.html;
    root /www/wwwroot/101.36.126.25_9255;
    include /www/server/panel/vhost/nginx/extension/101.36.126.25/*.conf;
    #CERT-APPLY-CHECK--START
    # 用于SSL证书申请时的文件验证相关配置 -- 请勿删除并保持这段设置在优先级高的位置
    include /www/server/panel/vhost/nginx/well-known/101.36.126.25.conf;
    #CERT-APPLY-CHECK--END

    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #SSL-END

    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END

    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/html_101.36.126.25.conf;
    #REWRITE-END

    location /api/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_connect_timeout 60s;
        proxy_send_timeout 120s;
        proxy_read_timeout 120s;
    }

    # 禁止访问的敏感文件
    location ~* (\.user.ini|\.htaccess|\.htpasswd|\.env.*|\.project|\.bashrc|\.bash_profile|\.bash_logout|\.DS_Store|\.gitignore|\.gitattributes|LICENSE|README\.md|CLAUDE\.md|CHANGELOG\.md|CHANGELOG|CONTRIBUTING\.md|TODO\.md|FAQ\.md|composer\.json|composer\.lock|package(-lock)?\.json|yarn\.lock|pnpm-lock\.yaml|\.\w+~|\.swp|\.swo|\.bak(up)?|\.old|\.tmp|\.temp|\.log|\.sql(\.gz)?|docker-compose\.yml|docker\.env|Dockerfile|\.csproj|\.sln|Cargo\.toml|Cargo\.lock|go\.mod|go\.sum|phpunit\.xml|phpunit\.xml|pom\.xml|build\.gradl|pyproject\.toml|requirements\.txt|application(-\w+)?\.(ya?ml|properties))$
    {
        return 404;
    }

    # 禁止访问的敏感目录
    location ~* /(\.git|\.svn|\.bzr|\.vscode|\.claude|\.idea|\.ssh|\.github|\.npm|\.yarn|\.pnpm|\.cache|\.husky|\.turbo|\.next|\.nuxt|node_modules|runtime)/ {
        return 404;
    }

    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }

    #禁止在证书验证目录放入敏感文件
    if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
        return 403;
    }

    location ~ .*\\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }

    location ~ .*\\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;
    }
    access_log  /www/wwwlogs/101.36.126.25.log;
    error_log  /www/wwwlogs/101.36.126.25.error.log;
}

将上述代码粘贴到宝塔配置文件中，记得重启Nginx。

---

7.7 项目启动与日志检查

7.7.1 后端启动

在宝塔的网站，Node项目中，添加项目。

选到项目的后端目录，宝塔会自动生成项目名称，获取package.json启动命令，Node版本选择我们已安装好的V22.22.3版本，包管理器选择npm。

创建好项目后，宝塔自动使用npm来下载安装项目所需依赖包，并自动启动项目。

我们可以通过终端菜单，执行curl http://127.0.0.1:3000 来测试下是否有输出，输出"{"error":"接口不存在"}",则表示后端服务正常启动了。

7.7.2 前端启动

通常来说，我们在7.3.2创建网站后，Nginx服务应会正常驱动HTML项目，我们在浏览器里，输入设置的网址http://101.36.126.25:9255/来测试下是否正常。

OK，至此，一个简单的AI对话助手，已经部署成功。

项目启动后，重点检查：

• 服务是否成功启动；
• 端口是否被占用；
• 环境变量是否读取成功；
• 请求接口是否正常；
• 日志中是否有模型调用错误；
• 防火墙和安全组是否放行端口。

如果访问失败，可以把日志复制给 Cursor：

我在宝塔部署后访问接口失败，日志如下： 【粘贴完整日志】 请帮我分析原因，并给出最小修改方案。

---

7.8 上线验收标准

最终上线后，使用公网 IP 或域名访问项目，完整测试：

• 页面是否正常加载；
• 聊天消息是否能发送；
• AI 回复是否正常；
• loading 状态是否正常；
• 页面是否自动滚动；
• 刷新页面是否异常；
• 控制台是否有报错；
• 后端日志是否正常；
• API Key 是否没有泄露。

如果这些都没问题，就说明「菜包 AI 助手」已经成功上线。

---

八、常见问题汇总

8.1 Cursor 生成代码后跑不起来

处理方式：

• 复制完整报错给 Cursor；
• 让 Cursor 只修复当前错误；
• 不要让它重写整个项目；
• 每次修改后重新运行验证。

提示词：

当前项目运行时报错如下： 【粘贴报错】 请只修复这个错误，不要重构项目，不要修改无关文件。

---

8.2 前端请求不到后端

重点检查：

• 后端服务是否启动；
• 接口地址是否正确；
• 端口是否一致；
• 是否存在跨域问题；
• 请求方法是否是 POST；
• 请求体格式是否正确。

---

8.3 宝塔部署后公网打不开

重点检查：

• 服务器安全组是否开放端口；
• 宝塔防火墙是否开放端口；
• Node 服务是否正在运行；
• Nginx 配置是否正确；
• 域名是否正确解析；
• 是否使用了错误的访问地址。

---

8.4 环境变量不生效

重点检查：

• .env 文件位置是否正确；
• 是否引入 dotenv；
• 变量名是否拼写一致；
• 线上启动方式是否加载环境变量；
• 宝塔项目管理中是否配置了变量。

---

8.5 AI 回复慢或失败

可能原因：

• 模型接口响应慢；
• API Key 额度不足；
• 模型名称写错；
• 网络访问受限；
• 请求超时；
• 后端没有做异常处理。

可以增加：

• loading 状态；
• 超时处理；
• 错误提示；
• 日志记录；
• 重试机制。

---

九、项目总结与后续拓展

9.1 项目总结

完成这个项目后，你会完整体验一次 AI 全栈项目的开发流程：它不仅是一个聊天 Demo，更是一个非常适合新手入门 AI Coding 的完整练习项目。

通过这个项目，你可以掌握：

• 如何用 Cursor 指挥 AI 写代码；
• 如何拆分功能并逐步迭代；
• 如何设计前后端接口；
• 如何安全使用 API Key；
• 如何排查跨域和环境变量问题；
• 如何把本地项目部署到线上。

---

9.2 后续拓展方向

如果基础版本已经跑通，可以继续升级。

1. 增加登录功能

支持用户注册、登录，并区分不同用户的聊天记录。

2. 保存历史对话

把聊天记录保存到数据库中，刷新页面后仍然可以查看历史消息。

3. 支持多轮上下文

让 AI 记住前面的对话，而不是每次只回答单条消息。

4. 支持切换模型

例如支持不同模型之间切换，用户可以选择更快或更强的模型。

5. 增加重新生成

对 AI 回复不满意时，可以点击「重新生成」。

6. 增加清空和删除会话

支持删除单条对话、清空当前会话、删除历史会话。

7. 增加后台管理

可以统计调用次数、用户数量、模型成本和接口日志。

8. 接入付费能力

如果后续要做成产品，可以增加会员系统、额度限制和支付功能。

---

结语

「菜包 AI 助手」这个项目并不复杂，但它覆盖了 AI 应用开发最核心的一套流程：

页面展示、用户交互、后端接口、模型调用、错误调试、线上部署。

对于新手来说，它非常适合作为第一个 AI Coding 实战项目。因为你不只是写了一个页面，而是完整走通了从想法到上线的全过程。

更重要的是，通过这个项目你会真正理解：

Cursor 不是简单帮你补代码的工具，而是一个可以被你指挥的 AI 开发助手。

你要做的，不是一次性让它生成完整项目，而是把需求拆小，一步一步说清楚，一轮一轮验证。

最后，你就能从零做出一个真正可以访问、可以聊天、可以继续扩展的 AI 助手。

本文代码：gitee.com/tyerp/veget…