Build AI assistants and agents in React with a few lines of code.
The future of UX is generative and hyper-personalized. But today its really hard to build AI powered generative UI experiences. We are building tools that make this possible without complexity.
tambo ai eliminates React boilerplate for AI features. We handle the hard parts so you can focus on creating exceptional user experiences.
Build AI assistants and agents in React without the headache.
tambo ai is a React library that deals with the boring parts. Get started with an AI assistant in minutes.
- Thread management
- State persistence
- Streaming responses
- AI Orchestration
- A Compatabile React UI Library
You get clean React hooks that integrate seamlessly with your codebase.
Add tambo ai to your React app with a simple provider pattern:
import { TamboProvider } from "@tambo-ai/react";
function App() {
return (
<TamboProvider apiKey="your-api-key">
<YourApp />
</TamboProvider>
);
}-
Specialized hooks for specific needs:
useTambo- Primary entrypoint for the Tambo React SDKuseTamboThreadInput- Input state and submissionuseTamboSuggestions- AI-powered message suggestionsuseTamboThreadList- Conversation managementuseTamboComponentState- AI-generated component stateuseTamboThread- Access to current thread context
-
Component registration for AI-generated UI
-
Tool integration for your data sources
-
Streaming responses for real-time interactions
Use our template:
npx create-tambo-app@latest .
npm run devor try adding it to your existing project:
npx tambo full-sendCheck out our UI library tambo-ui for components that leverage tambo.
- Displaying a message thread.
import { useTambo, useTamboThreadInput } from "@tambo-ai/react";
function ChatInterface() {
const { thread, sendThreadMessage } = useTambo();
const { value, setValue, submit } = useTamboThreadInput();
return (
<div>
{/* Display messages */}
<div>
{thread.messages.map((message, index) => (
<div key={index} className={`message ${message.role}`}>
<div>{message.content}</div>
{message.component && message.component.renderedComponent}
</div>
))}
</div>
{/* Input form */}
<form
onSubmit={(e) => {
e.preventDefault();
submit();
}}
className="input-form"
>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Type your message..."
/>
<button type="submit">Send</button>
</form>
</div>
);
}- Adding AI-Generated Components
Create components that can be dynamically generated by the AI:
// components/WeatherCard.jsx
import { useTamboComponentState } from "@tambo-ai/react";
export function WeatherCard() {
const [weatherState, setWeatherState, { isPending }] = useTamboComponentState(
"weather",
{
temperature: 0,
condition: "",
location: "",
},
);
if (isPending) {
return <div>Loading weather data...</div>;
}
return (
<div>
<h3>{weatherState.location}</h3>
<div>{weatherState.temperature}°C</div>
<div>{weatherState.condition}</div>
</div>
);
}Then register your components in your app's entry point:
// App.jsx
import { TamboProvider } from "@tambo-ai/react";
import { WeatherCard } from "./components/WeatherCard";
import { z } from "zod";
// Define your components
const components = [
{
name: "WeatherCard",
description: "A component that displays weather information",
component: WeatherCard,
propsSchema: z.object({
temperature: z.number(),
condition: z.string(),
location: z.string(),
}),
},
];
// Pass them to the provider
function App() {
return (
<TamboProvider apiKey="your-api-key" components={components}>
<YourApp />
</TamboProvider>
);
}You can also pass tools to the provider, and they will be available to the AI:
const tools: TamboTool[] = [{
name: "getWeather",
description: "Fetches current weather data for a given location",
tool: async (location: string, units: string = "celsius") => {
// Example implementation
const weather = await fetchWeatherData(location);
return {
temperature: weather.temp,
condition: weather.condition,
location: weather.city
};
},
toolSchema: z.function()
.args(
z.tuple([
z.string().describe("Location name (city)"),
z.string().optional().describe("Temperature units (celsius/fahrenheit)")
])
)
.returns(
z.object({
temperature: z.number(),
condition: z.string(),
location: z.string()
})
)
}]
<TamboProvider apiKey="your-api-key" tools={tools}>
<YourApp />
</TamboProvider>- Node.js 18.x+
- npm 10.x+
# Install
git clone https://github.com/tambo-ai/tambo.git && cd tambo && npm install
# Develop
npm run dev
# Build
npm run build
# Test
npm run testMIT License - see the LICENSE file for details.
We're building tools for the future of user interfaces. Your contributions matter.
Star this repo to support our work.
Join our Discord to connect with other developers.
Built by developers, for developers.
Because we believe the future of UI is generative and hyper-personalized.