When we set out to build a web interface for Pi Coding Agent, we made a deliberate choice: no React, no Vite, no TypeScript, no build step. Just vanilla HTML, CSS, and JavaScript.
Here's what we learned building a production-quality real-time chat UI the old-fashioned way.
The Architecture
Everything lives in two files:
public/index.html— the entire frontend (HTML + CSS + JS in one file)
server.js— Express server with WebSocket support
Pi runs as a subprocess in RPC mode. The server bridges browser WebSockets to Pi's RPC protocol. Messages flow like this:
Browser → WebSocket → Server → Pi RPC → Server → WebSocket → Browser
Event-Driven State Management
Instead of React's state management, we use a single handleEvent() function that processes all WebSocket messages:
function handleEvent(data) {
switch (data.type) {
case "status": ...
case "message_start": ...
case "message_token": ...
case "message_end": ...
case "agent_end": ...
}
}
Each event updates the DOM directly. It's simple, fast, and easy to debug.
Message Queueing
One of our favorite features: you can keep typing while Pi is still responding. The server sends queued messages to Pi with streamingBehavior: "followUp", and Pi processes them in order natively.
Why No Framework?
Honestly? Speed of development. We could make changes, refresh, and see results instantly. No hot reload to wait for, no bundle to rebuild, no component tree to reason about. Just HTML elements and event handlers.
The Result
- 33KB total package size
- 4 npm dependencies
npx wgnr-pito install and run- Full features: streaming, sessions, model picker, thinking levels, images, export
Sometimes the best framework is no framework.
GitHub: https://github.com/wgnr-ai/wgnr-pi
npm: https://www.npmjs.com/package/wgnr-pi``