무료 오픈 소스
에이전트가 만듭니다.
다음은 당신이 결정합니다.
코딩 에이전트가 만든 앱을 보고, 사용하고, 다듬는 가벼운 워크스페이스. 실제 화면에서 바꿀 곳을 가리키고 소스에서 계속 빌드하세요.
무료 · MIT 라이선스 · 원하는 에이전트 사용
Claude Code
Codex
무료 오픈 소스
앱 자체가 캔버스입니다.
원래 UI 코드로 실행되는 실제 화면입니다. 설치 전에 공개 예제를 사용해 보세요.
합성 데이터 · 앱 backend 없음 · 로그인 불필요 · 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 라이선스의 무료 오픈 소스입니다. 코딩 에이전트의 구독 또는 API 비용은 별도입니다.
Claude Code와 Codex를 지원하나요?
둘 다 지원하며 스킬을 설치할 수 있습니다. 다른 에이전트는 공개 가이드와 CLI를 사용합니다. 캔버스 자체는 모델을 호출하지 않습니다.
디자인 파일이 필요한가요?
앱 소스나 웹사이트 가져오기로 시작합니다. 에이전트가 기존 UI와 가상 fixtures를 연결하여 화면과 상태를 함께 검토하게 합니다.
공개 데모가 내 앱을 바꾸나요?
아니요. 브라우저에서 고정된 가상 예제를 실행합니다. 앱 검토와 소스 변경은 로컬 프로젝트와 코딩 에이전트로 진행합니다.
네이티브 앱은요?
UIKit, SwiftUI, Android는 프로젝트별 원래 런타임 harness와 캡처를 사용합니다. 캡처는 브라우저 안에서 동작하는 네이티브 앱이 아닙니다.
이번 릴리스의 범위와 한계
- Web은 실제 HTML/CSS와 상호작용 시 원래 JavaScript를 사용합니다. UIKit, SwiftUI, Android는 원래 runtime의 harness와 증거가 필요합니다. 캡처 이미지는 조작 가능한 네이티브 앱이 아닙니다.
- 커버리지는 검토한 소스와 케이스의 대응이며 모든 업무 조건의 자동 발견이 아닙니다. UI 검증은 운영 backend나 의료 정확도, 모델 정밀도를 보장하지 않습니다.
- Viewer는 영어가 기본이며 11개 언어를 지원합니다. 공개 데모는 고정된 합성 프론트엔드이고 로컬 통합은 소스를 따릅니다. 실제 iPad 성능은 측정하지 않았습니다.
개인정보 및 텔레메트리
선택적인 최소 사용 이벤트를 Cloudflare를 통해 PostHog로 전송합니다. 내용, 코드, 이름, 경로, 이메일 또는 IP는 PostHog로 전달하지 않습니다. 끌 수 있습니다.