조각: Anthropic의 클로드 아티팩트, Vercel v0 또는 GPT 엔지니어와 같은 애플리케이션의 오픈 소스 버전입니다.

2.1K 00

일반 소개

Fragments by E2B是一个开源项目，提供了一个基于Next.js的模板，用于构建完全由AI生成的应用程序。该项目由 E2B 开发，旨在简化和加速AI应用的开发过程。它集成了多种现代技术和工具，如Next.js 14、TailwindCSS、Vercel AI SDK等，支持多种编程语言和框架，包括Python、Vue.js、Streamlit等。

构建纯前端单文件项目不错，可能受到提示词和存储上下文方法影响，很难构建并成功运行复杂的项目代码。

Fragments：类似于 Anthropic 的 Claude Artifacts、Vercel v0 或 GPT Engineer 等应用程序的开源版本

기능 목록

基于Next.js 14的应用路由和服务器操作
集成shadcn/ui和TailwindCSS进行UI设计
使用Vercel AI SDK进行AI功能集成
支持多种编程语言和框架（Python、Vue.js、Streamlit、Gradio等）
支持多种LLM提供商（OpenAI、Anthropic、Google AI等）
提供安全的代码执行环境
支持npm和pip包管理
实时UI流式更新

도움말 사용

설치 프로세스

클론 창고 在终端中运行以下命令克隆仓库：

   git clone https://github.com/e2b-dev/fragments.git

종속성 설치 进入仓库目录并安装所需依赖：

   cd fragments
npm install

환경 변수 설정 만들기.env.local文件，并设置以下环境变量：

   E2B_API_KEY=你的E2B API密钥
OPENAI_API_KEY=你的OpenAI API密钥
# 其他提供商的API密钥
ANTHROPIC_API_KEY=
GROQ_API_KEY=
FIREWORKS_API_KEY=
TOGETHER_API_KEY=
GOOGLE_AI_API_KEY=
GOOGLE_VERTEX_CREDENTIALS=
MISTRAL_API_KEY=
XAI_API_KEY=

개발 서버 시작 다음 명령을 실행하여 개발 서버를 시작합니다:

   npm run dev

웹 애플리케이션 구축 运行以下命令构建Web应用：

   npm run build

사용 가이드라인

添加自定义模板 确保已安装并登录E2B CLI。创建一个新文件夹并初始化新模板：

   e2b template init

根据需要调整生成的e2b.Dockerfile문서화.

部署模板 使用E2B CLI部署模板：

   e2b template build --name <template-name>

部署完成后，将新模板添加到lib/templates.json가운데.

添加自定义LLM模型 쇼(티켓)lib/models.json文件，添加新模型条目：

   {
"id": "mistral-large",
"name": "Mistral Large",
"provider": "Ollama",
"providerId": "ollama"
}

添加自定义LLM提供商 쇼(티켓)lib/models.ts文件，添加新提供商配置：

   fireworks: () => createOpenAI({
apiKey: apiKey || process.env.FIREWORKS_API_KEY,
baseURL: baseURL || 'https://api.fireworks.ai/inference/v1'
})(modelNameString),