無料・オープンソース
エージェントが作る。
次を決めるのは、あなた。
エージェントが作ったアプリを見て、試して、磨く軽量ワークスペース。実際の画面を確認し、変更したい場所を示して、ソースから開発を続けます。
無料 · MIT ライセンス · お使いのエージェントで
Claude Code
Codex
無料・オープンソース
アプリそのものがキャンバス。
実際の UI コードで動く画面です。インストール前に公開デモを試せます。
合成データ · アプリバックエンドなし · ログイン不要 · API キー不要
実装 → 確認 → 改善のループに
- 実装済みの画面、名前付き状態、接続されたフローを一望。
- UI 実装は一つ。エージェントが fixtures、adapter、カバレッジ検証を作成。
- 公開の合成データデモで 77 状態と 44 フローを体験。ログインも API キーも不要。
全体を見る、操作する、再生する
縮小してアプリを理解
画面をページ別に表示。検索、絞り込み、サイドバーの開閉が可能。フローのリンクを選ぶと、移動先へカメラが追従します。
拡大して実際の UI を操作
Browse は操作をロックして移動を優先。画面を選び Interact を押すと、使い捨ての合成データで元のアプリコードを操作できます。
変更したい場所を示す
画面や UI 要素を選び、変更内容を書いて参照情報をエージェントにコピーします。エージェントがソースを変更すると、ソース連携プレビューが再構築されます。
変更したい場所を示す
画面や UI 要素を選び、変更内容を書いて参照情報をエージェントにコピーします。エージェントがソースを変更すると、ソース連携プレビューが再構築されます。
npm install -g github:tombelieber/app-canvas#v0.16.0
agent-canvas browsers
agent-canvas demo始める前に
無料ですか？
CLI、キャンバス、付属スキルは MIT ライセンスで無料公開しています。エージェントの利用料金は別途必要です。
Claude Code と Codex に対応していますか？
両方に対応するスキルを同梱しています。他のエージェントは公開ガイドと CLI を利用できます。キャンバス自体はモデルを呼びません。
設計ファイルから始めますか？
既存アプリのソースまたは Web サイトの取り込みから始めます。エージェントが UI と合成 fixtures を接続し、画面と状態を一覧にします。
公開デモは自分のアプリを変更しますか？
いいえ。固定された合成サンプルをブラウザで実行します。自分のアプリの確認とソース変更はローカルで行います。
ネイティブアプリは？
UIKit、SwiftUI、Android はプロジェクトごとの元ランタイムの harness とキャプチャを使用します。キャプチャはブラウザで操作できるネイティブアプリではありません。
このリリースの範囲と限界
- Web は実際の HTML/CSS と操作時の元の JavaScript を利用。UIKit、SwiftUI、Android は元の runtime による harness と証拠が必要です。キャプチャ画像は操作可能なネイティブアプリではありません。
- カバレッジは確認済みのソースとケースの対応です。全業務条件の自動発見ではなく、バックエンド、医療精度、モデル精度の保証でもありません。
- Viewer は英語が既定で11言語に対応。公開デモは固定の合成フロントエンドです。ローカル統合はソースに追従します。実機 iPad の性能は未測定です。
プライバシーとテレメトリ
最小限の利用イベントを任意で Cloudflare 経由で PostHog に送信します。ページ内容、コード、名前、パス、メール、IP アドレスは PostHog に転送しません。無効にできます。