fragments 上手指南：5 分钟搭一个多模型 AI 应用生成工厂

fragments 上手指南5 分钟搭一个多模型 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 直接吐出一个能跑的小应用fragments 是 E2B 开源的 Next.js 模板干的正是这件事你输入一句需求它写完代码、丢进云沙箱执行最后把可预览的 AI 应用交到你手上。它是 Claude Artifacts 和 Vercel v0 的自托管版本区别在于模型能换、模板能换、沙箱也能换。这篇文章先用 5 分钟带你从 clone 走到本地跑起来再讲模型体系、沙箱模板以及上线前必须做的三件事。5 分钟跑通环境检查、密钥一次配齐、dev 服务器拉起开始前确保三样东西就位较新版本的 Node.js建议 18.x 以上、Git以及两个 API 密钥——E2B 云沙箱用的密钥和至少一个大模型厂商的密钥。先克隆仓库并装好依赖git clone https://gitcode.com/GitHub_Trending/fr/fragments cd fragments npm install接着在根目录新建.env.local文件填密钥。只有前两行是必须的其余用到哪个再补哪个变量名必填/可选说明E2B_API_KEY必填E2B 云沙箱密钥在 E2B 官网控制台获取OPENAI_API_KEY必填任选其一任选一个厂商的密钥填入可换成下表其他行ANTHROPIC_API_KEY / GROQ_API_KEY / FIREWORKS_API_KEY / TOGETHER_API_KEY / MISTRAL_API_KEY / XAI_API_KEY / DEEPSEEK_API_KEY可选其他模型厂商的密钥按需填写GOOGLE_AI_API_KEY / GOOGLE_VERTEX_CREDENTIALS可选Gemini 系列Vertex 走 JSON 格式的凭据NEXT_PUBLIC_SITE_URL可选你的站点域名NEXT_PUBLIC_NO_API_KEY_INPUT / NEXT_PUBLIC_NO_BASE_URL_INPUT可选设为 true 隐藏前端聊天里的密钥输入框RATE_LIMIT_MAX_REQUESTS / RATE_LIMIT_WINDOW可选速率限制如 100 次 / 1hKV_REST_API_URL / KV_REST_API_TOKEN可选Upstash KV用于短链和限流计数SUPABASE_URL / SUPABASE_ANON_KEY可选开启 Supabase 用户登录体系NEXT_PUBLIC_POSTHOG_KEY / NEXT_PUBLIC_POSTHOG_HOST可选PostHog 行为分析这步别跳.env.local只在进程启动时读取之后改了密钥必须重启 dev 服务器才生效。密钥填好后直接启动npm run devdev 脚本默认带上了--turbo冷启动很快浏览器打开 http://localhost:3000 就能看到聊天界面选好模型和模板输入需求开始生成。⚠️ 3000 端口被占用就用npm run dev -- -p 3001换端口依赖装失败先跑npm cache clean --force删掉 node_modules 重装。模型与模板能力速览五大厂商、五个内置沙箱还能自己扩fragments 基于 Next.js 14模型调用统一走 Vercel AI SDK大模型调用的抽象层一套接口调所有厂商内置清单在 lib/models.json厂商代表模型一句话备注OpenAIGPT-4o、o1、o3-mini稳定默认项支持多模态AnthropicClaude 3.5 Sonnet长上下文写代码结构化输出友好Google VertexGemini 1.5 Pro、2.0 Flash企业级入口走 GOOGLE_VERTEX_CREDENTIALSGroq / Fireworks / Together / DeepSeekLlama、DeepSeek V3 等OpenAI 兼容协议推理速度快Ollama任意本地模型不用密钥本地模型白嫖模板决定 AI 写出来的应用长什么样。sandbox-templates/ 下内置了 5 个沙箱模板统一在 模板注册配置 里登记Python data analystcode-interpreter-v1像 Jupyter notebook 单元格一样跑代码matplotlib、plotly 画数据可视化Next.js developerTypeScript Tailwind端口 3000 自动热重载预览Vue.js developerNuxt 3端口 3000Streamlit数据应用端口 8501Gradio数据科学 UI端口 7860 想加自己的新模型在 lib/models.json 补一条id、name、provider、providerId 四个字段新模板在 sandbox-templates/ 下建文件夹写e2b.Dockerfile和e2b.toml用 E2B CLI 构建部署后再登记进 lib/templates.json。先别急着改新手建议把内置模板玩透再动手扩。生产落地三件事密钥不落库、限流、反向代理 SSL️ 上线前先过一遍这份清单。密钥不落库.env.local只用于本地开发生产环境的密钥走托管平台的环境变量注入仓库里永远不该出现明文密钥。对外开放多用户使用时把NEXT_PUBLIC_NO_API_KEY_INPUT和NEXT_PUBLIC_NO_BASE_URL_INPUT都设为true避免用户在页面里随意填密钥。速率限制配置RATE_LIMIT_MAX_REQUESTS和RATE_LIMIT_WINDOW比如 100 / 1h更严一点 50 / 15m防止单个 IP 把你的模型配额刷爆这组配置需要配合KV_REST_API_URL和KV_REST_API_TOKEN才能生效。反向代理 SSL先npm run build再npm start拉起进程交给 PM2 托管前面挂一层 Nginx 做反向代理并挂上证书。想追踪使用数据的话把NEXT_PUBLIC_POSTHOG_KEY和NEXT_PUBLIC_POSTHOG_HOST配上接上 PostHog。高频卡点速查五个最容易卡住你的场景E2B 密钥一直报错 → 确认密钥来自 E2B 官网控制台变量名必须是E2B_API_KEY改了环境变量不生效 → 重启 dev 服务器变量只在启动时读取端口冲突 →npm run dev -- -p 3001npm install失败 →npm cache clean --force加删 node_modules 重装选了模型没反应 → 确认对应厂商的密钥已填Ollama 需要本地服务先跑起来fragments 就是一个能自己托管的需求进、应用出工厂跑通之后真正的乐趣在于把模板改成你的业务形状。现在就去 lib/templates.json 加一个属于你的模板吧——比如一个 FastAPI 服务或者一个 Django 应用。【免费下载链接】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），仅供参考