pascalorg/editor

Pascal Editor – AI 에이전트 훅이 내장된 로컬 우선 3D 빌딩 에디터

개요 – Pascal은 React Three Fiber와 WebGPU 지원 Three.js 렌더러를 기반으로 구축된 오픈소스 브라우저/데스크톱 3D 빌딩 에디터입니다. 로컬에서 실행되며(클라우드 불필요), 간단한 CLI 명령으로 시작할 수 있습니다. 에디터는 Model Context Protocol(MCP) 서버를 노출하여 외부 AI 에이전트(예: Claude, Codex)가 장면과 대화하고, 도구를 실행하고, 지오메트리를 쿼리할 수 있게 합니다.

핵심 구성 요소

패키지	역할
@pascal-app/core	스키마, 장면 상태(Zustand), 레지스트리 계약, 공간 쿼리
@pascal-app/viewer	3D 렌더링, 카메라/컨트롤, 후처리
@pascal-app/editor	UI 패널, 선택 관리자, 편집 도구(벽, 슬래브, 항목, 영역)
@pascal-app/cli	설치 프로그램, 프로세스 관리자, 영구 로컬 데이터(~/.pascal/data/pascal.db)
@pascal-app/mcp	유형화된 프로토콜을 통해 AI 에이전트에 장면 작업을 노출하는 HTTP 서버
@pascal-app/nodes	내장 노드 정의(벽, 바닥, 항목 등)
@pascal-app/capture-*	장면 가져오기/내보내기용 선택적 캡처 세션 형식
apps/editor	위 패키지를 실행 가능한 앱으로 번들하는 Next.js 호스트

작동 방식

1. CLI 실행 – npx @pascal-app/cli editor가 Next.js 에디터와 백그라운드 MCP 서비스를 무료 루프백 포트에서 시작합니다.
2. 장면 모델 – 노드는 평평한 객체(id, type, parentId 등)이며 Zustand 스토어(useScene)에 저장됩니다. 변경 사항은 IndexedDB에 영구 저장되고 Zundo를 통해 실행 취소/다시 실행할 수 있습니다.
3. 렌더링 – React-Three-Fiber 구성 요소(NodeRenderer, WallRenderer 등)가 Three.js 객체를 생성하고 빠른 조회 레지스트리(sceneRegistry)에 등록합니다.
4. 시스템 – React 구성 요소가 매 프레임(useFrame) 실행되며 스토어에서 더티로 표시된 노드의 지오메트리만 다시 계산하여 업데이트 비용을 낮춥니다.
5. AI 통합 – MCP 서버는 AI 에이전트가 호출할 수 있는 JSON 기반 프로토콜을 구현합니다(pascal mcp connect, pascal mcp setup claude). pascal-3d 및 furniture-fit과 같은 스킬은 skills.sh 마켓플레이스를 통해 배포되며 에이전트가 API 키 없이 장면 편집 작업을 호출할 수 있게 합니다.

주요 기능

• 로컬 우선: 외부 서비스 불필요. 모든 데이터는 사용자 머신에 저장됩니다.
• WebGPU 가속 3D: React Three Fiber + Drei를 사용한 실시간 렌더링.
• 플러그인 시스템 – 개발자는 새 노드 유형, 도구 또는 사이드 패널을 npm 패키지로 제공할 수 있으며 에디터가 런타임에 로드합니다.
• AI 준비 MCP – 장면 상태를 설명하고 도구 명령을 수락하며 검증 결과를 반환하는 표준 HTTP 엔드포인트로, "AI 지원 설계" 워크플로를 가능하게 합니다.
• 버전 관리 모노레포 – Turborepo가 core, viewer, editor, CLI, MCP 패키지를 관리합니다. 각 패키지는 npm에 독립적으로 게시할 수 있습니다.
• 실행 취소/다시 실행 및 영구 저장 – Zundo가 50단계 기록을 제공합니다. IndexedDB가 세션 간 장면을 저장합니다.

시작하기

# 빠른 설치(Node ≥22.13)
npx @pascal-app/cli editor   # 에디터 + MCP 실행

개발에는 리포지토리 루트에 Bun(또는 pnpm)이 필요합니다:

bun install          # 모든 워크스페이스 설치
bun dev              # 감시 + Next.js 개발 서버 시작(http://localhost:3002)

빌드 및 게시:

turbo build                     # 모든 패키지 빌드
npm publish --workspace=@pascal-app/core   # 다른 패키지에서도 반복

일반적인 사용 사례

• 클라우드 의존성 없이 빠른 3D 레이아웃을 만드는 건축가 또는 인테리어 디자이너.
• 3D 장면을 조작하는 AI 에이전트를 프로토타입하는 연구자(예: "벽에 의자를 배치").
• 도메인별 노드(나무, HVAC, 조명)로 에디터를 확장하는 플러그인 작성자.
• 협업 설계를 위한 결정적이고 버전 관리된 환경을 원하는 팀(별도의 PASCAL_HOME 디렉토리로 여러 MCP 인스턴스 실행).

AI 에이전트 워크플로 예시

1. 스킬 패키지 설치: npx skills add pascalorg/editor --skill pascal-3d.
2. 로컬 MCP 서버 시작(pascal mcp setup claude).
3. Claude Code에서 /mcp connect 실행 – 플러그인이 자동으로 에이전트를 로컬 MCP 엔드포인트로 안내합니다.
4. 에이전트는 이제 createNode({type:"wall", …}) 또는 runTool("ItemTool", {item:"chair", position:[1,0,2]})와 같은 명령을 실행하고 즉각적인 시각적 피드백을 받을 수 있습니다.

더 알아보기

• 문서 – https://editor.pascal.app/docs/developers/local-editor
• 플러그인 가이드 – https://editor.pascal.app/docs/developers/plugins
• 예제 플러그인 – https://github.com/pascalorg/plugin-trees
• Discord 커뮤니티 – https://discord.gg/XRKsDcpqgS

---

위 정보는 모두 리포지토리의 README에서 직접 가져온 것이며 추가 기능은 추론되지 않았습니다.