What is build-with-tambo?

Perfect for Frontend Agents needing seamless Tambo integration and thread management. build-with-tambo is a skill that enables the integration of Tambo into existing tech stacks, allowing for the creation and registration of Tambo components.

How do I install build-with-tambo?

Run the command: npx killer-skills add sethdavis512/iridium-tambo/build-with-tambo. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for build-with-tambo?

Key use cases include: Integrating Tambo components into existing projects, Managing threads and input for efficient rendering, Implementing generative and interactable components.

Which IDEs are compatible with build-with-tambo?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for build-with-tambo?

Requires Tambo compatibility. Preserves existing patterns only.

build-with-tambo

Install build-with-tambo, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md

Readonly

Build with Tambo

Name: build-with-tambo
Availability: InStock
Author: sethdavis512

Detect tech stack and integrate Tambo while preserving existing patterns.

Reference Guides

Use these guides when you need deeper implementation details for a specific area:

Components - Create and register Tambo components (generative and interactable).
Component Rendering - Handle streaming props, loading states, and persistent component state.
Threads and Input - Manage conversations, suggestions, voice input, image attachments, and thread switching.
Tools and Context - Add custom tools, MCP servers, context helpers, and resources.
CLI Reference - Use tambo init, tambo add, and create-app with non-interactive flags and exit codes.
Add Components to Registry - Convert existing React components into Tambo-ready registrations with schemas and descriptions.

These references are duplicated across both skills so each skill works independently.

Workflow

Detect tech stack - Analyze package.json and project structure
Confirm with user - Present findings, ask about preferences
Install dependencies - Add @tambo-ai/react and peer deps
Create provider setup - Adapt to existing patterns
Register first component - Demonstrate with existing component

Step 1: Detect Tech Stack

Check these files to understand the project:

bash
1# Key files to read
2package.json           # Dependencies and scripts
3tsconfig.json          # TypeScript config
4next.config.*          # Next.js
5vite.config.*          # Vite
6tailwind.config.*      # Tailwind CSS
7postcss.config.*       # PostCSS
8src/index.* or app/    # Entry points

Detection Checklist

Technology	Detection
Next.js	`next` in dependencies, `next.config.*` exists
Vite	`vite` in devDependencies, `vite.config.*` exists
Create React App	`react-scripts` in dependencies
TypeScript	`typescript` in deps, `tsconfig.json` exists
Tailwind	`tailwindcss` in deps, config file exists
Plain CSS	No Tailwind, CSS files in src/
Zod	`zod` in dependencies
Other validation	`yup`, `joi`, `superstruct` in deps

Step 2: Confirm with User

Present findings and ask:

I detected your project uses:
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS
- Validation: No Zod (will need to add)
- TypeScript: Yes

Should I:
1. Install Tambo with these settings?
2. Use plain CSS instead of Tailwind for Tambo components?
3. Something else?

Step 3: Install Dependencies

bash
1# Core (always required)
2npm install @tambo-ai/react
3
4# If no Zod installed
5npm install zod

Step 4: Create Provider Setup

Next.js App Router

tsx
1// app/providers.tsx
2"use client";
3import { TamboProvider } from "@tambo-ai/react";
4import { components } from "@/lib/tambo";
5
6export function Providers({ children }: { children: React.ReactNode }) {
7  return (
8    <TamboProvider
9      apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY}
10      components={components}
11    >
12      {children}
13    </TamboProvider>
14  );
15}

tsx
1// app/layout.tsx
2import { Providers } from "./providers";
3
4export default function RootLayout({ children }) {
5  return (
6    <html>
7      <body>
8        <Providers>{children}</Providers>
9      </body>
10    </html>
11  );
12}

Next.js Pages Router

tsx
1// pages/_app.tsx
2import { TamboProvider } from "@tambo-ai/react";
3import { components } from "@/lib/tambo";
4
5export default function App({ Component, pageProps }) {
6  return (
7    <TamboProvider
8      apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY}
9      components={components}
10    >
11      <Component {...pageProps} />
12    </TamboProvider>
13  );
14}

Vite / CRA

tsx
1// src/main.tsx
2import { TamboProvider } from "@tambo-ai/react";
3import { components } from "./lib/tambo";
4import App from "./App";
5
6ReactDOM.createRoot(document.getElementById("root")!).render(
7  <TamboProvider
8    apiKey={import.meta.env.VITE_TAMBO_API_KEY}
9    components={components}
10  >
11    <App />
12  </TamboProvider>,
13);

Step 5: Create Component Registry

tsx
1// lib/tambo.ts (or src/lib/tambo.ts)
2import { TamboComponent } from "@tambo-ai/react";
3
4export const components: TamboComponent[] = [
5  // Components will be registered here
6];

Adapting to Existing Patterns

No Tailwind? Use Plain CSS

If project uses plain CSS or CSS modules, Tambo components can be styled differently:

tsx
1// Skip --yes flag to customize styling during add
2npx tambo add message-thread-full
3# Select "CSS Modules" or "Plain CSS" when prompted

Existing Validation Library?

If using Yup/Joi instead of Zod, user can either:

Add Zod just for Tambo schemas (recommended - small addition)
Convert schemas (more work, not recommended)

Monorepo?

Run commands from the package that will use Tambo:

bash
1cd packages/web
2npx tambo init --api-key=sk_...

Environment Variables

npx tambo init --api-key=sk_... automatically creates .env.local with the correct env var for your framework.

If manual setup is needed (monorepo, read-only filesystem), add the appropriate variable:

Framework	Variable
Next.js	`NEXT_PUBLIC_TAMBO_API_KEY`
Vite	`VITE_TAMBO_API_KEY`
CRA	`REACT_APP_TAMBO_API_KEY`

Verification

After setup, verify by creating a simple test:

tsx
1import { useTambo } from "@tambo-ai/react";
2
3function TestComponent() {
4  const { thread, isIdle } = useTambo();
5  console.log("Tambo connected:", isIdle);
6  return <div>Tambo is set up!</div>;
7}

build-with-tambo — build-with-tambo install build-with-tambo, iridium-tambo, community, build-with-tambo install, ide skills, integrating Tambo into existing tech stacks, Tambo component creation, build-with-tambo documentation, Claude Code, Cursor, Windsurf

About this Skill

Features

# Core Topics

Agent Capability Analysis

Ideal Agent Persona

Core Value

↓ Capabilities Granted for build-with-tambo

! Prerequisites & Limits

Browser Sandbox Environment

⚡️ Ready to unleash?