How We Built a Full-Featured AI Chat UI in 33KB with Zero Frameworks

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-pi to 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``