fx0 – 轻量级 AI 驱动设计代理

简介

• 一个开源 Web 应用，允许你用纯文本描述网页，并返回一个单文件 HTML 设计。
• 基于 libfx 构建，这是一个提供持久化 LLM 代理循环的库，支持流式传输、工具调用、重试和会话持久化。
• 托管在 Vercel 上，使用 Vercel AI Gateway 进行模型调用，使用 Redis (Upstash) 处理实时聊天状态，使用 Neon Postgres 存储持久化账户和设计版本。

核心功能

• 一键设计 – 输入描述，代理将页面编写为一个 HTML 文件（最大 512 KB，无外部资源）。
• 持久化会话 – 如果无服务器函数崩溃或达到时间限制，Vercel Queues 和 libfx 会从最后保存的步骤恢复，确保工作不会丢失。
• 计费灵活性 – 登录用户通过 AI Gateway 将模型使用量计费到其 Vercel 团队；免费试用模式为每个 IP 提供 5 次 Opus 5.5 Fast 提示词，并受 BotID 保护。
• 工具集 – 代理可以抓取网页、搜索网络、读写设计文件、分页长工具结果，并生成子代理（通过 createFxEngine()）。
• 设计模板 – 从 10 个社区策划的 design.md 样式（来自 VoltAgent 的 awesome-design-md）开始，或上传你自己的样式。
• 实时预览 – 生成的 HTML 流式传输到具有严格 CSP 的沙盒 iframe 中，因此预览无法访问 Cookie 或发起网络请求。
• 版本历史 – 每一轮对话都会产生一个新的设计版本，可以重新打开、复制或下载。

工作原理

1. 用户发送消息 – 前端将其存储在 Redis 中并转发给 libfx 会话。
2. libfx 运行回合 – createFxAgent() 创建一个持久化代理；回合执行模型循环、调用工具并流式传输结果。
3. 持久化层 – 每个步骤都保存在 Vercel Workflow World 中。如果函数终止，Vercel Queues 会触发 app/api/libfx/route.ts 从最后保存的步骤恢复。
4. 流式传输到 UI – 代理的输出流被复制到聊天记录中，并同时写入 Neon Postgres 以实现持久化。
5. 设计输出 – 回合结束后，生成的 HTML 作为设计工件（最大 512 KB）存储并显示在预览窗格中。

本地运行

# 先决条件：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；它不是一个加固的虚拟机。

许可证

• 核心代码采用 Apache-2.0 许可证。
• 捆绑的 design.md 样式采用 MIT 许可证（来自 VoltAgent/awesome-design-md）。