Tambo AI: React 기반의 생성형 UI(Generative UI)를 구축할 수 있는 오픈소스 SDK

읽을거리&정보공유
, , , ,
1

Tambo AI: React 기반의 생성형 UI(Generative UI)를 구축할 수 있는 오픈소스 SDK
Tambo AI: React 기반의 생성형 UI(Generative UI)를 구축할 수 있는 오픈소스 SDK1329×581 41.6 KB

Tambo AI 소개

Tambo는 개발자가 리액트(React) 애플리케이션에 AI 에이전트를 통합하고, 사용자에게 단순히 텍스트 답변이 아닌 실제 UI 구성 요소를 생성하여 제공할 수 있게 해주는 오픈소스 Generative UI SDK입니다. 기존의 챗봇이 단순히 텍스트를 나열하는 수준에 머물렀다면, Tambo를 사용하면 AI가 상황에 맞는 차트, 폼, 데이터 테이블 등을 직접 렌더링하여 사용자에게 보여줄 수 있습니다. 예를 들어 사용자가 "지역별 매출을 보여줘"라고 요청하면 AI가 단순히 숫자를 읊는 것이 아니라 실제 <Chart> 컴포넌트를 생성하여 화면에 띄워주는 방식입니다.

Tambo AI는 인공지능이 사용자의 요구사항에 따라 인터페이스를 동적으로 구성하는 '에이전틱 웹(Agentic Web)' 시대를 위한 필수적인 툴킷으로 평가받고 있습니다. 개발자는 Zod 스키마를 통해 기존 리액트 컴포넌트를 AI에게 등록하기만 하면 되며, 이후 Tambo가 스트리밍, 상태 관리, 그리고 다양한 모델과의 연동을 모두 처리합니다. 이는 생산성을 극적으로 높여줄 뿐만 아니라, 사용자가 복잡한 메뉴를 찾아다닐 필요 없이 자연어로 필요한 기능을 즉시 실행할 수 있는 새로운 차원의 UX를 제공합니다.

전통적인 소프트웨어는 정해진 레이아웃에 사용자가 적응해야 하는 방식이었지만, Tambo는 사용자의 의도에 따라 소프트웨어의 인터페이스가 동적으로 재구성되는 '적응형 소프트웨어(Adaptive Software)' 시대를 목표로 합니다. 제품 엔지니어들 사이에서는 "금요일에 적용해서 월요일에 팀 전체에 데모할 수 있을 정도"로 빠르고 직관적인 도구라는 평가를 받고 있습니다.

Tambo AI vs. Vercel AI SDK 및 유사 기술과의 비교

기존에 Generative UI를 구현하기 위해서는 Vercel의 AI SDK 등을 활용해 서버와 클라이언트 간의 직렬화 로직을 직접 작성하거나, LLM의 함수 호출(Function Calling) 결과를 일일이 파싱하여 적절한 컴포넌트에 매핑하는 복잡한 과정이 필요했습니다.

기능 Tambo Vercel AI SDK CopilotKit Assistant UI
컴포넌트 선택 AI가 스스로 렌더링할 컴포넌트 결정 수동적인 도구-컴포넌트 매핑 필요 에이전트 프레임워크(LangGraph 등) 의존 채팅 중심의 도구 UI 제공
MCP 통합 기본 내장 (Native 지원) 실험적 지원 (v4.2+) 최근 추가됨 AI SDK v5 연동 필요
영구 상태 유지 지원 (상태 보존형 컴포넌트) 미지원 공유 상태 패턴으로 우회 미지원
클라이언트 도구 실행 선언적/자동 실행 onToolCall 등 수동 처리 에이전트 측 실행 중심 미지원
호스팅 옵션 Tambo Cloud 제공 없음 CopilotKit Cloud 제공 Assistant Cloud 제공
주요 용도 앱 UI 전체 제어 스트리밍 및 도구 추상화 기초 멀티 에이전트 워크플로우 채팅 인터페이스 최적화

특히, Vercel AI SDK가 AI 연동을 위한 기초적인 빌딩 블록을 제공한다면, Tambo는 실제 제품에 바로 적용 가능한 수준의 UI 실행 계층을 제공합니다. 특히 Tambo는 AI가 UI의 상태를 직접 읽고 수정할 수 있는 기능을 제공하여 훨씬 동적인 사용자 경험을 선사합니다.

Tambo AI의 주요 특징

Tambo는 리액트 SDK와 대화 상태 및 에이전트 오케스트레이션을 관리하는 백엔드 레이어로 구성됩니다. Tambo Cloud를 사용하거나 Docker를 통해 직접 호스팅(Self-hosting)할 수 있습니다.

Generative & Interactable Components

Tambo의 핵심은 컴포넌트를 AI에게 '등록'하는 것입니다. Zod 스키마를 사용하여 컴포넌트의 Props를 정의하면, LLM은 이를 도구 정의(Tool Definition)로 인식합니다. Tamboo가 제공하는 UI 생성 방식은 다음의 두 가지 입니다:

  • Generative Components: 메시지에 대한 응답으로 한 번 렌더링되는 컴포넌트입니다. 데이터 시각화 차트나 요약 정보창 등에 적합합니다. 차트나 요약 정보처럼 메시지에 대응하여 한 번 렌더링되는 정적 결과물입니다.

  • Interactable Components: 화면에 고정되어 사용자와 지속적으로 상호작용하며 업데이트되는 컴포넌트입니다. withInteractable 고차 컴포넌트(HOC)를 사용해 구현하며, 칸반 보드나 편집 가능한 문서 등에 사용되어 사용자와의 대화 흐름 속에서 상태가 지속적으로 변하는 컴포넌트입니다.

에이전트 및 스트리밍 인프라

Tambo는 자체적으로 LLM 대화 루프를 실행합니다. 개발자는 OpenAI, Anthropic, Gemini 등 원하는 모델의 API 키만 제공하면 됩니다. LLM이 생성하는 데이터(Props)는 실시간으로 스트리밍되며, Tambo는 연결 끊김, 오류 복구, 취소 처리를 자동으로 수행합니다.

확장 기능: MCP 및 로컬 툴

MCP(Model Context Protocol) 지원: Tambo는 최근 주목받는 MCP를 통해 외부 도구와의 연동성을 극대화했습니다. 로컬 서버나 클라우드 기반 MCP 서버를 연결하여 AI가 직접 데이터베이스를 조회하거나 외부 API를 호출하게 할 수 있습니다.

import { MCPTransport } from "@tambo-ai/react/mcp";

const mcpServers = [
  {
    name: "filesystem",
    url: "http://localhost:8261/mcp",
    transport: MCPTransport.HTTP,
  },
];

<TamboProvider
  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
  userKey={currentUserId}
  components={components}
  mcpServers={mcpServers}
>
  <App />
</TamboProvider>;

로컬 도구(Local Tools): 브라우저 환경에서 실행되어야 하는 함수(DOM 조작, 로컬 상태 접근 등)를 선언적으로 정의하여 AI가 호출할 수 있도록 지원합니다.

const tools: TamboTool[] = [
  {
    name: "getWeather",
    description: "Fetches weather for a location",
    tool: async (params: { location: string }) =>
      fetch(`/api/weather?q=${encodeURIComponent(params.location)}`).then((r) =>
        r.json(),
      ),
    inputSchema: z.object({
      location: z.string(),
    }),
    outputSchema: z.object({
      temperature: z.number(),
      condition: z.string(),
      location: z.string(),
    }),
  },
];

<TamboProvider
  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
  userKey={currentUserId}
  tools={tools}
  components={components}
>
  <App />
</TamboProvider>;

라이선스

Tambo 프로젝트의 SDK 및 핵심 프레임워크는 MIT License로 공개 및 배포되고 있습니다. 다만, Tambo Cloud와 같은 관리형 서비스나 일부 엔터프라이즈 기능은 별도의 이용 약관이 적용될 수 있으므로 확인이 필요합니다.

:house: Tambo AI 공식 홈페이지

:books: Tambo AI 관련 문서

:github: Tambo AI 프로젝트 GitHub 저장소



이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck: