クイックスタート

TongFlow は自分のマシン上で Next.js の開発サーバーとして動きます。5 分ほどで最初のワークフローが動くはずです。

必要なもの

  • Node.js 20 以降と pnpm
  • Modal のアカウントとトークン。modal.com でサインアップします。無料枠（月 30 ドル）だけでも H100 をそれなりに使えるので、TongFlow の GPU 処理はほぼまかなえます。
  • LLM API キー を最低 1 つ。OpenRouter、Gemini、OpenAI、DeepSeek から選びます。OpenRouter には無料のルーティングティアがあり、それ以外はリクエストごとの課金です。

任意：不明点があれば Discord の #tongflow で気軽に聞いてください。

1. クローン

git clone https://github.com/tong-io/tongflow
cd tongflow

2. 環境変数の設定

サンプルをコピーして編集します。

cp .env.example .env

必ず埋める変数は次のとおりです。

変数用途
MODAL_TOKEN_IDModal ワーカーの認証
MODAL_TOKEN_SECRETModal ワーカーの認証
以下のいずれか 1 つ：OPENROUTER_API_KEY / GEMINI_API_KEY（または GOOGLE_API_KEY）/ OPENAI_API_KEY / DEEPSEEK_API_KEY”Generate text” ノードなど、LLM を経由する変換

任意の変数：

  • OPENROUTER_FREE_MODEL — OpenRouter の無料ルートを特定のものに固定します
  • OPENAI_CHAT_MODEL — 未設定時は gpt-4o-mini
  • NEXT_PUBLIC_FILE_BASE_URL — CDN 経由でファイルを配信する場合のベース URL

3. Modal の認可（初回のみ）

トークンを ~/.modal.toml に書き込みます。初回の起動前に一度だけ実行してください。

pnpm modal:setup

4. 起動

Node.js 20 以降が必要です。

pnpm install
pnpm dev

http://localhost:3000 を開くと /workspace が表示されます。

データはローカルに保存されます。SQLite は data/tongflow.db、アップロードしたファイルは data/uploads/ です。

5. 最初のワークフロー

/workspace が開いたら、次の手順で進めます。

  1. ページは Create モード で開きます（モード切替の Sparkles アイコン。詳しくは ワークフローモード を参照）。
  2. 画面下部の Smart Island に 7 つの Add アイコンが並びます：3D / ドキュメント / 画像 / テキスト / 動画 / 音声 / リンク。
  3. テキストアイコン（Type の字形）をクリックしてテキストノードを置き、プロンプトを入力します。例：「図書館の中の猫の水彩画ポートレート」
  4. テキストノードの出力ハンドルを空いているキャンバスへドラッグし、画像生成 を選ぶと、接続済みの画像ノードが現れます。
  5. Execute モード に切り替え（Sparkles → Play のトグル）、Smart Island の Play ボタンをクリックします。
  6. タスクが自分の Modal アカウント経由で実行され、結果が画像ノードに表示されます。

これが基本のループです。ここから別の変換（画像→動画、画像→3D、画像アップスケール）をつなげたり、組み合わせノード（リップシンクなど）に分岐したり、ワークフローを保存したりできます。

データの保存場所

  • ワークフロー — data/tongflow.db に保存されます。左サイドバー（3 ボタン構成）の Workflow ボタンから開きます。
  • 素材 / Portfolio — アップロードしたファイルは Portfolio ダイアログにあります（左上の FolderOpen アイコン。Smart Island ではありません）。
  • タスク — 実行履歴は Task パネルにあります（左上の Zap アイコン）。

次のステップ