Sign in Subscribe
pi

Review: pi-web-ui, "Browser Cockpit" untuk Pi Coding Agent

Eldest Pasirula

• 4 min read
Share
Review: pi-web-ui, "Browser Cockpit" untuk Pi Coding Agent

Review: pi-web-ui, "Browser Cockpit" untuk Pi Coding Agent

Dear Pembaca Setia,

Kali ini Penulis hendak berbagi pengalaman tentang pi-web-ui — sebuah web chat interface untuk pi coding agent. Kalau biasanya kita berinteraksi dengan coding agent lewat terminal yang itu-itu saja, pi-web-ui mengubahnya menjadi pengalaman ala IDE: streaming chat, tool calls, file tree, terminal, git, sampai pengaturan model — semua dalam satu dashboard browser.

Proyek ini open source (MIT), dibuat oleh xingshuyin / Earendil Inc., dan saat ini mencatat ±22,7 ribu download per bulan di npm. Cukup populer, dan setelah Penulis coba, pantas saja.

Apa itu pi-web-ui?

Secara singkat: pi-web-ui menjalankan pi coding agent in-process lewat pi SDK (@earendil-works/pi-coding-agent), lalu streaming event-nya ke browser melalui WebSocket (snapshot 60 ms). Hasilnya, semua aktivitas agent — thinking blocks, tool-call cards, output bash dengan status live (running → finished · waiting model · durasi) — terlihat real-time di browser.

Requirement: Node.js ≥ 22.19 dan pi yang sudah dikonfigurasi.

Fitur unggulan

💬 Chat yang kerja seperti kita

  • Streaming reply — setiap tool call dan output bash tampil live dengan statusnya.
  • Steer / follow-up queueing — kirim follow-up di tengah reply; antreannya di-inject begitu tool calls turn beres (setara "Interrupt" di pi CLI).
  • Slash commands — tekan / muncul picker: built-in (/new /model /compact /cwd /thinking /resume), extension, template, dan skill.
  • Multiple conversations per project — tiap percakapan punya agent runtime sendiri yang tetap jalan di background, lengkap dengan daftar "Running conversations".
  • Edit & re-ask — fork pertanyaan lama ke branch baru tanpa menyentuh percakapan asli.
  • Thread panjang otomatis di-collapse setelah 30 pesan jadi ringkasan lazy (klik untuk expand).

🖼️ Files, gambar & attachment

  • Tiga mode attachment: inline (≤12 KB), reference (path), dan lines (range terpilih) — otomatis degrade kalau kelebihan limit.
  • Paste / drag-drop / upload gambar, dikirim sebagai image content kalau model support vision.
  • Vision bridge — kalau model cuma text-only, gambar di-transcribe jadi text evidence oleh vision model yang auto-ditemukan (bisa di-toggle di Settings).
  • Live file tree (pakai fs.watch), file preview dengan line numbers, fallback decoding GBK, hex view untuk binary, preview media via HTTP, dan tombol download.

🖥️ Terminal & Git

  • Terminal bawaan (xterm.js + node-pty) dengan manajemen PTY per-client — di Windows otomatis pakai Git Bash.
  • Panel source control (Git) — lihat status / branch / diff / untracked files, lalu commit, switch branch, push, pull langsung dari UI.

🎛️ Model & settings

  • Kelola models.json langsung dari UI, lengkap dengan set API key per-provider.
  • Thinking level per model — hanya level yang didukung model itu yang ditampilkan.
  • Theme switching (override palette :root murni) dan setup wizard saat pertama jalan.
  • Settings panel: system prompt (append/replace), toggle skills & extensions dengan efek instan, preset yang bisa disimpan.

🎯 Goal mode

Set target dengan review model, max rounds, dan lock switch. Fitur AI Refine mengubah request mentah jadi goal konkret lewat kuesioner terpandu, lalu review session independen mengecek hasilnya terhadap final text dan git diff HEAD — feedback di-inject sebagai steer sampai lolos (atau kapasitas round habis).

🤖 DeepSeek Harness (DSH) engine

Selain engine pi bawaan, pi-web-ui bisa menjalankan runtime resmi @deepseek-ai/dsh (DeepSeek Harness) sebagai subprocess via PI_WEB_ENGINE=dsh. Wire protocol-nya sama, jadi goal mode, SCM, background tasks, plugins, dan terminal semuanya bekerja identik. DSH juga punya goal state machine native, image blocks beneran untuk model DeepSeek vision, dan dialog pertanyaan dari ask_user_question yang tampil sebagai browser dialog.

🧩 Extensible & private by default

  • Plugin drop-in — tab tambahan di top bar dengan view client sendiri, opsional server entry dan agent tools. Tanpa rebuild, tanpa restart. Katalog bawaan termasuk webmail (IMAP/SMTP, lengkap dengan switch "allow AI to manage my mailbox") dan db-client (workbench MySQL/PostgreSQL/SQLite/SQL Server/MongoDB/Redis).
  • Theme standalone — folder themes/ sudah masuk whitelist files di package npm.
  • Security — loopback-only by default, validasi Origin/Host WebSocket (cross-origin kena 403), dan kredensial tetap di server: provider keys & headers tidak pernah sampai ke browser.

Instalasi & quick start

# Install global (recommended)
npm i -g pi-web-ui

# Jalankan — foreground di http://localhost:8787
pi-web-ui

Mau coba tanpa install dulu?

npx pi-web-ui

Semua setting bisa lewat flag atau environment variable:

pi-web-ui --engine dsh --port 9000 --cwd /path/to/project
# sama saja dengan:
PI_WEB_ENGINE=dsh PI_WEB_PORT=9000 PI_WEB_CWD=/path/to/project pi-web-ui

Mau jadi service beneran? CLI-nya otomatis pilih platform service:

pi-web-ui server install --port 9000 --cwd /path/to/project
pi-web-ui server status
pi-web-ui server restart

Otomatis pakai launchd (macOS), systemd (Linux), atau Task Scheduler (Windows).

Deploy & ekstensi

  • Support Docker / docker-compose, launchd, systemd, Windows Task Scheduler, bahkan desktop shortcut (pi-web-ui server shortcut).
  • Self-update dari dalam app — cek registry npm, install, restart otomatis.
  • Plugin install dari GitHub atau direktori lokal:
pi-web-ui install https://github.com/xing-shuyin/pi-web-ui/tree/main/plugins/webmail
pi-web-ui plugins          # lihat yang terinstall
pi-web-ui uninstall webmail
  • Reverse proxy dengan nginx sudah didokumentasikan — catatan penting: header Host harus mempertahankan port (proxy_set_header Host $http_host), kalau tidak origin check akan menolak dengan 403.

Kesimpulan

pi-web-ui mengubah coding agent yang biasanya terminal-centric menjadi lingkungan development kelas satu: streaming chat, visibilitas tool calls, file tree, terminal, panel git, plugin, sampai goal-moderation loop — semua di balik server loopback-only yang aman kredensialnya.

Buat yang setiap hari bergaul dengan pi (atau DeepSeek Harness), satu perintah install jelas worth it. Dan karena MIT plus plugin-friendly, proyek ini juga sangat terbuka untuk kontribusi — tema, plugin, dokumentasi, maupun terjemahan.

Sampai jumpa di tulisan berikutnya!

pi-web-ui — npm pi-web-ui (v0.64.x, MIT) · GitHub repo · Pi package page