fx0 – 경량 AI 기반 디자인 에이전트

소개

• 웹 페이지를 일반 텍스트로 설명하면 단일 파일 HTML 디자인을 반환하는 오픈 소스 웹 앱입니다.
• 스트리밍, 도구 호출, 재시도 및 세션 지속성을 갖춘 지속 가능한 LLM 에이전트 루프를 제공하는 라이브러리인 libfx를 기반으로 구축되었습니다.
• Vercel에서 호스팅되며, 모델 호출에는 Vercel AI Gateway, 실시간 채팅 상태에는 Redis(Upstash), 지속적인 계정 및 디자인 버전에는 Neon Postgres를 사용합니다.

주요 기능

• 원클릭 디자인 – 설명을 입력하면 에이전트가 페이지를 하나의 HTML 파일로 작성합니다(최대 512KB, 외부 에셋 없음).
• 지속 가능한 세션 – 서버리스 함수가 충돌하거나 시간 제한에 도달해도 Vercel Queues와 libfx가 마지막으로 저장된 단계부터 재개하므로 작업이 손실되지 않습니다.
• 유연한 결제 – 로그인한 사용자는 AI Gateway를 통해 모델 사용량을 자신의 Vercel 팀에 청구할 수 있습니다. 무료 체험 모드는 BotID로 보호되는 IP당 5개의 Opus 5.5 Fast 프롬프트를 제공합니다.
• 도구 세트 – 에이전트는 웹 페이지 가져오기, 웹 검색, 디자인 파일 읽기/쓰기, 긴 도구 결과 페이지 매기기 및 하위 에이전트 생성(createFxEngine() 사용)이 가능합니다.
• 디자인 템플릿 – 커뮤니티에서 큐레이션한 10개의 design.md 스타일(VoltAgent의 awesome-design-md에서 제공)로 시작하거나 직접 업로드할 수 있습니다.
• 실시간 미리보기 – 생성된 HTML은 엄격한 CSP가 적용된 샌드박스 iframe으로 스트리밍되므로 미리보기에서 쿠키에 액세스하거나 네트워크 요청을 수행할 수 없습니다.
• 버전 기록 – 각 턴마다 새로운 디자인 버전이 생성되어 다시 열거나 복사하거나 다운로드할 수 있습니다.

작동 원리

1. 사용자가 메시지 전송 – 프론트엔드가 이를 Redis에 저장하고 libfx 세션으로 전달합니다.
2. libfx가 턴 실행 – createFxAgent()가 지속 가능한 에이전트를 생성하고, 턴이 모델 루프를 실행하며 도구를 호출하고 결과를 스트리밍합니다.
3. 지속성 계층 – 각 단계는 Vercel Workflow World에 저장됩니다. 함수가 종료되면 Vercel Queues가 app/api/libfx/route.ts를 트리거하여 마지막으로 저장된 단계부터 재개합니다.
4. UI로 스트리밍 – 에이전트의 출력 스트림이 채팅 기록에 복사되고 동시에 지속성을 위해 Neon Postgres에 기록됩니다.
5. 디자인 출력 – 턴이 완료되면 생성된 HTML이 디자인 아티팩트(최대 512KB)로 저장되어 미리보기 창에 표시됩니다.

로컬 실행

# 필수 조건: Node 24, Vercel OAuth 앱, Neon Postgres, Upstash Redis
cp .env.example .env.local   # 비밀 키 입력 (SESSION_SECRET, DB URLs 등)
npm ci
npm run db:migrate          # 멱등성 마이그레이션 적용
npm run dev                 # 개발 서버 시작

README에는 자세한 테스트 스크립트와 배포 단계(Vercel에서 환경 변수 설정, 무료 체험 플래그 활성화 등)가 나열되어 있습니다.

일반적인 사용 사례

• 정적 랜딩 페이지 또는 UI 목업의 신속한 프로토타이핑.
• 단일 파일 HTML 뉴스레터 또는 이메일 템플릿 생성.
• 전체 버전 기록을 유지하면서 AI 기반 반복을 통해 디자인 아이디어 탐색.

제한 사항

• 각 턴은 64개의 모델 단계로 제한되며, 장시간 실행되는 디자인은 여러 호출로 분할됩니다.
• 무료 체험은 IP당 5개의 프롬프트로 제한되며 자동 충전되지 않습니다.
• 매우 긴 채팅은 잘리지 않으므로 이전 기록을 로드하는 속도가 느려질 수 있습니다.
• 샌드박스 미리보기는 브라우저의 CSP에 의존하며 강화된 VM이 아닙니다.

라이선스

• 핵심 코드는 Apache-2.0입니다.
• 번들된 design.md 스타일은 MIT 라이선스입니다(VoltAgent/awesome-design-md에서 제공).