opencode-canvas

Interactive terminal canvases for OpenCode - spawn rich TUI interfaces for calendars, documents, flight bookings, and more directly from your AI coding assistant.

What is this?

opencode-canvas gives OpenCode its own display. Instead of text-only responses, the AI can spawn interactive terminal interfaces in tmux split panes. This enables:

• Calendar views - Visual date pickers and event displays
• Document editors - Rich text editing with selections
• Flight booking - Interactive flight search and selection
• Custom canvases - Build your own TUI interfaces

Requirements

• Bun - JavaScript runtime
• tmux - Canvases spawn in split panes
• OpenCode - AI coding assistant

Installation

From npm

npm install @mailshieldai/opencode-canvas
# or
bun add @mailshieldai/opencode-canvas

From source

git clone https://github.com/mailshieldai/opencode-canvas
cd opencode-canvas
bun install
bun run build

Configuration

Add to your opencode.jsonc (in project root or ~/.config/opencode/config.json):

{
"plugin": ["@mailshieldai/opencode-canvas"],
"permission": {
"canvas_*": "allow"
}
}

Tools

The plugin provides 4 tools:

Tool	Description
canvas_spawn	Create a new canvas (calendar, document, or flight)
canvas_update	Update canvas state via IPC
canvas_selection	Get current selection from canvas
canvas_close	Close a canvas session

canvas_spawn

Spawns a new canvas in a tmux split pane.

canvas_spawn({canvas_type: "calendar"|"document"|"flight",initial_state: {/* canvas-specific state */}})

canvas_update

Updates the state of an existing canvas.

canvas_update({session_id: "canvas-abc123",state: {/* new state */}})

canvas_selection

Retrieves the current selection from a canvas (e.g., selected date, highlighted text).

canvas_selection({session_id: "canvas-abc123"})

canvas_close

Closes a canvas and cleans up resources.

canvas_close({session_id: "canvas-abc123"})

Skills

The plugin includes skills that teach OpenCode how to use each canvas type:

• canvas - General canvas usage patterns
• calendar - Calendar-specific interactions
• document - Document editing patterns
• flight - Flight booking workflows

Architecture

┌─────────────────┐ IPC (Unix Socket) ┌─────────────────┐
│ OpenCode │◄──────────────────────────►│ Canvas TUI │
│ (Controller) │ │ (React/Ink) │
└─────────────────┘ └─────────────────┘
│ │
│ tool calls │ renders in
▼ ▼
┌─────────────────┐ ┌─────────────────┐
│ opencode-canvas│ │ tmux split │
│ plugin │ │ pane │
└─────────────────┘ └─────────────────┘

Development

# Install dependencies
bun install
# Build plugin
bun run build
# Run tests
bun test# Lint
bun run lint

Publishing to npm

# Login to npm (one-time)
npm login
# Build and publish
bun run build
npm publish

License

MIT - See LICENSE for details.

Credits

Based on claude-canvas by David Siegel, adapted for OpenCode by MailShield AI.