FragmentsAI 生成应用跑通指南【免费下载链接】fragmentsOpen-source Next.js template for building apps that are fully generated by AI. By E2B.项目地址: https://gitcode.com/GitHub_Trending/fr/fragmentsFragments 是 E2B 出品的开源 Next.js 模板在聊天框里描述需求AI 直接生成可运行的 Web 应用。相比 Claude Artifacts、v0 等同类工具它支持多家模型厂商与多种沙箱模板还能完全自托管。跑通 fragments 前的三件准备运行时Node.js npm 即可项目基于 Next.js 14推荐 Node 18具体以官方仓库最新 README 为准账号密钥一个 E2B API Key提供云端代码沙箱 至少一个 LLM 厂商 Key如 OpenAI缺了这两个就起不了生成服务网络模型调用走对应厂商接口沙箱跑在 E2B 云端两者都要能访问15 分钟跑通 fragments 最小可用版本先克隆仓库并进入目录git clone https://gitcode.com/GitHub_Trending/fr/fragments cd fragments安装依赖完成后不应有报错输出npm install在根目录新建.env.local最小可用只填两项必填变量其余开关见下文E2B_API_KEYyour-e2b-api-key OPENAI_API_KEYyour-openai-key密钥用占位符示意实际值到 E2B 和模型厂商的控制台申请。然后启动开发服务器npm run dev看到 Ready 提示后浏览器打开 http://localhost:3000应该能看到聊天页左侧选模板和模型中间输入需求右侧代码与预览实时流式更新。让它写一个待办清单页面能跑起来即代表最小可用版本跑通。fragments 模型与模板怎么选模型注册表在 lib/models.json客户端封装在 lib/models.ts。内置厂商按用途大致分三组通用主力OpenAIo1 / o3-mini / GPT-4o 系列、AnthropicClaude 3.5 Sonnet / Haiku生成质量稳适合默认选择多模态与快推Google Vertex AIGemini 1.5 / 2.0 Flash偏多模态Groq、Fireworks、Together AI 主打开源模型的高速推理本地与小众Ollama 可接本地模型另有 xAI、DeepSeek、Mistral模板决定AI 生成的应用用哪种技术栈内置五款在 sandbox-templates/并在 lib/templates.json 注册模板适合场景Python data analyst数据分析与可视化按 notebook 单元格执行Next.js developer完整 React Web 应用沙箱内 3000 端口Vue.js developerVue 3 / Nuxt 3 应用Streamlit developerPython 数据应用8501 端口Gradio developer机器学习 Demo7860 端口经验法则要做网页或 Web 应用选 Next.js做数据处理与演示选 Python、Streamlit 或 Gradio。把配置调到位fragments 环境变量高频开关所有开关都是环境变量改动后必须重启才生效。三个高频场景开放给多人用配KV_REST_API_URL和KV_REST_API_TOKENUpstash KV限流与短链发布都依赖它限流默认每人每天 10 次嫌严就用RATE_LIMIT_MAX_REQUESTS和RATE_LIMIT_WINDOW调大隐藏密钥输入框设NEXT_PUBLIC_NO_API_KEY_INPUTtrue、NEXT_PUBLIC_NO_BASE_URL_INPUTtrue用户只能用服务端配置的密钥登录与行为统计多用户身份用 Supabase配SUPABASE_URL和SUPABASE_ANON_KEY想看生成行为数据再配 PostHog 的NEXT_PUBLIC_POSTHOG_KEY与NEXT_PUBLIC_POSTHOG_HOST可选项卡住了先看这里fragments 高频故障提示 429 You have reached your request limit限流只在用户未自带密钥且已配 KV 时生效默认每天 10 次调大RATE_LIMIT_MAX_REQUESTS后重启即可端口 3000 被占用换端口启动npm run dev -- -p 3001生成时报 E2B 或沙箱相关错误多为 Key 无效或余额不足到 E2B 控制台重新签发并更新.env.local改了环境变量没反应文件名必须是.env.local且要重启开发服务器首次响应特别慢首个请求要冷启动 E2B 云端沙箱后续会快属正常开发模式已用next dev --turbo加速编译fragments 部署步骤与二次开发托管平台如 Vercel连接仓库并新建项目在控制台填入上述环境变量不要提交进仓库构建命令用npm run build每次 push 自动触发部署自托管npm run build npm start启动生产服务用 PM2 或 systemd 守护进程Nginx 反代并终结 TLS多用户场景务必先配 KV 与限流变量进阶能力点到为止新增模型在 lib/models.json 加一条记录或到 lib/models.ts 扩展厂商客户端新增模板在 sandbox-templates/ 下建目录、写好e2b.Dockerfile与e2b.toml用 E2B CLI 构建后到 lib/templates.json 注册行为分析走 PostHog 环境变量接入。细节以官方仓库最新 README 为准。fragments 把一句话到可运行应用的门槛压得很低沙箱隔离了代码执行多模型支持让你按需切换 LLM自托管又把它变成团队内部可用的生产力工具。本地跑通之后马上可以再做三件事换成你实际使用的模型 Key用默认 Next.js 模板完整走一遍生成流程分别用 Python 和 Next.js 模板各生成一个页面对比两类模板的产出差异准备多人上线前先把 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），仅供参考 Fragments：AI 生成应用跑通指南
FragmentsAI 生成应用跑通指南【免费下载链接】fragmentsOpen-source Next.js template for building apps that are fully generated by AI. By E2B.项目地址: https://gitcode.com/GitHub_Trending/fr/fragmentsFragments 是 E2B 出品的开源 Next.js 模板在聊天框里描述需求AI 直接生成可运行的 Web 应用。相比 Claude Artifacts、v0 等同类工具它支持多家模型厂商与多种沙箱模板还能完全自托管。跑通 fragments 前的三件准备运行时Node.js npm 即可项目基于 Next.js 14推荐 Node 18具体以官方仓库最新 README 为准账号密钥一个 E2B API Key提供云端代码沙箱 至少一个 LLM 厂商 Key如 OpenAI缺了这两个就起不了生成服务网络模型调用走对应厂商接口沙箱跑在 E2B 云端两者都要能访问15 分钟跑通 fragments 最小可用版本先克隆仓库并进入目录git clone https://gitcode.com/GitHub_Trending/fr/fragments cd fragments安装依赖完成后不应有报错输出npm install在根目录新建.env.local最小可用只填两项必填变量其余开关见下文E2B_API_KEYyour-e2b-api-key OPENAI_API_KEYyour-openai-key密钥用占位符示意实际值到 E2B 和模型厂商的控制台申请。然后启动开发服务器npm run dev看到 Ready 提示后浏览器打开 http://localhost:3000应该能看到聊天页左侧选模板和模型中间输入需求右侧代码与预览实时流式更新。让它写一个待办清单页面能跑起来即代表最小可用版本跑通。fragments 模型与模板怎么选模型注册表在 lib/models.json客户端封装在 lib/models.ts。内置厂商按用途大致分三组通用主力OpenAIo1 / o3-mini / GPT-4o 系列、AnthropicClaude 3.5 Sonnet / Haiku生成质量稳适合默认选择多模态与快推Google Vertex AIGemini 1.5 / 2.0 Flash偏多模态Groq、Fireworks、Together AI 主打开源模型的高速推理本地与小众Ollama 可接本地模型另有 xAI、DeepSeek、Mistral模板决定AI 生成的应用用哪种技术栈内置五款在 sandbox-templates/并在 lib/templates.json 注册模板适合场景Python data analyst数据分析与可视化按 notebook 单元格执行Next.js developer完整 React Web 应用沙箱内 3000 端口Vue.js developerVue 3 / Nuxt 3 应用Streamlit developerPython 数据应用8501 端口Gradio developer机器学习 Demo7860 端口经验法则要做网页或 Web 应用选 Next.js做数据处理与演示选 Python、Streamlit 或 Gradio。把配置调到位fragments 环境变量高频开关所有开关都是环境变量改动后必须重启才生效。三个高频场景开放给多人用配KV_REST_API_URL和KV_REST_API_TOKENUpstash KV限流与短链发布都依赖它限流默认每人每天 10 次嫌严就用RATE_LIMIT_MAX_REQUESTS和RATE_LIMIT_WINDOW调大隐藏密钥输入框设NEXT_PUBLIC_NO_API_KEY_INPUTtrue、NEXT_PUBLIC_NO_BASE_URL_INPUTtrue用户只能用服务端配置的密钥登录与行为统计多用户身份用 Supabase配SUPABASE_URL和SUPABASE_ANON_KEY想看生成行为数据再配 PostHog 的NEXT_PUBLIC_POSTHOG_KEY与NEXT_PUBLIC_POSTHOG_HOST可选项卡住了先看这里fragments 高频故障提示 429 You have reached your request limit限流只在用户未自带密钥且已配 KV 时生效默认每天 10 次调大RATE_LIMIT_MAX_REQUESTS后重启即可端口 3000 被占用换端口启动npm run dev -- -p 3001生成时报 E2B 或沙箱相关错误多为 Key 无效或余额不足到 E2B 控制台重新签发并更新.env.local改了环境变量没反应文件名必须是.env.local且要重启开发服务器首次响应特别慢首个请求要冷启动 E2B 云端沙箱后续会快属正常开发模式已用next dev --turbo加速编译fragments 部署步骤与二次开发托管平台如 Vercel连接仓库并新建项目在控制台填入上述环境变量不要提交进仓库构建命令用npm run build每次 push 自动触发部署自托管npm run build npm start启动生产服务用 PM2 或 systemd 守护进程Nginx 反代并终结 TLS多用户场景务必先配 KV 与限流变量进阶能力点到为止新增模型在 lib/models.json 加一条记录或到 lib/models.ts 扩展厂商客户端新增模板在 sandbox-templates/ 下建目录、写好e2b.Dockerfile与e2b.toml用 E2B CLI 构建后到 lib/templates.json 注册行为分析走 PostHog 环境变量接入。细节以官方仓库最新 README 为准。fragments 把一句话到可运行应用的门槛压得很低沙箱隔离了代码执行多模型支持让你按需切换 LLM自托管又把它变成团队内部可用的生产力工具。本地跑通之后马上可以再做三件事换成你实际使用的模型 Key用默认 Next.js 模板完整走一遍生成流程分别用 Python 和 Next.js 模板各生成一个页面对比两类模板的产出差异准备多人上线前先把 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），仅供参考