Development
Plugin
tambo
Generative UI SDK for React
Plugin Signal79/100Solid
maintained99
capable56
documented75
adopted86
Install on Claude Code
> /plugin marketplace add tambo-ai/tambo> /plugin install tambo@tambo-marketplace
Stats
11,159
Stars
562
Forks
Active
Maintenance
TypeScript
Language
MIT
License
11h ago
Last commit
2y ago
Created
Repo: tambo-ai/tambo
What's inside
Skills
8/ai-sdk-model-managerManages AI SDK model configurations - updates packages, identifies missing models, adds new models with research, and updates documentation/api-resource-lifecycleGuides CRUD operations for API resources with cascading dependencies, descriptive validation, and orphan prevention. Use when adding delete/remove operations, creating validation logic, building resources that depend on other resources, or when the user mentions "cascade/building-settings-uiUse this skill when adding or modifying settings UI in Tambo Cloud. Covers where a new settings section belongs (Agent tab vs Settings tab), and the component patterns used across both pages (card layout, toasts, confirmation dialogs, destructive styling, save behavior/compound-componentsCreates unstyled compound components that separate business logic from styles. Use when building headless UI primitives, creating component libraries, implementing Radix-style namespaced components, or when the user mentions "compound components", "headless", "unstyled",/creating-styled-wrappersCreates styled wrapper components that compose headless/base compound components. Use when refactoring styled components to use base primitives, implementing opinionated design systems on top of headless components, or when the user mentions "use base components", "compose/validating-accessibilityUse this skill when creating, modifying, or reviewing any .tsx component in apps/web, even if the user doesn't mention "accessibility." Covers semantic HTML, aria labels, navigation landmarks, forms, dialogs, and keyboard navigation. Trigger on: adding buttons, links, toggles,
Show all 8 skillsShow fewer
/building-with-tamboIntegrates Tambo into existing React apps — detects tech stack, installs @tambo-ai/react, wires TamboProvider, registers components with Zod schemas, and sets up tools/context. Use when adding AI-powered generative UI to an existing codebase. Triggers on "add Tambo", "integrate/generative-uiCreates 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,
Agents
2Commands
4README
1Tambo 1.0 is here! Read the announcement: Introducing Tambo: Generative UI for React
Table of Contents
- What is Tambo?
- Get Started
- How It Works
- Features
- How Tambo Compares
- Community
- License
What is Tambo?
Tambo is a React toolkit for building agents that render UI (also known as generative UI).
Register your components with Zod schemas. The agent picks the right one and streams the props so users can interact with them. "Show me sales by region" renders your <Chart>. "Add a task" updates your <TaskBoard>.
Get started in 5 minutes →
https://github.com/user-attachments/assets/8381d607-b878-4823-8b24-ecb8053bef23
What's Included
Tambo is a fullstack solution for adding generative UI to your app. You get a React SDK plus a backend that handles conversation state and agent execution.
1. Agent included — Tambo runs the LLM conversation loop for you. Bring your own API key (OpenAI, Anthropic, Gemini, Mistral, or any OpenAI-compatible provider). Works with agent frameworks like LangChain and Mastra, but they're not required.
2. Streaming infrastructure — Props stream to your components as the LLM generates them. Cancellation, error recovery, and reconnection are handled for you.
3. Tambo Cloud or self-host — Cloud is a hosted backend that manages conversation state and agent orchestration. Self-hosted runs the same backend on your infrastructure via Docker.
Most software is built around a one-size-fits-all mental model. We built Tambo to help developers build software that adapts to users.
Get Started
npm create tambo-app my-tambo-app # auto-initializes git + tambo setup
cd my-tambo-app
npm run dev
Tambo Cloud is a hosted backend, free to get started with plenty of credits to start building. Self-hosted runs on your own infrastructure.
Check out the pre-built component library for agent and generative UI primitives:
https://github.com/user-attachments/assets/6cbc103b-9cc7-40f5-9746-12e04c976dff
Or fork a template:
| Template | Description |
|---|---|
| AI Chat with Generative UI | Chat interface with dynamic component generation |
| AI Analytics Dashboard | Analytics dashboard with AI-powered visualization |
How It Works
Tell the AI which components it can use. Zod schemas define the props. These schemas become LLM tool definitions—the agent calls them like functions and Tambo renders the result.
Generative Components
Render once in response to a message. Charts, summaries, data visualizations.
https://github.com/user-attachments/assets/3bd340e7-e226-4151-ae40-aab9b3660d8b
const components: TamboComponent[] = [
{
name: "Graph",
description: "Displays data as charts using Recharts library",
component: Graph,
propsSchema: z.object({
data: z.array(z.object({ name: z.string(), value: z.number() })),
type: z.enum(["line", "bar", "pie"]),
}),
},
];
Interactable Components
Persist and update as users refine requests. Shopping carts, spreadsheets, task boards.
https://github.com/user-attachments/assets/12d957cd-97f1-488e-911f-0ff900ef4062
const InteractableNote = withInteractable(Note, {
componentName: "Note",
description: "A note supporting title, content, and color modifications",
propsSchema: z.object({
title: z.string(),
content: z.string(),
color: z.enum(["white", "yellow", "blue", "green"]).optional(),
}),
});
Docs: generative components, interactable components
The Provider
Wrap your app with TamboProvider. You must provide either userKey or userToken to identify the thread owner.
<TamboProvider
apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
userKey={currentUserId}
components={components}
>
<Chat />
<InteractableNote id="note-1" title="My Note" content="Start writing..." />
</TamboProvider>
Use userKey for server-side or trusted environments. Use userToken (OAuth access token) for client-side apps where the token contains the user identity. See User Authentication for details.
Docs: provider options
Hooks
useTambo() is the primary hook — it gives you messages, streaming state, and thread management. useTamboThreadInput() handles user input and message submission.
const { messages, isStreaming } = useTambo();
const { value, setValue, submit, isPending } = useTamboThreadInput();
Docs: threads and messages, streaming status, full tutorial
Features
MCP Integrations
Connect to Linear, Slack, databases, or your own MCP servers. Tambo supports the full MCP protocol: tools, prompts, elicitations, and sampling.
import { MCPTransport } from "@tambo-ai/react/mcp";
const mcpServers = [
{
name: "filesystem",
url: "http://localhost:8261/mcp",
transport: MCPTransport.HTTP,
},
];
<TamboProvider
apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
userKey={currentUserId}
components={components}
mcpServers={mcpServers}
>
<App />
</TamboProvider>;
https://github.com/user-attachments/assets/c7a13915-8fed-4758-be1b-30a60fad0cda
Docs: MCP integration
Local Tools
Sometimes you need functions that run in the browser. DOM manipulation, authenticated fetches, accessing React state. Define them as tools and the AI can call them.
const tools: TamboTool[] = [
{
name: "getWeather",
description: "Fetches weather for a location",
tool: async (params: { location: string }) =>
fetch(`/api/weather?q=${encodeURIComponent(params.location)}`).then((r) =>
r.json(),
),
inputSchema: z.object({
location: z.string(),
}),
outputSchema: z.object({
temperature: z.number(),
condition: z.string(),
location: z.string(),
}),
},
];
<TamboProvider
apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
userKey={currentUserId}
tools={tools}
components={components}
>
<App />
</TamboProvider>;
Docs: local tools
Context, Auth, and Suggestions
Additional context lets you pass metadata to give the AI better responses. User state, app settings, current page. User authentication passes tokens from your auth provider. Suggestions generates prompts users can click based on what they're doing.
<TamboProvider
apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
userToken={userToken}
contextHelpers={{
selectedItems: () => ({
key: "selectedItems",
value: selectedItems.map((i) => i.name).join(", "),
}),
currentPage: () => ({ key: "page", value: window.location.pathname }),
}}
/>
const { suggestions, accept } = useTamboSuggestions({ maxSuggestions: 3 });
suggestions.map((s) => (
<button key={s.id} onClick={() => accept(s)}>
{s.title}
</button>
));
Docs: additional context, user authentication, suggestions
Supported LLM Providers
OpenAI, Anthropic, Cerebras, Google Gemini, Mistral, and any OpenAI-compatible provider. Full list. Missing one? Let us know.
How Tambo Compares
| Feature | Tambo | Vercel AI SDK | CopilotKit | Assistant UI |
|---|---|---|---|---|
| Component selection | AI decides which components to render | Manual tool-to-component mapping | Via agent frameworks (LangGraph) | Chat-focused tool UI |
| MCP integration | Built-in | Experimental (v4.2+) | Recently added | Requires AI SDK v5 |
| Persistent stateful components | Yes | No | Shared state patterns | No |
| Client-side tool execution | Declarative, automatic | Manual via onToolCall | Agent-side only | No |
| Self-hostable | MIT (SDK + backend) | Apache 2.0 (SDK only) | MIT | MIT |
| Hosted option | Tambo Cloud | No | CopilotKit Cloud | Assistant Cloud |
| Best for | Full app UI control | Streaming and tool abstractions | Multi-agent workflows | Chat interfaces |
Community
Join the Discord to chat with other developers and the core team.
Interested in contributing? Read the Contributing Guide.
Join the conversation on Twitter and follow @tambo_ai.
License
MIT unless otherwise noted. Some workspaces (like apps/api) are Apache-2.0.
For AI/LLM agents: docs.tambo.co/llms.txt
File tree
1637tambo-ai/tamboView on GitHub
.agents/
daemons/
js-ts-dependency-upgrades/
DAEMON.md
.charlie/
config.yml
playbooks/
accessibility-scan.md
coverage-threshold-bump.md
dead-code-cleanup.md
documentation-updater.md
external-release-update.md
team-update.md
ui-ux-spacing-scan.md
.claude/
.claude-plugin/
marketplace.json
agents/
planner.md
researcher.md
commands/
commit.md
create-pr.md
execute.md
plan.md
skills/
ai-sdk-model-manager/
SKILL.md
api-resource-lifecycle/
SKILL.md
building-settings-ui/
SKILL.md
compound-components/
examples.md
SKILL.md
creating-styled-wrappers/
references/
real-world-example.md
SKILL.md
validating-accessibility/
SKILL.md
.config/
cspell.config.yaml
dict/
tambo.txt
release-please/
.release-please-manifest.json
release-please-config.json
starship.toml
.cursor/
worktrees.json
.cursorignore
.devcontainer/
devcontainer.json
Dockerfile
README.md
setup.sh
.dockerignore
.github/
actions/
setup-stlc/
action.yml
setup-tools/
action.yml
validate-docs-links/
action.yml
validate-docs-links.sh
AGENTS.md
codecov.yml
dependabot.yml
renovate.json5
scripts/
capture-post-upgrade.tsx
capture-pre-upgrade.tsx
create-pr.tsx
detect-releases.tsx
package-lock.json
package.json
tsconfig.json
workflows/
ci.yml
claude.yml
cli-non-interactive.yml
conventional-commits.yml
docker.yml
mcp-everything-docker-cloud.yml
migrate-db.yml
pullfrog.yml
release-please-sync-lockfile.yml
release-please.yml
stlc-generate.yml
stlc-spec-check.yml
template-maintenance.yml
workflow-check.yml
.gitignore
.husky/
pre-commit
.node-version
.npmrc
.nvmrc
.prettierignore
.prettierrc
.vscode/
extensions.json
settings.json
AGENTS.md
apps/
api/
.cursorrules
.env.example
.gitignore
.npmrc
AGENTS.md
CHANGELOG.md
CLAUDE.md
Dockerfile
eslint.config.mjs
jest.config.ts
LICENSE
lint-staged.config.mjs
nest-cli.json
NOTICE
package.json
README.md
scripts/
storage-init.ts
SECURITY_HEADERS.md
src/
app.controller.ts
app.module.ts
app.service.ts
audio/
audio.controller.ts
audio.module.ts
audio.service.ts
dto/
transcribe-audio.dto.ts
common/
analytics.module.ts
database-provider.ts
decorators/
api-discriminated-union.decorator.test.ts
api-discriminated-union.decorator.ts
README.md
dto/
mcp-access-token.dto.ts
oauth-token.dto.ts
emails/
first-message.tsx
message-limit.tsx
types.ts
welcome.tsx
filters/
__tests__/
domain-exception-filter.integration.test.ts
domain-exception.filter.test.ts
domain-exception.filter.ts
http-exception.filter.test.ts
http-exception.filter.ts
sentry-exception.filter.ts
logger.module.ts
middleware/
request-logger.middleware.ts
sdk-version.middleware.test.ts
sdk-version.middleware.ts
sentry-flush.middleware.ts
openapi.ts
repository.interface.ts
services/
analytics.service.ts
auth.service.ts
email.service.ts
logger.service.test.ts
logger.service.ts
scheduler.service.ts
storage-config.service.test.ts
storage-config.service.ts
systemTools.test.ts
systemTools.ts
utils/
extract-context-info.test.ts
extract-context-info.ts
generate-context-key.test.ts
generate-context-key.ts
oauth.test.ts
oauth.ts
config.service.ts
generate-config.ts
main.ts
mcp-server/
elicitations.test.ts
elicitations.ts
prompts.test.ts
prompts.ts
resources.test.ts
resources.ts
server.ts
memory/
memory-extraction-schema.test.ts
memory-extraction-schema.ts
memory-extraction.service.test.ts
memory-extraction.service.ts
memory-tools.ts
memory.module.ts
oauth/
oauth.controller.ts
oauth.module.ts
projects/
dto/
add-provider-key.dto.ts
api-key-response.dto.ts
api-key.dto.ts
project-response.dto.ts
provider-key-response.dto.ts
entities/
api-key.entity.ts
project.entity.ts
provider-key.entity.ts
guards/
apikey.guard.ts
bearer-token.guard.test.ts
bearer-token.guard.ts
project-access-own.guard.ts
projects.controller.ts
projects.module.ts
projects.service.test.ts
projects.service.ts
registry/
registry.controller.ts
registry.module.ts
registry.service.ts
scheduler/
scheduler.controller.ts
scheduler.module.ts
sentry.ts
skills/
skills.module.ts
skills.service.test.ts
skills.service.ts
storage/
__tests__/
storage.controller.integration.test.ts
dto/
presign.dto.ts
storage.controller.test.ts
storage.controller.ts
storage.module.ts
telemetry.ts
test/
jest.setup.ts
utils/
create-test-request-context.test.ts
create-test-request-context.ts
create-testing-module.test.ts
create-testing-module.ts
nest-testing.example.test.ts
resolve-request-scoped-provider.test.ts
resolve-request-scoped-provider.ts
threads/
__tests__/
threads.controller.integration.test.ts
dto/
advance-thread.dto.ts
component-decision.dto.ts
error.dto.ts
generate-component.dto.ts
message.dto.ts
stream-queue-item.ts
suggestion.dto.ts
suggestions-generate.dto.ts
thread.dto.ts
guards/
thread-in-project-guard.ts
threads.controller.test.ts
threads.controller.ts
threads.module.ts
threads.service.initial-messages.test.ts
threads.service.test.ts
threads.service.ts
types/
errors.ts
util/
attachment-fetcher.test.ts
attachment-fetcher.ts
content.test.ts
content.ts
messages.test.ts
messages.ts
retry.test.ts
retry.ts
streaming.ts
suggestions.ts
thread-mcp-handlers.test.ts
thread-mcp-handlers.ts
thread-state.test.ts
thread-state.ts
tool-call-tracking.test.ts
tool-call-tracking.ts
tool.test.ts
tool.ts
users/
entities/
authuser.entity.ts
user.entity.ts
users.controller.ts
users.module.ts
v1/
__tests__/
runs-operations.test.ts
v1-conversions.test.ts
v1-pagination.test.ts
v1-suggestions.test.ts
v1-thread-in-project-guard.test.ts
v1.controller.test.ts
v1.errors.test.ts
v1.service.test.ts
dto/
component-state.dto.ts
content.dto.ts
event.dto.ts
message.dto.ts
run.dto.ts
suggestion.dto.ts
thread.dto.ts
tool.dto.ts
guards/
v1-thread-in-project-guard.ts
utils/
get-v1-context-info.ts
v1-client-tools.test.ts
v1-client-tools.ts
v1-conversions.ts
v1-error-classifier.test.ts
v1-error-classifier.ts
v1-message-id-mapping.test.ts
v1-pagination.ts
v1-tool-conversions.test.ts
v1-tool-conversions.ts
v1-tool-results.test.ts
v1-tool-results.ts
v1.controller.ts
v1.errors.ts
v1.module.ts
v1.service.integration.test.ts
v1.service.ts
test/
app.e2e-spec.ts
jest-e2e.json
tsconfig.build.json
tsconfig.json
docs-mcp/
.env.example
.gitignore
app/
global-error.tsx
mcp/
route.ts
biome.json
eslint.config.mjs
instrumentation-client.ts
instrumentation.ts
lib/
analytics.ts
config.ts
constants.ts
handlers.ts
schemas.ts
types.ts
LICENSE
next.config.ts
NOTICE
package.json
README.md
sentry.edge.config.ts
sentry.server.config.ts
tsconfig.json
mcp-everything/
Dockerfile
test-mcp-server/
.gitignore
cors.test.mjs
eslint.config.mjs
LICENSE
lint-staged.config.mjs
NOTICE
package.json
README.md
src/
cors.ts
index.ts
mcp-service.ts
test-prompts.ts
test-service.ts
test-tools.ts
tsconfig.json
web/
__fixtures__/
thread-factories.ts
__mocks__/
envMock.ts
... 1600 moreShowing a partial view of a very large repo.
FAQ
tambo is a Claude Code plugin with 8 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes ai-sdk-model-manager, api-resource-lifecycle, building-settings-ui. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is tambo?
- Generative UI SDK for React
- How do I install tambo?
- Run these in Claude Code: /plugin marketplace add tambo-ai/tambo then /plugin install tambo@tambo-marketplace. Then prompt normally.
- Does tambo auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is tambo free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.