Tambo AI

Giới thiệu

Tambo (Tambo AI) là một framework orchestration AI dành cho hệ sinh thái React. Thay vì chỉ xây dựng các chatbot trả về văn bản thuần túy, Tambo đóng vai trò là lớp giao diện giữa AI và React, cho phép AI tự động tạo (render) và tương tác với các component UI như biểu đồ, form, dashboard, và quy trình làm việc (workflows).

Vấn đề giải quyết: Việc kết nối thủ công các mô hình ngôn ngữ lớn (LLM) với các thành phần giao diện người dùng thường phức tạp, dễ lỗi và tốn thời gian. Tambo giải quyết vấn đề này bằng cách cung cấp một cơ chế tiêu chuẩn để ‘đăng ký’ component với AI, giúp các nhà phát triển xây dựng các ứng dụng ‘Generative UI’ nơi giao diện được sinh ra động dựa trên ý định của người dùng.

Tính năng chính

Generative UI: AI tự động quyết định component nào cần render dựa trên ngữ cảnh hội thoại (ví dụ: hiển thị biểu đồ khi người dùng hỏi về dữ liệu).
React SDK: Tích hợp dễ dàng vào ứng dụng React/Next.js hiện có thông qua các Hooks và Context Provider.
Component Registration: Đăng ký component kèm theo Zod schema để AI hiểu cấu trúc dữ liệu (props) và cách sử dụng.
Streaming UI: Hỗ trợ streaming dữ liệu component theo thời gian thực, giúp trải nghiệm mượt mà.
Quản lý trạng thái (State Management): Tự động xử lý lịch sử tin nhắn và trạng thái của các component tương tác (useAiState).
Hỗ trợ MCP (Model Context Protocol): Tích hợp sẵn chuẩn MCP để kết nối AI với các công cụ và dữ liệu bên ngoài.
Agent tích hợp sẵn: Xử lý vòng lặp hội thoại của LLM thay cho bạn.

Hướng dẫn cài đặt Local (macOS)

Để bắt đầu nhanh với một dự án mới:

Yêu cầu: Node.js (v22 trở lên) và npm.
Tạo dự án mới: Sử dụng công cụ CLI để khởi tạo template chuẩn.
```
npm create tambo-app my-tambo-app
cd my-tambo-app
```
Cài đặt dependencies:
```
npm install
```
Cấu hình môi trường:
- Đổi tên file .env.example thành .env.local.
- Điền NEXT_PUBLIC_TAMBO_API_KEY (Lấy từ Tambo Cloud hoặc server tự host).
Chạy ứng dụng:
```
npm run dev
```
Ứng dụng sẽ chạy tại http://localhost:3000.

Hướng dẫn Docker (Self-hosted)

Nếu bạn muốn tự vận hành backend của Tambo (thay vì dùng Cloud) trên hạ tầng riêng:

Clone repository Tambo Cloud:

git clone https://github.com/tambo-ai/tambo-cloud.git
cd tambo-cloud

Chạy script cài đặt: Script này sẽ kiểm tra Docker, tạo file môi trường .env từ template.
```
./scripts/tambo-setup.sh
```
Khởi động Docker: Sử dụng script start (hoặc docker-compose) để chạy backend, database và API.
```
./scripts/tambo-start.sh
# Hoặc: docker compose --env-file docker.env up -d
```
Cấu hình:
- Docker Web Dashboard: http://localhost:3210
- Docker API: http://localhost:3211
- Cập nhật biến môi trường trong ứng dụng React của bạn để trỏ về API local này.

Ví dụ Code (Example Code)

Dưới đây là ví dụ cách đăng ký một component và sử dụng nó trong Tambo:

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

// 1. Định nghĩa Component và Schema
const WeatherCard = ({ location, temp }: { location: string; temp: number }) => (
  <div className="p-4 border rounded">
    <h3>Thời tiết tại {location}</h3>
    <p>{temp}°C</p>
  </div>
);

const weatherSchema = z.object({
  location: z.string().describe("Tên thành phố"),
  temp: z.number().describe("Nhiệt độ hiện tại"),
});

// 2. Danh sách components đăng ký cho AI
const components = [
  {
    name: "WeatherCard",
    component: WeatherCard,
    propsSchema: weatherSchema,
    description: "Hiển thị thẻ thông tin thời tiết",
  },
];

// 3. Tích hợp vào App
export default function App() {
  return (
    <TamboProvider 
      components={components} 
      apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY}
    >
      <ChatInterface />
    </TamboProvider>
  );
}

// 4. Sử dụng trong giao diện Chat
function ChatInterface() {
  const { messages } = useTambo();
  
  return (
    <div>
      {messages.map((msg) => (
        <div key={msg.id}>
          {msg.content}
          {/* Tambo tự động render component tại đây nếu AI trả về UI */}
          {msg.renderedComponent}
        </div>
      ))}
    </div>
  );
}

Sources

Github Page

https://github.com/tambo-ai/tambo

Tags: github