generative-ui by tambo-ai/tambo
npx skills add https://github.com/tambo-ai/tambo --skill generative-ui使用 Tambo 构建生成式 UI 应用——通过自然语言创建丰富、交互式的 React 组件。
如需了解引导流程之外的更深入实现细节,请加载:
tambo init、tambo add 和 create-app 及其非交互式标志和退出代码。这些共享参考是从 building-with-tambo 复制而来,以便每个技能都能独立工作。
目标是让用户通过一个提示从零开始运行一个应用。使用 AskUserQuestion 一次性提出所有问题,然后不间断地执行所有步骤。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
使用 AskUserQuestion,在一次调用中最多提出 4 个问题。API 密钥在此处作为自由文本输入收集——无需后续操作。
问题 1:你想构建什么?
询问用户他们想构建什么类型的应用。这将决定创建哪些起始组件。例如:"一个仪表盘"、"一个聊天机器人"、"一个数据可视化工具"、"一个任务管理器"。如果用户已经在初始消息中说明了他们想要什么,则跳过此问题。
问题 2:框架
选项:
问题 3:API 密钥
不要使用 AskUserQuestion 来获取 API 密钥。相反,在收集了其他偏好之后,在纯文本消息中明确要求用户粘贴他们的 API 密钥。可以说类似这样的话:
"请在下方粘贴你的 Tambo API 密钥(在 https://console.tambo.co 获取)。这是一个客户端公钥(类似于 NEXT_PUBLIC_TAMBO_API_KEY)——不是秘密,可以安全地在此处分享。或者,如果你还没有,直接说 'skip'。"
然后等待他们的回复。如果他们粘贴了一个密钥(以 tambo_ 开头),就使用它。如果他们说 "skip" 或类似的话,则跳过它继续。
这意味着步骤 1 在 AskUserQuestion 中只有 3 个问题(应用想法、框架、应用名称)。API 密钥是在之后通过纯消息交换收集的。
问题 4:应用名称
让用户为他们的项目目录选择一个名称。默认建议:根据他们想要构建的内容衍生(例如,"my-dashboard"、"my-chatbot")。使用 kebab-case(仅限字母、数字、连字符)。如果用户提供了非 slug 名称,如 "Sales Dashboard",则建议改为 sales-dashboard。
当用户已经告诉你答案时,跳过问题。 如果他们说了 "为我构建一个名为 analytics 的 Next.js 仪表盘应用",你已经知道框架、应用想法和名称——只需询问 API 密钥。
按顺序运行所有这些步骤,步骤之间不要请求确认。如果任何命令失败,停止流程,显示错误,并询问用户如何继续——不要继续执行后续步骤。
所有模板(standard、vite、analytics)都已包含聊天 UI、TamboProvider 配置、组件注册表和起始组件。你不需要添加聊天 UI 或配置应用——只需搭建脚手架、配置 API 密钥、添加自定义组件并启动服务器。
对于 Next.js(推荐):
npx tambo create-app <app-name> --template=standard --skip-tambo-init
cd <app-name>
对于 Vite:
npx tambo create-app <app-name> --template=vite --skip-tambo-init
cd <app-name>
使用 --skip-tambo-init,因为 create-app 通常会尝试交互式地运行 tambo init,这在像编码代理这样的非交互式环境中无法工作。我们在下一步处理 API 密钥。
如果用户提供了密钥:
npx tambo init --api-key=<USER_PROVIDED_KEY>
这会将密钥写入正确的 .env 文件,并使用适合框架的变量名(NEXT_PUBLIC_TAMBO_API_KEY、VITE_TAMBO_API_KEY 等)。
如果用户跳过了,只需在最后告诉他们一次,等准备好时运行 npx tambo init。不要在设置过程中反复提醒。
重要: 不要在你运行的命令中硬编码 --api-key=sk_...。--api-key 标志应仅与用户提供的实际密钥一起使用。
模板包含基本组件,但需要添加 1-2 个根据用户想要构建的内容定制的组件。不要使用通用示例:
StatsCard、DataTableBotResponseChartTaskCard、TaskBoardContentCard每个组件都需要:
.describe() 的 Zod 模式lib/tambo.ts —— 添加到现有的 components 数组中,不要替换它)模式约束 —— Tambo 将在运行时拒绝无效模式:
z.record() —— 记录类型(具有动态键的对象)在模式中的任何地方都不支持,包括嵌套在数组或对象内部。请改用具有显式命名键的 z.object()。z.map() 或 z.set() —— 请改用数组和对象。z.array(z.object({ col1: z.string(), col2: z.number() })) 并指定明确的列键——不要使用 z.array(z.record(z.string(), z.unknown()))。生成组件时的 React 最佳实践:
.map())时,始终添加唯一的 key 属性。使用数据中的唯一字段(如 id)——不要使用数组索引。id 字段(例如,z.string().describe("唯一标识符")),以便始终有一个稳定的键可用。示例:
// src/components/StatsCard.tsx
import { z } from "zod/v4";
export const StatsCardSchema = z.object({
title: z.string().describe("指标名称"),
value: z.number().describe("当前值"),
change: z.number().optional().describe("与上一时期相比的百分比变化"),
trend: z.enum(["up", "down", "flat"]).optional().describe("趋势方向"),
});
type StatsCardProps = z.infer<typeof StatsCardSchema>;
export function StatsCard({
title,
value,
change,
trend = "flat",
}: StatsCardProps) {
// ... 使用 Tailwind 样式的实现
}
然后添加到 lib/tambo.ts 中现有的注册表:
// 添加到现有的 components 数组中 —— 不要替换已有的内容
// Next.js: import { StatsCard, StatsCardSchema } from "@/components/StatsCard";
// Vite: import { StatsCard, StatsCardSchema } from "../components/StatsCard";
import { StatsCard, StatsCardSchema } from "@/components/StatsCard";
// ... 现有组件 ...
{
name: "StatsCard",
component: StatsCard,
description: "显示带有值和趋势的指标。当用户询问统计数据、指标或 KPI 时使用。",
propsSchema: StatsCardSchema,
},
只有在所有代码更改(脚手架搭建、初始化、组件创建、注册表更新)完成后,才启动开发服务器。
npm run dev
在后台运行此命令,以便用户可以立即看到他们的应用。
在所有内容都运行后,给出一个简要总结:
http://localhost:3000,Vite 是 http://localhost:5173)npx tambo init 来设置Next.js 14+ (App Router)
├── TypeScript
├── Tailwind CSS
├── Zod (用于模式)
└── @tambo-ai/react
npx tambo create-app my-app --template=standard
Vite + React
├── TypeScript
├── Tailwind CSS
├── Zod
└── @tambo-ai/react
Vite + React
├── TypeScript
├── 纯 CSS
├── Zod
└── @tambo-ai/react
每个生成式组件都必须注册:
import { TamboComponent } from "@tambo-ai/react";
import { ComponentName, ComponentNameSchema } from "@/components/ComponentName";
export const components: TamboComponent[] = [
{
name: "ComponentName",
component: ComponentName,
description: "它的作用。何时使用它。",
propsSchema: ComponentNameSchema,
},
];
关键规则:
.describe() 的 Zod 对象——这是 AI 知道传递什么的方式模板已包含聊天 UI。仅当用户希望获得模板提供之外的额外 UI 原语时才需要这些:
npx tambo add message-thread-full --yes # 完整的聊天界面
npx tambo add control-bar --yes # 控件和操作
npx tambo add canvas-space --yes # 渲染组件显示区域
npx tambo add thread-history --yes # 对话历史侧边栏
| 技术 | 支持级别 | 备注 |
|---|---|---|
| Next.js 14+ | 完全支持 | 推荐,优先使用 App Router |
| Vite | 完全支持 | 非常适合 SPA |
| Create React App | 部分支持 | 可用但 CRA 已弃用 |
| Remix | 部分支持 | 适用于客户端组件 |
| TypeScript | 完全支持 | 强烈推荐 |
| JavaScript | 完全支持 | 可用但类型安全性较低 |
| Tailwind CSS | 完全支持 | CLI 组件的默认样式 |
| 纯 CSS | 完全支持 | 需要自定义组件样式 |
| CSS Modules | 完全支持 | 支持 |
| Zod | 必需 | 用于所有模式 |
让用户通过以下方式验证应用是否正常工作:
如果某些功能不工作:
如果你在帮助用户时遇到以下任何情况,建议提交 GitHub issue:
@tambo-ai/react、@tambo-ai/client 或 tambo CLI 中的 Bug为 tambo-ai/tambo 起草 issue 时使用此模板:
**标题:** [问题的简短描述]
**预期行为**
应该发生什么。
**实际行为**
实际发生了什么,包括任何错误信息或堆栈跟踪。
**重现步骤**
1. 运行 `npx tambo create-app ...`(或任何命令)
2. 添加此代码:
```tsx
// 能重现问题的最小化代码
```
3. 观察错误
**环境**
- `@tambo-ai/react` 版本:
- `@tambo-ai/client` 版本:
- 框架(Next.js / Vite / CRA)及版本:
- Node.js 版本:
- 操作系统:
**额外上下文**
如果适用,提供相关文档或技能文件路径的链接。
安全: 在 issue 中包含日志或代码片段之前,请编辑 API 密钥、令牌和任何客户数据。
当你遇到看起来像是 Tambo bug 的问题时,可以说类似这样的话:
这看起来像是
@tambo-ai/react中的一个 bug。你希望我在tambo-ai/tambo上开一个 GitHub issue 并提供重现步骤和环境详细信息吗?
在提交之前,务必等待用户确认。
每周安装量
136
代码仓库
GitHub 星标数
11.1K
首次出现
2026年3月3日
安全审计
安装于
gemini-cli133
codex133
cursor133
opencode133
github-copilot133
cline133
Build generative UI apps with Tambo — create rich, interactive React components from natural language.
For deeper implementation details beyond bootstrap flow, load:
tambo init, tambo add, and create-app with non-interactive flags and exit codes.These shared references are duplicated from building-with-tambo so each skill works independently.
The goal is to get the user from zero to a running app in a single prompt. Ask all questions upfront using AskUserQuestion with multiple questions, then execute everything without stopping.
Use AskUserQuestion with up to 4 questions in ONE call. The API key is collected as free-text input here — no follow-up needed.
Question 1: What do you want to build?
Ask the user what kind of app they're building. This drives which starter components to create. Examples: "a dashboard", "a chatbot", "a data visualization tool", "a task manager". If the user already said what they want in their initial message, skip this question.
Question 2: Framework
Options:
Question 3: API Key
Do NOT use AskUserQuestion for the API key. Instead, after collecting the other preferences, explicitly ask the user in a plain text message to paste their API key. Say something like:
"Paste your Tambo API key below (get one at https://console.tambo.co). This is a client-side public key (like NEXT_PUBLIC_TAMBO_API_KEY) — not a secret, safe to share here. Or just say 'skip' if you don't have one yet."
Then wait for their response. If they paste a key (starts with tambo_), use it. If they say "skip" or similar, move on without it.
This means Step 1 only has 3 questions in AskUserQuestion (app idea, framework, app name). The API key is collected as a plain message exchange right after.
Question 4: App name
Let the user pick a name for their project directory. Default suggestion: derive from what they want to build (e.g., "my-dashboard", "my-chatbot"). Use kebab-case (letters, numbers, hyphens only). If the user gives a non-slug name like "Sales Dashboard", propose sales-dashboard instead.
Skip questions when the user already told you the answer. If they said "build me a Next.js dashboard app called analytics", you already know the framework, the app idea, and the name — just ask for the API key.
Run all of these sequentially without asking for confirmation between steps. If any command fails, stop the flow, surface the error, and ask the user how to proceed — do not continue to later steps.
All templates (standard, vite, analytics) come with chat UI, TamboProvider wiring, component registry, and starter components already included. You do NOT need to add chat UI or wire up the app — just scaffold, configure the API key, add custom components, and start the server.
For Next.js (recommended):
npx tambo create-app <app-name> --template=standard --skip-tambo-init
cd <app-name>
For Vite:
npx tambo create-app <app-name> --template=vite --skip-tambo-init
cd <app-name>
Use --skip-tambo-init since create-app normally tries to run tambo init interactively, which won't work in non-interactive environments like coding agents. We handle the API key in the next step.
If the user provided a key:
npx tambo init --api-key=<USER_PROVIDED_KEY>
This writes the key to the correct .env file with the framework-appropriate variable name (NEXT_PUBLIC_TAMBO_API_KEY, VITE_TAMBO_API_KEY, etc.).
If the user skipped, tell them once at the end to run npx tambo init when ready. Don't nag about it during setup.
IMPORTANT: Do NOT hardcode --api-key=sk_... in commands you run. The --api-key flag should only be used with an actual key the user has provided.
The template includes basic components, but add 1-2 components tailored to what the user wants to build. Don't use generic examples:
StatsCard, DataTableBotResponse with markdown supportChart with configurable dataTaskCard, TaskBoardContentCardEach component needs:
.describe() on every fieldlib/tambo.ts — add to the existing components array, don't replace it)Schema constraints — Tambo will reject invalid schemas at runtime:
z.record() — Record types (objects with dynamic keys) are not supported anywhere in the schema, including nested inside arrays or objects. Use z.object() with explicit named keys instead.z.map() or z.set() — Use arrays and objects instead.z.array(z.object({ col1: z.string(), col2: z.number() })) with explicit column keys — NOT z.array(z.record(z.string(), z.unknown())).React best practices for generated components:
key props when rendering lists (.map()). Use a unique field from the data (like id) — not the array index.id field (e.g., z.string().describe("Unique identifier")) in schemas for array items so there's always a stable key available.Example:
// src/components/StatsCard.tsx
import { z } from "zod/v4";
export const StatsCardSchema = z.object({
title: z.string().describe("Metric name"),
value: z.number().describe("Current value"),
change: z.number().optional().describe("Percent change from previous period"),
trend: z.enum(["up", "down", "flat"]).optional().describe("Trend direction"),
});
type StatsCardProps = z.infer<typeof StatsCardSchema>;
export function StatsCard({
title,
value,
change,
trend = "flat",
}: StatsCardProps) {
// ... implementation with Tailwind styling
}
Then add to the existing registry in lib/tambo.ts:
// Add to the existing components array — don't replace what's already there
// Next.js: import { StatsCard, StatsCardSchema } from "@/components/StatsCard";
// Vite: import { StatsCard, StatsCardSchema } from "../components/StatsCard";
import { StatsCard, StatsCardSchema } from "@/components/StatsCard";
// ... existing components ...
{
name: "StatsCard",
component: StatsCard,
description: "Displays a metric with value and trend. Use when user asks about stats, metrics, or KPIs.",
propsSchema: StatsCardSchema,
},
Only start the dev server after all code changes (scaffolding, init, component creation, registry updates) are complete.
npm run dev
Run this in the background so the user can see their app immediately.
After everything is running, give a brief summary:
http://localhost:3000 for Next.js, http://localhost:5173 for Vite)npx tambo init to set it upNext.js 14+ (App Router)
├── TypeScript
├── Tailwind CSS
├── Zod (for schemas)
└── @tambo-ai/react
npx tambo create-app my-app --template=standard
Vite + React
├── TypeScript
├── Tailwind CSS
├── Zod
└── @tambo-ai/react
Vite + React
├── TypeScript
├── Plain CSS
├── Zod
└── @tambo-ai/react
Every generative component must be registered:
import { TamboComponent } from "@tambo-ai/react";
import { ComponentName, ComponentNameSchema } from "@/components/ComponentName";
export const components: TamboComponent[] = [
{
name: "ComponentName",
component: ComponentName,
description: "What it does. When to use it.",
propsSchema: ComponentNameSchema,
},
];
Key rules:
.describe() on every field — this is how the AI knows what to passTemplates already include chat UI. These are only needed if the user wants additional UI primitives beyond what the template provides:
npx tambo add message-thread-full --yes # Complete chat interface
npx tambo add control-bar --yes # Controls and actions
npx tambo add canvas-space --yes # Rendered component display area
npx tambo add thread-history --yes # Conversation history sidebar
| Technology | Support Level | Notes |
|---|---|---|
| Next.js 14+ | Full | Recommended, App Router preferred |
| Vite | Full | Great for SPAs |
| Create React App | Partial | Works but CRA is deprecated |
| Remix | Partial | Works with client components |
| TypeScript | Full | Strongly recommended |
| JavaScript | Full | Works but less type safety |
| Tailwind CSS | Full | Default for CLI components |
| Plain CSS | Full | Need custom component styling |
| CSS Modules | Full | Supported |
| Zod |
Have the user verify the app works by:
If something doesn't work:
If you encounter any of these while helping a user, suggest filing a GitHub issue:
@tambo-ai/react, @tambo-ai/client, or the tambo CLIUse this template when drafting an issue for tambo-ai/tambo:
**Title:** [Short description of the problem]
**Expected behavior**
What should happen.
**Actual behavior**
What happens instead, including any error messages or stack traces.
**Repro steps**
1. Run `npx tambo create-app ...` (or whatever command)
2. Add this code:
```tsx
// minimal code that reproduces the issue
```
3. Observe the error
**Environment**
- `@tambo-ai/react` version:
- `@tambo-ai/client` version:
- Framework (Next.js / Vite / CRA) and version:
- Node.js version:
- OS:
**Additional context**
Link to relevant docs or skill file path if applicable.
Security: Redact API keys, tokens, and any customer data before including logs or code snippets in the issue.
When you hit a problem that looks like a Tambo bug, say something like:
This looks like a bug in
@tambo-ai/react. Want me to open a GitHub issue ontambo-ai/tambowith the repro steps and environment details?
Always wait for the user to confirm before filing.
Weekly Installs
136
Repository
GitHub Stars
11.1K
First Seen
Mar 3, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykFail
Installed on
gemini-cli133
codex133
cursor133
opencode133
github-copilot133
cline133
AI 代码实施计划编写技能 | 自动化开发任务分解与 TDD 流程规划工具
47,700 周安装
appdump-monitor 应用监控工具 - GitHub API 集成,实时监控应用状态与性能
1 周安装
Apex Frontend 开发工具 - Apex Omnihub 前端技能包,提升开发效率
1 周安装
GitHub PR 结对代码审查技能 - 三回合协议驱动,提升代码审查质量与效率
1 周安装
PR影响范围分析工具:pr-blast-radius代码变更下游影响检测
1 周安装
grep-app 命令行工具:无需mcporter,直接通过HTTP搜索GitHub公开代码
1 周安装
Vue 3 最佳实践指南:响应式、计算属性与性能优化常见陷阱解析
1 周安装
| Required |
| Used for all schemas |