Fragments by E2B：把 AI 生成的程式碼關進沙盒的 Next.js 模板

這模板解決什麼問題

大型語言模型能寫出看似完整的應用程式，但那些程式碼通常沒人真正執行過。Claude Artifacts 與 v0 示範了一種互動模式：模型生成程式碼，系統在隔離環境中運行它，然後把結果串流回瀏覽器。Fragments 把這套模式做成開源模板，讓開發者不必從零打造基礎設施。它的目標使用者是熟悉 Next.js 與 React、想快速做出「AI 生成應用」產品原型的人。你不必自己寫沙盒管理、串流協定或模型供應商整合，模板已經把這些接好。但要注意，它並非通用框架，而是針對「AI 生成程式碼並執行」這個特定情境設計的。

核心機制：E2B 沙盒與模板 persona

Fragments 的執行核心是 E2B SDK，它負責在雲端建立隔離的 sandbox。AI 生成的程式碼不會直接跑在使用者的瀏覽器或你自己的伺服器上，而是被送到 E2B 的容器中執行。模板內建多種 persona，例如 Python interpreter、Next.js、Vue.js、Streamlit 與 Gradio。每個 persona 對應一個 sandbox template，定義了容器的基礎映像、預先安裝的相依套件與啟動指令。當使用者要求生成一個 Streamlit 應用時，系統會選擇對應的 template，建立容器，然後把模型產生的程式碼丟進去跑。這表示你能生成的應用類型，取決於你定義了多少 template。文件提到可以自行新增，但這個過程需要熟悉 E2B CLI 與 Dockerfile 的寫法。

取得與啟動：環境變數是主要門檻

啟動流程是標準的 Next.js 步驟：先 git clone，然後 npm i，接著建立 .env.local。關鍵的變數有兩個：E2B_API_KEY 與至少一個 LLM 提供者的金鑰，例如 OPENAI_API_KEY 或 ANTHROPIC_API_KEY。沒有 E2B 金鑰，整個沙盒機制無法運作。其他變數如 MORPH_API_KEY 用於 token 效率較高的程式碼編輯模型，預設開啟。RATE_LIMIT_MAX_REQUESTS 與 RATE_LIMIT_WINDOW 控制速率限制，但文件沒說明預設值。KV_REST_API_URL 與 KV_REST_API_TOKEN 是給 Vercel/Upstash KV 用的，負責短網址與速率限制。SUPABASE_URL 與 SUPABASE_ANON_KEY 是選用的認證功能。開發時執行 npm run dev，正式建置則用 npm run build。整體來說，只要備妥兩把 API 金鑰，跑起來並不困難。真正的門檻在於理解每個選用變數對應哪個功能，文件對這部分的說明偏簡略。

自訂的界線：template 與模型都要動手改

要新增一個 persona，流程比想像中繁瑣。你必須先安裝 E2B CLI 並登入，然後在 sandbox-templates/ 下開新資料夾，執行 e2b template init 產生 e2b.Dockerfile。接著要調整 Dockerfile 內容，例如安裝 streamlit 與 pandas，並在 e2b.toml 指定 start_cmd。之後執行 e2b template build --name <template-name> 把映像部署到 E2B。最後還要手動編輯 lib/templates.json，加入 template id、名稱、相依套件列表、進入點檔案與 port。這表示新增一個 persona 涉及容器建置、設定檔與前端清單三處修改。文件把這個流程寫成逐步教學，但沒有提到如何測試 template 是否正常運作，得自己驗證。新增 LLM 模型相對簡單，只要在 lib/models.ts 加一個物件，指定 id、name、provider 與 providerId。但若要新增整個 provider，就得在 providerConfigs 裡寫一段 factory function，例如用 createOpenAI 搭配自訂 baseURL。這對不熟悉各家 SDK 的人來說，需要查閱 E2B 或各提供者的文件。

限制與失敗模式

最明顯的限制是它依賴 E2B 的雲端服務。如果 E2B 服務中斷或 API 政策改變，你的應用就無法執行任何 AI 生成的程式碼。這是把執行環境外包給第三方的必然代價，文件沒有提供自架沙盒的選項。另一個限制是模板內建的 persona 數量有限，Python、Next.js、Vue、Streamlit、Gradio 這五種。若你想生成其他類型的應用，例如一個 Rust 專案或一個 Go 服務，你得自己建立 template，這需要具備 Docker 與 E2B CLI 的知識。此外，文件提到可以停用 API key 與 base URL 的輸入介面，這暗示預設情況下使用者可以在聊天中自行輸入 API key。這對公開部署是個風險，因為使用者可能提供自己的金鑰，但也可能誤用或暴露金鑰。最後，速率限制功能依賴 Upstash KV，若沒有設定 KV_REST_API_URL，速率限制可能不會生效，文件沒有明確說明關閉 KV 時的行為。

替代方案與架構差異

最直接的替代方案是 Anthropic 的 Claude Artifacts 或 Vercel 的 v0，但兩者都是封閉服務，無法自行部署。Fragments 的差異在於它把整個流程拆成可替換的元件：模型提供者、sandbox template、UI 層。你可以用 Ollama 跑本地模型，或接上 Groq 的低延遲 API。另一個替代方案是直接使用 E2B 的 code-interpreter SDK，跳過 Fragments 的 UI 層，自己寫前端。這樣做的好處是更輕量，沒有 Next.js 與 shadcn/ui 的包袱，但缺點是你得自己處理串流、狀態管理與 persona 切換。還有一個方向是使用其他的開源 AI agent 框架，例如 GPT Engineer，但那些通常聚焦在產生整個專案資料夾，而非在沙盒中即時執行並串流結果。Fragments 的定位比較接近「互動式生成」，而不是「批次產生程式碼」。

維護成本與授權考量

授權是 Apache-2.0，這表示你可以自由使用、修改與商用，只要保留著作權聲明。但要注意，專案依賴的 E2B SDK 與各家 LLM provider 的 SDK 各有其授權條款，部署前需要個別確認。維護成本來自三個面向：首先是 E2B 的 sandbox template 需要跟著上游更新，因為 E2B CLI 與 SDK 可能變動。其次是 Next.js 14 的版本，模板鎖定 App Router 與 Server Actions，若 Next.js 釋出重大更新，你可能需要手動遷移。最後是模型供應商的 API 變更，例如某家 provider 改版或棄用某個 endpoint，你就得修改 lib/models.ts 中的 providerConfigs。文件沒有提到自動更新機制，所以你得自行追蹤上游 commit。考慮到最後一次 push 是 2026 年 9 月，專案仍在維護中，但沒有釋出任何 release 版本，這表示你只能依賴 main branch 的狀態，穩定性需自行評估。

編輯結論

Fragments 適合想快速搭建 AI 生成應用原型、且願意把程式碼執行外包給 E2B 沙盒服務的開發者。它不適合需要完全掌控執行環境、或不想依賴第三方沙盒 API 的團隊。採用前應先確認 E2B 的計價與資料保留政策，並測試自訂 sandbox template 的建置流程是否順暢。若你只需要網頁 UI 生成而非任意程式碼執行，v0 或 Claude Artifacts 本身可能更直接，但 Fragments 的價值在於它把「AI 寫程式、沙盒跑程式」的完整迴路開放出來，讓你能替換模型、替換模板，甚至替換 UI。最終要判斷的是：你願不願意把執行環境的邊界交給 E2B，換取一個能快速迭代的起點。

官方來源

1. e2b-dev/fragments on GitHub
2. Issues
3. License: Apache-2.0
4. Project website
5. README