Skip to main content
Glama

Vibe Canvas

Version Node.js Codex Plugin License

简体中文 | English

Codex 대화가 오른쪽에서 실시간으로 필터 가능한 사고 캔버스로 자라납니다.

Vibe Canvas 인터페이스

소개

Vibe Canvas는 로컬 우선(Local-first) Codex 플러그인입니다. 왼쪽에서 평소처럼 Codex와 대화를 계속하면, 오른쪽 Browser가 구조화된 콘텐츠를 자동으로 표시하고 각 3단계 결론을 필요에 따라 4단계 원문 증거로 펼칠 수 있습니다:

  • 대화 원문을 그대로 보존

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

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

  • 기본적으로 접혀 있고, 클릭하면 볼 수 있는 원문 증거

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

브레인스토밍, 시나리오 검토, 학습 노트, 회고, 요구사항 정리, 그리고 "대화하면서 구조를 보는" 사고 과정이 필요한 모든 작업에 적합합니다.

Related MCP server: repo-memory-mcp

기능

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

  • 원문 추적 가능: 매 턴 사용자 입력이 그대로 보존되며, AI가 재작성한 내용을 원문으로 위장하지 않습니다.

  • AI 자동 Pick: 새 콘텐츠는 picked, candidate 또는 ignored로 판단됩니다.

  • 후보 버퍼: 당장 판단할 수 없는 내용은 서두르지 않고 이후 맥락을 기다립니다.

  • 인간의 최종 결정: 매 턴 Pick Checkbox가 있으며, 인간의 선택은 이후 AI 판단보다 영구적으로 우선합니다.

  • 실시간 재구성: Pick을 해제하면 해당 콘텐츠는 즉시 구조와 마인드맵에서 빠지며, 모델을 다시 호출하지 않습니다.

  • 로컬 우선: 세션 및 테마 선호도는 현재 workspace의 .local/ 디렉터리에 저장됩니다.

  • 이중 테마: 밝은 파란색 기본 테마와 따뜻한 색상 테마를 즉시 전환하고 선호도를 기억할 수 있습니다.

  • 증분 동기화: 매 턴 압축된 프로젝션만 읽고 현재 증분만 기록하여 전체 대화를 반복 재생하지 않습니다.

  • 턴 간 집계: 동일한 질문은 안정적인 Topic을 재사용하고, 동일한 명제는 하나의 Claim으로 병합되어 여러 턴의 증거가 누적됩니다. 더 이상 모든 문장을 단순히 새 노드로 추가하지 않습니다.

  • 교차 토픽: 하나의 관점은 한 번만 저장되며, primary / related Topic과 유형화된 관계로 연결되어 여러 브랜치에 중복 표시되지 않습니다.

  • 실제 충돌 보존: 반대 관점은 중복으로 삭제되지 않고 각각 보존되어 contradicts로 표시됩니다.

  • 유계 프로젝션: 기본적으로 최대 25개 노드를 표시하고, 다음 턴 매칭을 위해 최근 활성 Claim 40개를 유지합니다. 요약 및 증거 인덱스도 고정 상한을 유지합니다.

  • 4단계 원문 증거: 3단계 Claim에 원문 N이 표시되며, 클릭하거나 Enter / 스페이스를 누르면 원문 조각이 펼쳐집니다. 원문은 해당 사용자 입력에서 정확히 일치해야 하며, AI가 지어낼 수 없습니다.

스크린샷

Pick 선택 및 미선택

왼쪽은 녹색 선택 상태, 오른쪽은 회색 미선택 상태입니다. 선택 해제 시 구조와 마인드맵이 동기적으로 업데이트됩니다.

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로 파란색과 따뜻한 색상 테마를 전환할 수 있습니다.

  6. 마인드맵의 3단계 요점을 클릭하면 4단계 원문을 펼치거나 접을 수 있습니다.

캔버스 활성화 범위는 현재 Codex 작업에만 한정됩니다. 일반 작업은 자동으로 인계되지 않습니다.

원리

flowchart LR
    U[左侧正常对话] --> C[当前 Codex 任务]
    C -->|读取紧凑投影| M[本地 MCP Server]
    C -->|写入原文与类型化概念操作| M
    M --> J[本地 Session JSON]
    M --> R[Concept Graph Reducer]
    R --> J
    J -->|revision 变化| B[右侧 Browser 投影]
    B -->|Pick / 主题 PATCH| J

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

  1. Skill은 타이밍과 의미 판단을 담당: 명시적으로 연 후 매 턴 vibe_canvas_get_projection으로 canonical Topic과 최근 Claim을 읽고, 현재 표현이 재사용, 병합, 연결 또는 분할되어야 하는지 판단합니다. 두 번째 Codex 세션을 시작하지 않으며, 사용자 메시지를 위조하지 않습니다.

  2. MCP Server는 결정적 상태를 담당: Node.js 프로세스가 MCP 도구와 127.0.0.1만 수신하는 로컬 HTTP API를 제공합니다. Reducer는 안정적인 ID, 정규화된 정확한 중복 제거, Pick 출처 추적, 교차 토픽 관계, 유계 프로젝션, 그리고 각 sourceQuote가 실제로 이번 턴 사용자 원문에서 왔는지 검증하고 전체 세션을 JSON으로 영속화합니다.

  3. Browser는 프로젝션과 필터링을 담당: 페이지는 약 900ms마다 내부 revision을 확인하고 상태가 변경될 때만 다시 그립니다. Pick, 테마 전환, 원문 펼치기는 로컬에서 직접 완료되며 모델을 호출하지 않고 추가 Token을 소비하지 않습니다.

의미적 동의어 재작성은 현재 Codex가 판단합니다. 서버는 정규화 후 완전히 동일한 질문이나 관점에 대해서만 결정적 폴백을 제공하므로, 임의의 재작성이 100% 자동 병합된다고 허위 약속하지 않습니다. 집계 범위는 동일한 Canvas 세션이며, 다른 Codex 작업 간에 자동 병합되지 않습니다.

Token은 주로 매 턴 한 번의 압축 구조 읽기와 한 번의 소형 증분 쓰기에서 발생합니다. 화면은 25개 노드로 제한되고, 매칭 인덱스는 최근 Claim 40개로 제한됩니다. Codex의 압축 프로젝션은 증거 수와 최근 3개 소스 ID만 반환하며 원문을 중복으로 전달하지 않습니다. 원문 증거는 로컬 Browser에만 전송되며, 기본적으로 최근 5개를 표시하고 전체 출처 추적은 로컬 JSON에 남습니다. 브라우저 폴링, 테마 전환, 수동 Pick, 원문 펼치기는 모두 순수 로컬 작업입니다.

기본 데이터 위치:

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

단축키

원문 N이 표시된 3단계 요점에 포커스를 맞춘 후 Enter 또는 스페이스를 누르면 4단계 원문을 펼치거나 접을 수 있습니다. 기타 작업은 Codex 대화와 캔버스의 Pick / 테마 컨트롤을 사용하면 됩니다.

개발

npm test

캔버스 열기, 증분 동기화, AI Pick, 후보 재판단, 수동 재정의, 테마 선호도, 상태 복원, 턴 간 중복 제거, 교차 관계, 원문 증거 검증, 기본 접힘, 마우스 및 키보드 펼치기, 12턴 집계 재생, 100턴 증거 경계를 포함한 33개 동작 테스트와 브라우저 시각 테스트가 포함되어 있습니다.

변경 로그

CHANGELOG.md 참조.

라이선스

MIT © 2026 prozacLaputa

Related MCP Connectors

Related MCP Servers

  • A
    license
    A
    quality
    C
    maintenance
    Local-first external brain for Claude Code, Codex, and any MCP client. Stores decisions, entities, and session artifacts in one SQLite file and exposes MCP tools for recall, page, promote, review, graph-query, and source-status.
    11
    14 npm
    5
    MIT
  • A
    license
    Not graded
    quality
    C
    maintenance
    A local MCP server that provides a shared context and learning foundation across multiple AI tools (Claude, Copilot, Codex) for multiple projects, enabling persistent knowledge, decisions, and gap reflection through note storage.
    MIT
  • A
    license
    B
    quality
    D
    maintenance
    Local Markdown-backed memory tools for Codex and other MCP-capable agents. Exposes durable agent knowledge via CLI and MCP server.
    5
    MIT