CodeBuddy Code与腾讯混元打造AI识菜通
来源：互联网 2026-07-15 18:43:15腾讯推出CodeBuddyCLI命令行工具，并结合腾讯混元大模型开发“AI识菜通”应用。用户上传菜单图片后，调用混元图片理解与文本生成模型识别翻译，生成中文点菜界面，支持加入购物车并生成订单字符串。项目基于React和shadcn/ui组件库，部署于Vercel平台。
9月5日，腾讯正式推出CodeBuddy CLI。选择这一日期并非随意，其背后蕴含着一个小愿景：希望未来99%的编程工作能够通过“vibe coding”（氛围式编码）自动完成，人类只需投入1%的精力编写提示词。与Cloudbase AI CLI类似，CodeBuddy CLI同样采用终端命令行模式。它的上线标志着腾讯在开发者生态中已补齐插件、IDE和CLI三块拼图。在今天的发布会上，信息量较大，现将主线思路梳理并分享如下。
CodeBuddy Code使用指南
1. 背景信息
前面提到的9月5日发布只是一个引子，真正值得关注的是产品本身的定位。对开发者而言，命令行式的AI工具意味着更低的接入门槛和更高的自动化程度。对于需要快速搭建AI原型的开发者来说，这无疑是一个好消息。
长期稳定更新的攒劲资源： >>>点此立即查看<<<
2. 下载安装
与市面上大多数命令行AI工具类似，CodeBuddy Code的安装方式也遵循相同模式——一条npm命令即可完成。
npm install -g @tencent-ai/codebuddy-code
执行命令行后自动下载，下载完成后直接输入CodeBuddy即可唤醒。
3. 登录
本次提供了三种不同的登录方式，选择一种即可进入登录网页。这里选择通过GitHub登录，跳转后如之前登录过，系统会自动完成认证。
登录成功后，CodeBuddy Code会显示已进入当前目录，准备运行。
4. 测试
安装和登录均已完成，自然需要做一个小测试以验证是否可用。测试结果完美运行，右侧还显示了当前对话的tokens总数。使用GitHub登录的用户可获得免费额度赠送。
腾讯混元API接入指南
1. 开通腾讯混元大模型
访问腾讯云控制台的腾讯混元大模型页面，点击“立即开通”，成功后界面如下所示。
2. 获取腾讯云密钥
进入腾讯云控制台的API密钥管理界面，按照指引开通腾讯云API密钥。
3. 腾讯混元API文档
本次开发主要采用腾讯混元API方式接入，参考的是官方API文档。下面是一个调用示例：
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识菜通开发指南
准备工作全部就绪，接下来进入正式开发环节。
1. 开发提示词
准备好以下提示词，这是整个项目的起点。
我要做一个"AI识菜通"APP。它的输入是一张菜单图片，它可能是任何语言的。我需要调用腾讯混元模型，使用腾讯混元图片模型的 API去理解图片，然后在网页上用户来上传这张图片，上传之后调用 腾讯混元文本大模型理解图片之后进入第二个页面就是点菜的页面，点菜的页面会包含，会把整个单变成中文的，用户可以点菜。每一道菜都包含它的名字、它的介绍和一张图片，图片也调用 腾讯混元 的生成图片的模型来生成，腾讯混元API放在UI中让用户输入并且存在local storage里，然后用户点加号可以把这道菜加入他的购物车，最后点提交生成一个一串字符，上面写他想要点哪些菜，方便他跟服务员说他要点哪些。这个字符应该包合中文名和他元语言的名字。项目需要使用|react 实现 U，使用 shadcn、redix 组件库。
2. CodeBuddy.md开发文档
将提示词输入到CodeBuddy中，但先不直接开始开发——先让它生成CodeBuddy.md文档。以下是CodeBuddy的分析过程，询问是否保存时选择yes，文档将保存到本地。
生成的文档如下，如发现不妥之处可随时编辑，确认无误后即可让CodeBuddy对照文档开始开发。
# 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中
## 页面路由结构
```
/ # 首页 - 图片上传
/menu # 点菜页面
/order-summary# 订单确认页面 (可选)
```
## 组件结构
```
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: 测试和优化
- [ ] 功能测试
- [ ] 性能优化
- [ ] 错误处理完善
- [ ] 用户界面优化
## 注意事项
1. **API密钥安全**: 密钥存储在localStorage中，提醒用户不要在公共设备上使用
2. **图片处理**: 需要处理不同格式和大小的图片
3. **多语言支持**: 确保能正确识别和处理各种语言的菜单
4. **错误处理**: 完善的API调用失败处理机制
5. **加载状态**: 为AI处理过程添加适当的加载指示器
6. **响应式设计**: 确保在移动设备上的良好体验
## 预期挑战
1. 菜单图片质量和格式的多样性
2. 不同语言菜名的准确翻译
3. AI生成图片的质量和相关性
4. API调用的稳定性和错误处理
5. 用户体验的流畅性
---
*此文档将在开发过程中持续更新和完善*
3. 全速开发
CodeBuddy开始分析并对照文档进行开发，每一步操作都会询问。如果希望避免频繁中断，可以选择第二个选项让CodeBuddy全速开发。接下来就是等待，由于篇幅限制，直接跳到最后一步查看成果。
成果展示
1. 部署阶段
项目“AI识菜通”进入最终部署阶段，前端应用托管在Vercel上。Vercel对现代前端框架的深度支持极大简化了部署流程。基于React构建，使用shadcn/ui和Radix UI组件库，Vercel能自动识别项目结构，实现一键部署和持续集成。每次代码推送至GitHub仓库，Vercel都会自动构建并生成预览链接。更重要的是，Vercel提供全球边缘网络分发，确保用户无论身处何地都能快速加载应用页面。从交互、图片上传，到调用腾讯混元大模型进行多语言菜单识别与菜品图像生成，最终生成点餐字符串，全部通过Vercel高效、稳定地交付。借助Vercel的免费计划和自动化运维能力，开发精力可以完全聚焦在核心AI功能上——这正是关键所在。
2. 首页
3. 设置API密钥
项目的API密钥存放在本地storage中，不会上传至云端，以确保用户密钥安全。
4. 识别菜单
这里准备了一份国外菜单进行测试：
上传图片后，AI开始分析：
识别完成后，点击“去点菜”即可看到生成的中文菜单：
以下是生成后的结果，点菜流程顺利打通：
5. 点餐进入购物车
点击“生成订单汇总”，会生成一份包含已点菜品的TXT格式清单：
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
同类更新
更多
热游推荐
更多-
- DreamStudio
- Android/ | AI绘图
- 2026-06-30
-
-
- Playground AI
- Android/ | AI绘图
- 2026-06-30
-
- Adobe Firefly
- Android/ | AI绘图
- 2026-06-30
-
-
-
- Leonardo AI
- Android/ | AI绘图
- 2026-06-30
-
- Stable Diffusion
- Android/ | AI绘图
- 2026-06-30
