尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
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_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),仅供参考
RELATED

相关推荐

Laya训练原理揭秘:RLCD如何用严格评分规则逼出诚实概率?REINFORCE与 TD(λ) 更新完整详解

Laya训练原理揭秘:RLCD如何用严格评分规则逼出诚实概率?REINFORCE与 TD(λ) 更新完整详解

Laya训练原理揭秘:RLCD如何用严格评分规则逼出诚实概率?REINFORCE与 TD(λ) 更新完整详解 【免费下载链接】laya 项目地址: https://ai.gitcode.com/hf_mirrors/convaiinnovations/laya Laya 是一个多语言、非自回归的 System 1 决策模型&#x…

📅 2026/9/24 14:50:02
PaddleNLP DebertaV2Tokenizer 源码级解析:基于 SentencePiece 的 DeBERTa-v2/v3 分词器实战指南

PaddleNLP DebertaV2Tokenizer 源码级解析:基于 SentencePiece 的 DeBERTa-v2/v3 分词器实战指南

人工智能大模型预训练微调LoRARLHF强化学习分布式训练 【免费下载链接】PaddleNLP Easy-to-use and powerful LLM and SLM library with awesome model zoo. 项目地址: https://gitcode.com/gh_mirrors/pa/PaddleNLP 点击查看 免费下载 DeBERTa-v2/v3 系列模型采用…

📅 2026/9/24 14:50:02
Simulation与Emulation的区别:从芯片验证到产线仿真的选型指南

Simulation与Emulation的区别:从芯片验证到产线仿真的选型指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/9/24 14:50:02
MORE NEWS

更多资讯

📰

AC/DC电源模块选型与实战避坑指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

ESP32-C3 AI工牌拆解:低成本硬件如何实现语音交互

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

跨境电商多平台数据能整合吗?亚马逊、Temu、Shopee、TikTok 数据统一管理的 3 类工具盘点

先说结论:可以整合。亚马逊、Temu、Shopee、TikTok 的多平台数据,可以接入同一套体系里统一管理,实现跨平台的订单、广告、库存、利润一体化分析。关键不在"能不能",而在"用哪类工具、怎么组合"。 市面上的跨…

📰

KernelSU GKI LKM 模式切换指南

KernelSU GKI LKM 模式切换指南 【免费下载链接】KernelSU A Kernel based root solution for Android 项目地址: https://gitcode.com/GitHub_Trending/ke/KernelSU KernelSU 是一款基于 Android 内核的 root 方案,通过在内核里钩住系统事件来授权和管理模块…

📰

【银河麒麟】桌面系统安装某软件后部分目录挂载失败

【问题描述】一台银河麒麟V10桌面系统,安装某软件之后,部分目录挂载失败,无法正常进入图形界面,报错如下:/lib/aarch64-linux-gnu/libmount.so.1: version "MOUNT_2.33" not found (required by mount)【排查…

📰

Token 到底是什么?

Token 到底是什么?前言一、大模型的基本工作原理二、Tokenizer 的编码和解码过程1. 编码2. 解码三、Tokenizer的训练过程1. 案例-BPE算法四、Tokenizer 的使用过程1. 编码2. 解码五、Token 与字数的换算关系前言 相信大家都听说过 Context Window 这个概念&#xf…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬