OpenUI를 기반으로 모델 답변을 대화형 지도, 차트, 폼, 실제로 작동하는 도구로 스트리밍해 표시하는 오픈소스 Next.js 데모입니다.
tambo-ai/tambo
AI 에이전트가 직접 만든 컴포넌트를 생성형 UI로 렌더링하고 업데이트하는 오픈소스 React 툴킷입니다.
- 스타
- 11,197
- 포크
- 570
- 열린 이슈
- 49
- 마지막 커밋
- 14시간 전
어떤 프로젝트인가요?
Tambo를 사용하면 Zod 스키마와 함께 React 컴포넌트를 등록할 수 있습니다. LLM 에이전트는 사용자 요청에 맞는 컴포넌트를 선택하고, 해당 컴포넌트에 props를 스트리밍해 앱 안에 결과를 렌더링합니다. 컴포넌트는 차트나 요약처럼 한 번만 표시되는 결과일 수도 있고, 작업 보드나 메모처럼 사용자 요청에 따라 계속 유지되고 업데이트되는 인터랙티브 컴포넌트일 수도 있습니다.
SDK는 메시지, 스트리밍 상태, 입력 처리를 위한 useTambo 및 useTamboThreadInput 같은 훅을 제공합니다. MCP 서버 연동, 브라우저에서 실행되는 로컬 도구, 추가 컨텍스트 전달, 인증 토큰, 클릭 가능한 제안 기능도 지원합니다. OpenAI, Anthropic, Gemini, Mistral 또는 OpenAI 호환 provider의 API 키를 직접 사용하면 됩니다.
대화 상태와 에이전트 실행을 관리하는 백엔드는 Docker로 자체 호스팅할 수 있습니다. 호스팅 서비스인 Tambo Cloud는 2026년 10월 31일에 종료될 예정이며, 신규 가입은 마감되었습니다.
핵심 기능
- 01Zod 스키마와 함께 React 컴포넌트를 등록해 에이전트가 컴포넌트를 선택하고 렌더링할 수 있습니다.
- 02LLM이 생성하는 컴포넌트 props를 UI로 스트리밍합니다.
- 03한 번만 표시되는 결과를 위한 생성형 컴포넌트와 상태가 유지되는 인터랙티브 컴포넌트를 지원합니다.
- 04도구, 프롬프트, 샘플링을 포함해 HTTP를 통해 MCP 서버에 연결합니다.
- 05DOM 작업이나 인증된 fetch 등 에이전트가 호출할 수 있는 브라우저 측 도구를 정의할 수 있습니다.
- 06OpenAI, Anthropic, Gemini, Mistral 및 OpenAI 호환 provider를 지원합니다.
활용 사례
- 기존 React 앱에 차트나 대시보드를 보여주는 채팅 어시스턴트를 추가할 때.
- 사용자가 자연어로 수정할 수 있는 작업 보드나 스프레드시트를 만들 때.
- MCP 서버를 통해 앱 내 AI 어시스턴트를 내부 도구에 연결할 때.
빠른 시작
- 1
Tambo CLI로 새 앱의 기본 구조를 만듭니다
npm create tambo-app my-tambo-app - 2
프로젝트 폴더로 이동합니다
cd my-tambo-app - 3
개발 서버를 시작합니다
npm run dev
사용 전 알아둘 점
- Tambo Cloud는 2026년 10월 31일에 종료되며, 신규 가입은 마감되었습니다.
- 직접 실행하려면 자체 인프라에서 Docker를 사용하는 셀프 호스팅 가이드를 따라야 합니다.
- 지원되는 제공업체의 LLM API 키를 직접 준비해야 합니다.
토픽
자주 묻는 질문
- tambo은(는) 무엇인가요?
- AI 에이전트가 직접 만든 컴포넌트를 생성형 UI로 렌더링하고 업데이트하는 오픈소스 React 툴킷입니다. Tambo를 사용하면 Zod 스키마와 함께 React 컴포넌트를 등록할 수 있습니다. LLM 에이전트는 사용자 요청에 맞는 컴포넌트를 선택하고, 해당 컴포넌트에 props를 스트리밍해 앱 안에 결과를 렌더링합니다. 컴포넌트는 차트나 요약처럼 한 번만 표시되는 결과일 수도 있고, 작업 보드나 메모처럼 사용자 요청에 따라 계속 유지되고 업데이트되는 인터랙티브 컴포넌트일 수도 있습니다.
- tambo은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- tambo은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- tambo은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. tambo의 마지막 커밋은 2026년 10월 21일입니다.
- tambo은(는) 어디에 사용할 수 있나요?
- 기존 React 앱에 차트나 대시보드를 보여주는 채팅 어시스턴트를 추가할 때. 사용자가 자연어로 수정할 수 있는 작업 보드나 스프레드시트를 만들 때. MCP 서버를 통해 앱 내 AI 어시스턴트를 내부 도구에 연결할 때.
- tambo는 어떻게 설치하나요?
- Tambo CLI로 새 앱의 기본 구조를 만듭니다: npm create tambo-app my-tambo-app 프로젝트 폴더로 이동합니다: cd my-tambo-app 개발 서버를 시작합니다: npm run dev
- tambo은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/tambo-ai/tambo
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
React, Angular, Vue 및 채팅 앱에서 생성형 UI, 공유 상태, 휴먼 인 더 루프 흐름을 갖춘 에이전트 네이티브 앱을 구축하는 TypeScript SDK입니다.
LLM이 자체 컴포넌트 라이브러리로 렌더링 가능한 UI를 생성하도록 지원하는 OpenUI Lang 기반 프레임워크 독립형 Generative UI 툴킷
사전 구축 도구나 사용자 정의 도구 정의로 AI 에이전트, IDE, 앱을 데이터베이스에 연결하는 오픈소스 MCP 서버입니다.
대화형 채널에서 실행되는 에이전트형 AI 워크플로를 YAML로 구축하는 자동화 플랫폼으로, 도구, MCP, 메모리, RAG를 지원합니다.
Cursor, VS Code, Windsurf 또는 Claude Desktop의 프롬프트를 여러 클라우드·로컬 모델로 전달하는 로컬 MCP 서버