fx0 – A lightweight AI‑powered design agent

What it is

• An open‑source web app that lets you describe a web page in plain text and returns a single‑file HTML design.
• Built on libfx, a library that provides a durable LLM‑agent loop with streaming, tool calls, retries and session persistence.
• Hosted on Vercel, it uses Vercel AI Gateway for model calls, Redis (Upstash) for real‑time chat state, and Neon Postgres for persistent accounts and design versions.

Key features

• One‑click design – type a description, the agent writes the page as one HTML file (max 512 KB, no external assets).
• Durable sessions – if a server‑less function crashes or hits its time limit, Vercel Queues and libfx resume the turn from the last saved step, so no work is lost.
• Billing flexibility – signed‑in users bill model usage to their Vercel team via AI Gateway; a free‑trial mode offers five Opus 5.5 Fast prompts per IP, protected by BotID.
• Toolset – the agent can fetch web pages, search the web, read/write the design file, paginate long tool results, and spawn a sub‑agent (via createFxEngine()).
• Design templates – start from ten community‑curated design.md styles (from VoltAgent’s awesome‑design‑md) or upload your own.
• Live preview – generated HTML streams to a sandboxed iframe with a strict CSP, so the preview cannot access cookies or make network requests.
• Version history – every turn produces a new design version that can be reopened, copied or downloaded.

How it works

1. User sends a message – the front‑end stores it in Redis and forwards it to a libfx session.
2. libfx runs the turn – createFxAgent() creates a durable agent; the turn executes the model loop, calls tools, and streams results.
3. Durability layer – each step is saved in Vercel Workflow World. If the function dies, Vercel Queues triggers app/api/libfx/route.ts to resume from the last saved step.
4. Streaming to UI – the agent’s output stream is copied into the chat transcript and simultaneously written to Neon Postgres for persistence.
5. Design output – once the turn finishes, the generated HTML is stored as a design artifact (max 512 KB) and shown in the preview pane.

Running locally

# prerequisites: Node 24, a Vercel OAuth app, Neon Postgres, Upstash Redis
cp .env.example .env.local   # fill in secrets (SESSION_SECRET, DB URLs, etc.)
npm ci
npm run db:migrate          # apply idempotent migrations
npm run dev                 # start the dev server

The README lists detailed test scripts and deployment steps (set env vars on Vercel, enable the free‑trial flag, etc.).

Typical use‑cases

• Rapid prototyping of static landing pages or UI mockups.
• Generating single‑file HTML newsletters or email templates.
• Exploring design ideas with AI‑driven iteration while keeping a full version history.

Limitations

• Each turn is capped at 64 model steps; long‑running designs are split across multiple invocations.
• Free trial is limited to five prompts per IP with no automatic refill.
• Very long chats are never trimmed, which can slow loading of historic transcripts.
• The sandboxed preview relies on the browser’s CSP; it is not a hardened VM.

License

• The core code is Apache‑2.0.
• The bundled design.md styles are MIT‑licensed (from VoltAgent/awesome‑design‑md).