메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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. |
Detect tech stack and integrate Tambo while preserving existing patterns.
Use these guides when you need deeper implementation details for a specific area:
tambo init, tambo add, and create-app with non-interactive flags and exit codes.These references are duplicated across both skills so each skill works independently.
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
| 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 |
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?
# Core (always required)
npm install @tambo-ai/react
# If no Zod installed
npm install zod
// 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>
);
}
// 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>
);
}
// 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>,
);
// lib/tambo.ts (or src/lib/tambo.ts)
import { TamboComponent } from "@tambo-ai/react";
export const components: TamboComponent[] = [
// Components will be registered here
];
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
If using Yup/Joi instead of Zod, user can either:
Run commands from the package that will use Tambo:
cd packages/web
npx tambo init --api-key=sk_...
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 |
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>;
}