Piwan — Pi Agent Web UI

A web-based chat UI for the Pi Agent running on a custom OpenAI-compatible LLM provider.

Tech Stack

• SvelteKit 5 — Full-stack web framework with Svelte 5 runes
• Pi Agent Core — Agent engine with streaming, tool execution, and state management
• Pi AI — Unified LLM API with provider abstraction
• Bun — Runtime & package manager

Quick Start

# 1. Install dependencies
bun install

# 2. Configure your LLM provider
cp .env.example .env
# Edit .env with your API key, base URL, and model name

# 3. Start dev server
bun run dev

# 4. Open http://localhost:5173

Build for Production

bun run build
bun run preview

Environment Variables

Variable	Description	Example
API_KEY	API key for the LLM provider	sk-zLTmutPDnNQh-6QWCFFGyA
URL	Base URL of the OpenAI-compatible endpoint	https://your-provider.com/v1
MODEL	Model name to use	qwen3.6:35b-a3b

How It Works

Server (src/routes/api/agent/+server.ts)

• Creates a Pi Agent instance using streamSimpleOpenAIResponses as the stream function
• The agent runs on the server with your API keys kept secure
• Exposes:
  • POST /api/agent — Send a prompt, agent processes in background
  • GET /api/agent?sessionId=... — SSE endpoint for real-time event streaming

Client (src/routes/+page.svelte)

• Chat UI with streaming text updates via EventSource
• Messages persisted in localStorage per session
• Svelte 5 $state() for reactive UI updates

Tests

Run all unit tests:

bun run test

Tests verify public interfaces and observable behavior — message persistence, session management, validation, and markdown formatting.

Project Structure

src/
├── routes/
│   ├── +page.svelte          # Chat UI page
│   ├── +layout.svelte        # Root layout
│   └── api/agent/
│       └── +server.ts        # Agent API (SSE + prompt)
├── lib/
│   └── assets/
└── app.html