Introduction to Tambo AI

import { TamboProvider, useTambo, useTamboThreadInput } from "@tambo-ai/react";
import { z } from "zod";

// Define your component
function Graph({ data, type }) {
  return <div>Chart renders here</div>;
}

// Register it with Tambo
const components = [
  {
    name: "Graph",
    description: "Displays data as charts",
    component: Graph,
    propsSchema: z.object({
      data: z.array(z.object({ name: z.string(), value: z.number() })),
      type: z.enum(["line", "bar", "pie"]),
    }),
  },
];

// Wrap your app
function App() {
  return (
    <TamboProvider
      apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY}
      userKey={currentUserId}
      components={components}
    >
      <ChatInterface />
    </TamboProvider>
  );
}

// Build your chat interface
function ChatInterface() {
  const { messages, isStreaming } = useTambo();
  const { value, setValue, submit, isPending } = useTamboThreadInput();

  return (
    <form onSubmit={async (e) => {
      e.preventDefault();
      await submit();
    }}>
      {messages.map((msg) => (
        <Message key={msg.id} message={msg} />
      ))}
      {isStreaming && <LoadingIndicator />}
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button disabled={isPending}>Send</button>
    </form>
  );
}