Cursor复刻AI聊天助手：新手全栈实战教程

2026-06-06阅读 0热度 0

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

先说几句大实话：豆包、DeepSeek这类AI聊天助手，现在几乎成了日常办公、学习和信息查询的标配。它们的交互模式其实很固定——左边是历史会话列表，右边是聊天区，底部一个输入框，你问一句，AI答一句。但真要把这样一个“看起来简单”的产品从零做出来，涉及的东西可不少：前端界面、交互逻辑、后端API、模型调用、调试、部署……每一步都可能卡住新手。

这个项目，就是要在Cursor的辅助下，完整走一遍这个流程。我们最终要做的是一个叫“菜包AI助手”的在线聊天应用。难度适中，非常适合作为AI编程入门实战——因为它够经典，界面、交互、后端、API全都有，而且每一步都可以借助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；
Ja vaScript；
Vite。

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

后端技术

Node.js；
Express。

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

AI 能力

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

部署工具

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

可选工具

Docker。

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

二、整体开发流程

很多新手做项目容易卡住，一个常见原因是：一开始就想把所有功能都做完。比如界面、聊天、历史记录、登录、数据库、模型切换、部署一起上，结果 Bug 越积越多，最后不知道从哪里开始修。

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

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

3.1 阶段目标

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

3.2 用 Cursor 生成前端页面

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

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 改界面。例如：

或者：

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

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

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

4.1 第一轮：优化侧边栏

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

完成后检查：

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

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

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

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

提示词可以这样写：

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

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

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

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

提示词：

完成后检查：

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

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

接下来调整交互：

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

提示词：

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

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

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

提示词：

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

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

5.1 阶段目标

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

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

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

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

5.2 搭建后端服务

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

POST /api/chat

前端请求格式：

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

后端返回格式：

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

可以让 Cursor 生成后端代码：

这一阶段要特别关注：

端口是否正确；
接口路径是否一致；
请求格式是否一致；
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 这样的指令：

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

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

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

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

常见报错：

ARK_API_KEY is not defined

可以这样问 Cursor：

通常需要检查：

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

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

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

如果前端传的是：

{"text": "你好"}

但后端读取的是：

req.body.message

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

可以让 Cursor 检查：

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

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

6.4 本地验收标准

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

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

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

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

7.1 部署前准备

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

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

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

7.2 部署流程概览

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

7.3 上传前后端代码

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

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

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

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

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

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

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

ARK_API_KEY=*****ARK_MODEL=doubao-seed-1-8-251228PORT=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 配置：

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)${expires30d;error_log /dev/null;access_log /dev/null;}
location ~ .*\.(js|css)?${expires12h;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 实战项目。因为你不只是写了一个页面，而是完整走通了从想法到上线的全过程。

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

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

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

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

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

1.1 项目背景

1.2 项目目标

1. 界面

2. 交互

3. 服务

4. 部署

1.3 使用到的技术和工具

开发工具

前端技术

后端技术

AI 能力

部署工具

可选工具

二、整体开发流程

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

3.1 阶段目标

3.2 用 Cursor 生成前端页面

3.3 界面验收标准

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

4.1 第一轮：优化侧边栏

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

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

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

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

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

5.1 阶段目标

5.2 搭建后端服务

5.3 修改前端请求逻辑

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

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

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

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

6.4 本地验收标准

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

7.1 部署前准备

7.2 部署流程概览

7.3 上传前后端代码

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

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

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

7.5 配置反向袋里和跨域

7.7 项目启动与日志检查

7.7.1 后端启动

7.7.2 前端启动

7.8 上线验收标准

八、常见问题汇总

8.1 Cursor 生成代码后跑不起来

8.2 前端请求不到后端

8.3 宝塔部署后公网打不开

8.4 环境变量不生效

8.5 AI 回复慢或失败

九、项目总结与后续拓展

9.1 项目总结

9.2 后续拓展方向

1. 增加登录功能

2. 保存历史对话

3. 支持多轮上下文

4. 支持切换模型

5. 增加重新生成

6. 增加清空和删除会话

7. 增加后台管理

8. 接入付费能力

结语

相关阅读

最新教程

最新资讯