Vibe Canvas

简体中文 | English

Codex 대화를 오른쪽에서 실시간으로 필터 가능한 사고 보드로 키워보세요.

소개

Vibe Canvas는 로컬 우선 Codex 플러그인입니다. 왼쪽에서 평소처럼 Codex와 대화를 계속하면 오른쪽 Browser가 세 가지 레이어를 자동으로 표시합니다:

• 원문 그대로 보존된 대화 내용

• AI가 요약한 구조화된 이해

• 대화가 진행됨에 따라 계속 성장하는 마인드맵

다시 입력하거나, 다시 보내거나, 수동으로 저장해야 하는 독립적인 웹사이트가 아닙니다. HTML 페이지는 Codex 오른쪽의 실시간 프로젝션 뷰일 뿐입니다. 입력, 이해 및 추론은 여전히 현재 Codex 작업 내에서 이루어집니다.

브레인스토밍, 시나리오 시뮬레이션, 학습 노트, 회고, 요구사항 정리 및 '대화하면서 구조를 보고 싶은' 모든 사고 과정에 적합합니다.

Related MCP server: repo-memory-mcp

기능

• 대화가 곧 입력: 왼쪽 Codex가 유일한 텍스트 입력 창이며, 보드에는 두 번째 입력 상자가 없습니다.

• 원문 추적 가능: 각 사용자 입력 라운드가 원문 그대로 보존되며, AI가 변형한 내용이 원문을 대체하지 않습니다.

• AI 자동 Pick: 새 내용은 picked, candidate 또는 ignored로 판단됩니다.

• 후보 버퍼: 당장 판단하기 어려운 내용은 이후 맥락을 기다리며 구조에 서둘러 포함되지 않습니다.

• 인간의 최종 결정: 각 라운드마다 Pick 체크박스가 있습니다. 인간의 선택은 이후 AI 판단보다 영구적으로 우선합니다.

• 실시간 재구성: Pick을 해제하면 해당 내용이 즉시 구조와 마인드맵에서 제거되며, 모델을 다시 호출하지 않습니다.

• 로컬 우선: 세션 및 테마 환경 설정은 현재 workspace의 .local/ 디렉토리에 저장됩니다.

• 이중 테마: 밝은 파란색 기본 테마와 따뜻한 색상 테마를 즉시 전환할 수 있으며 환경 설정이 기억됩니다.

• 증분 동기화: 각 라운드마다 간결한 프로젝션만 읽고 현재 증분만 기록하여, 전체 대화를 반복 재생하지 않습니다.

스크린샷

Pick 선택 및 선택 해제

왼쪽은 녹색 선택 상태, 오른쪽은 회색 선택 해제 상태입니다. 해제하면 구조와 마인드맵이 동기화되어 업데이트됩니다.

환경 요구 사항

• 로컬 Plugin, Skill, MCP Server 및 오른쪽 Browser를 지원하는 Codex Desktop

• Node.js 20 이상

• 사용 가능한 codex CLI

현재 버전은 macOS에서 개발 및 검증되었습니다.

설치

GitHub 저장소를 Codex Marketplace로 직접 등록한 후, 해당 저장소의 플러그인을 설치하세요:

codex plugin marketplace add prozacLaputa/vibe-canvas
codex plugin add vibe-canvas@vibe-canvas --json

설치 상태 확인:

codex plugin list --json

설치 또는 업그레이드 후에는 새 Codex 작업을 생성하여 Skill 및 MCP 도구가 재발견을 완료하도록 하는 것이 좋습니다.

사용법

새 Codex 작업에 다음을 입력하세요:

使用 $vibe-canvas 打开一个思考画板

그런 다음 평소처럼 대화하면 됩니다:

1. Codex가 오른쪽에 Vibe Canvas를 엽니다.

2. 각 응답 전에 현재 대화가 이번 라운드의 원문과 구조 증분을 보드에 동기화합니다.

3. AI가 명확히 가치 있는 내용을 자동 선택하고, 불확실한 내용은 후보 버퍼에 넣습니다.

4. 원문 영역에서 Pick을 클릭하여 언제든지 특정 라운드가 구조 및 마인드맵에 포함될지 결정할 수 있습니다.

5. 오른쪽 상단 Switch를 사용하여 파란색 테마와 따뜻한 색상 테마 간에 전환할 수 있습니다.

캔버스 활성화 범위는 현재 Codex 작업으로 제한됩니다. 일반 작업은 자동으로 전환되지 않습니다.

원리

flowchart LR
    U[左侧正常对话] --> C[当前 Codex 任务]
    C -->|读取紧凑投影| M[本地 MCP Server]
    C -->|写入本轮原文与结构增量| M
    M --> J[本地 Session JSON]
    J -->|revision 变化| B[右侧 Browser 投影]
    B -->|Pick / 主题 PATCH| J

핵심은 세 부분으로 구성됩니다:

1. Skill: 타이밍과 제약 조건 담당: 명시적으로 연 후, 각 라운드마다 vibe_canvas_get_projection으로 간결한 맥락을 읽고 vibe_canvas_sync_turn으로 현재 증분을 기록합니다. 두 번째 Codex 세션을 시작하거나 사용자 메시지를 위조하지 않습니다.

2. MCP Server: 상태 담당: Node.js 프로세스가 MCP 도구와 127.0.0.1에서만 수신하는 로컬 HTTP API를 동시에 제공하며, 세션을 JSON으로 영속화합니다.

3. Browser: 프로젝션 및 필터링 담당: 페이지가 약 900ms마다 내부 개정을 확인하고 상태가 변경된 경우에만 다시 렌더링합니다. Pick 및 테마 전환은 로컬 HTTP를 통해 직접 처리되며, 모델을 호출하지 않고 추가 토큰을 소비하지 않습니다.

토큰은 주로 각 라운드의 한 번의 간결한 구조 읽기와 한 번의 소규모 증분 기록에 사용됩니다. 브라우저 폴링, 테마 전환 및 수동 Pick은 모두 순수 로컬 작업입니다.

기본 데이터 위치:

<workspace>/.local/vibe-canvas-demo/sessions/<session-id>.json
<workspace>/.local/vibe-canvas-demo/preferences.json

단축키

현재 추가 단축키는 없습니다. Codex 대화와 캔버스의 Pick/테마 컨트롤을 사용하면 됩니다.

개발

npm test

테스트는 공개 MCP JSON-RPC 및 로컬 HTTP 프로젝션 API를 통해 캔버스 열기, 증분 동기화, AI Pick, 후보 재판단, 수동 재정의, 테마 환경 설정 및 상태 복구를 다룹니다.

변경 로그

CHANGELOG.md를 참조하세요.

라이선스

MIT © 2026 prozacLaputa