Canvas TUI Toolkit - Claude Code 终端交互组件库

本文介绍 Canvas TUI Toolkit，一个用于 Claude Code 的终端交互式 UI 组件库。它允许 Claude 在终端中生成和控制各种交互式画布，包括日历、文档编辑器和航班预订界面。

概述

Canvas 提供了交互式终端显示（TUIs），Claude 可以生成和控制这些画布。每种画布类型支持多种场景，适用于不同的交互模式。

可用的画布类型

示例提示

你可以向 Claude 询问以下内容：

日历：

• "Schedule a meeting with the team next week"
• "Find a time when Alice and Bob are both free"

文档：

• "Draft an email to the sales team about the new feature"
• "Help me edit this document — let me select what to change"

航班：

• "Find flights from SFO to Denver next Friday"
• "Book me a window seat on the morning flight"

快速开始

cd ${CLAUDE_PLUGIN_ROOT}

# 在当前终端运行画布
bun run src/cli.ts show calendar

# 在新的 tmux 分屏中生成画布
bun run src/cli.ts spawn calendar --scenario meeting-picker --config '{...}'

生成画布

对于交互式场景，始终使用 spawn - 这会在 tmux 分屏中打开画布，同时保持对话终端可用。

bun run src/cli.ts spawn [kind] --scenario [name] --config '[json]'

参数：

• kind: 画布类型（calendar, document, flight）
• --scenario: 交互模式（如 display, meeting-picker, edit）
• --config: 画布的 JSON 配置
• --id: 可选的画布实例 ID，用于 IPC

IPC 通信

交互式画布通过 Unix 域套接字进行通信。

Canvas → Controller:

{ type: "ready", scenario }        // 画布已就绪
{ type: "selected", data }         // 用户做出了选择
{ type: "cancelled", reason? }     // 用户取消
{ type: "error", message }         // 发生错误

Controller → Canvas:

{ type: "update", config }  // 更新画布配置
{ type: "close" }           // 请求关闭画布
{ type: "ping" }            // 健康检查

高级 API

如需编程使用，请导入 API 模块：

import { pickMeetingTime, editDocument, bookFlight } from "${CLAUDE_PLUGIN_ROOT}/src/api";

// 生成会议选择器并等待选择
const result = await pickMeetingTime({
  calendars: [...],
  slotGranularity: 30,
});

if (result.success && result.data) {
  console.log(`Selected: ${result.data.startTime}`);
}

环境要求

• tmux: 生成画布需要 tmux 会话
• 支持鼠标的终端: 用于基于点击的交互
• Bun: 执行画布命令的运行时

Skill 参考

来源: claude-canvas GitHub