菜包不是豆包，Cursor AI聊天助手复刻教程？

哎，你听说没，Zui近那波「菜包」火得不要不要的。

别误会，菜包可不是豆包，虽然长得有点像，但内核玩意儿不一样。

今天咱们就聊聊怎么用 Cursor 从零把这个「菜包 AI」给整出来。

先说实话，这玩意儿kan起来挺吓人的。

我也是一开始懵逼，页面左边是对话列表，右边是聊天框，底部还有输入框——这套 UI 简单却超好用。

不过别慌，咱们一步步来把每个小需求拆开来敲代码。

第一步：先搞个界面原型

先打开 Cursor，给它塞一张豆包的截图，然后让它帮你生成一个「菜包」的 HTML、CSS、JS。

提示词Ke以这么写：

请参考这张图，生成一个左侧有 logo、对话列表的页面右侧是聊天区域，底部固定输入框。只要前端代码，不要后端。

Cursor 一眨眼就给了你 index.htmlstyles.cssapp.js 三个文件。

记得先在本地跑一下用 Live Server kankan界面是不是跟豆包差不多。

Ru果感觉颜色或间距怪怪的，就再让 Cursor 调整一下——一次只改视觉，不要一次加功Neng，否则代码会乱成一锅粥。

第二步：加点交互，让左侧Ke以折叠

这一步咱们只改左侧边栏的 JS。

要求点击折叠按钮后左侧收起，再点展开恢复；历史记录 hover 时出现删除按钮。

别忘了把「删除」逻辑写在前端，不需要后端支撑，只是演示效果。

第三步：输入框键盘交互

Enter 发消息，Shift+Enter 换行，这种细节决定用户体验到底顺手不顺手。

Ru果你不小心写成了「Enter dou发消息」导致换行不了那就自我纠正——不对不对，要区分两种情况。

第四步：消息气泡样式区分

User 的气泡靠右，用深色背景；AI 的气泡靠左，用浅灰色。这样一眼就Nengkan出谁说的话啦。

还有个小技巧：每次新消息进来后自动滚动到底部，不然用户得自己去拉滚动条，好尴尬呀！

第五步：接入真实大模型 API

前端发请求到后端 /api/chat，后端读取环境变量里的 API Key，再去调用模型接口返回结果。

注意！API Key 千万不Neng硬编码在前端！否则被抓取之后你的钱袋子瞬间瘪下来——害，你懂的！

后端代码Ke以用 Node.js + Express 写：

import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
import fetch from 'node-fetch';
dotenv.config;
const app = express;
app.use);
app.use);
app.post => {
  const { message } = req.body;
  if  return res.status.json;
  try {
    const response = await fetch('https://api.example.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.API_KEY}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify
    });
    const data = await response.json;
    res.json;
  } catch  {
    console.error;
    res.status.json;
  }
});
app.listen => console.log);

第六步：本地联调与调试

先把前端的发送逻辑改成调用刚才的 /api/chat 接口。

发送期间显示「AI 正在思考…」的 loading 状态，Ru果请求超时则弹出友好的错误提示——别让用户以为卡死了。

Cursors 那边Ru果报错，比如说「ARK_API_KEY is not defined」，直接把报错粘进去，让它帮你定位并修复即可。哈哈，一键搞定！

为什么百度不收录？

*问题*： 我的「菜包」项目上线以后在百度搜索里根本找不到相关页面这是怎么回事？

*答案*： 百度搜索geng倾向于收录结构化良好、含有 meta 信息且服务器响应速度快的站点。Ru果你的页面缺少 `