skills.rest
tambo-ai
tambo-aiOFFICIAL
Explore all skills by this author →
Website𝕏@tambo_aiGitHub

components

Register AI-driven UI components with TamboProvider and propsSchema.

11.2k|562|Updated Jun 15, 2024
Search Tags:#define#registration#generative#Tambo#AI UI#interactable
One-click install
npx skills add https://github.com/tambo-ai/tambo --skill components-tambo-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: components
Source: https://github.com/tambo-ai/tambo/tree/main/plugins/tambo/skills/components
Command: npx skills add https://github.com/tambo-ai/tambo --skill components-tambo-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tambo Components enables developers to register and manage AI-generated and AI-updatable UI components—streamlining how generative and interactive UI elements are integrated into applications.

Core Features & Use Cases

  • Generative Components: AI can create and render components on demand based on user intents.
  • Interactable Components: Pre-placed UI elements whose props can be updated by AI in response to conversations.
  • Auto-registration & Lifecycle: Auto-registers components on mount and exposes current props to the AI for dynamic behavior.
  • Use Case: Build dashboards with AI-rendered widgets or chat-driven UI elements that adapt to user questions.

Quick Start

Follow the guidance in this Skill to register components with TamboProvider, create a sample component with a propsSchema, and wire it into your app:

  • Wrap your app with <TamboProvider components={components}> ... </TamboProvider> and ensure the WeatherCard-like component is defined with a proper schema.

Frequently Asked Questions about components

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

FAQPage Schema
How do I register AI-driven UI components for use in a Tambo-powered app?▼

To register AI-driven UI components, wrap your application with <TamboProvider components={components}> and define each component with a propsSchema to enable auto-registration on mount.

What is the difference between generative and interactable UI components?▼

Generative UI components are created and rendered by AI on demand based on user intents, while interactable components are pre-placed UI elements whose props are dynamically updated by AI during conversations.

How do I enable live prop updates for AI-updatable UI elements?▼

Live prop updates for AI-updatable UI elements are enabled through auto-registration on mount, which exposes the current props to the AI for dynamic behavior during user interactions.

Can I use Tambo components to build dashboards with AI-rendered widgets?▼

Yes, you can build dashboards with AI-rendered widgets or chat-driven UI elements that adapt to user questions by defining and registering generative and interactable components within your application.

How does metadata extraction work for component registration?▼

Metadata extraction for component registration pulls the name and description from the SKILL.md frontmatter and inspects optional directories like scripts, references, and assets to populate dependencies and usage guidance.

Do I need to define a propsSchema when creating a sample component?▼

Yes, defining a propsSchema is required when creating a sample component to ensure proper registration with TamboProvider and enable AI-driven prop updates.

Related Skills

Explore More Software Engineering Skills→
victor-telesvictor-teles
1

components

Register generative and interactable UI components for AI-driven React rendering.

Community
Intermediate
terrene-foundationterrene-foundation
1

interactive-widgets

Generate and render interactive widgets with streaming responses in AI applications.

Official
Advanced
awardsappawardsapp

building-with-tambo

Integrate Tambo into existing React applications for generative UI and chat.

Official
Advanced
hasnahasna

react

Convert JSON UI specifications into React component trees with type-safe catalogs.

Official
Intermediate