Tambo components to jumpstart your AI interface development

A collection of ready-to-use AI components hooked up to Tambo.

Steps to Get started

Install tambo-ai

Run the full-send command to setup your project

~/your-project

npx tambo full-send

This command will setup your project, get an API key, and install components

Add TamboProvider

Update your layout.tsx file

~/your-project/src/app/layout.tsx

"use client";
  
  import { TamboProvider } from "@tambo-ai/react";
  
  export default function RootLayout({ children }) {
    return (
      <TamboProvider apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY ?? ""}>
        {children}
      </TamboProvider>
    );
  }

Wrap your app with TamboProvider to enable tambo features

Add MessageThreadFull

Import and use the chat component

~/your-project/src/app/page.tsx

import { MessageThreadFull } from "@/components/ui/message-thread-full";
  
  export default function Home() {
    return (
      <main>
        <MessageThreadFull />
      </main>
    );
  }

Add a complete chat interface to your application

Register Components

~/your-project/src/app/layout.tsx

"use client";
  
  import { TamboProvider } from "@tambo-ai/react";
  import { z } from "zod";
  import { MyComponent } from "@/components/MyComponent";
  
  // Define component props schema
  const MyComponentProps = z.object({
    title: z.string(),
    data: z.array(z.number())
  });
  
  const components = [
    {
      name: "MyComponent",
      description: "Displays data in my component",
      component: MyComponent,
      propsSchema: MyComponentProps,
    }
  ];
  
  export default function RootLayout({ children }) {
    return (
      <TamboProvider 
        apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY ?? ""}
        components={components}
      >
        {children}
      </TamboProvider>
    );
  }