
tambo
Tambo · 程式設計
Tambo 是一套針對 React 的開源 AI 協作框架,能把普通的聊天變成可用的介面。你註冊自己的 React AI 元件,內建代理就會決定要渲染哪一個,並把 props 串流給它。它以 React AI SDK 的形式提供,具備對話串歷史、串流狀態、工具呼叫與 MCP 支援,讓你能加入 AI 功能而不必重寫前端。

關於 tambo
Tambo 是什麼
Tambo 是一套針對 React 的生成式介面工具組。它不讓 AI 回傳原始文字、再指望使用者去讀,而是讓代理從你自己的元件中挑選,並用資料把它們填滿。問「顯示各地區的銷售額」,它就會渲染你的圖表。說「新增一項任務」,它就會更新你的任務看板。AI 負責寫 props,你的元件負責繪製。那麼,這對一個普通應用程式代表什麼?它代表你不必教使用者一套新的聊天介面,而是讓他們用已經熟悉、每天在用的介面來對話。
這套工具組鎖定已經擁有設計系統的產品工程師。你把元件連同結構描述註冊一次,代理就會用該結構描述串流正確的 props。這裡的核心價值在於更少的程式碼。你不必從零打造聊天的管線、錯誤狀態、取消與訊息對話串,因為這些零件都隨 SDK 附上。對於那些否則會花上一個月重建、卻與真正產品毫無關聯的基礎架構的小型團隊來說,這點格外重要。
確實有限制。Tambo 是為 React 與 React Native(透過 Expo)而打造,因此使用 Vue、Svelte 或純 HTML 的團隊沒有進入的門路。這是一道硬牆。後端可以自行架設,或跑在 Tambo Cloud 上,而要連上代管代理則必須有代管金鑰。所以,如果你想要的是貼上一個 script 標籤就能走人的即插即用聊天機器人,這套工具組要求的設定會比一個無程式碼小工具還多。
開始使用
- 用
npm create tambo-app@latest my-tambo-app建立專案,它會複製起始範本、安裝相依套件,並引導你產生 API 金鑰。 - 執行
npm run dev並開啟localhost:3000,確認起始代理有回應。 - 開啟
src/lib/tambo.ts,用各自的 prop 結構描述註冊你自己的元件與工具。 - 把這些元件傳入聊天頁面的
TamboProvider,接著讓代理在使用者輸入時渲染它們。
產品資訊
快速了解 tambo 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 產品工程師:已經在跑 React 設計系統的團隊可以重複使用元件,而不必打造聊天介面,但他們得熟悉 hooks 與 Zod 結構描述。
- 快速出貨的新創:起始範本能在一個下午內讓代理跑起來,這適合沒有專職 AI 基礎架構班底的小型團隊。
- React Native 開發者:Expo 範本讓行動應用開發者在 iOS 與 Android 上重複使用同一套元件模式。它仍然預設你有 JS/TS 的工作環境。
任務
- 隨需渲染資料:送出訊息後觸發由你自己的元件所打造的圖表、表格或摘要卡。
- 建立常駐面板:任務看板、購物車與儀表板,能在一整段對話中依 ID 更新。
- 連接外部系統:透過 MCP 把資料庫與 API 接進代理,讓它能取得真實資料,而不是憑空猜測。
情境
- 在不重寫的情況下,為既有的 SaaS 儀表板加上 AI 助理,代理只是拿到新的元件去渲染。
- 利用一個週末做出內部工具的原型,並在隔週展示。
- 讓使用者透過聊天即時編輯內容,例如在元件仍顯示於畫面上的同時,改變筆記標題或卡片顏色。
主要功能
生成式元件
生成式元件會回應一則訊息而渲染一次,然後就留在原地。你用名稱、描述與 prop 結構描述註冊一個元件,代理會決定何時顯示它。圖表、資料視覺化與摘要卡都屬於這種模式。代理負責寫 props,因此你既有的樣式與邏輯原封不動地沿用。當使用者要求上一季數字的細項時,他們會拿到一張以你品牌色呈現的真實圖表,而不是一大段得自行解讀的文字。
可互動元件
可互動元件會留在頁面上,並在跨對話之間依 ID 更新。購物車、任務看板或試算表會在使用者持續聊天時保留其狀態。AI 不再只是輸出答案,而是開始編輯你介面中一個活生生的部分。正是這種模式把 Tambo 與純文字聊天機器人區隔開來。差別很大。
內建代理與串流
Tambo 內建自己的代理,因此你不必外掛一套框架。它會在回應送達時處理漸進式的 prop 更新、訊息對話串歷史與錯誤處理。使用者會看到元件在資料串流的同時逐漸被填滿,這讀起來比等待完整回應更快。AI 使用體驗中那些枯燥的部分,你都免費取得。這正是重點。沒有人想第五次重建取消邏輯。
MCP 支援
SDK 透過 Model Context Protocol 連接資料庫、API 與外部系統。這讓代理能取得真實資料,而不是憑空捏造,而且無論在用戶端或伺服器端都能運作。對於已在運行 MCP 伺服器的團隊來說,這是最乾淨的辦法,讓代理有手可用。把既有的資料庫接進聊天驅動的介面,以往每個來源都得客製一套整合,而這把那些工作收斂成單一連接點。
自行架設或 Tambo Cloud
後端要怎麼跑由你決定。自行架設以取得完整控制,或使用 Tambo Cloud 以代管金鑰換取更快的起步。起始 CLI 會把你的 API 金鑰直接寫進 env 檔,所以第一個請求幾乎不需什麼儀式就能運作。不必四處翻找設定。資料規範嚴格的團隊可以把一切留在自家牆內,而只想出貨的團隊則能倚賴代管選項,永遠不必碰伺服器設定檔。
以結構描述註冊元件
註冊是宣告式的。你描述元件、交出用 Zod 打造的一套 prop 結構描述,代理就用那份契約來串流合法的 props。因為這個模式倚賴 Zod,它能接上許多 React 團隊早已在用的工作流程。它也代表元件會出現在正確的位置,不必手動路由。沒有黏著程式碼。沒有 switch 陳述式。
優缺點
優點
- 開源且原生於框架,因此你保留既有的 React 元件與樣式,而不必改用另一套 UI 工具組。
- 附上代理、串流、對話串歷史與錯誤狀態,省下數週的管線工作。
- 兩種元件模式同時涵蓋像圖表這種一次性輸出,以及像任務看板這種常駐、可編輯的面板。
- MCP 支援能連接真實資料來源,而且你可以自行架設後端以取得更嚴密的控制。
- 免費 Starter 方案讓你在真正投入前,能便宜地在實際專案上試用。
缺點
- 綁定 React 與 React Native,因此 Vue、Svelte 與純 HTML 專案無法使用。
- 代管代理需要 API 金鑰,而較吃重的用量會把你推向付費層級。
- 你仍然得撰寫元件結構描述,所以它不是給非開發者用的無程式碼工具。
常見問題
Tambo 用來為 React 應用程式加入 AI 功能,做法是讓代理依使用者的訊息渲染你自己的元件。它不回傳文字,而是挑選圖表、卡片或面板,並用資料把它填滿。結果看起來像你的應用程式,而不是硬接在一旁的通用聊天機器人,因為代理顯示的每個元素,都是你早已打造並套用樣式的元件。
相關內容
探索與 tambo 相關的工具、技能與文章。
tambo 替代方案
Forefront
Forefront · 程式設計Forefront 是一個用來打造開源 AI 的網頁平台。你可以用自己的資料微調主流的開源語言模型、評估它們的表現,再透過 API 執行,或匯出後自行架設。想要封閉式平台的便利、卻堅持要自己擁有模型與資料的開發者,就是這裡的目標客群。
Startkit
StartKit.AI · 程式設計Startkit 是一套用來打造 AI SaaS 與 AI 包裝產品的樣板。可以把它想成一個 AI 新創樣板,把枯燥的部分都先接好了:驗證、Stripe 與 Lemon Squeezy 付款、用量限制、交易型電子郵件,以及一套能與 OpenAI、Anthropic、Groq 或 Llama 溝通的 AI API 啟動套件。你複製儲存庫、設定價格,然後專心在產品中使用者真正願意付費的部分。它建構於 React 與 Tailwind 之上的 Next.js,所以大部分的樣板程式碼對你來說並不陌生。
Testim
Tricentis · 程式設計Testim 是專為網頁、行動與 Salesforce 應用程式打造的 AI 測試自動化平台,用來建立並執行端到端測試。它靠機器學習在介面變動時維持測試穩定,團隊因此少花時間修補壞掉的定位器。對於一款今天就能開始使用的自動化測試工具來說,這表現不算差。你透過在瀏覽器錄製動作來建立測試,需要更多控制時再補上 JavaScript。對忙碌的 QA 團隊來說,這是個可靠的選擇。
