<div align="center">
<img src="https://raw.githubusercontent.com/ashark-ai-05/opencanvas/HEAD/build/icons/icon-256.png" alt="OpenCanvas" width="104" height="104" />
OpenCanvas
AI 응답을 읽지 마세요. 무한 캔버스 위에서 구성되는 것을 지켜보세요.
질문을 하고 차트, 표, 칸반 보드 등을 나란히 받으세요. 각각은 드래그하고 고정하며 유지할 수 있는 실제 위젯입니다. 로컬에서 실행되며 MIT 라이선스를 따르는 모든 모델을 지원합니다.
ci
tests
license
stars
demo
<p>
<img src="https://raw.githubusercontent.com/ashark-ai-05/opencanvas/HEAD/docs/screenshots/mobile-390-after.png" alt="OpenCanvas on a 390px phone: chat docked as a bottom sheet with no-key chips" width="210" />
<img src="https://raw.githubusercontent.com/ashark-ai-05/opencanvas/HEAD/docs/screenshots/mobile-390-canvas.png" alt="After tapping a chip the sheet drops to a one-line composer and the canvas takes the screen" width="210" />
</p>
<sub>휴대폰에서도 작동합니다: 채팅은 하단 시트로 고정되고 위젯이 나타나면 공간을 비켜줍니다. 휴대폰에서 데모 링크를 열어 사용해 보세요.</sub>
<p>
<a href="https://opencanvas-production.up.railway.app"><b
angle▶︎ 라이브 데모 체험하기</b
angle</a>
·
<a href="#start-in-60-seconds"><b
angle🚀 로컬에서 실행하기</b
angle</a>
·
<a href="https://github.com/ashark-ai-05/opencanvas/stargazers"><b
angle⭐ 레포지토리 스타 하기</b
angle</a>
</p>
</div>
캔버스가 필요한 이유
채팅은 스트림입니다. 모델로부터 실제로 원하는 것은 아닙니다.
<p align="center">
<img src="https://raw.githubusercontent.com/ashark-ai-05/opencanvas/HEAD/docs/why-canvas.svg" alt="Left: a chat transcript scrolling endlessly with the one useful line buried in it. Right: the same prompt on OpenCanvas, where a chart, a table and a kanban land side by side and the chat shrinks to one line." width="100%">
</p>
모델은 답변을 출력하지 않습니다. 대신 place_widget 함수를 타입이 지정된 페이로드와 함께 호출하고, 스키마가 이를 검사하며, tldraw가 그림을 그립니다. 답변은 드래그하고, 고정하고, 연결하고, 내보낼 수 있는 객체가 됩니다. 채팅창은 한 줄로 축소됩니다. 캔버스는 대화 전반에 걸쳐 모든 것을 기억합니다.
60초 만에 시작하기
git clone https://github.com/ashark-ai-05/opencanvas.git && cd opencanvas
pnpm install && pnpm start
하나의 프로세스, 하나의 포트만 사용하며 .env 파일이 필요 없습니다. 이미 모델을 가지고 있나요? OpenCanvas를 처음 실행하면 자동으로 감지합니다: 환경 변수에 ANTHROPIC_API_KEY, OPENAI_API_KEY, GEMINI_API_KEY, GROQ_API_KEY, 또는 OPENROUTER_API_KEY가 있거나, 실행 중인 Ollama입니다. 그렇지 않다면 **설정(Settings)**에서 나중에 연결하세요 (모델 선택). 데스크톱 앱을 선호하나요? pnpm electron:dev. UI를 핫 리로드로 해킹하고 싶나요? pnpm dev.
<details>
<summary>곧 출시 예정 (아직 공개되지 않음): 원클릭 설치</summary>
npx opencanvas
docker build -f Dockerfile.local -t opencanvas https://github.com/ashark-ai-05/opencanvas.git
...
런처 패키지는 launcher/에, 로컬 Docker 이미지는 Dockerfile.local에 있습니다. 둘 다 아직 공개되지 않았으며, opencanvas를 npm과 ghcr.io/ashark-ai-05/opencanvas 이미지로 푸시하기 위한 승인을 기다리고 있습니다. 공개 Railway 데모 이미지 (Dockerfile)는 변경되지 않았습니다.
</details>
API 키가 없나요? 그래도 타이핑을 시작하세요. 타이머, 체크리스트, 알림, 이벤트, 메모, 산술 및 단위 변환은 입력하는 즉시 인식되어 Enter를 누르면 배치되며, 모델 호출이 전혀 필요 없습니다. 이것은 새로 설치한 상태의 편집되지 않은 기록입니다:
<p align="center">
<img src="https://raw.githubusercontent.com/ashark-ai-05/opencanvas/HEAD/docs/first-run.gif" alt="API 키가 없는 새로운 OpenCanvas. '25 min focus', '내일 9시 스탠드업', '12 km in miles'와 체크리스트를 입력하면 라이브 타이머, 이벤트 카드, 단위 변환기, 체크리스트가 캔버스에 배치됩니다. 그런 다음 스크립트가 이 저장소의 실제 git log를 /v1/canvas/widgets로 POST하고 테이블 형태로 나타납니다." width="100%">
</p>
<sub><code>node scripts/record-first-run.mjs</code>를 사용하여 녹화되었으며, <code>pnpm start</code>에 대한 내용입니다. API 키가 필요하지 않습니다—빠른 경로에서는 위젯을 배치하고, 캔버스는 처음 몇 개 이후 자동으로 정리되며, 스크립트가 이 저장소의 실제 <code>git log</code>를 <code>/v1/canvas/widgets</code>로 POST합니다. 위의 히어로 GIF는 라이브 모델 실행이 아닌 동일한 REST API(<code>scripts/record-demo.mjs</code>)를 통해 스트리밍된 스크립트 대시보드입니다.</sub>
얻게 되는 것들
-
어떤 모델이든, 같은 에이전트. Anthropic, OpenAI, Gemini, Groq, OpenRouter 또는 완전히 오프라인을 위한 Ollama를 지원합니다. 모든 모델에 대해 단일 도구 호출 루프(tool-calling loop)를 사용합니다.
-
15가지 유형의 위젯. Vega-Lite 차트와 칸반 보드부터 라이브 타이머 및 샌드박스 HTML까지 다양합니다. 하나를 추가하는 것은 스키마와 컴포넌트를 의미하며, 모델은 도구 설명(tool description)에서 이를 가져옵니다.
-
모델이 자체 툴박스를 성장시킵니다. 대화 중간에 새로운 위젯 유형을 등록하고 나중에 재사용할 수 있습니다. Python REPL과 JS REPL이 예제로 제공됩니다.
-
MCP 네이티브. 모든 MCP 서버를 통해 파일 시스템, GitHub 또는 Jira에 연결할 수 있습니다. Claude뿐만 아니라 모든 공급업체와 작동합니다.
-
복합적으로 쌓이는 메모리. 모든 대화는 로컬 SQLite + sqlite-vec 스토어에 인덱싱됩니다. <code>⌘K</code>를 사용하면 몇 주가 지난 어느 채팅에서든 어떤 위젯이든 찾을 수 있습니다.
-
어디서든 구동 가능. REST API와 SSE 버스를 통해 크론 작업(cron jobs), 스크립트 및 다른 에이전트가 캔버스에 위젯을 배치할 수 있게 합니다.
-
당신만의 것. <code>127.0.0.1</code>에 바인딩되며, 토큰 보호 경로(token-guarded routes)와 모델 작성 HTML을 위한 null-origin 샌드박스를 제공하고, 원격 측정 기능(telemetry)이 없습니다. 위협 모델.
-
깔끔하게 정리되는 캔버스. 몇 개의 위젯을 사용하면 레이아웃이 자동으로 정돈됩니다. 언제든지 위젯 개수를 클릭하거나 /tidy를 입력하세요. 넓은 표는 전체 행을 차지합니다.
<p align="center">
<img src="https://raw.githubusercontent.com/ashark-ai-05/opencanvas/HEAD/docs/widgets.png" alt="6가지 OpenCanvas 위젯: Vega-Lite 막대 차트, 칸반 보드, 표, 실행 중인 포모도로 타이머, TypeScript 코드 블록 및 샌드박스 HTML 임베드가 어두운 캔버스에 모두 렌더링됨." width="100%">
</p>
내장된 15가지 위젯 종류 중 6가지. 각 위젯은 스키마와 React 컴포넌트로 구성되어 있으며, 모델이 도구 설명으로부터 이를 학습합니다.
형제 프로젝트: mcp-screen
이제 터미널 에이전트가 실제로 보여줄 수 있고, 당신도 그 내용을 가리킬 수 있습니다. mcp-screen은 캔버스 아이디어를 가져와 이미 사용하고 있는 에이전트에 적용합니다. 한 명령어로 Claude Code, Codex 또는 opencode 옆에 브라우저 탭을 열 수 있습니다:
claude mcp add screen -- npx mcp-screen
이후부터는 에이전트가 ASCII 대신 차트, diff, 플로우 다이어그램, 로그 테일 및 계획 등을 실제 위젯처럼 화면에 배치합니다. 잘못된 것처럼 보이는 막대를 원으로 표시하고
mcp-screen은 OpenCanvas의 이벤트 버스(event bus), 위젯 레지스트리(widget-registry), 샌드박스 디자인을 재사용하며, tldraw나 자체 채팅 UI는 없습니다. 스크립트와 에이전트도 OpenCanvas에 직접 그릴 수 있습니다: POST /v1/canvas/widgets (API 참조).
더 깊이 탐구하기 (Go deeper)
<div align="center">
AI 도구가 나아가야 할 방향이 이것이라면, 저장(star)해 주세요. 다른 사람들이 이 방법을 통해 발견합니다.
MIT · tldraw, Hono, SQLite 및 Vercel AI SDK로 구축됨
</div>
