# Claude Canvas

A TUI toolkit that gives AI coding agents their own display. Spawn interactive terminal interfaces for calendars, documents, flight bookings, and more.

**Note:** This is a proof of concept and is unsupported.

![Claude Canvas Screenshot](media/screenshot.png)

## Supported Platforms

| Platform | Location | Requirements |
|----------|----------|--------------|
| **Claude Code** | `.claude-plugin/` | tmux, Bun |
| **Pi Coding Agent** | `pi-extension/` | None (native TUI) |

---

## Claude Code Installation

Requires [Bun](https://bun.sh) and [tmux](https://github.com/tmux/tmux) — canvases spawn in split panes.

```bash
# Add marketplace
/plugin marketplace add dvdsgl/claude-canvas

# Install plugin
/plugin install canvas@claude-canvas
```

---

## Pi Coding Agent Installation

The Pi extension uses native TUI rendering — no tmux or Bun required!

```bash
# Clone to pi extensions directory
git clone https://github.com/jyaunches/pi-canvas.git ~/.pi/agent/extensions/pi-canvas

# Restart pi to load
```

Or install just the pi-extension folder:

```bash
# Clone and copy only pi-extension
git clone https://github.com/jyaunches/pi-canvas.git /tmp/pi-canvas
cp -r /tmp/pi-canvas/pi-extension ~/.pi/agent/extensions/pi-canvas
```

See [pi-extension/README.md](pi-extension/README.md) for full documentation.

### Pi Extension Features

- 📅 **Calendar Canvas** - Week view with event display and time slot selection
- 📄 **Document Canvas** - Text viewer with navigation and selection
- ✈️ **Flight Canvas** - Flight search results with comparison

### Pi Extension Tools

| Tool | Description |
|------|-------------|
| `canvas_calendar` | Interactive calendar TUI |
| `canvas_document` | Document viewer with selection |
| `canvas_flights` | Flight comparison and selection |

---

## Architecture Comparison

| Feature | Claude Code Plugin | Pi Extension |
|---------|-------------------|--------------|
| Runtime | tmux + Bun | Native pi TUI |
| Rendering | Separate process + IPC | Inline `ctx.ui.custom()` |
| Components | React/Ink | Pi TUI components |
| Data Source | LLM provides JSON | LLM provides JSON |

Both versions are **display layers only** — the LLM fetches data from other tools/skills and provides it to the canvas.

---

## License

MIT