用)
10 分鐘手把手fragments 安裝配置從零跑通第一個 AI 生成應(yīng)用【免費(fèi)下載鏈接】fragmentsOpen-source Next.js template for building apps that are fully generated by AI. By E2B.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/fragments你在輸入框里打了一句做個記賬小程序幾秒后瀏覽器里已經(jīng)能點(diǎn)了。這就是 fragments 這個 AI 應(yīng)用生成器帶來的體驗(yàn)。它是一個多模型 Next.js 模板。接下來 10 分鐘你也能在自己機(jī)器上生出一個。fragments 安裝最短路徑5 條命令跑起來 這節(jié)是干嘛的最短路徑。5 條命令10 分鐘拿到一個能點(diǎn)的應(yīng)用。系統(tǒng)要求只有一行Node 18 即可其余裝依賴時自動拉。git clone https://gitcode.com/GitHub_Trending/fr/fragments # 拿到模板 cd fragments # 進(jìn)項(xiàng)目目錄 npm i # 裝全部依賴 echo E2B_API_KEYyour-e2b-key .env.local # 唯一必填的環(huán)境變量 npm run dev # 啟動本地服務(wù)服務(wù)起來后瀏覽器打開 http://localhost:3000。左邊是聊天輸入框右邊是實(shí)時輸出區(qū)。生成的代碼跑在遠(yuǎn)端沙盒云上的隔離執(zhí)行環(huán)境不碰你的機(jī)器。這個 Next.js 模板自帶 shadcn/ui、TailwindCSS、多模型切換和流式輸出開箱即用。一條命令裝完依賴npm i會把 package.json 里列的包一次拉齊。包括 Next.js 14、shadcn/ui、TailwindCSS、Vercel AI SDK、E2B 沙盒 SDK。不用你手動裝任何一個。只有 1 個必填環(huán)境變量第 4 條命令建的是.env.local本地私有配置不進(jìn) git。真正要知道的就兩行# 必填沙盒執(zhí)行環(huán)境密鑰E2B 官網(wǎng)注冊獲取 E2B_API_KEYyour-e2b-key # 建議提前填模型密鑰不填則每次在頁面輸入 OPENAI_API_KEYyour-openai-key為什么只有 E2B 的鑰匙必填因?yàn)樯傻拇a要在 E2B 的遠(yuǎn)端沙盒里跑密鑰是入場券。模型密鑰你也可以每次在頁面右上角輸入填進(jìn) env 只是省掉這步。多人共享部署想關(guān)掉頁面輸入框就再加NEXT_PUBLIC_NO_API_KEY_INPUTtrue。fragments 支持哪些模型和模板這節(jié)是干嘛的能力盤點(diǎn)。模型和模板怎么選一張圖看明白。模型 4 組就夠選fragments 支持哪些模型完整清單在 lib/models.json。這個 AI 應(yīng)用生成器的默認(rèn)清單不用背記住 4 組選擇邏輯就行第一次用選求穩(wěn)那組不會踩坑。5 個沙盒模板各管一攤模板就是執(zhí)行沙盒。每個模板是個裝好的容器依賴裝完、啟動命令配好代碼生成即跑。內(nèi)置 5 個覆蓋大多數(shù)場景Python 數(shù)據(jù)分析師像 Jupyter 單元格一樣跑代碼擅長數(shù)據(jù)分析和可視化Next.js 開發(fā)者全棧 Web 應(yīng)用生成后自動刷新Vue.js 開發(fā)者Nuxt 3 單頁應(yīng)用明確要求 Vue 時才激活Streamlit 開發(fā)者數(shù)據(jù)應(yīng)用圖表是它的強(qiáng)項(xiàng)Gradio 開發(fā)者數(shù)據(jù)科學(xué)應(yīng)用這 5 個模板與 lib/templates.json 一一對應(yīng)名字、依賴、端口都寫在里面。fragments 怎么配置加模型 6 行 JSON模板 3 步這節(jié)是干嘛的深度定制。最常改的兩個文件模型和模板。加新模型只需改 6 行 JSON打開前面說的那個模型清單文件在 models 列表里加一條{ id: your-model-id, name: 模型顯示名, provider: 提供商名, providerId: provider-tag }id 是調(diào) API 用的模型 IDname 是頁面顯示名providerId 必須是系統(tǒng)里已有的標(biāo)簽如 openai、anthropic、mistral。選已接好的標(biāo)簽不用改別的代碼重啟服務(wù)就能用。真想接全新提供商才需要在模型配置文件里加一行連接函數(shù)本文場景選現(xiàn)成的就夠。注冊新模板只要 3 步在 sandbox-templates/ 下新建文件夾放e2b.Dockerfile基礎(chǔ)鏡像 裝依賴和e2b.toml容器啟動命令用 E2B CLI 構(gòu)建推送e2b template build --name 你的模板名到 lib/templates.json 登記顯示名、依賴列表、入口文件、端口可空再寫一句給模型看的指令部署也不復(fù)雜Vercel 上連倉庫、同步環(huán)境變量push 即自動部署。自托管就npm run build再npm start套 Nginx 反代和 SSL。如需行為分析可接 PostHog?？ㄗ×税Y狀 → 一句話解法這節(jié)是干嘛的異常兜底。fragments 安裝后最常見的問題每條一句修好。端口 3000 被占 →npm run dev -- -p 3001換端口不用查誰占的依賴裝不上 →npm cache clean --force清緩存刪掉 node_modules 重裝環(huán)境變量不生效 → 九成是文件名寫錯正確叫法.env.local改完重啟 dev 服務(wù)E2B 密鑰報錯 → 回官網(wǎng)重新拿 key檢查E2B_API_KEY拼寫?? 部署到公網(wǎng)時順手把三個安全習(xí)慣加上密鑰一律不進(jìn)倉庫敏感信息全放.env.local本地私有配置不進(jìn) git開啟速率限制RATE_LIMIT_MAX_REQUESTS50配RATE_LIMIT_WINDOW15m按 IP 控量共享部署設(shè)NEXT_PUBLIC_NO_API_KEY_INPUTtrue不讓頁面密鑰輸入被亂改找 AI 代碼生成工具推薦的話它是少數(shù)真能在自己機(jī)器上跑起來、還能自由擴(kuò)展的?，F(xiàn)在打開終端敲下第一條命令?！久赓M(fèi)下載鏈接】fragmentsOpen-source Next.js template for building apps that are fully generated by AI. By E2B.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/fragments創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 10 分鐘手把手：fragments 安裝配置，從零跑通第一個 AI 生成應(yīng)用
10 分鐘手把手fragments 安裝配置從零跑通第一個 AI 生成應(yīng)用【免費(fèi)下載鏈接】fragmentsOpen-source Next.js template for building apps that are fully generated by AI. By E2B.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/fragments你在輸入框里打了一句做個記賬小程序幾秒后瀏覽器里已經(jīng)能點(diǎn)了。這就是 fragments 這個 AI 應(yīng)用生成器帶來的體驗(yàn)。它是一個多模型 Next.js 模板。接下來 10 分鐘你也能在自己機(jī)器上生出一個。fragments 安裝最短路徑5 條命令跑起來 這節(jié)是干嘛的最短路徑。5 條命令10 分鐘拿到一個能點(diǎn)的應(yīng)用。系統(tǒng)要求只有一行Node 18 即可其余裝依賴時自動拉。git clone https://gitcode.com/GitHub_Trending/fr/fragments # 拿到模板 cd fragments # 進(jìn)項(xiàng)目目錄 npm i # 裝全部依賴 echo E2B_API_KEYyour-e2b-key .env.local # 唯一必填的環(huán)境變量 npm run dev # 啟動本地服務(wù)服務(wù)起來后瀏覽器打開 http://localhost:3000。左邊是聊天輸入框右邊是實(shí)時輸出區(qū)。生成的代碼跑在遠(yuǎn)端沙盒云上的隔離執(zhí)行環(huán)境不碰你的機(jī)器。這個 Next.js 模板自帶 shadcn/ui、TailwindCSS、多模型切換和流式輸出開箱即用。一條命令裝完依賴npm i會把 package.json 里列的包一次拉齊。包括 Next.js 14、shadcn/ui、TailwindCSS、Vercel AI SDK、E2B 沙盒 SDK。不用你手動裝任何一個。只有 1 個必填環(huán)境變量第 4 條命令建的是.env.local本地私有配置不進(jìn) git。真正要知道的就兩行# 必填沙盒執(zhí)行環(huán)境密鑰E2B 官網(wǎng)注冊獲取 E2B_API_KEYyour-e2b-key # 建議提前填模型密鑰不填則每次在頁面輸入 OPENAI_API_KEYyour-openai-key為什么只有 E2B 的鑰匙必填因?yàn)樯傻拇a要在 E2B 的遠(yuǎn)端沙盒里跑密鑰是入場券。模型密鑰你也可以每次在頁面右上角輸入填進(jìn) env 只是省掉這步。多人共享部署想關(guān)掉頁面輸入框就再加NEXT_PUBLIC_NO_API_KEY_INPUTtrue。fragments 支持哪些模型和模板這節(jié)是干嘛的能力盤點(diǎn)。模型和模板怎么選一張圖看明白。模型 4 組就夠選fragments 支持哪些模型完整清單在 lib/models.json。這個 AI 應(yīng)用生成器的默認(rèn)清單不用背記住 4 組選擇邏輯就行第一次用選求穩(wěn)那組不會踩坑。5 個沙盒模板各管一攤模板就是執(zhí)行沙盒。每個模板是個裝好的容器依賴裝完、啟動命令配好代碼生成即跑。內(nèi)置 5 個覆蓋大多數(shù)場景Python 數(shù)據(jù)分析師像 Jupyter 單元格一樣跑代碼擅長數(shù)據(jù)分析和可視化Next.js 開發(fā)者全棧 Web 應(yīng)用生成后自動刷新Vue.js 開發(fā)者Nuxt 3 單頁應(yīng)用明確要求 Vue 時才激活Streamlit 開發(fā)者數(shù)據(jù)應(yīng)用圖表是它的強(qiáng)項(xiàng)Gradio 開發(fā)者數(shù)據(jù)科學(xué)應(yīng)用這 5 個模板與 lib/templates.json 一一對應(yīng)名字、依賴、端口都寫在里面。fragments 怎么配置加模型 6 行 JSON模板 3 步這節(jié)是干嘛的深度定制。最常改的兩個文件模型和模板。加新模型只需改 6 行 JSON打開前面說的那個模型清單文件在 models 列表里加一條{ id: your-model-id, name: 模型顯示名, provider: 提供商名, providerId: provider-tag }id 是調(diào) API 用的模型 IDname 是頁面顯示名providerId 必須是系統(tǒng)里已有的標(biāo)簽如 openai、anthropic、mistral。選已接好的標(biāo)簽不用改別的代碼重啟服務(wù)就能用。真想接全新提供商才需要在模型配置文件里加一行連接函數(shù)本文場景選現(xiàn)成的就夠。注冊新模板只要 3 步在 sandbox-templates/ 下新建文件夾放e2b.Dockerfile基礎(chǔ)鏡像 裝依賴和e2b.toml容器啟動命令用 E2B CLI 構(gòu)建推送e2b template build --name 你的模板名到 lib/templates.json 登記顯示名、依賴列表、入口文件、端口可空再寫一句給模型看的指令部署也不復(fù)雜Vercel 上連倉庫、同步環(huán)境變量push 即自動部署。自托管就npm run build再npm start套 Nginx 反代和 SSL。如需行為分析可接 PostHog?？ㄗ×税Y狀 → 一句話解法這節(jié)是干嘛的異常兜底。fragments 安裝后最常見的問題每條一句修好。端口 3000 被占 →npm run dev -- -p 3001換端口不用查誰占的依賴裝不上 →npm cache clean --force清緩存刪掉 node_modules 重裝環(huán)境變量不生效 → 九成是文件名寫錯正確叫法.env.local改完重啟 dev 服務(wù)E2B 密鑰報錯 → 回官網(wǎng)重新拿 key檢查E2B_API_KEY拼寫?? 部署到公網(wǎng)時順手把三個安全習(xí)慣加上密鑰一律不進(jìn)倉庫敏感信息全放.env.local本地私有配置不進(jìn) git開啟速率限制RATE_LIMIT_MAX_REQUESTS50配RATE_LIMIT_WINDOW15m按 IP 控量共享部署設(shè)NEXT_PUBLIC_NO_API_KEY_INPUTtrue不讓頁面密鑰輸入被亂改找 AI 代碼生成工具推薦的話它是少數(shù)真能在自己機(jī)器上跑起來、還能自由擴(kuò)展的?，F(xiàn)在打開終端敲下第一條命令?！久赓M(fèi)下載鏈接】fragmentsOpen-source Next.js template for building apps that are fully generated by AI. By E2B.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/fragments創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考