Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

sethdavis512/build-with-tambo

Name: build-with-tambo
Author: sethdavis512

.claude/skills/build-with-tambo/SKILL.md

npx skillsauth add sethdavis512/iridium-tambo build-with-tambo

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Build with Tambo

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:

# Key files to read
package.json           # Dependencies and scripts
tsconfig.json          # TypeScript config
next.config.*          # Next.js
vite.config.*          # Vite
tailwind.config.*      # Tailwind CSS
postcss.config.*       # PostCSS
src/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

# Core (always required)
npm install @tambo-ai/react

# If no Zod installed
npm install zod

Step 4: Create Provider Setup

Next.js App Router

// app/providers.tsx
"use client";
import { TamboProvider } from "@tambo-ai/react";
import { components } from "@/lib/tambo";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <TamboProvider
      apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY}
      components={components}
    >
      {children}
    </TamboProvider>
  );
}

// app/layout.tsx
import { Providers } from "./providers";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Next.js Pages Router

// pages/_app.tsx
import { TamboProvider } from "@tambo-ai/react";
import { components } from "@/lib/tambo";

export default function App({ Component, pageProps }) {
  return (
    <TamboProvider
      apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY}
      components={components}
    >
      <Component {...pageProps} />
    </TamboProvider>
  );
}

Vite / CRA

// src/main.tsx
import { TamboProvider } from "@tambo-ai/react";
import { components } from "./lib/tambo";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <TamboProvider
    apiKey={import.meta.env.VITE_TAMBO_API_KEY}
    components={components}
  >
    <App />
  </TamboProvider>,
);

Step 5: Create Component Registry

// lib/tambo.ts (or src/lib/tambo.ts)
import { TamboComponent } from "@tambo-ai/react";

export const components: TamboComponent[] = [
  // Components will be registered here
];

Adapting to Existing Patterns

No Tailwind? Use Plain CSS

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

// Skip --yes flag to customize styling during add
npx tambo add message-thread-full
# 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:

cd packages/web
npx 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:

import { useTambo } from "@tambo-ai/react";

function TestComponent() {
  const { thread, isIdle } = useTambo();
  console.log("Tambo connected:", isIdle);
  return <div>Tambo is set up!</div>;
}

sethdavis512/build-with-tambo

.claude/skills/build-with-tambo/SKILL.md

Build with Tambo in an existing React app. Use for existing codebases (providers, env vars, components, threads, tools). For brand-new apps, use generative-ui.

tools

Updated Apr 17, 2026

$ install --global

skillsauth

npx skillsauth add sethdavis512/iridium-tambo build-with-tambo

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 24, 2026, 9:00 PM1.8s1 file scanned

SKILL.md

name:: build-with-tambo
description:: Build with Tambo in an existing React app. Use for existing codebases (providers, env vars, components, threads, tools). For brand-new apps, use generative-ui.

Build with Tambo

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:

# Key files to read
package.json           # Dependencies and scripts
tsconfig.json          # TypeScript config
next.config.*          # Next.js
vite.config.*          # Vite
tailwind.config.*      # Tailwind CSS
postcss.config.*       # PostCSS
src/index.* or app/    # Entry points

Detection Checklist

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

# Core (always required)
npm install @tambo-ai/react

# If no Zod installed
npm install zod

Step 4: Create Provider Setup

Next.js App Router

// app/providers.tsx
"use client";
import { TamboProvider } from "@tambo-ai/react";
import { components } from "@/lib/tambo";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <TamboProvider
      apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY}
      components={components}
    >
      {children}
    </TamboProvider>
  );
}

// app/layout.tsx
import { Providers } from "./providers";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Next.js Pages Router

// pages/_app.tsx
import { TamboProvider } from "@tambo-ai/react";
import { components } from "@/lib/tambo";

export default function App({ Component, pageProps }) {
  return (
    <TamboProvider
      apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY}
      components={components}
    >
      <Component {...pageProps} />
    </TamboProvider>
  );
}

Vite / CRA

// src/main.tsx
import { TamboProvider } from "@tambo-ai/react";
import { components } from "./lib/tambo";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <TamboProvider
    apiKey={import.meta.env.VITE_TAMBO_API_KEY}
    components={components}
  >
    <App />
  </TamboProvider>,
);

Step 5: Create Component Registry

// lib/tambo.ts (or src/lib/tambo.ts)
import { TamboComponent } from "@tambo-ai/react";

export const components: TamboComponent[] = [
  // Components will be registered here
];

Adapting to Existing Patterns

No Tailwind? Use Plain CSS

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

// Skip --yes flag to customize styling during add
npx tambo add message-thread-full
# 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:

cd packages/web
npx 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:

import { useTambo } from "@tambo-ai/react";

function TestComponent() {
  const { thread, isIdle } = useTambo();
  console.log("Tambo connected:", isIdle);
  return <div>Tambo is set up!</div>;
}

Related Skills

sethdavis512/status

devops

VerifiedTrustedCommunity

This skill should be used when the user asks "railway status", "is it running", "what's deployed", "deployment status", or about uptime. NOT for variables ("what variables", "env vars", "add variable") or configuration queries - use environment skill for those.

SKILL.mdUpdated Apr 17, 2026

sethdavis512/service

development

VerifiedTrustedCommunity

This skill should be used when the user asks about service status, wants to rename a service, change service icons, link services, or create services with Docker images. For creating services with local code, prefer the `new` skill. For GitHub repo sources, use `new` skill to create empty service then `environment` skill to configure source.

SKILL.mdUpdated Apr 17, 2026

sethdavis512/react-router-framework-mode

development

VerifiedTrustedCommunity

Build full-stack React applications using React Router's framework mode. Use when configuring routes, working with loaders and actions, handling forms, handling navigation, pending/optimistic UI, error boundaries, or working with react-router.config.ts or other react router conventions.

SKILL.mdUpdated Apr 17, 2026

sethdavis512/react-router-framework-mode

sethdavis512/railway-docs

documentation

VerifiedTrustedCommunity

This skill should be used when the user asks about Railway features, how Railway works, or shares a docs.railway.com URL. Fetches up-to-date Railway docs to answer accurately.

SKILL.mdUpdated Apr 17, 2026

sethdavis512/railway-docs

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/sethdavis512/iridium-tambo.git

# Copy into Claude Code skills folder (global)
cp -r iridium-tambo/.claude/skills/build-with-tambo ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

sethdavis512/iridium-tambo

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT