안녕하세요. 저는 조시 푸크입니다. 오늘 영상에서는 볼트와 같은 오픈 소스 대안이 되는 새로운 도구 e2B Fragments를 살펴보겠습니다.
이 도구를 사용하면 프롬프트로 영어만 입력해도 아름다운 UI 컴포넌트를 바로 브라우저에서 만들 수 있습니다. 사용 방법과 셀프 호스팅 방법을 안내해 드리겠습니다. 이 도구는 OpenAI 모델, Anthropic 모델 등 다양한 모델과 함께 사용할 수 있습니다.
이전에 이 채널에서 이 도구의 이전 버전을 다뤘지만, 이제 더욱 업데이트된 새로운 버전이 출시되었습니다. 바로 확인해보겠습니다.
e2B Fragments 개요
최근 볼트를 비롯한 다양한 도구를 살펴보았습니다. 볼트는 브라우저에서 코딩하는 새로운 패러다임을 제시하는 새로운 오픈 소스 도구로, VS 코드와 유사한 인터페이스를 갖추고 있습니다. 또한 OpenEyesCanvas를 다루기도 했는데, 몇 가지 새로운 기능이 추가되었고, 언어를 포팅하고 주석을 추가할 수 있으며, 아티팩트와 유사한 멋진 인터페이스를 갖추고 있습니다. 그리고 QuArtifacts도 있습니다.
모두 고유한 장점과 단점이 있는 다양한 도구가 있으며, e2B Fragments도 마찬가지입니다. 이 회사는 e2B이고 도구 이름은 Fragments입니다. 설명에 모든 링크를 나열해 두겠습니다.
현재 클라우드 기반 버전과 셀프 호스팅 버전이 있습니다. 오늘 영상에서는 두 가지 버전을 모두 살펴보겠습니다.
1. 클라우드 기반 버전
저는 일반적으로 오픈 소스 버전에 더 중점을 두지만, 클라우드 기반 버전은 현재 무료로 사용할 수 있으므로 매우 좋습니다. GPT 3.5와 같은 것이 아니라 OpenAI 01 Preview, 01 Mini, GPT 40, GPT4 Mini Turbo, Claude Sonnet 등과 같은 다양한 모델에 무료로 접근할 수 있습니다. 별도의 API 키가 필요하지 않습니다. 가입만 하면 이용할 수 있습니다.
2. 셀프 호스팅 버전
GitHub에서 오픈 소스 버전 리포지토리를 얻을 수 있습니다. 설정 방법은 여기에서 확인할 수 있습니다. 명령어에 따라 클론한 후 프래그먼트로 이동하여 npm install을 실행하면 모든 의존성이 설치됩니다.
e2B Fragments 사용하기
이제 실제 사용법을 살펴보겠습니다.
클라우드 기반 버전:
- e2b.com으로 이동하여 무료로 가입하여 API 키를 받습니다.
- 개발자 Persona와 모델을 선택합니다.
- 프롬프트를 입력하여 AI가 UI 코드를 생성하도록 합니다.
- 코드를 확인하고 필요에 따라 수정합니다.
셀프 호스팅 버전:
- GitHub 리포지토리에서 프로젝트를 클론합니다.
- npm install 명령어로 의존성을 설치합니다.
- 환경 변수(OpenAI API 키, Anthropic API 키, e2B API 키)를 설정합니다.
- npm run dev 명령어로 개발 서버를 시작합니다.
- 개발자 Persona와 모델을 선택합니다.
- 프롬프트를 입력하여 AI가 UI 코드를 생성하도록 합니다.
- 코드를 확인하고 필요에 따라 수정합니다.
결론
e2B Fragments는 브라우저에서 아름다운 UI 컴포넌트를 구축하는 작업을 간소화하는 강력한 도구입니다. 클라우드 기반 버전과 셀프 호스팅 버전 모두 무료로 사용할 수 있으므로 원하는 버전을 선택하여 사용할 수 있습니다.