Pan by Euraika

Beautiful WebUI for Hermes Agent

Quick Start • Features • Screenshots • Architecture • Configuration • Changelog • Contributing

Pan is a self-hosted web interface for Hermes Agent — the open-source AI agent by Nous Research. Chat with your agent, manage skills from the skills.sh marketplace, control extensions and MCP integrations, inspect memory, and operate profiles — all from a single dashboard with live runtime awareness.

Quick Start

Install and run (one command)

npx @euraika-labs/pan-ui

The setup wizard runs on first launch to configure your Hermes connection. After setup, Pan starts on localhost:3199.

Run as a background service

# Quick daemon — fork to background
npx @euraika-labs/pan-ui --daemon

# Check status, view logs, stop
npx pan-ui status
npx pan-ui logs
npx pan-ui stop

Install as a system service (Linux)

# Installs a systemd user service — starts on login, survives logout
npx @euraika-labs/pan-ui service install

# Manage with standard systemctl commands
systemctl --user status pan-ui
systemctl --user restart pan-ui
journalctl --user -u pan-ui -f

# Remove when done
npx pan-ui service remove

From source

git clone https://github.com/Euraika-Labs/pan-ui.git
cd pan-ui
npm install
npm run dev

Open localhost:3199. Default credentials: admin / changeme.

Features

Pan is not a generic chat wrapper. It exposes the full operational surface of a running Hermes Agent instance:

Screenshots

Streaming chat connected to a live Hermes runtime. Session sidebar with search, pinning, and archiving. Tool timelines expand inline. Composer shows active model, mode, tools, and profile.

112 installed skills across 27 categories. Search by name, tag, or category. Each card shows source, tags, linked files count, and whether it's loaded in the current session.

Browse and install skills from the skills.sh hub. Trust badges (Trusted / Official / Community), install counts, and direct links to repos.

Installed MCP servers with tool inventories, health badges, and capability toggles.

Global memory (shared across profiles) displayed as read-only cards. Profile-scoped memory is editable.

Profile-based workspace isolation. Each profile scopes sessions, skills, memory, extensions, and API keys.

Runtime status, health monitoring, model selection, run history, audit browser, telemetry, approvals, and MCP diagnostics.

Configuration

CLI Options

npx pan-ui                     Start in foreground (interactive)
npx pan-ui --daemon | -d       Start in background
npx pan-ui stop                Stop the background daemon
npx pan-ui status              Check if Pan is running
npx pan-ui logs                Tail daemon log output
npx pan-ui setup               Re-run the setup wizard
npx pan-ui service install     Install systemd user service
npx pan-ui service remove      Remove systemd service
npx pan-ui --port 8080         Override the port
npx pan-ui --help              Show all options

Environment Variables

Create a .env.local file or use the setup wizard (npx pan-ui setup):

Architecture

┌─────────────────────────────────────────────────┐
│                    Browser                       │
│  Next.js App Router + TanStack Query + Tailwind  │
└───────────────────────┬─────────────────────────┘
                        │ fetch / SSE
┌───────────────────────▼─────────────────────────┐
│              Next.js API Routes                  │
│  /api/chat/stream    /api/skills    /api/memory  │
│  /api/profiles       /api/extensions /api/runtime│
└──────┬────────────────┬─────────────────────────┘
       │                │
       ▼                ▼
┌──────────────┐  ┌──────────────────────────────┐
│ Hermes API   │  │ Hermes Filesystem            │
│ :8642        │  │ ~/.hermes/                   │
│ OpenAI-compat│  │  ├─ profiles/                │
│ SSE streaming│  │  ├─ skills/                  │
└──────────────┘  │  ├─ memories/                │
                  │  └─ state.db                 │
                  └──────────────────────────────┘

Tech Stack

Project Structure

src/
├── app/                  # Next.js routes and API endpoints
│   ├── api/              # Server-side API routes
│   │   ├── chat/         # Chat stream, sessions
│   │   ├── skills/       # Skills CRUD, hub, categories
│   │   ├── memory/       # User/agent memory, context inspector
│   │   ├── profiles/     # Profile CRUD
│   │   ├── extensions/   # MCP extensions
│   │   └── runtime/      # Health, approvals, runs, export
│   └── [page]/           # Client page routes
├── features/             # UI feature modules
│   ├── chat/             # Chat screen, composer, transcript
│   ├── skills/           # Skills browser, detail, hub cards
│   ├── memory/           # Memory editor
│   ├── extensions/       # Extension cards, tool inventory
│   ├── profiles/         # Profile management
│   ├── sessions/         # Session sidebar
│   └── settings/         # Runtime, health, audit, approvals
├── server/               # Hermes filesystem bridge
├── components/           # Shared layout and UI components
├── lib/                  # Types, schemas, stores, utilities
└── styles/               # Global CSS and theme tokens
bin/
└── pan-ui.mjs            # CLI launcher, setup wizard, daemon
tests/
├── unit/                 # Vitest unit tests
└── e2e/                  # Playwright end-to-end tests

Development

npm run dev           # Start dev server (hot reload)
npm run lint          # ESLint
npm run test          # Vitest unit tests
npm run build         # Production build
npm run test:e2e      # Playwright e2e (requires dev server running)

Security

• CLI commands use an allowlist guard before execFileSync — no arbitrary command injection
• Profile isolation ensures each workspace boundary has its own sessions, memory, and API keys
• CodeQL scanning runs on every push and PR
• File path parameters are sanitized to prevent directory traversal
• Login is cookie-based with httpOnly secure cookies
• See SECURITY.md for reporting vulnerabilities

License

MIT © Euraika Labs