Fred SchottがFlue 2で持ち込んだAIエージェント版React

エージェントのフレームワークはもう十分あるでしょ、と思って一度スルーしかけました。

でもリポジトリを開いたら、エージェントの定義がReactのコンポーネントそのものの形で手が止まりました。

書いたのは、Astroの共同創業者でSnowpackの作者でもあるFred K. Schottさんです。

Astroの作者が半年で1028コミット積んだエージェントフレームワーク

置き場所が withastro/flue、Astro本体と同じ組織の下です。

リポジトリが作られたのが2026年2月7日で、最終pushが8月8日。

半年ちょっとで7,893スター、463フォーク、ライセンスはApache-2.0です（数字は2026年8月16日時点）。

で、コントリビューターの内訳を見て笑いました。

FredKSchottさんが1,028コミット、2位が4コミット。

ほぼ1人で書き切っているプロジェクトが、半年で8,000スター近く集めています。

READMEの名乗りも尖っていて、見出しが Agent Harness Framework、その次の行が Not another SDK。

またSDKを増やしたわけじゃない、という宣言から入ってきます。

GitHub - withastro/flue: The sandbox agent framework.

The sandbox agent framework. Contribute to withastro/flue development by creating an account on GitHub.

github.com

「use agent」と書いた関数が丸ごとエージェントになる

READMEに載っているサンプルがこれです。

'use agent';
import { useModel, useSandbox, useSkill, useTool } from '@flue/runtime';
import { local } from '@flue/runtime/node';
import triage from '../skills/triage/SKILL.md';
import verify from '../skills/verify/SKILL.md';
import { openIssue, searchCode } from '../tools/github.ts';

export function Triage() {
  useModel('anthropic/claude-sonnet-4-6');
  useSandbox(local());
  useSkill(triage);
  useSkill(verify);
  useTool(openIssue);
  useTool(searchCode);

  return `Triage a bug report end-to-end...`;
}

Reactを触っている人なら、読む前に形で分かると思います。

'use agent' は 'use client' と同じディレクティブの置き方で、関数名は大文字始まり、中身はフックの羅列。

違うのは戻り値で、JSXではなく文字列を返します。

この文字列がそのままシステムプロンプトになります。

SKILL.md をそのままimportしているのも面白くて、マークダウンをモジュールとして扱っています。

ここが効いてくるポイントなんですが、エージェントの構成をJSONやYAMLで書くと、起動時に固定されます。

関数で書くと、中にif文を入れられる。

会話の状態を見てツールを出し分ける、みたいな組み方が素直に書けるわけです。

実際 packages/runtime/src/hooks の中には render.ts と frame.ts が同居していて、Reactのレンダリングにあたる仕組みがランタイム側に用意されています。

これがFlue 2の一番の主張だと読みました。

組み込みフックを16個ぜんぶ数えた useSkill useTool useSubagent

フックが何個あるのか気になったので、packages/runtime/src/hooks を開いて use- で始まるファイルを全部数えました。

ちょうど16個です。

分類は公式が付けているものではなく、僕がファイル名から並べ直したものです。

usePersistentState は useState の永続版で、プロセスが落ちても値が残ります。

useAgentStart と useAgentFinish はマウントとアンマウントの位置。

useResponseStart と useResponseFinish は、名前のとおり応答の前後に挟まる位置です。

そしてReactに存在しないのが useSkill useTool useSubagent useSandbox useMcpConnection の5個だけ。

エージェント用に新しく覚えるのが実質5個、残りはReactの語彙をそのまま流用できる。

この省エネっぷりはマジで効きます。

ハーネスは自前で書いていない 依存関係の底にPiがいる

ハーネスという言葉が何度も出てくるので、@flue/runtime の package.json を開きました。

versionが 2.0.3。

これがFlue 2の実体です。

そして依存関係にこれが入っていました。

"dependencies": {
  "@earendil-works/pi-agent-core": "^0.83.0",
  "@earendil-works/pi-ai": "^0.83.0",
  "@modelcontextprotocol/client": "2.0.0",
  "hono": "^4.8.3",
  "valibot": "^1.1.0"
}

Piです。

正直ここは意外でした。

earendil-works/pi はMITライセンスのエージェントコアで、npm側の説明にはトランスポート抽象と状態管理と添付ファイル対応を持つ汎用エージェント、と書かれています。

モデルを回す一番下の層は自前で書かず、外から持ってきているわけです。

Agent Harness Framework と名乗りながら、ハーネスそのものは他人のもの。

ReactがDOMを自前で実装しないのと同じ構造だと思えば、この割り切りは筋が通っています。

Flueが担当しているのは、その上に立つプログラミングモデルの層。

HTTPはHono、MCPは公式クライアント。

Cloudflare Workersにそのまま載る理由もここにあります。

あと触る前の確認ポイントとして、engines が node >= 22.19.0 でした。

手元が古いと入り口で詰みます。

npx flue run で最初のエージェントを動かすまで

入り口は初期化コマンドです。

npx @flue/cli init my-agent --target node

--target は node か cloudflare を選びます。

--deploy を付けるとデプロイ用の構成まで足してくれます。

生成されるのは flue.config.ts、src/agents/hello.ts、.env あたり。

エージェントを1体書いたら、走らせるのはこれだけです。

npx flue run src/agents/assistant.ts --message "Say hello in five words or fewer."

--id を付けると、同じセッションの続きとして走ります。

npx flue run src/agents/assistant.ts --id hello-1 --message "What's a good name for a pet crab?"

HTTPの後ろに置きたくなったら、そこで初めてViteが出てきます。

npm install @flue/vite hono vite を足して、src/app.ts にHonoのルーティングを書いて npx vite dev。

ここに公式が明記している罠があって、デプロイ向けに使うのは vite dev と vite build です。

flue dev や flue build ではありません。

CLIの package.json も vite の ^8.1.2 に依存していて、ビルド系は完全にVite側へ寄せた作りでした。

デプロイ先は6つ並んでいるがマネージドの置き場は無い

READMEに書かれているデプロイ先がこれです。

• Node.js
• Cloudflare Workers
• GitHub Actions
• GitLab CI/CD
• Daytona
• Render

CIの上で走らせる前提が最初から入っていて、GitHub Actionsのジョブとしてエージェントを回せます。

packages 配下は28ディレクトリありました。

slack、teams、discord、telegram、whatsappといった外部サービス連携が17本、postgres、mysql、mongodb、redis、libsqlの永続化系が5本。

残りが runtime cli vite sdk react opentelemetry の6本です。

業務システムに刺す部品はだいたい揃っています。

ただ、無いものもはっきりしていました。

Flue自身がホストしてくれるマネージドサービスは、この一覧のどこにもありません。

動かす場所は自分で決める前提です。

もう1点、GitHubのReleasesが空でした。

更新を追うならコミットと package.json の version を直接見にいくしかありません。

動きが速いので、追う気があるならウォッチだけ先に付けておくのが現実的です。

手を動かすなら npx @flue/cli init から、前提はNode 22.19以上だけです。

Flue — The Open Agent Framework

Build durable AI agents with Flue's programmable TypeScript harness. Write once, deploy anywhere, use any LLM.

www.flueframework.com