Pixel

Chat with Pi. It writes your widgets.

Pixel is a macOS desktop app with two panels. The left panel runs a chat with the Pi coding agent. The right panel runs extension widgets that Pi builds for you. You describe what you want and Pi writes the widget code, hot-reloads it into the panel, and iterates with you.

• Pi chat - a full conversation with Pi, including tool calls, thinking, text deltas, and extension UI prompts.
• Extension widgets - Pi writes extensions that appear in the right panel. Each one loads immediately as Pi finishes writing it.
• Build then keep or undo - every agent turn shows Keep or Undo based on the actual diff. You choose what sticks.

Quick Start

Requires macOS 13 Ventura or newer and the Pi CLI on your PATH.

# Homebrew cask coming soon.
# Build from source for now (see docs/development.md).
open -a "Pixel"

Click in the chat panel and ask for something like:

show me the latest HN front page

Pi runs the extension UI, reads your request, and feeds back a widget. Pixel mounts it in the extension panel and shows a Keep or Undo bar when files change.

Open the header to toggle the extension panel, reload the layout (re-mounts all widgets), open Settings, or quit. Settings lets you switch agents, manage always-on-top, set the Pi working directory, configure launch at login, and manage custom ACP agents.

How It Works

   ┌──────────────────────────────────────────────────┐
   │                Desktop window                     │
   │  ┌─────────────────────┬────────────────────────┐ │
   │  │                     │                        │ │
   │  │    Pi chat panel    │  Extension widget panel│ │
   │  │  (conversation,     │  (hot-reloaded widgets │ │
   │  │   tool calls,       │   from Pi / agent)     │ │
   │  │   thinking)         │                        │ │
   │  │                     │                        │ │
   │  └─────────────────────┴────────────────────────┘ │
   └──────────────────────┬───────────────────────────┘
                          │
              ┌───────────┴────────────┐
              │                        │
              ▼                        ▼
   ┌────────────────────┐   ┌──────────────────────┐
   │   PiChatRuntime    │   │  PixelAgentRuntime   │
   │   pi CLI in RPC    │   │  acpx/runtime + ACP  │
   │   mode             │   │  Claude Code / Codex │
   └────────┬───────────┘   └──────────┬───────────┘
            │                          │
            ▼                          ▼
   ┌──────────────────────────────────────────────┐
   │             Extension workspace              │
   │  extensions/<id>/widget.tsx                  │
   │  extensions/<id>/server.ts                   │
   │  extensions/recipes/*.html                   │
   │  layout.tsx (canvas arrangement)             │
   └──────────────────────┬───────────────────────┘
                          │ hot-reload
                          ▼
   ┌──────────────────────────────────────────────┐
   │             WidgetHost                       │
   │   mounts layout + widgets in extension panel │
   └──────────────────────────────────────────────┘

• Pi runs the show - Pixel spawns pi as a child process in JSONL RPC mode. Messages flow from the chat panel to Pi and back. Pi can prompt for choices, show status updates, and render widget content directly through the extension UI protocol.
• Agent runtime for extension work - when Pi decides to write or edit an extension, the agent runtime (Claude Code or Codex via bundled ACP adapters) runs in the active extension workspace. A change session tracks every edit so you keep or undo each turn.
• Recipes are implementation specs - HTML files under extensions/recipes/ describe a widget's capability and data sources. The agent reads the matching recipe before writing code.
• Diff-derived Keep / Undo - the bar shows the actual filesystem diff. If nothing changed on disk, no bar appears.
• Extensions own their capabilities - widgets, server actions (filesystem, shell, network, credential access), background tasks, settings sections, and a shared SQLite store, all behind the stable window.pixel bridge.
• Three processes, one bridge - the renderer never touches the filesystem or runs agents. Everything goes through window.pixel.

Tech Stack

• Electron (main + preload + renderer separation, contextIsolation: true)
• React with Tailwind v4 and Radix components (@pixel/ui)
• Pi CLI spawned in JSONL RPC mode for the chat loop
• ACP (Agent Client Protocol) via acpx/runtime for Claude Code and Codex
• SQLite for shared extension data (context.db server-side, window.pixel.db renderer-side)

Docs

• docs/configuration.md - agent selection, custom ACP agents, telemetry, environment flags
• docs/architecture.md - runtime design notes and repository layout
• docs/development.md - building, testing, and packaging Pixel itself

License

Pixel uses the MIT License. See LICENSE for details.