CodeBuddy Code + 腾讯混元打造"AI识菜通"
CodeBuddy Code使用指南
背景信息
9月9日，腾讯正式重磅推出了 CodeBuddy CLI 🚀！之所以选在9月9号发布，是因为腾讯怀揣着一个美好愿景：未来99%的编程工作都能通过"vibe coding"（氛围式编码）自动完成，人类只需花1%的精力撰写提示词即可 💡。和 Cloudbase AI CLI 类似，CodeBuddy CLI 也采用终端命令行的操作方式。它的上线，标志着腾讯在开发者生态中已形成插件、IDE 与 CLI 三足鼎立的格局 ⚖️。今天在发布会上收获颇丰，结合自己的理解稍作梳理，与大家分享～ 🎯
下载安装
跟大多数的命令行AI工具一样，CodeBuddy Code的下载方式也是如出一辙
plain
npm install -g @tencent-ai/codebuddy-code命令行输入就可以自动下载
下载完毕之后直接输入CodeBuddy即可唤醒
登录
这里提供了三种不同的登录方式
选择好登录的方式回车之后会直接进入登录网页，这里我们选择用GitHub登录
跳转到网页之后，要是之前登录过就会自动登录
这时候再来看CodeBuddy Code就会发现已经进入到当前的目录下准备运行了~
测试
安装登录完毕之后，我们这里来做一个简单的测试看看CodeBuddy是否可用。
完美运行，并且右侧有显示当前小号的tokens总数，用GitHub登录的话是有免费额度送的。
腾讯混元API接入指南
开通腾讯混元大模型
访问腾讯云控制台中的腾讯混元大模型[https://console.cloud.tencent.com/hunyuan/start\](https://console.cloud.tencent.com/hunyuan/start)，点击立即开通，开通之后就如下图所示：
获取腾讯云密钥
进入到腾讯云控制台中的API密钥管理界面[https://console.cloud.tencent.com/cam/capi\](https://console.cloud.tencent.com/cam/capi)，如下图所示开通腾讯原API密钥
腾讯混元API文档
我这里开发主要是采用的腾讯混元API方式接入的，参考的是官方文的API文档，有兴趣的小伙伴也可以去尝试一下[https://cloud.tencent.com/document/product/1729/101848\](https://cloud.tencent.com/document/product/1729/101848)：
这里是一个调用示例
plain
POST / HTTP/1.1
Host: hunyuan.tencentcloudapi.com
Content-Type: application/json
X-TC-Action: ImageQuestion
<公共请求参数>
{
"Model": "hunyuan-vision-image-question",
"Messages": [
{
"Role": "user",
"Contents": [
{
"Type": "text",
"Text": "解答图片中的问题"
},
{
"Type": "image_url",
"ImageUrl": {
"Url": "https://qidian-qbot-1251316161.cos.ap-guangzhou.tencentcos.cn/public/0/0/image/hy/2c4dda9e032a477a6572866de2419ecd9e59076a-6145-46a0-9f47-1048f65cf4f8.png"
}
}
]
}
],
"Stream": false
}AI识菜通开发指南
上方的准备工作准备好之后，接下来就是开发时间：
开发提示词
准备好下方的开发提示词
plain
我要做一个"AI识菜通"APP。它的输入是一张菜单图片，它可能是任何语言的。我需要调用腾讯混元模型，使用腾讯混元图片模型的 API去理解图片，然后在网页上用户来上传这张图片，上传之后调用 腾讯混元文本大模型理解图片之后进入第二个页面就是点菜的页面，点菜的页面会包含，会把整个单变成中文的，用户可以点菜。每一道菜都包含它的名字、它的介绍和一张图片，图片也调用 腾讯混元 的生成图片的模型来生成，腾讯混元API放在UI中让用户输入并且存在local storage里，然后用户点加号可以把这道菜加入他的购物车，最后点提交生成一个一串字符，上面写他想要点哪些菜，方便他跟服务员说他要点哪些。这个字符应该包合中文名和他元语言的名字。项目需要使用|react 实现 U，使用 shadcn、redix 组件库。CodeBuddy.md开发文档
输入到CodeBuddy中，并且先别让他直接开始开发，先让他生成CodeBuddy.md。
这里是CodeBuddy的分析过程，询问我们是否保存，这里选择yes
这里已经保存到了本地的CodeBuddy.md中
这是刚刚CodeBuddy生成的文档，这里我们发现有不对的地方可以随意编辑，如果确认无误的话就可以让CodeBuddy对着文档开始开发项目了。
plain
# AI识菜通 APP 项目文档
## 项目概述
"AI识菜通"是一个基于AI的智能点菜应用，用户可以上传任何语言的菜单图片，系统会自动识别并翻译成中文，生成带有图片和介绍的点菜界面，最终生成订单字符串方便用户与服务员沟通。
## 技术栈
- **前端框架**: React
- **UI组件库**: shadcn/ui + Radix UI
- **AI服务**: 腾讯混元大模型
- 图片理解模型 (识别菜单)
- 文本大模型 (翻译和生成介绍)
- 图片生成模型 (生成菜品图片)
- **状态管理**: React Context + useState
- **本地存储**: localStorage (存储API密钥和购物车)
## 功能模块
### 1. 首页 - 图片上传页面
- **功能**:
- API密钥输入框 (存储到localStorage)
- 菜单图片上传组件
- 上传按钮触发图片识别
- **API调用**: 腾讯混元图片理解模型
- **页面跳转**: 识别成功后跳转到点菜页面
### 2. 点菜页面
- **功能**:
- 显示识别出的菜品列表
- 每个菜品包含:
- 中文名称
- 原语言名称
- AI生成的菜品图片
- 菜品介绍
- 添加到购物车按钮 (+)
- 购物车侧边栏/底部栏
- 提交订单按钮
- **API调用**:
- 腾讯混元文本模型 (翻译和生成介绍)
- 腾讯混元图片生成模型 (生成菜品图片)
### 3. 订单确认
- **功能**:
- 生成包含中文名和原语言名的订单字符串
- 方便用户与服务员沟通
## 数据结构
### 菜品对象 (Dish)
```typescript
interface Dish {
id: string;
originalName: string; // 原语言名称
chineseName: string; // 中文名称
description: string; // 菜品介绍
imageUrl: string; // AI生成的图片URL
price?: string; // 价格 (如果能识别出来)
quantity: number; // 购物车中的数量
}购物车项目 (CartItem)
typescript
interface CartItem {
dish: Dish;
quantity: number;
}API集成
腾讯混元API配置
- 图片理解API: 识别菜单内容
- 文本生成API: 翻译菜名和生成介绍
- 图片生成API: 根据菜名生成菜品图片
- API密钥管理: 存储在localStorage中
页面路由结构
bash
/ # 首页 - 图片上传
/menu # 点菜页面
/order-summary # 订单确认页面 (可选)组件结构
bash
src/
├── components/
│ ├── ui/ # shadcn/ui组件
│ ├── ImageUpload.tsx # 图片上传组件
│ ├── DishCard.tsx # 菜品卡片组件
│ ├── Cart.tsx # 购物车组件
│ ├── ApiKeyInput.tsx # API密钥输入组件
│ └── OrderSummary.tsx # 订单摘要组件
├── pages/
│ ├── HomePage.tsx # 首页
│ ├── MenuPage.tsx # 点菜页面
│ └── OrderPage.tsx # 订单页面
├── hooks/
│ ├── useApi.ts # 腾讯混元API调用hooks
│ ├── useCart.ts # 购物车管理hooks
│ └── useLocalStorage.ts # localStorage管理hooks
├── services/
│ └── tencentApi.ts # 腾讯混元API服务
├── types/
│ └── index.ts # TypeScript类型定义
└── utils/
└── helpers.ts # 工具函数开发阶段规划
阶段1: 项目初始化
- 创建React项目
- 安装shadcn/ui和Radix UI
- 设置项目结构和TypeScript配置
- 配置路由
阶段2: 基础组件开发
- 创建API密钥输入组件
- 创建图片上传组件
- 创建菜品卡片组件
- 创建购物车组件
阶段3: API集成
- 集成腾讯混元图片理解API
- 集成腾讯混元文本生成API
- 集成腾讯混元图片生成API
- 实现错误处理和加载状态
阶段4: 页面开发
- 开发首页 (图片上传)
- 开发点菜页面
- 开发订单确认功能
- 实现页面间导航
阶段5: 功能完善
- 实现购物车功能
- 实现订单字符串生成
- 添加响应式设计
- 优化用户体验
阶段6: 测试和优化
- 功能测试
- 性能优化
- 错误处理完善
- 用户界面优化
注意事项
- API密钥安全: 密钥存储在localStorage中，提醒用户不要在公共设备上使用
- 图片处理: 需要处理不同格式和大小的图片
- 多语言支持: 确保能正确识别和处理各种语言的菜单
- 错误处理: 完善的API调用失败处理机制
- 加载状态: 为AI处理过程添加适当的加载指示器
- 响应式设计: 确保在移动设备上的良好体验
预期挑战
- 菜单图片质量和格式的多样性
- 不同语言菜名的准确翻译
- AI生成图片的质量和相关性
- API调用的稳定性和错误处理
- 用户体验的流畅性
此文档将在开发过程中持续更新和完善
bash
<h3 id="oCFCR">全速开发</h3>
可以看到CodeBuddy已经开始分析并且对照文档进行开发了，并且CodeBuddy的每一步操作都会询问，这里如果不想一直被询问的话可以选择第二个选项，这里我就直接让CodeBuddy全速开发了，接下来就是等待即可，由于篇幅原因我就直接跳到最后一步看成果了。
<h2 id="OZbFv">成果展示</h2>
<h3 id="VGqsF">部署阶段</h3>
在项目"AI识菜通"的最终部署阶段，我选择了 Vercel 作为前端应用的托管平台。Vercel 以其卓越的开发者体验和对现代前端框架的深度支持，极大简化了部署流程。本项目基于 React 构建，并使用了 shadcn/ui 和 Radix UI 组件库，Vercel 能自动识别项目结构，实现一键部署和持续集成。每次代码推送至 GitHub 仓库，Vercel 都会自动构建并生成预览链接，方便快速测试与迭代。更重要的是，Vercel 提供全球边缘网络分发，确保用户无论身处何地，都能快速加载应用页面。整个"AI识菜通"从前端交互、图片上传，到调用腾讯混元大模型进行多语言菜单识别与菜品图像生成，最终生成点餐字符串，全部通过 Vercel 高效、稳定地交付给用户。借助 Vercel 的免费计划和无缝 DevOps 能力，我得以将精力聚焦在核心 AI 功能开发上，而无需担心服务器运维，真正实现了"开发即部署"的现代 Web 开发体验。[https://ai-menu-a92k3hb78-pickstar-2002s-projects.vercel.app/](https://ai-menu-a92k3hb78-pickstar-2002s-projects.vercel.app/)
<h3 id="Z2StW">首页</h3>
<h3 id="V2NF9">设置API密钥</h3>
本项目的API密钥存放在本地的storage中，并不会上传到云端，确保用户的密钥安全。
<h3 id="O6aUa">识别菜单</h3>
这里准备了国外的菜单进行测试：
上传图片之后AI开始分析
识别完毕之后点击去点菜即可看到生成的中文菜单
以下是生成后的结果，这样就可以顺利点菜了：
<h3 id="OG3b1">点餐进入购物车</h3>
点击生成订单汇总，会生成一份刚刚的点菜TXT格式的清单：
