如何在本地跑起 fragments：开源 AI 应用生成器完整配置指南（Next.js 模板）

如何在本地跑起 fragments开源 AI 应用生成器完整配置指南Next.js 模板【免费下载链接】fragmentsOpen-source Next.js template for building apps that are fully generated by AI. By E2B.项目地址: https://gitcode.com/GitHub_Trending/fr/fragments你不需要手写一行代码——在对话框里敲一句做个 todo app几分钟后一个能跑的 Web 应用就生成好了右边还有实时预览自动刷新。这就是 fragments 干的事一个基于 Next.js 模板的开源 AI 应用生成器代码由大模型全权编写再丢进安全沙箱里真实运行。这篇文章带你从零把它跑起来再顺手讲清楚怎么调教它。跑起来之前先自查环境和两把钥匙环境门槛不高机器上有 git、较新的 Node.js16 以上建议 18和 npm 就够了。真正要花心思的是两把钥匙E2B API Key给沙箱执行环境用的模型写出的代码靠它安全地跑起来去 E2B 官网领取一个 LLM 提供商的 KeyOpenAI、Anthropic、Google 任选其一即可想零开销也可以把 Ollama 指向本地模型。fragments 本地跑通的最小命令整个流程三步克隆、装依赖、启动。git clone https://gitcode.com/GitHub_Trending/fr/fragments cd fragments npm i第一行把源码拉到本地第二行进目录装好全部依赖。接着在项目根目录建一个.env.local文件把密钥填进去下面细说然后npm run dev浏览器打开本地地址聊天界面就出来了。.env.local必填两项推荐三个开关最小配置长这样E2B_API_KEYyour-e2b-api-key OPENAI_API_KEYsk-your-openai-key第一行是沙箱钥匙第二行是模型钥匙——模型提供商挑一家填就行其余留空。想用别家时照葫芦画蛇加上即可比如ANTHROPIC_API_KEY、GOOGLE_AI_API_KEY、GROQ_API_KEY都是同一个文件的平级配置项。还有三个可选开关值得知道NEXT_PUBLIC_NO_API_KEY_INPUTtrue和NEXT_PUBLIC_NO_BASE_URL_INPUTtrue把聊天界面里的密钥输入框藏掉适合内部团队封闭使用RATE_LIMIT_MAX_REQUESTS搭配RATE_LIMIT_WINDOW比如1001h控制每个用户的生成频率防止跑飞KV 存储、Supabase登录、PostHog行为分析这几项全都可以留空不影响核心功能。模型与模板怎么选模型清单维护在 lib/models.json内置九家提供商OpenAIGPT-4o、o1、o3-mini 等、Claude 3.5 Sonnet/Haiku、Gemini 1.5/2.0 系列、Mistral Codestral、Groq Llama 3.3 70B、FireworksLlama 3.1 405B、Qwen、DeepSeek R1、Together AI、xAI Grok、DeepSeek V3外加 Ollama 本地模型——想省 API 账单的话它是正解。模板persona决定模型写出来的是什么东西内置五种定义见 lib/templates.json沙箱基础镜像在 sandbox-templates/ 下各自成目录Python data analyst代码像 Jupyter 单元格一样执行数据分析、可视化是强项Next.js / Vue.js developer写 Web 应用预览端口 3000Streamlit8501/ Gradio7860数据仪表盘和小工具类应用。选择逻辑很简单搞数据选 Python做网页选 Next.js 或 Vue发布小工具选 Streamlit 或 Gradio。跑起来之后往哪调教底座是 Next.js 14App Router Server Actions配 Vercel AI SDK界面支持流式输出生成的代码运行时还能自由安装 npm 和 pip 包。想扩展三个入口加模型往 lib/models.json 追加一条记录id、name、provider、providerId四个字段UI 下拉里立刻能选到加提供商在 lib/models.ts 的providerConfigs里登记OpenAI 兼容的 API 基本就是createOpenAI加自定义 baseURL 的事加模板在 sandbox-templates/ 新建文件夹用 E2B CLI 的e2b template init生成e2b.Dockerfilee2b.toml里写好启动命令e2b template build构建发布最后回 lib/templates.json 登记即可。避坑速查常见问题一次说清改了环境变量不生效.env.local不吃热更新重启npm run dev就好3000 端口被占npm run dev -- -p 3001换个端口依赖装出幺蛾子npm cache clean --force清缓存删掉node_modules重装E2B 密钥报错回官网确认 Key 有效并核对.env.local里的变量名没拼错安全红线⚠️密钥只放环境变量永远别提交进代码仓库。部署要点Vercel 到自托管要长期给团队用两条路Vercel 托管接入仓库、在控制台配好环境变量之后每次 push 自动部署最省心自托管npm run build构建生产版npm start启动用 PM2 之类进程管理器保活前面挂 Nginx 做反向代理和 SSL。对外放入口时记得把限流开关配上并启用 KV 存储——短链接和限流数据才能重启不丢。【免费下载链接】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），仅供参考