fx0 – 軽量なAI駆動型デザインエージェント

概要

• Webページをプレーンテキストで説明すると、単一ファイルのHTMLデザインを返すオープンソースのWebアプリです。
• ストリーミング、ツール呼び出し、リトライ、セッション永続化を備えた永続的なLLMエージェントループを提供するライブラリ libfx 上に構築されています。
• Vercel上でホストされ、モデル呼び出しには Vercel AI Gateway、リアルタイムのチャット状態には Redis (Upstash)、永続的なアカウントとデザインバージョンには Neon Postgres を使用しています。

主な機能

• ワンクリックデザイン – 説明を入力すると、エージェントがページを1つのHTMLファイルとして作成します（最大512 KB、外部アセットなし）。
• 永続的なセッション – サーバーレス関数がクラッシュしたり制限時間に達したりした場合でも、Vercel Queues と libfx が最後に保存されたステップから再開するため、作業が失われることはありません。
• 柔軟な課金 – サインインしたユーザーは、AI Gateway を通じてモデルの使用量を自分の Vercel チームに請求できます。無料トライアルモードでは、BotID で保護された IP ごとに 5 回の Opus 5.5 Fast プロンプトを提供します。
• ツールセット – エージェントは、Webページの取得、Web検索、デザインファイルの読み書き、長いツール結果のページネーション、およびサブエージェントの生成（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に依存しており、強化されたVMではありません。

ライセンス

• コアコードは Apache-2.0 です。
• バンドルされている design.md スタイルは MIT ライセンスです（VoltAgent/awesome-design-md 由来）。