Kostenlos und Open Source
Dein Agent baut.
Du gestaltest den nächsten Schritt.
Ein leichter Workspace, um die App deines Coding-Agenten anzusehen, zu testen und zu verbessern. Echte Oberflächen prüfen, Änderungen zeigen und direkt am Quellcode weiterbauen.
Kostenlos · MIT-Lizenz · Dein eigener Agent
Claude Code
Codex
Kostenlos und Open Source
Die App selbst ist die Leinwand.
Echte Screens mit originalem UI-Code. Teste das öffentliche Beispiel vor der Installation.
Synthetische Daten · kein App-Backend · keine Anmeldung · kein API-Schlüssel
Für Bauen, Prüfen und Verbessern
- Sieh vollständige implementierte Seiten, benannte Zustände und verbundene Abläufe zusammen.
- Eine UI-Implementierung. Dein Agent erstellt Fixtures, Adapter und Abdeckungsprüfungen.
- Teste 77 Zustände und 44 Abläufe mit synthetischen Daten, ohne Anmeldung oder API-Schlüssel.
Überblicken, bedienen, abspielen
Herauszoomen und die App verstehen
Vollständige Seiten, nach Seite gruppiert, mit Suche, Filtern und einklappbaren Panels. Ablauf-Links bewegen die Kamera zum Ziel.
Hineinzoomen und die echte UI bedienen
Browse sperrt Bedienelemente zum Verschieben. Wähle eine Seite und Interact, um ihren Originalcode mit Wegwerfdaten zu bedienen.
Zeige genau, was sich ändern soll
Wähle einen Screen oder ein UI-Element, ergänze deinen Änderungswunsch und kopiere die Referenz für deinen Agenten. Ändert er den Quellcode, werden quellcodebasierte Vorschauen neu gebaut.
Zeige genau, was sich ändern soll
Wähle einen Screen oder ein UI-Element, ergänze deinen Änderungswunsch und kopiere die Referenz für deinen Agenten. Ändert er den Quellcode, werden quellcodebasierte Vorschauen neu gebaut.
Teil deines Entwicklungsablaufs.
Probiere die Beispiel-App lokal aus und verbinde dann dein Repository mit deinem Agenten. Node.js 22+ erforderlich.
Kostenlos startennpm install -g github:tombelieber/app-canvas#v0.16.0
agent-canvas browsers
agent-canvas demoGut zu wissen
Ist es kostenlos?
CLI, Canvas und Skills sind kostenlos und unter MIT quelloffen. Für deinen Coding-Agenten können eigene Abo- oder API-Kosten anfallen.
Funktioniert es mit Claude Code und Codex?
Ja. Skills für beide sind enthalten. Andere Agenten können dem öffentlichen Guide folgen und das CLI nutzen. Der Canvas ruft keine Modelle auf.
Brauche ich eine Designdatei?
Beginne mit App-Quellcode oder importiere eine Website. Dein Agent verbindet die vorhandene UI und synthetische Fixtures zur gemeinsamen Prüfung von Screens und Zuständen.
Ändert die Demo meine App?
Nein. Sie zeigt ein eingefrorenes synthetisches Beispiel im Browser. Deine App und ihr Quellcode werden im lokalen Projekt mit deinem Agenten bearbeitet.
Was ist mit nativen Apps?
UIKit, SwiftUI und Android verwenden projektspezifische Harnesses und Aufnahmen der Original-Runtime. Eine Aufnahme ist keine interaktive native App im Browser.
Umfang und Grenzen
- Web-Vorschauen nutzen echtes HTML/CSS und Original-JavaScript bei Interaktionen. UIKit, SwiftUI und Android brauchen Harnesses und Nachweise aus der ursprünglichen Laufzeit; ein Bild ist keine interaktive native App.
- Abdeckung ist eine geprüfte Zuordnung von Quellen zu Fällen, keine automatische Erkennung jeder Geschäftsbedingung. UI-Prüfungen qualifizieren weder Produktions-Backends noch klinische oder Modellgenauigkeit.
- Viewer: standardmäßig Englisch, 11 Sprachen. Die öffentliche Demo ist ein eingefrorenes synthetisches Frontend; lokale Integrationen folgen dem Quellcode. Physische iPad-Leistung wurde nicht gemessen.
Datenschutz und Telemetrie
Optionale minimale Ereignisse über Cloudflare an PostHog. Keine Inhalte, Codes, Namen, Pfade, E-Mails oder IPs werden an PostHog weitergeleitet. Du kannst dies deaktivieren.