Fetches generative-ui from tambo-ai/tambo and configures it for Cursor.
3
Select Cursor when prompted
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/generative-ui
Restart Cursor to activate generative-ui. Access via /generative-ui in your agent's command palette.
⚠
Security Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
These shared references are duplicated from building-with-tambo so each skill works independently.
One-Prompt Flow
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.
Step 1: Gather All Non-Sensitive Preferences (Single AskUserQuestion Call)
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:
Next.js (Recommended) - Full-stack React with App Router
Vite - Fast, lightweight React setup
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.
Step 2: Execute Everything (No Stopping)
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.
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.
2b. Authenticate and initialize Tambo
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.
2c. Create custom starter components
The template includes basic components, but add 1-2 components tailored to what the user wants to build. Don't use generic examples:
Dashboard app → StatsCard, DataTable
Chatbot → BotResponse with markdown support
Data visualization → Chart with configurable data
Task manager → TaskCard, TaskBoard
Generic / unclear → ContentCard
Each component needs:
A Zod schema with .describe() on every field
The React component itself
Registration in the existing component registry (lib/tambo.ts — add to the existing components array, don't replace it)
Schema constraints — Tambo will reject invalid schemas at runtime:
No 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.
No z.map() or z.set() — Use arrays and objects instead.
For tabular data like rows, use 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:
Always add unique key props when rendering lists (.map()). Use a unique field from the data (like id) — not the array index.
Include an id field (e.g., z.string().describe("Unique identifier")) in schemas for array items so there's always a stable key available.
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,},
2d. Start the dev server
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.
Step 3: Summary
After everything is running, give a brief summary:
What was set up
What components were created and what they do
The URL where the app is running (typically http://localhost:3000 for Next.js, http://localhost:5173 for Vite)
If auth was skipped: remind them once to run npx tambo init to authenticate
A suggestion for what to try first (e.g., "Try asking it to show you a stats card for monthly revenue")
import{TamboComponent}from"@tambo-ai/react";import{ComponentName,ComponentNameSchema}from"@/components/ComponentName";exportconst components:TamboComponent[]=[{ name:"ComponentName", component:ComponentName, description:"What it does. When to use it.", propsSchema:ComponentNameSchema,},];
Key rules:
propsSchema: Zod object with .describe() on every field — this is how the AI knows what to pass
description: Tell the AI when to use this component — be specific about trigger phrases
Streaming: Props arrive incrementally, so handle undefined gracefully (optional fields or defaults)
Adding More Chat UI (Optional)
Templates already include chat UI. These are only needed if the user wants additional UI primitives beyond what the template provides:
Typing a prompt that should trigger one of the registered components (e.g., "Show me a stats card for monthly revenue")
Verifying the component renders with AI-generated props
If something doesn't work:
Check the registry includes the component
Check the description matches the prompt
Check the dev server has no console errors
Reporting Bugs & Feedback
If you encounter any of these while helping a user, suggest filing a GitHub issue:
A bug in @tambo-ai/react, @tambo-ai/client, or the tambo CLI
Documentation that contradicts actual behavior
Missing or misleading instructions in this skill
Issue Template
Use this template when drafting an issue for tambo-ai/tambo:
**
Implementation Guide
Prerequisites
›Claude Desktop or compatible AI client with skill support
›Clear understanding of task or problem to solve
›Willingness to iterate and refine outputs
Time Estimate
15-45 minutes depending on use case complexity
Steps
1Install skill using provided installation command
2Test with simple use case relevant to your work
3Evaluate output quality and relevance
4Iterate on prompts to improve results
5Integrate into regular workflow if valuable
Common Pitfalls
⚠Expecting perfect results without iteration
⚠Not providing enough context in prompts
⚠Using skill for tasks outside its intended scope
⚠Accepting outputs without review and validation
Best Practices
✓ Do
+Start with clear, specific prompts
+Provide relevant context and constraints
+Review and refine all outputs before using
+Iterate to improve output quality
+Document successful prompt patterns
✗ Don't
−Don't use without understanding skill limitations
−Don't skip validation of outputs
−Don't share sensitive information in prompts
−Don't expect skill to replace human judgment
💡 Pro Tips
★Be specific about desired format and style
★Ask for multiple options to choose from
★Request explanations to understand reasoning
★Combine AI efficiency with human expertise
When to Use This
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
Learning Path
1Familiarize yourself with skill capabilities and limitations
2Start with low-risk, non-critical tasks
3Progress to more complex and valuable use cases
4Build expertise through regular use and experimentation
