10 分钟手把手：fragments 安装配置，从零跑通第一个 AI 生成应用-开发者社区

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_KEY="your-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_KEY="your-e2b-key" # 建议提前填：模型密钥（不填则每次在页面输入） OPENAI_API_KEY="your-openai-key"

为什么只有 E2B 的钥匙必填？因为生成的代码要在 E2B 的远端沙盒里跑，密钥是入场券。模型密钥你也可以每次在页面右上角输入，填进 env 只是省掉这步。多人共享部署想关掉页面输入框，就再加NEXT_PUBLIC_NO_API_KEY_INPUT="true"。

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 用的模型 ID，name 是页面显示名，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_REQUESTS="50"配RATE_LIMIT_WINDOW="15m"，按 IP 控量
共享部署设NEXT_PUBLIC_NO_API_KEY_INPUT="true"，不让页面密钥输入被乱改

找 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），仅供参考