Repolode
Enviar
vercel-labs

vercel-labs/fx0

Um agente de design open source que cria uma página web inteira em um único arquivo HTML a partir de uma descrição em texto, usando a biblioteca de agentes libfx.

Ver no GitHubSite
Estrelas
121
Forks
24
Issues abertas
2
Último commit
há 8 horas

O que é?

fx0 é um agente de design: você descreve uma página em um chat, e o agente a cria em um único arquivo HTML, com prévia ao vivo e um histórico de todas as versões do design, que você pode reabrir, copiar ou baixar. É possível começar com um dos dez estilos de design.md ou enviar um estilo próprio, além de escolher o modelo usado em cada chat.

fx0 também é um app de referência para libfx, a biblioteca de agentes na qual foi desenvolvido. O loop do agente, o streaming, as chamadas de ferramentas, as novas tentativas e as sessões duráveis são tratados por uma única chamada a createFxAgent(), e cada subagente é executado por meio de createFxEngine(). Os chats são preservados mesmo que uma função falhe no meio de uma resposta, porque cada turno é salvo etapa por etapa e retomado no Vercel Queues.

O projeto requer Node.js 24, um app Sign in with Vercel, um banco de dados Neon Postgres e um banco de dados Upstash Redis. As páginas geradas são executadas em um iframe isolado, com requisições de rede bloqueadas pela Content Security Policy.

Recursos principais

  • 01Gera uma página completa em um único arquivo HTML a partir de uma descrição em texto
  • 02Mantém todas as versões do design para que você possa reabri-las, copiá-las ou baixá-las
  • 03Permite escolher o modelo, o esforço de raciocínio e o modo rápido em cada chat
  • 04Pode pesquisar na web e buscar páginas como referência
  • 05Retoma um turno a partir da última etapa salva se a função do servidor falhar
  • 06Oferece dez estilos de design.md integrados ou permite enviar estilos personalizados

Casos de uso

  • Prototipar uma landing page ou página de marketing a partir de um briefing escrito
  • Gerar um mockup em HTML de arquivo único para compartilhar ou visualizar
  • Estudar como um app de agente é estruturado sobre libfx

Início rápido

  1. 1

    Experimente o app hospedado em fx0.vercel.dev ou clone o repositório

  2. 2

    Instale o Node.js 24 e configure um app Sign in with Vercel, um banco de dados Neon Postgres e um banco de dados Upstash Redis

  3. 3

    Copie `.env.example` para `.env.local` e preencha os valores

Antes de usar

  • Para executar por conta própria, são necessários o Node.js 24 e três serviços externos: Sign in with Vercel, Neon Postgres e Upstash Redis.
  • Durable turns depende da infraestrutura da Vercel (Workflow, Queues e AI Gateway), então a configuração completa está vinculada à Vercel.

Tópicos

#ai-agent#design#html#llm#libfx#vercel#typescript#prototyping

Perguntas frequentes

O que é fx0?
Um agente de design open source que cria uma página web inteira em um único arquivo HTML a partir de uma descrição em texto, usando a biblioteca de agentes libfx. fx0 é um agente de design: você descreve uma página em um chat, e o agente a cria em um único arquivo HTML, com prévia ao vivo e um histórico de todas as versões do design, que você pode reabrir, copiar ou baixar. É possível começar com um dos dez estilos de design.md ou enviar um estilo próprio, além de escolher o modelo usado em cada chat.
fx0 é gratuito? Qual é a licença?
fx0 é open source sob a licença Apache-2.0. Confira os termos da licença antes de usá-lo em produtos comerciais.
fx0 ainda é mantido?
Manutenção ativa. O último commit de fx0 foi em 19 de out. de 2026.
Para que posso usar fx0?
Prototipar uma landing page ou página de marketing a partir de um briefing escrito Gerar um mockup em HTML de arquivo único para compartilhar ou visualizar Estudar como um app de agente é estruturado sobre libfx
Como instalar fx0?
Experimente o app hospedado em fx0.vercel.dev ou clone o repositório Instale o Node.js 24 e configure um app Sign in with Vercel, um banco de dados Neon Postgres e um banco de dados Upstash Redis Copie `.env.example` para `.env.local` e preencha os valores
Onde consigo fx0?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/vercel-labs/fx0

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados