TinyRobot v0.5.0 深度解读（四）：CLI 脚手架——从零搭建 AI 应用的工程化实践

本文是 TinyRobot v0.5.0 系列解读的第四篇，聚焦 CLI 脚手架的工程化能力。系列共四篇，分别从架构设计、用户体验、页面布局、工程化四个角度拆解本次版本更新。

AI 应用开发的工程化痛点

构建一个 AI 聊天应用，技术门槛其实不低：

• 需要配置大模型接入（API Key、Provider 适配）
• 需要搭建流式渲染和对话管理
• 需要集成工具调用（MCP 插件等）
• 需要处理会话状态和上下文管理

如果从零开始，光是把这些基础设施跑通，可能就要花上好几天。而 TinyRobot v0.5.0 新增的 CLI 脚手架，把这件事压缩到了几分钟。

两条路径，两种场景

TinyRobot CLI 提供了两个命令，对应两种典型的开发场景：

路径一：create------从零搭建完整项目

适用于：新项目、新团队、快速验证想法

# npm
npx @opentiny/tiny-robot-cli create

# pnpm
pnpm dlx @opentiny/tiny-robot-cli create

创建完成后，根据指引安装依赖、启动项目：

cd <your-project-path>
cp .env.example .env
# 编辑 .env 配置大模型 Key

开箱即用的配置：basic 模板项目内置了两个大模型服务商和三个 MCP 插件：

类型	名称	说明
大模型	DeepSeek	通过 VITE_DEEPSEEK_API_KEY 配置
大模型	阿里百炼	通过 VITE_ALIYUN_DASHSCOPE_KEY 配置
MCP 插件	12306 车票查询	阿里百炼提供，依赖百炼 Key
MCP 插件	高德地图	阿里百炼提供，依赖百炼 Key
MCP 插件	MCP 示例	Model Context Protocol 官方示例

配置好 Key 后，浏览器打开 http://localhost:5173/，即可体验完整的 AI 聊天应用。

开发者的关键收益：从执行命令到看到运行效果，整个过程不超过 5 分钟。不需要手动配置 Vite、不需要逐个安装依赖、不需要研究大模型接入方式------脚手架已经帮你做好了。

路径二：add chat------在已有项目中注入聊天能力

适用于：已有 Vue 项目、增量集成 AI 能力

# 在已有的项目根目录执行
npx @opentiny/tiny-robot-cli add chat

# 或
pnpm dlx @opentiny/tiny-robot-cli add chat

根据指引选择选项后，生成 TinyRobotChat 组件。将组件放到想要初始化聊天应用的位置即可：

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TinyRobotChat from './TinyRobotChat.vue'
</script>

<template>
  <HelloWorld />
  <TinyRobotChat />
</template>

开发者的关键收益 ：不需要改造现有项目结构。add chat 命令会自动处理依赖安装和组件生成，你只需要把 TinyRobotChat 组件放到合适的位置，就能在已有页面中嵌入 AI 聊天能力。

工程化设计的关键决策

决策一：双模板策略

create 和 add chat 不是同一个命令的两种参数，而是两个独立的模板。这个设计背后的考量是：

• 新项目需要完整的项目结构（路由、状态管理、环境配置等）
• 已有项目只需要增量注入（组件、依赖、配置项）

两者的依赖冲突处理方式不同、文件生成策略不同、配置方式也不同。分开模板比用一个命令加参数更清晰，也更不容易出错。

决策二：内置多模型和多插件

脚手架不是只生成一个空壳，而是内置了可用的大模型和 MCP 插件。这意味着：

• 即时可验证：配置 Key 后就能看到完整效果，不需要额外安装任何东西
• 多模型对比：同时内置 DeepSeek 和阿里百炼，方便开发者对比不同模型的表现
• MCP 即体验：三个 MCP 插件让开发者立即理解工具调用的能力边界

决策三：环境变量管理

大模型 Key 通过 .env 文件管理，而非硬编码或交互式输入：

# .env
VITE_ALIYUN_DASHSCOPE_KEY=your-key-here
VITE_DEEPSEEK_API_KEY=your-key-here

这保证了：

• Key 不会被提交到代码仓库（.env 在 .gitignore 中）
• 不同环境可以使用不同的 Key
• 团队成员之间可以独立配置

从"能用"到"好用"的工程化思路

CLI 脚手架体现的工程化思路是：降低从 0 到 1 的门槛，同时保持从 1 到 N 的灵活性。

• 从 0 到 1：一条命令创建项目、一条命令注入能力，5 分钟内看到运行效果
• 从 1 到 N：生成的项目结构是标准的 Vue 项目，开发者可以自由扩展、替换组件、调整配置

这不是一个"只适合 demo"的脚手架，而是一个"从原型到生产"的起点。生成的代码结构清晰、依赖明确、配置规范，可以直接作为生产项目的基础。

快速上手清单

# 1. 创建新项目
npx @opentiny/tiny-robot-cli create

# 2. 安装依赖并配置
cd <your-project-path>
cp .env.example .env
# 编辑 .env，填入 API Key

# 3. 启动开发服务器
npm run dev

# 4. 或者在已有项目中注入聊天能力
cd <your-existing-vue-project>
npx @opentiny/tiny-robot-cli add chat

---

系列完结：本系列从架构设计、用户体验、页面布局、工程化四个角度拆解了 TinyRobot v0.5.0 的核心更新。Skills 让 AI Agent 的能力可组织、可复用；Anchor 让长对话不再难读；Layout 让复杂页面从"能摆出来"变成"能组织起来"；CLI 让从零搭建 AI 应用变成几分钟的事。

如果你对 TinyRobot 感兴趣，欢迎体验并反馈：

• 开源地址：github.com/opentiny/ti...
• 官方网站：opentiny.design/tiny-robot

---

TinyRobot 是一套专为 AI 应用构建的前端交互框架，基于 OpenTiny 设计体系，帮助团队快速搭建企业级 AI 助手、智能客服与多轮对话系统。