Creates a new Tambo generative UI app from scratch. Scaffolds with tambo create-app, wires TamboProvider, registers starter components. Triggers on "new Tambo app", "create a generative UI app", "build an AI app from scratch", "start a new project with Tambo". For existing apps, use building-with-tambo.
Build generative UI apps with Tambo — create rich, interactive React components from natural language.
Load these when you need deeper implementation details beyond the bootstrap flow:
tambo add components. Component library, non-interactive flags, 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 3 questions in ONE call. Authentication is handled by the CLI in a later step.
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: 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.
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, expo) 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 authentication in the next step.
npx tambo init --project-name=<app-name>
This opens the browser for authentication and polls until the user completes auth (up to 15 minutes). Use a long timeout (at least 15 minutes) when running this command. Once auth completes, the CLI creates the project and writes the API key to .env.local with the correct env var for the framework (NEXT_PUBLIC_TAMBO_API_KEY, VITE_TAMBO_API_KEY, etc.).
IMPORTANT: Do NOT ask the user to paste an API key manually. Always use the CLI auth flow.
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 authenticateNext.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 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 | Required | Used for all schemas |
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.