终端交互画布工具

TUI Canvas 是一个框架无关的终端交互画布工具,支持多种TUI框架和AI编码助手,适用于终端应用开发和AI辅助编程场景。

  • by Czaruno
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Czaruno/tui-canvas

使用说明

TUI帆布

用于AI编码助手的与框架无关的交互式终端画布。

适用于 开源代码, 克劳德代码, 光标, Gemini CLI, Grok CLI,以及任何与MCP兼容的AI线束。

支持多种TUI框架: OpenTUI 主要的,重要的 墨水以及更多。

特性

  • 协议优先设计 -任何TUI框架都可以实现画布
  • 多种实现方式 -在OpenTUI、Ink、Bubbletea等中使用相同的画布。
  • MCP集成 -通过MCP与任何AI编码助手配合使用
  • tmux集成 -罐子在分裂的窗格中产卵

内置Canvases

  • 日历 -每周事件视图,会议时间选择器
  • 文档 -带文本选择的Markdown查看器/编辑器
  • 航班 -使用座位地图预订赛博朋克主题的航班

快速开始

安装

# Run without installing globally
bunx tui-canvas list

MCP配置

OpenCode(opencode.json 在此回购中):

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "tui-canvas": {
      "type": "local",
      "command": ["bun", "run", "packages/mcp/src/index.ts"],
      "enabled": true
    }
  }
}

其他MCP客户端:

{
  "mcpServers": {
    "tui-canvas": {
      "command": "bunx",
      "args": ["tui-canvas"]
    }
  }
}

CLI使用情况

# List available canvases
bunx tui-canvas list

# Spawn a canvas (must be in tmux)
bunx tui-canvas spawn calendar --scenario display
bunx tui-canvas spawn document --scenario edit --config '{"content": "# Hello"}'

# Use specific implementation
bunx tui-canvas spawn calendar --implementation ink
bunx tui-canvas spawn calendar --implementation opentui

项目结构

tui-canvas/
├── packages/
│   ├── protocol/         # Protocol specification & types
│   ├── cli/              # Unified CLI
│   ├── mcp/              # MCP server
│   └── runtime/          # Framework adapters
│       ├── opentui/      # OpenTUI runtime (primary)
│       └── ink/          # Ink runtime
│
├── canvases/             # Canvas implementations
│   ├── calendar/
│   │   ├── manifest.json # Canvas manifest
│   │   ├── opentui/      # OpenTUI implementation
│   │   └── ink/          # Ink implementation
│   ├── document/
│   └── flight/

支持的框架

框架 状态 描述
OpenTUI 初级 TypeScript TUI框架(anomalyco/opentui)
墨水 次要 对终端做出反应
Bubbletea 计划中 Go TUI框架
文本 计划 Python TUI框架

支持的AI线束

线束 检测
OpenCode OPENCODE env
克劳德代码 CLAUDE_CODE env
光标 CURSOR_SESSION env
Gemini CLI GEMINI_CLI / GEMINI_API_KEY env
Grok CLI GROK_CLI / XAI_API_KEY env
通用 任何MCP客户端的回退

制作罐子

画布清单

每个画布都有一个 manifest.json:

{
  "id": "my-canvas",
  "name": "My Canvas",
  "description": "A custom canvas",
  "version": "1.0.0",
  
  "scenarios": {
    "default": {
      "description": "Default scenario",
      "configSchema": { ... },
      "resultSchema": { ... }
    }
  },
  
  "implementations": {
    "opentui": {
      "framework": "opentui",
      "reconciler": "solid",
      "entrypoint": "./opentui/index.ts"
    },
    "ink": {
      "framework": "ink",
      "entrypoint": "./ink/index.tsx"
    }
  },
  
  "defaultImplementation": "opentui"
}

协议

Canvases使用TUI Canvas协议通过Unix套接字进行通信:

画布→ 控制器:

{ type: "ready", scenario: string }
{ type: "selected", data: unknown }
{ type: "cancelled", reason?: string }

控制器→ 画布:

{ type: "update", config: unknown }
{ type: "close" }

发展

# Clone and install
git clone https://github.com/anomalyco/tui-canvas.git
cd tui-canvas
bun install

# Test CLI
bun run packages/cli/src/index.ts list
bun run packages/cli/src/index.ts spawn calendar

# Start MCP server
bun run packages/mcp/src/index.ts

需求

许可证

麻省理工学院

学分

最初基于 克劳德画布. OpenTUI框架: github/anomalyco/opentui