e2b-dev/fragments

Claude Artifacts처럼 AI가 코드를 생성하고 브라우저에서 바로 실행·편집할 수 있는 오픈소스 웹앱

완성 앱맘대로 써도 됨 · Apache-2.0웹·Next.js·풀스택난이도
6,320+0이번 주8659TypeScript
데모·홈페이지 열기fragments.e2b.dev
중간맛 분석

Next.js 14(App Router, Server Actions), shadcn/ui, TailwindCSS, Vercel AI 기반의 풀스택 앱입니다. 백엔드에서 E2B 샌드박스를 통해 AI 생성 코드를 안전하게 격리 실행하고, 프론트엔드에서 스트리밍으로 UI에 렌더링합니다. Python, Next.js, Vue, Streamlit, Gradio 5가지 스택과 8개 LLM 프로바이더를 지원하며, /pip 패키지 설치도 가능합니다. 즉시 실행 가능한 데모가 fragments.e2b.dev에서 제공됩니다.

이런 레포예요

이럴 때 쓰면 좋아요

  • AI 어시스턴트와 협력하여 웹앱, 데이터 시각화, 스트림릿 앱을 빠르게 프로토타이핑하고 테스트
  • 여러 LLM 프로바이더를 한 곳에서 비교·테스트하여 최적의 모델 선택
  • 조직 내에서 Claude Artifacts나 v0 같은 기능을 자체 서버에 배포하여 사용

핵심 기능

8개 LLM 프로바이더(OpenAI, Anthropic, Google AI, Mistral, Groq, Fireworks, Together AI, Ollama) 지원Python, Next.js, Vue, Streamlit, Gradio 5가지 코드 스택 실행E2B 샌드박스로 생성된 코드 안전하게 격리 실행 및 실시간 스트리밍

대안 대비 차별점

Claude Artifacts와 v0처럼 동작하지만 완전히 오픈소스이며 사용자가 LLM·샌드박스 템플릿·프로바이더를 직접 커스터마이징할 수 있고, 단일 인터페이스에서 여러 LLM을 비교할 수 있습니다.

준비물
  • git
  • Node.js (최신 버전)
  • npm
  • E2B API Key
  • LLM 프로바이더 API Key (OpenAI, Anthropic, Groq 등 중 최소 1개)
바로 시작하기

  1. git, Node.js, E2B API Key, LLM 프로바이더 API Key 준비

  2. 저장소 클론

git clone https://github.com/e2b-dev/fragments.git
  1. 디렉토리 이동 및 의존성 설치
cd fragments
npm i
  1. .env.local 파일 생성 및 환경 변수 설정
# E2B_API_KEY="your-e2b-api-key" (필수)
# OPENAI_API_KEY= 또는 ANTHROPIC_API_KEY= 등 (필수, 최소 1개)
  1. 개발 서버 시작
npm run dev
  1. 브라우저에서 http://localhost:3000 (또는 표시된 주소) 접속
별 추이 · 7일
6,320+0 / 7일
활용성 · 따라 만들기 좋은가
샘플 점수 34/100
  • 관대한 라이선스
  • 테스트 있음
  • 예제 디렉토리
  • 최근 활동
  • AGENTS.md
  • llms.txt
  • 템플릿

🟢 최근 활동 있음 · 2024년 생성

AI가 README 기반으로 요약했습니다 · 원문 보기