豆包？哦不，是我菜包！新手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 能力。这一阶段要完成三件事：

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

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

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

5.2 搭建后端服务

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

bash 复制代码

POST /api/chat

前端请求格式：

json 复制代码

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

后端返回格式：

json 复制代码

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文件，方可生效。

json 复制代码

{
  "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 没有配置

常见报错：

csharp 复制代码

ARK_API_KEY is not defined

可以这样问 Cursor：

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

通常需要检查：

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

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

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

如果前端传的是：

json 复制代码

{
  "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文件，里面填写与本地一直的内容。如：

ini 复制代码

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文件，如下：

ini 复制代码

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...