Repolode
投稿する
vercel-labs

vercel-labs/fx0

テキストの説明からWebページ全体を1つのHTMLファイルとして生成する、libfxエージェントライブラリを基盤にしたオープンソースのデザインエージェント。

GitHub で見る公式サイト
スター
121
フォーク
24
未解決の Issue
2
最終コミット
6 時間前

これは何？

fx0はデザインエージェントです。チャットでページの内容を説明すると、エージェントが単一のHTMLファイルとして作成します。ライブプレビューに加え、再度開いたり、コピーしたり、ダウンロードしたりできるデザインの全バージョンの履歴も利用できます。10種類のdesign.mdスタイルから選ぶか、独自のスタイルをアップロードでき、チャットごとに使用するモデルも選択できます。

fx0は、基盤となるエージェントライブラリlibfxのリファレンスアプリでもあります。エージェントのループ、ストリーミング、ツール呼び出し、リトライ、永続化セッションは、1回のcreateFxAgent()呼び出しで利用でき、各サブエージェントはcreateFxEngine()を通じて実行されます。各ターンを段階ごとに保存し、Vercel Queues上で再開できるため、返信の途中で関数がクラッシュしてもチャットは継続できます。

このプロジェクトにはNode.js 24、Sign in with Vercelアプリ、Neon Postgresデータベース、Upstash Redisデータベースが必要です。生成されたページは、Content Security Policyによってネットワークリクエストをブロックするサンドボックス化されたiframe内で実行されます。

主な機能

  • 01テキストの説明から、ページ全体を1つのHTMLファイルとして生成
  • 02すべてのデザインバージョンを保存し、再度開いたり、コピーまたはダウンロードしたりできる
  • 03チャットごとにモデル、推論の強度、fast modeを選択できる
  • 04参考情報を探すためにWebを検索し、ページを取得できる
  • 05サーバー関数がクラッシュした場合、最後に保存されたステップからターンを再開できる
  • 06組み込みの10種類のdesign.mdスタイルと、独自ファイルのアップロードに対応

ユースケース

  • 文章の依頼内容をもとに、ランディングページやマーケティングページのプロトタイプを作成する
  • 共有やプレビュー用の単一ファイルのHTMLモックアップを生成する
  • libfxを基盤としたエージェントアプリの構成を学ぶ

クイックスタート

  1. 1

    ホスト版アプリを fx0.vercel.dev で試すか、リポジトリを clone します

  2. 2

    Node.js 24 をインストールし、Sign in with Vercel アプリ、Neon Postgres データベース、Upstash Redis データベースをセットアップします

  3. 3

    `.env.example` を `.env.local` にコピーして、値を入力します

使う前に知っておきたいこと

  • 自分で実行するには、Node.js 24 と3つの外部サービス（Sign in with Vercel、Neon Postgres、Upstash Redis）が必要です。
  • Durable turns は Vercel のインフラ（Workflow、Queues、AI Gateway）に依存するため、完全なセットアップには Vercel が必要です。

トピック

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

よくある質問

fx0 とは？
テキストの説明からWebページ全体を1つのHTMLファイルとして生成する、libfxエージェントライブラリを基盤にしたオープンソースのデザインエージェント。 fx0はデザインエージェントです。チャットでページの内容を説明すると、エージェントが単一のHTMLファイルとして作成します。ライブプレビューに加え、再度開いたり、コピーしたり、ダウンロードしたりできるデザインの全バージョンの履歴も利用できます。10種類のdesign.mdスタイルから選ぶか、独自のスタイルをアップロードでき、チャットごとに使用するモデルも選択できます。
fx0 は無料で使えますか？ライセンスは？
fx0 は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
fx0 は今もメンテナンスされていますか？
活発にメンテナンス中。fx0 の最終コミットは 2026年10月19日 です。
fx0 は何に使えますか？
文章の依頼内容をもとに、ランディングページやマーケティングページのプロトタイプを作成する 共有やプレビュー用の単一ファイルのHTMLモックアップを生成する libfxを基盤としたエージェントアプリの構成を学ぶ
fx0 のインストール方法は？
ホスト版アプリを fx0.vercel.dev で試すか、リポジトリを clone します Node.js 24 をインストールし、Sign in with Vercel アプリ、Neon Postgres データベース、Upstash Redis データベースをセットアップします `.env.example` を `.env.local` にコピーして、値を入力します
fx0 はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/vercel-labs/fx0

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト