10 分钟手把手fragments 安装配置从零跑通第一个 AI 生成应用【免费下载链接】fragmentsOpen-source Next.js template for building apps that are fully generated by AI. By E2B.项目地址: https://gitcode.com/GitHub_Trending/fr/fragments你在输入框里打了一句做个记账小程序几秒后浏览器里已经能点了。这就是 fragments 这个 AI 应用生成器带来的体验。它是一个多模型 Next.js 模板。接下来 10 分钟你也能在自己机器上生出一个。fragments 安装最短路径5 条命令跑起来 这节是干嘛的最短路径。5 条命令10 分钟拿到一个能点的应用。系统要求只有一行Node 18 即可其余装依赖时自动拉。git clone https://gitcode.com/GitHub_Trending/fr/fragments # 拿到模板 cd fragments # 进项目目录 npm i # 装全部依赖 echo E2B_API_KEYyour-e2b-key .env.local # 唯一必填的环境变量 npm run dev # 启动本地服务服务起来后浏览器打开 http://localhost:3000。左边是聊天输入框右边是实时输出区。生成的代码跑在远端沙盒云上的隔离执行环境不碰你的机器。这个 Next.js 模板自带 shadcn/ui、TailwindCSS、多模型切换和流式输出开箱即用。一条命令装完依赖npm i会把 package.json 里列的包一次拉齐。包括 Next.js 14、shadcn/ui、TailwindCSS、Vercel AI SDK、E2B 沙盒 SDK。不用你手动装任何一个。只有 1 个必填环境变量第 4 条命令建的是.env.local本地私有配置不进 git。真正要知道的就两行# 必填沙盒执行环境密钥E2B 官网注册获取 E2B_API_KEYyour-e2b-key # 建议提前填模型密钥不填则每次在页面输入 OPENAI_API_KEYyour-openai-key为什么只有 E2B 的钥匙必填因为生成的代码要在 E2B 的远端沙盒里跑密钥是入场券。模型密钥你也可以每次在页面右上角输入填进 env 只是省掉这步。多人共享部署想关掉页面输入框就再加NEXT_PUBLIC_NO_API_KEY_INPUTtrue。fragments 支持哪些模型和模板这节是干嘛的能力盘点。模型和模板怎么选一张图看明白。模型 4 组就够选fragments 支持哪些模型完整清单在 lib/models.json。这个 AI 应用生成器的默认清单不用背记住 4 组选择逻辑就行第一次用选求稳那组不会踩坑。5 个沙盒模板各管一摊模板就是执行沙盒。每个模板是个装好的容器依赖装完、启动命令配好代码生成即跑。内置 5 个覆盖大多数场景Python 数据分析师像 Jupyter 单元格一样跑代码擅长数据分析和可视化Next.js 开发者全栈 Web 应用生成后自动刷新Vue.js 开发者Nuxt 3 单页应用明确要求 Vue 时才激活Streamlit 开发者数据应用图表是它的强项Gradio 开发者数据科学应用这 5 个模板与 lib/templates.json 一一对应名字、依赖、端口都写在里面。fragments 怎么配置加模型 6 行 JSON模板 3 步这节是干嘛的深度定制。最常改的两个文件模型和模板。加新模型只需改 6 行 JSON打开前面说的那个模型清单文件在 models 列表里加一条{ id: your-model-id, name: 模型显示名, provider: 提供商名, providerId: provider-tag }id 是调 API 用的模型 IDname 是页面显示名providerId 必须是系统里已有的标签如 openai、anthropic、mistral。选已接好的标签不用改别的代码重启服务就能用。真想接全新提供商才需要在模型配置文件里加一行连接函数本文场景选现成的就够。注册新模板只要 3 步在 sandbox-templates/ 下新建文件夹放e2b.Dockerfile基础镜像 装依赖和e2b.toml容器启动命令用 E2B CLI 构建推送e2b template build --name 你的模板名到 lib/templates.json 登记显示名、依赖列表、入口文件、端口可空再写一句给模型看的指令部署也不复杂Vercel 上连仓库、同步环境变量push 即自动部署。自托管就npm run build再npm start套 Nginx 反代和 SSL。如需行为分析可接 PostHog。卡住了症状 → 一句话解法这节是干嘛的异常兜底。fragments 安装后最常见的问题每条一句修好。端口 3000 被占 →npm run dev -- -p 3001换端口不用查谁占的依赖装不上 →npm cache clean --force清缓存删掉 node_modules 重装环境变量不生效 → 九成是文件名写错正确叫法.env.local改完重启 dev 服务E2B 密钥报错 → 回官网重新拿 key检查E2B_API_KEY拼写⚠️ 部署到公网时顺手把三个安全习惯加上密钥一律不进仓库敏感信息全放.env.local本地私有配置不进 git开启速率限制RATE_LIMIT_MAX_REQUESTS50配RATE_LIMIT_WINDOW15m按 IP 控量共享部署设NEXT_PUBLIC_NO_API_KEY_INPUTtrue不让页面密钥输入被乱改找 AI 代码生成工具推荐的话它是少数真能在自己机器上跑起来、还能自由扩展的。现在打开终端敲下第一条命令。【免费下载链接】fragmentsOpen-source Next.js template for building apps that are fully generated by AI. By E2B.项目地址: https://gitcode.com/GitHub_Trending/fr/fragments创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考