wgnr-pi

The most feature-rich web UI for Pi Coding Agent.

A polished, zero-framework web interface for interacting with Pi — the open-source AI coding agent. Built with vanilla JavaScript, Express, and WebSocket for real-time streaming responses.

Open-source web UI for Pi Coding Agent · wgnr.ai

---

Features

• Real-time streaming — Watch AI responses stream in token by token via WebSocket
• Session management — List, rename, archive, and restore sessions with date grouping
• Model picker — Full modal with search, provider groups, and keyboard navigation
• Thinking levels — Cycle through off → minimal → low → medium → high with a UI badge
• Image support — Paste or attach images for vision-capable models
• Speech-to-text — Whisper-powered dictation with configurable silence detection
• Command palette — Slash commands with autocomplete (type /)
• Session persistence — History reloads automatically on reconnect
• Smart auto-scroll — Pauses when you scroll up, resumes when you send
• Pi health monitoring — Connection status with auto-reconnect
• Export sessions — Download any session as markdown
• Keyboard shortcuts — Ctrl+N (new chat), Ctrl+L (clear), Escape (stop)
• macOS launchd — Auto-start on boot via included service template
• Lightweight — 4 runtime dependencies. No React, no Vite, no build step

Quick Start

# Install globally
npm install -g wgnr-pi

# Run (starts on port 4815)
wgnr-pi

# Or run directly
npx wgnr-pi

Open http://localhost:4815 in your browser.

Configuration

All settings are configurable via environment variables:

Variable	Default	Description
WGPI_PORT	4815	Server port
WGPI_HOST	0.0.0.0	Server bind address
WGPI_CWD	~	Working directory for Pi
WGPI_PI_BIN	pi	Path to Pi binary
OPENAI_API_KEY	—	OpenAI API key for Whisper speech-to-text

Example:

WGPI_PORT=8080 WGPI_CWD=/projects/my-app wgnr-pi

Requirements

• Node.js 18+
• Pi Coding Agent (npm install -g @mariozechner/pi-coding-agent)

How It Works

Browser ←→ WebSocket ←→ wgnr-pi (Express) ←→ Pi (RPC mode)

wgnr-pi spawns Pi as a subprocess in RPC mode and communicates via stdin/stdout JSON. The browser connects via WebSocket for real-time bidirectional messaging. No API keys needed — Pi uses your local configuration.

Comparison

Feature	ravshansbox/pi-web	wgnr-pi
Stack	React, Vite, Tailwind	Vanilla JS, Express
Dependencies	React + 40+ deps	Zero frameworks
Session management	List, delete	List, rename, archive, restore
Model picker	Status bar switch	Full modal with search
Thinking levels	No	Yes — 5 levels with badge
Image support	Unknown	Paste, attach, vision
Speech-to-text	No	Whisper with silence detection
Command palette	No	Slash commands + autocomplete
Session history	Browse past	Browse + load full history
Export sessions	No	Markdown export
Health monitoring	No	Connection status + auto-reconnect
macOS service	No	launchd template included
Install size	~15MB	~200KB

Development

git clone https://github.com/wgnr-ai/wgnr-pi.git
cd wgnr-pi
npm install
node server.js

License

MIT

Built by WGNR. For our AI Agent Squad subscription service that powers more than 200K small businesses, check out kelle.ai.