tldraw, AI 에이전트를 텍스트에서 캔버스로 끌어올리다

그는 에이전트에게 지정된 문서를 찾아 tldraw 데스크톱 애플리케이션 내에서 데모를 구성하도록 지시했습니다. 에이전트는 백그라운드에서 요청을 처리하기 시작했으며, 나중에 작업 결과가 공개될 수 있도록 준비했습니다.

tldraw의 제품 엔지니어인 Max Drake는 자신과 자신의 업무, 특히 캔버스 내 에이전트에 중점을 둔 작업을 소개했습니다. 캔버스 기반 에이전트 상호 작용에 대한 그의 참여는 ChatGPT가 대중에 공개되기 전부터 시작되었으며, 이 전문 분야에 대한 그의 오랜 헌신을 강조합니다.

tldraw는 무료 무한 캔버스 화이트보드 애플리케이션으로, 사용자에게 유연한 디지털 공간을 제공합니다. 애플리케이션 외에도 tldraw는 개발자가 자신만의 맞춤형 화이트보드와 유사한 애플리케이션을 만들 수 있도록 지원하는 중요한 무한 캔버스 SDK를 제공합니다. 이 SDK는 객체 선택, 크기 조정 및 복잡한 행렬 수학과 같은 복잡한 기능을 처리하여 캔버스 기반 도구 개발 프로세스를 간소화합니다.

SDK의 강력한 기능은 정교한 캔버스 기반 도구 개발을 단순화하며, 다양한 개발 환경에서 그 가치를 입증합니다.

tldraw는 SDK 및 애플리케이션 모두에서 라이브 동기화를 통한 내장 멀티플레이어 기능을 통합합니다. 공유 커서, 선택 및 뷰포트와 같은 기능은 원활한 협업을 촉진하여 인간과 AI 에이전트가 동일한 캔버스 환경 내에서 효율적으로 함께 작업할 수 있도록 합니다.

현재 성공적인 코딩 에이전트는 주로 텍스트 기반 환경에서 작동하며, 텍스트 입력 및 출력에 대한 훈련을 활용합니다. 이 발표는 이러한 전통적인 텍스트 전용 에이전트에서 시각적 캔버스에서 공간 상호 작용이 가능한 에이전트로의 전환을 강조하며, AI 에이전트 개발의 새로운 지평을 열고 있습니다.

에이전트는 캔버스 내에서 객체, 상대적 위치, 심지어 바람이나 연기와 같은 환경 효과도 성공적으로 식별할 수 있습니다. 이 해석을 통해 반복적인 데이터 처리를 통해 캔버스에서 작업을 정확하게 매핑하고 실행할 수 있습니다.

이제 에이전트는 캔버스의 현재 상태를 기반으로 코딩 에이전트에서 관찰되는 자체 지시 행동을 반영하여 독립적으로 목표를 설정할 수 있습니다. 이 시스템을 통해 에이전트는 캔버스 환경을 검색하고 탐색하여 더 복잡하고 연속적인 작업을 수행할 수 있습니다.

tldraw의 디자인은 단일 사용자 에이전트 시스템을 넘어 멀티플레이어 및 협업 상호 작용을 강조하도록 변경되었습니다. 'Fairies' 프로젝트는 특히 인간과 에이전트가 동일한 공유 캔버스 공간 내에서 상호 작용하여 진정한 협업 환경을 조성할 수 있도록 합니다. 개별 에이전트 사용자 정의는 바쁜 협업 캔버스에서 명확한 정체성을 유지하고 기여를 추적하는 데 중요합니다.

사용자는 여러 에이전트를 소환하여 특정 작업을 할당하거나, 조정된 노력을 위해 그룹화할 수 있습니다. 이 시스템은 시각적 인터페이스 내에서 복잡한 다중 에이전트 워크플로를 용이하게 합니다.

이 시스템은 광범위한 텍스트를 읽을 필요 없이 많은 수의 에이전트를 효율적으로 감독할 수 있도록 합니다. 오케스트레이터 에이전트는 작업을 위임하고, 진행 상황을 모니터링하며, 검토 요청을 관리하며, 이 모든 것이 캔버스에 시각적으로 표시됩니다.

캔버스 의존적인 아키텍처로 인해 실제 외부 작업과 통합하는 것이 어렵습니다. 사용자는 이러한 특정 기능을 액세스하고 활용하려면 전체 캔버스 하네스에 적극적으로 '옵트인'해야 합니다.

그래프의 각 노드는 작업을 자율적으로 수행할 수 있는 코딩 에이전트를 나타냅니다. 이 시스템을 통해 사용자는 에이전트가 완전히 생성하고 실행하는 복잡한 다단계 프로젝트를 관리할 수 있습니다.

tldraw 데스크톱 앱은 멀티플레이어 기능을 지원하여 팀이 효율적으로 협업하고 함께 작업할 수 있도록 합니다. 여기에는 캔버스 인터페이스 내에서 풀 리퀘스트를 직접 관리하고 병합하는 것이 포함됩니다. 사용자는 Claude와 같은 AI 에이전트에 작업을 할당하고 여러 협업자 간에 진행 상황을 실시간으로 동기화할 수 있습니다.

tldraw 데스크톱 앱은 로컬 스크립팅 환경 역할을 하여 편집기 인스턴스를 외부 에이전트에 노출합니다. 이 설정은 Claude Code와 같은 에이전트가 캔버스에 대해 일반 JavaScript를 직접 실행하여 다양한 워크플로를 자동화할 수 있도록 합니다. 이 기능은 '코드 모드' 기능과 완벽하게 통합되어 캔버스의 프로그래밍 제어를 향상시킵니다.

컴퓨터에 접근 가능한 에이전트는 캔버스 환경을 초월하여 운영 체제와 직접 상호 작용할 수 있으며, tldraw가 창 관리자 역할을 할 수 있도록 합니다. 예를 들어, 컴퓨터에 직접 접근하는 Claude Code는 캔버스에 국한되지 않고 외부 애플리케이션을 제어할 수 있습니다. 에이전트가 Pong의 데스크톱 버전을 제어하기 위해 임시 UI를 생성하는 예시가 시연되었습니다.

tldraw와 통합된 에이전트는 이메일 및 노션 문서의 프로젝트 사양을 포함한 실제 데이터 소스를 처리할 수 있습니다. 이 기능은 에이전트가 기술 사양을 캔버스에 직접 자동으로 구현할 수 있도록 합니다. 이는 추상적인 에이전트 논리와 실질적인 시각적 출력 간의 간극을 효과적으로 메워줍니다.

이 공유 공간 환경은 인간과 AI 에이전트 간의 원활한 협업을 가능하게 하는 중요한 다리 역할을 합니다.