fenestra-mcp

fenestra

エージェントのループ向けに構築されたUIスタックです。 UIをJSONで記述してネイティブに描画し、CIで検証できます。このループにコンパイル工程は不要で、スクリーンショットの不安定さもありません。

fenestraは純粋なRust製GUIフレームワークです。ヘッドレスレンダラーは決定論的なので、人もAIコーディングエージェントも、作成したものを確認して正しく動作することを証明できます。また、オープンなAgent-to-UI標準であるA2UIにも対応しています。これは初のネイティブRustレンダラーです（fenestra-a2ui）。以下のウィジェットキットとデザインシステムで、このループが生成できるものをご覧いただけます。

▶ ライブデモを試す — ダッシュボードとウィジェットギャラリーを、WebGPU経由でブラウザー上で実行できます。DOMもCSSも使わず、ネイティブウィンドウと同じコードから、すべてのピクセルをwgpu上のvelloで描画します。ガイド付きの解説をお求めの場合は、**ブック**もご覧ください。

ライト	ダーク

冒頭の画像は実際のツールであり、モックアップではありません。examples/agent_dashboard.rsは、仮想化されたフィード、チャート、エフェクトレイヤーを通じたライブテールを備えた、AIコーディングセッション用のライブダッシュボードです。SaaS風のウィジェットショーケースは、examples/dashboard.rsとして引き続き利用できます。

ライト	ダーク

ブラウザーも、WebViewも、HTMLやCSSのパーサーもありません。fenestraはvelloを使い、wgpu上ですべてを独自に描画します。taffyでレイアウトし（フレックスボックスとグリッド）、parleyでテキストを整形します。

その上に、洗練されたモダンなWebアプリのようなテーマ対応ウィジェットキットを備えています。柔らかなレイヤー状のシャドウ、OKLCHカラースケール、本格的なタイポグラフィの階層、ホバーやフォーカス時のトランジションに加え、ライトテーマとダークテーマの両方を第一級の機能として扱います。

クイックスタート

use fenestra::prelude::*;

struct Counter { n: i64 }

#[derive(Clone)]
enum Msg { Inc, Dec }

impl App for Counter {
    type Msg = Msg;

    fn update(&mut self, msg: Msg) {
        match msg { Msg::Inc => self.n += 1, Msg::Dec => self.n -= 1 }
    }

    fn view(&self) -> Element<Msg> {
        col().p(SP6).gap(SP4).items_center().children([
            text(self.n.to_string()).size(TextSize::Xl2).weight(Weight::Semibold),
            row().gap(SP3).children([
                button("Decrement").variant(ButtonVariant::Secondary).on_click(Msg::Dec),
                button("Increment").on_click(Msg::Inc),
            ]),
        ])
    }
}

fn main() { fenestra::run(Counter { n: 0 }, WindowOptions::titled("Counter")) }

cargo add fenestraを実行してコードを貼り付けたら、cargo runを実行してください。テンプレートから始める場合は、cargo generate richer-richard/fenestra-templateで、ヘッドレスUIテストとCIがあらかじめ設定されたテンプレートを作成できます。

再描画のたびに、ビュー全体を再構築し、レイアウトして再描画します。差分処理もマクロもないため、すべてのコードで自動補完が機能します。

エージェントは構築したものを確認できます

(element tree, theme, size) をピクセルに描画する処理は純粋関数であり、ウィンドウやディスプレイサーバーなしで実行できます：

use fenestra::shell::{SyntheticEvent, render_app, render_element};

// A picture of any element tree:
let image = render_element(my_view(), &Theme::dark(), (800, 600));
image.save("preview.png")?;

// Or drive a full app with scripted input and look at the result:
let image = render_app(
    &mut app,
    &[
        SyntheticEvent::MouseMove { x: 50.0, y: 34.0 },
        SyntheticEvent::MouseDown,
        SyntheticEvent::MouseUp,
        SyntheticEvent::Text("hello".into()),
    ],
    (800, 600),
    &Theme::light(),
);
assert_eq!(app.value, "hello");

ヘッドレス描画は決定論的です（フォントを埋め込み、スケールを固定し、モーションを低減するため）。そのため、ピクセル単位で正確なゴールデンテストを実用的に実施できます。fenestra 自身のウィジェットキットも、GPU ディスプレイを接続せずに CI 上でこの方法でテストされています。

同じパイプラインは、Rust をコンパイルせずに済ませたいエージェントやツール向けに、fenestra/1 という JSON オーサリング形式にも対応しています。UI を JSON で記述すると、fenestra-describe が解析し、ビルダーが生成するものと同じ Element ツリーに変換します。この形式はキット全体をカバーしています。データテーブル、ツリー、ポップオーバー、コマンドパレット、OKLCH カラーピッカー、画像、チャート、Markdown などに対応します。

ここから利用する方法はいくつかあります。fenestra render は PNG を書き出します。fenestra preview <file> はウィンドウを開き、保存するたびに再描画します。また、fenestra-mcp サーバーは、描画、クエリ、操作、検証という一連の流れを、render_a2ui を含む 14 個の MCP ツールとしてエージェントに提供します。単一フレームだけでなく、モーションも確認できます。Harness::film（fenestra film と MCP の film_ui ツールも同様）は、実際にモーションを有効にした状態でシーケンスをキャプチャし、キャプション付きの 1 本のフィルムストリップにまとめます。

ヘッドレス描画で確認できること、できないこと。 ライブウィンドウに表示される内容のうち、意図的に限定したサブセットを描画します。このサブセットこそが決定論性を実現しているため、どこに境界があるかを知っておく価値があります。

テキストには埋め込みフォントを使用するため、ラテン文字は正確に表示されます。実際の等幅フォント、CJK、絵文字、RTL の書体は OS から取得されるため、実際のウィンドウでのみ表示されます。モーションは常に低減されます。ピクセルは macOS/Metal を基準とし、Linux/lavapipe ではより広い許容範囲が認められます。スケールは固定されません。render_element_scaled は任意のデバイススケールで同じ 2 パスのパイプラインを実行するため、細い線やぼかし半径など、Retina でのみ発生するリグレッションもヘッドレスで検出できます。

この経路以外では、2 つの点で見え方が異なります。Liquid-Glass の完全な光学効果（背景のぼかし、エッジのレンズ効果、適応型の鮮やかさ）が描画されるのは、ヘッドレスのゴールデンテスト経路のみです。ライブのシングルパスウィンドウでは、半透明の色合いに加えて、鏡面反射の縁取りと光沢が表示されます。Web では、コピーするとシステムクリップボードに送られますが、他のアプリからの貼り付けはアプリ内にとどまります。ガラス表現はネイティブのライブウィンドウと一致し、AccessKit は上流の Web アダプターの対応待ちです。

したがって、レイアウト、セマンティクス、色、そしてピクセルの大部分については、ヘッドレス描画を信頼するのが適切です。非ラテン文字、等幅フォント、ガラス表現の全機能は、実際のウィンドウで確認してください。詳細な記録は ARCHITECTURE.md にあります。

AI エージェントと作業していますか？ AGENTS.md は、ビルド → 描画 → 確認 → 検証のワークフローの手引きです（コンテキストローダー向けには llms.txt を参照してください）。

哲学：Web の美しさを Web プラットフォームなしで実現する

Web の「見た目」――柔らかな立体感、色味のあるニュートラルカラー、OKLCH の色調段階、4px グリッドに基づく間隔、フォーカスリング、120～300ms の範囲のイージング――は、ソフトウェアで最もよく検証されているビジュアル言語です。それを実現する手段として、Web「プラットフォーム」は大がかりです。

そこで fenestra は、その言語を型付きの Rust 値としてエンコードしています。Theme は 1 つのアクセント色相から生成されます。間隔、角丸、影、モーションはトークンから得られます。ビルダーの語彙（row()、.p(SP4)、.rounded(R_MD)、.shadow(ShadowToken::Sm)）は覚えやすいほど小さく、rust-analyzer や言語モデルが自動補完しやすいほど規則的です。すべてのウィジェットはすべての色をテーマ経由で扱うため、Mode を 1 つ切り替えるだけでアプリ全体がダークモードになります。

キット

以下の各ウィジェットは、両方のテーマで、あらゆる状態に対応しています。

コントロール。 Button、IconButton、Checkbox、Switch、Radio、Slider、SegmentedControl、Select、および OKLCH の明度×彩度パッド、色相とアルファのストリップ、入力しやすい HEX 入力欄を備えた Color Picker。

テキスト入力。 TextInput（parley による編集、クリップボード、IME 対応）と TextArea（複数行、自動拡張）。

サーフェスとフィードバック。 Tooltip、Modal（フォーカストラップとバックドロップ）、Toasts、Tabs、Card、StatCard、Badge、Avatar、ライブパルス付きの StatusIndicator、キーキャップ型の Kbd、Skeleton ローダー、Divider、Spinner、Table、Callout、Progress — Material-3 Expressive の波形バーを含みます。さらに、Lucide アイコンの一部をベンダー提供しています。

cargo run --example gallery を実行すれば、いつでもこのコーパスを再生成できます — ヘッドレスでレンダリングします。

モーション

fenestra-motion は、ライブウィンドウも画面録画ソフトも使わずに、フレーム単位で完結したコンポジションをヘッドレスでレンダリングします。これは fenestra film と MCP の film_ui ツールでも使用されているパイプラインで、エージェントがトランジションの再生を確認できます。

以下は fenestra-charts の棒グラフです。順位でソートされ、トラック間で補間されたデータから、フレームごとに再構築されます。

cargo run -p fenestra-motion --example chart_race -- --mp4 を実行すると、この一連の動きをそのままレンダリングできます — 途中で首位が入れ替わることを、目視だけでなくサンプル自体で構造的に検証しています。同じ方法でレンダリングできるデモが、ほかにも 2 つあります。放送用のローワーサード（examples/lower_third.rs）と、単語ごとにずらして表示するタイトル（examples/title_stagger.rs）です。

Workspace

Crate	役割
fenestra	ファサード：prelude、run()、サンプル
fenestra-core	要素 IR、テーマ／トークン、レイアウト、テキスト、描画、入力、トランジション
fenestra-shell	winit + wgpu のウィンドウランナーとヘッドレスレンダラー
fenestra-kit	core のパブリック API のみを使って構築された、テーマ対応のウィジェットキット
fenestra-charts	スパークライン、折れ線グラフ、棒グラフ — サードパーティ製ウィジェットクレートのリファレンス
fenestra-markdown	CommonMark をネイティブの fenestra 要素としてレンダリング
fenestra-looks	すぐに使える6つのデザイン言語（product、editorial、terminal、console、warm-editorial、playful）を、1回の呼び出しで適用
fenestra-describe	fenestra/1 JSON を、ビルダーが生成するものと同じ Element ツリーにパース
fenestra-a2ui	A2UI v0.9（オープンな Agent-to-UI 標準）のネイティブ Rust レンダラー
fenestra-render	fenestra CLI：コマンドラインから render、preview、film、query、verify、lint
fenestra-mcp	MCP サーバー。render、query、interact、verify を14個のツールとして AI エージェントに公開
fenestra-motion	フレーム単位で純粋なモーショングラフィックス：タイムライン、ヘッドレスのフレーム／動画レンダリング、時間関連の lint、motion CLI
fenestra-anim	キーフレームアニメーションの計算 — イージング、スプリング、正確な有理数タイムベース

fenestra-anim は独自のバージョン（0.1.x）で管理されています。これは単独で使える末端クレートで、fenestra のクレートには一切依存せず、wgpu、vello、parley、taffy、winit にも依存しません。フレームまたはティック単位でサンプリングするものが、このワークスペース内外を問わずアニメーションの計算だけに依存できるよう、fenestra-core と fenestra-motion から切り出されました。fenestra-mcp も個別にバージョン管理されているため、MCP サーバーを独自のスケジュールでリリースできます。

パイプライン、ウィジェットの識別、トランジション、オーバーレイの仕組みについては、フレームワークの構築中に行われた決定を一つずつ記録した ARCHITECTURE.md をご覧ください。また、実測に基づくフレームコストについては BENCHMARKS.md をご覧ください（画面全体を再構築、レイアウト、描画しても約0.3 ms、10万行のリストを仮想化すると約0.09 msです）。

デザインの幅

同じフレームワーク、同じトークンで、デザイン言語を変えられます。

fenestra-looks クレートには、すぐに使える6種類のスタイル（product、editorial、terminal、console、warm-editorial、playful）が含まれており、all() で一覧を取得できます。さらに、個々の設定を変えるだけでキット全体の見た目を変更できます。Theme::with_radius(RadiusScale::sharp()) を使うと、角を丸めないテック系の外観になります。Theme::with_elevation(Elevation::Flat) は、シャドウの代わりに境界線でサーフェスを描画します。ニュートラルなグレーを雰囲気のある色に置き換えるには、Theme::duotone を使います。独自のディスプレイ用書体を使いたい場合は、Fonts::register でフォントロールに登録できます。

以下は、上の柔らかなデフォルトのダッシュボードとは対極にあるデザインです。スレート色を基調に、シャープな細い罫線、ライム色のアクセント1色、等幅数字を使った console です。ほかのすべてと同様に、ヘッドレスでレンダリングし、ゴールデンテストを実施しています。

ライト	ダーク

コンポジション、コマンド、アクセシビリティ

独自のメッセージ型を中心に作成されたコンポーネントは、Element::map で合成できます。

バックグラウンド処理は App::init 経由で取り込みます。この関数は、クローン可能な Proxy<Msg> をアプリに渡します。スレッドを起動してメッセージを送り返すと、ウィンドウが再描画されます。examples/clock.rs と examples/toasts.rs は、どちらもこの方法を使っています。

すべてのウィジェットは、役割、状態、名前を2つの方法で公開します。ヘッドレスでは Frame::access_tree() 経由で取得でき、CI で UI にラベルが付いていることをアサートできます。また、ウィンドウランナーでは AccessKit 経由で実際の支援技術にも公開されます。

環境に合わせたモーションにはループする Keyframes タイムラインを、画像には image_rgba8 を使います（丸いアバターには .rounded_full() を使用します）。

ステータス

fenestra は 0.41.0 です。ここに至るまでの経緯を、意思決定ごとに ARCHITECTURE.md に記録しています。

リリース済みの機能は次のとおりです。

• ライトテーマとダークテーマに対応したインタラクティブウィジェットキット。
• すぐに使える 6 種類のデザイン言語（fenestra-looks）と、すりガラス素材システム。
• 参照用のサードパーティ製ウィジェットクレートとして、チャートとマークダウン。
• キット全体を記述できる fenestra/1 JSON 形式。fenestra-describe で解析し、fenestra CLI と 14 種類の fenestra-mcp ツールで描画・検証します。
• A2UI v0.9 レンダラー（fenestra-a2ui）。
• 決定論的なテストハーネスを備えたエフェクトレイヤー（Cmd/Sub）。
• macOS の宣言型ネイティブメニュー、任意のスケールでの高 DPI ヘッドレス描画、ライブリロード対応の fenestra preview ウィンドウ。
• 時間的リンターとフィルムストリップキャプチャを備えた、フレームごとに純粋なモーショングラフィックス用の fenestra-motion。

変更はすべて、マージ前に同じゲートを通過します。cargo fmt --check、clippy -D warnings、全テストスイート、および macOS/Metal と Linux/lavapipe でのヘッドレスなゴールデン PNG 比較です。さらに、プッシュのたびに、また週 1 回、cargo audit と cargo deny を実行します。

未対応の作業は、ARCHITECTURE.md の「Deferred」ノートに優先順位付きのリストとしてまとめています。あらかじめ知っておくべき課題として、A2UI の DateTimeInput はカレンダーではなく ISO 形式のテキストフィールドであること、隠し文字フィールドはマスクされずに描画されること（レンダラーは隠すのではなく注記として報告します）、Web での AccessKit は上流のアダプター待ちであることが挙げられます。

ライセンス

MIT または Apache-2.0 をお選びいただけます。組み込みの Inter フォント、Playfair Display の各書体（ポスターおよびエディトリアルのルック）、Fraunces の可変テキスト用セリフ体（ウォームエディトリアルのルックで使われる opsz／光学サイズ調整対応のセリフ体）、および JetBrains Mono（ターミナルのルック）は SIL Open Font License 1.1 でライセンスされています。ベンダー提供の Lucide アイコンパスデータは ISC です（fenestra-kit/LICENSE-LUCIDE.txt を参照）。