kgoedecke/doop

해결하는 문제

Doop은 인간과 AI 에이전트가 실시간으로 협업할 수 있는 멀티플레이어 디자인 캔버스를 제공합니다. 프롬프트 전송 후 새로 고침하는 사이클을 제거하여, 에이전트가 직접 공유 캔버스 위에 디자인을 스트리밍할 수 있게 함으로써 사용자가 AI의 작업을 실시간으로 관찰하고 즉각적인 피드백을 제공할 수 있습니다.

작동 방식

이 플랫폼은 "프레임"(실제 HTML을 렌더링하는 사전 격리된 iframe)으로 구성된 공유 캔버스를 사용합니다. 인간은 브라우저 인터페이스를 통해 편집하고, AI 에이전트는 내장된 Model Context Protocol (MCP) 서버를 통해 연결됩니다. 서버는 WebSockets를 통해 실시간 동기화를 관리하며, 커서, 존재 상태, 그리고 "타이핑 리베일" 기능을 통해 에이전트가 생성한 HTML 스트림을 인간 관람자가 쉽게 이해할 수 있도록 부드러운 시각적 흐름으로 변환합니다.

대상 사용자

• UI/UX 디자이너: 웹 레이아웃 작업에서 AI 에이전트와 협업하고 싶은 분들.
• 개발자: Paper.design과 같은 공동 디자인 도구의 오픈소스 대안을 찾는 분들.
• AI 에이전트 개발자: LLM을 시각적이고 멀티플레이어 환경에 통합하고 싶은 분들.

주요 기능

• MCP 통합: Claude Code 또는 어떤 MCP 클라이언트와도 원활하게 연결되어 에이전트를 1등급 협업자로 활용할 수 있습니다.
• 라이브 스트리밍 디자인: 에이전트는 HTML을 청크 단위로 스트리밍하며, 서버는 활성 작업을 나타내는 펄스 효과가 있는 테두리와 함께 부드러운 라이브 리베일을 렌더링합니다.
• 멀티플레이어 경험: 실시간 커서, 존재 표시, 모든 인간 및 에이전트의 활동을 공유하는 활동 피드를 제공합니다.
• 에이전트 조정: 사용자는 특정 에이전트 작업에 피드백을 남길 수 있으며, 다음에 캔버스에 접근하는 에이전트가 해당 작업을 인수하고 처리합니다.
• 자체 호스팅 가능: Docker 또는 npm을 통해 빠르게 배포 가능하며, 내장된 Postgres (PGlite) 데이터베이스를 통해 구성 없이 시작할 수 있습니다.