Pi Cloud

A web-based UI for the Pi Coding Agent SDK, built with SvelteKit, Svelte 5, and shadcn-svelte. Provides a polished three-panel interface for interacting with Pi Agent sessions in real time.

Features

• Real-time streaming — Pi Agent responses streamed via Server-Sent Events (SSE)
• Session management — Create, switch, resume, and dispose of agent sessions
• Prompt queueing — Three delivery modes:
  • prompt — standard request
  • steer — interrupt the agent after the current tool call
  • followUp — queue a message until the current run ends
• Abort — Cancel the agent's current turn mid-stream
• Compact / Reload — Built-in slash commands to compact context or reload the session
• Model switching — Search and switch between available LLM models at runtime
• MCP server status — Live view of connected MCP tool servers and tool counts
• Extended thinking — Collapsible reasoning trace for assistant messages
• Live event feed — Right-panel timeline of tool calls, deltas, and lifecycle events (compact or verbose)
• Dark / light mode — Theme toggle via mode-watcher

Tech Stack

Layer	Technology
Framework	SvelteKit 2 / Svelte 5
UI components	shadcn-svelte (bits-ui, tailwind-variants)
Styling	Tailwind CSS 4
Markdown rendering	svelte-streamdown
Icons	@lucide/svelte
Agent SDK	@mariozechner/pi-coding-agent

Project Structure

src/
├── routes/
│   ├── +page.svelte              # Main page — wires components together
│   ├── +layout.svelte            # Root layout (theme toggle, favicon)
│   └── api/agent/                # Server API endpoints
│       ├── session/              #   POST create/ensure/dispose, GET list
│       ├── state/                #   GET session snapshot
│       ├── stream/               #   GET SSE event stream
│       ├── prompt/               #   POST prompt/steer/followUp
│       ├── abort/                #   POST abort current turn
│       └── mcp/                  #   GET MCP server status
├── lib/
│   ├── pi-agent/
│   │   ├── contracts.ts          # Shared types (messages, sessions, events)
│   │   ├── session.svelte.ts     # Reactive session store (state + API logic)
│   │   ├── event-helpers.ts      # Event feed processing & formatting
│   │   └── message-helpers.ts    # Message classification & reasoning helpers
│   ├── components/
│   │   ├── session-sidebar.svelte   # Left panel — sessions, MCP, model, runtime
│   │   ├── chat-header.svelte       # Session header bar with action buttons
│   │   ├── chat-messages.svelte     # Scrollable message list with auto-scroll
│   │   ├── chat-message.svelte      # Individual message bubble
│   │   ├── prompt-form.svelte       # Prompt input with delivery mode selector
│   │   ├── event-feed-panel.svelte  # Right panel — live event timeline
│   │   ├── theme-toggle.svelte      # Dark/light mode toggle
│   │   └── ui/                      # shadcn-svelte primitives
│   ├── server/pi-agent/          # Server-side agent manager
│   └── hooks/                    # SvelteKit hooks
└── .pi/
    ├── mcp.json                  # MCP server configuration
    └── settings.json             # Pi agent settings

API Endpoints

Method	Path	Description
GET	/api/agent/session	List active sessions
POST	/api/agent/session	Create / ensure / dispose a session
GET	/api/agent/state?sessionId=…	Get full session snapshot
GET	/api/agent/stream?sessionId=…	SSE event stream
POST	/api/agent/prompt	Send prompt / steer / followUp
POST	/api/agent/abort	Abort current agent turn
GET	/api/agent/mcp?sessionId=…	MCP server status

Getting Started

Prerequisites

• Node.js 20+
• pnpm

Environment

Copy .env.example and configure at least one provider key:

cp .env.example .env

# Required — at least one model provider key
ANTHROPIC_API_KEY=
OPENAI_API_KEY=
GOOGLE_API_KEY=
OPENROUTER_API_KEY=

# Optional — agent workspace directory (defaults to process cwd)
PI_AGENT_CWD=

# Optional — where session files are stored (defaults to .pi/web-sessions)
PI_AGENT_SESSIONS_DIR=

Install & Run

pnpm install
pnpm dev

Open http://localhost:5173.

Validate

pnpm check    # Type-check Svelte + TypeScript
pnpm lint     # Prettier + ESLint
pnpm test     # Unit tests (Vitest)