generative-ui

Scaffold a Tambo generative UI React app with CLI setup and component registration.

Updated Apr 26, 2026
One-click install
npx skills add https://github.com/awardsapp/tambo-genui --skill generative-ui-awardsapp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: generative-ui
Source: https://github.com/awardsapp/tambo-genui/tree/main/plugins/tambo/skills/generative-ui
Command: npx skills add https://github.com/awardsapp/tambo-genui --skill generative-ui-awardsapp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you go from an idea to a working Tambo generative UI app by handling the project setup, Tambo initialization, and initial component wiring.

Core Features & Use Cases

  • One-prompt app scaffolding: Collects your app type, framework choice (Next.js or Vite), and project name, then runs the full creation flow without pausing for extra confirmations.
  • Non-interactive safe initialization: Uses the tambo create-app and tambo init CLI flow to authenticate via browser and write the correct API key to your environment automatically.
  • Starter component customization: Adds 1–2 app-specific React components with Zod schemas and registers them in the existing component registry so the agent can render them from natural language.
  • Streaming-ready schema guardrails: Enforces schema constraints (e.g., no z.record, z.map, or z.set) and schema labeling via .describe() to improve runtime validation and prop reliability.

Quick Start

Ask the AI to create a new Next.js generative UI app called "sales-dashboard" with a dashboard experience tailored to stats cards and data tables.

Frequently Asked Questions about generative-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a React generative UI app from scratch?

To scaffold a React generative UI app, you provide an app idea and framework choice to trigger a single prompting flow that initializes the project, writes API keys, and starts the dev server. This handles project setup and initial component wiring automatically.

Can I use Vite instead of Next.js for my generative UI dashboard?

Yes, you can choose Vite or Next.js as your framework when scaffolding a generative UI app. The tool collects your framework preference alongside your project name and app type during the initial prompt to configure the environment accordingly.

What Zod schema constraints are required for streaming props in a component registry?

Streaming props require Zod schema constraints that prohibit using z.record, z.map, or z.set, while enforcing schema labeling via .describe(). These guardrails improve runtime validation and prop reliability for agent-driven rendering.

How does the CLI initialize authentication non-interactively for a generative UI project?

The CLI initializes authentication non-interactively by running the tambo create-app and tambo init flow, which authenticates via browser and automatically writes the correct API key to your environment without pausing for extra confirmations.

How do I add custom React components to an existing generative UI component registry?

You add custom React components by defining 1-2 app-specific components with strict Zod schemas and registering them in the existing component registry. This allows the agent to render them dynamically from natural language inputs.

What are the limitations of using Zod schemas for generative UI component props?

Zod schema limitations for generative UI component props include the inability to use z.record, z.map, or z.set structures. You must use .describe() for schema labeling to ensure runtime validation and prop reliability during agent-driven streaming.