Vibe Canvas

简体中文 | English

Haz que la conversación de Codex se convierta en un panel de pensamiento filtrable en tiempo real en el lado derecho.

Introducción

Vibe Canvas es un plugin de Codex con prioridad local. Continúas conversando normalmente con Codex a la izquierda, mientras que el Browser de la derecha muestra automáticamente tres capas de contenido:

• El texto original de la conversación, preservado palabra por palabra

• La comprensión estructurada resumida por la IA

• Un mapa mental que crece a medida que avanza la conversación

No es un sitio web independiente que requiera volver a ingresar, enviar o guardar manualmente. La página HTML es solo una vista de proyección en tiempo real en el lado derecho de Codex; la entrada, comprensión y razonamiento aún ocurren en la tarea actual de Codex.

Ideal para lluvia de ideas, elaboración de planes, notas de estudio, revisiones, organización de requisitos y cualquier proceso de pensamiento donde necesites "ver la estructura mientras conversas".

Related MCP server: repo-memory-mcp

Características

• La conversación es la entrada: El Codex izquierdo es la única entrada de texto; no hay un segundo cuadro de entrada dentro del panel.

• Texto original trazable: Cada ronda de entrada del usuario se conserva palabra por palabra, sin que la IA reescriba haciéndose pasar por el original.

• Selección automática de IA: El nuevo contenido se clasifica como picked, candidate o ignored.

• Búfer de candidatos: El contenido que no se puede determinar temporalmente espera el contexto posterior, sin apresurarse a entrar en la estructura.

• Decisión final humana: Cada ronda tiene una casilla de verificación Pick; la selección humana tiene prioridad permanente sobre las decisiones posteriores de la IA.

• Reorganización en tiempo real: Al desmarcar Pick, el contenido correspondiente sale inmediatamente de la estructura y el mapa mental, sin volver a llamar al modelo.

• Prioridad local: Las preferencias de sesión y tema se guardan en el directorio .local/ del workspace actual.

• Dos temas: El tema azul claro predeterminado y el tema cálido se pueden cambiar instantáneamente y recordar la preferencia.

• Sincronización incremental: Cada ronda solo lee la proyección compacta y escribe el incremento actual, evitando reproducir toda la conversación repetidamente.

Capturas de pantalla

Estado Pick seleccionado y no seleccionado

El lado izquierdo muestra el estado seleccionado en verde, el lado derecho el estado no seleccionado en gris; al desmarcar, la estructura y el mapa mental se actualizan sincrónicamente.

Requisitos del entorno

• Codex Desktop, compatible con Plugin local, Skill, MCP Server y Browser derecho

• Node.js 20 o superior

• CLI codex disponible

La versión actual se desarrolló y verificó en macOS.

Instalación

Registra directamente el repositorio de GitHub como Codex Marketplace y luego instala el plugin:

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

Confirma el estado de instalación:

codex plugin list --json

Después de instalar o actualizar, se recomienda crear una nueva tarea de Codex para que Skill y las herramientas MCP se redescubran.

Uso

En una nueva tarea de Codex, ingresa:

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

Luego conversa normalmente:

1. Codex abre Vibe Canvas en el lado derecho.

2. Antes de cada respuesta, la conversación actual sincroniza el texto original de esta ronda y el incremento estructural al panel.

3. La IA selecciona automáticamente el contenido claramente valioso y coloca el contenido incierto en el búfer de candidatos.

4. Puedes hacer clic en Pick en el área de texto original para decidir en cualquier momento si una ronda entra en la estructura y el mapa mental.

5. El interruptor en la esquina superior derecha permite cambiar entre el tema azul y el tema cálido.

El alcance de activación del panel se limita a la tarea actual de Codex; las tareas normales no son tomadas automáticamente.

Principio

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

El núcleo consta de tres partes:

1. Skill se encarga del momento y las restricciones: Después de abrir explícitamente, cada ronda lee el contexto compacto mediante vibe_canvas_get_projection y luego escribe el incremento actual con vibe_canvas_sync_turn. No inicia una segunda sesión de Codex ni falsifica mensajes de usuario.

2. MCP Server se encarga del estado: El proceso Node.js proporciona simultáneamente herramientas MCP y una API HTTP local que solo escucha en 127.0.0.1, y persiste la sesión como JSON.

3. Browser se encarga de la proyección y el filtrado: La página verifica la revisión interna cada ~900 ms y solo se redibuja cuando cambia el estado. Pick y cambio de tema van directamente a través de HTTP local, sin llamar al modelo ni consumir tokens adicionales.

Los tokens provienen principalmente de una lectura de estructura compacta por ronda y una pequeña escritura incremental; el sondeo del navegador, el cambio de tema y el Pick manual son operaciones puramente locales.

Ubicación de datos predeterminada:

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

Atajos de teclado

Actualmente no hay atajos adicionales; usa la conversación de Codex y los controles Pick/tema en el panel.

Desarrollo

npm test

Las pruebas cubren la apertura del panel, la sincronización incremental, el Pick automático de IA, la reevaluación de candidatos, la anulación manual, la preferencia de tema y la restauración del estado a través de JSON-RPC MCP público y la API de proyección HTTP local.

Registro de cambios

Ver CHANGELOG.md.

Licencia

MIT © 2026 prozacLaputa