GetNotes Tools

agegr/pi-web

Tool นี้คืออะไร

Pi Web เป็นเว็บ UI สำหรับ pi coding agent ที่ช่วยให้คุณจัดการเซสชัน pi ในเครื่อง, แชทแบบเรียลไทม์, กำหนดค่าโมเดล, จัดการทักษะ และดูตัวอย่างไฟล์โปรเจกต์ผ่านเบราว์เซอร์ ทำให้การทำงานกับ pi agent สะดวกและมีประสิทธิภาพยิ่งขึ้น

ข้อมูลโปรเจกต์

ดาว

2.4K

Forks

334

License

MIT

อัปเดต GitHub ล่าสุด

23 ก.ค. 2569

เพิ่มใน GetNotes

30 ก.ค. 2569

Repository

agegr/pi-web

เหมาะกับงาน

AutomationCoding Agents

เหมาะกับอาชีพ

Programmer

Ecosystem

TypeScript

แปลและเรียบเรียงโดย AI

เนื้อหาฉบับภาษาไทย

ใช้อ่านเพื่อทำความเข้าใจเบื้องต้น โปรดตรวจสอบรายละเอียดสำคัญกับเอกสารต้นฉบับด้านล่าง

Pi Web

เอกสารภาษาจีน | ภาษาญี่ปุ่น

เว็บ UI ในเครื่องสำหรับ pi coding agent Pi Web อ่านไฟล์เซสชัน pi ในเครื่องของคุณ และมอบพื้นที่ทำงานในเบราว์เซอร์สำหรับการเรียกดูเซสชัน, แชทแบบเรียลไทม์, การกำหนดค่าโมเดล, การจัดการทักษะ และการดูตัวอย่างไฟล์โปรเจกต์

Pi Web shows the same pi session with structured Markdown, tool calls, and project navigation beside the CLI

เซสชัน pi เดียวกันใน CLI และ Pi Web: การเรียกใช้เครื่องมือที่มีโครงสร้าง, Markdown ที่อ่านง่าย, การเรียกดูเซสชัน และผลลัพธ์ที่สะอาดตาขึ้น

เริ่มต้นใช้งานอย่างรวดเร็ว

Pi Web ต้องใช้ Node.js 22.19.0 หรือใหม่กว่า ตรวจสอบเวอร์ชันของคุณด้วย node --version

รันโดยไม่ต้องติดตั้ง:

bash

npx @agegr/pi-web@latest

หรือติดตั้งทั่วโลก:

bash

npm install -g @agegr/pi-web
pi-web

จากนั้นเปิด http://127.0.0.1:30141 CLI จะพยายามเปิดเบราว์เซอร์โดยอัตโนมัติหลังจากเซิร์ฟเวอร์พร้อม Pi Web จะรับฟังที่ 127.0.0.1 โดยค่าเริ่มต้น

ตัวเลือก:

bash

pi-web --port 8080              # custom port
pi-web --hostname 0.0.0.0       # expose on a trusted network
pi-web -p 8080 -H 0.0.0.0       # combine options
pi-web --no-open                # do not open the browser automatically

PORT=8080 pi-web                # environment variable is also supported
PI_WEB_HOSTNAME=0.0.0.0 pi-web  # explicit network exposure
PI_WEB_ALLOWED_HOSTS=pi-web.internal pi-web  # allow an exact proxy/custom hostname
PI_WEB_NO_OPEN=1 pi-web         # useful when running as a background service

Pi Web ไม่มีการยืนยันตัวตนระดับแอปพลิเคชันและสามารถเรียกใช้เอเจนต์ที่มีสิทธิ์สูงได้ ห้ามเปิดเผยสู่สาธารณะทางอินเทอร์เน็ต; ให้ใช้การผูกที่ไม่ใช่ loopback บนเครือข่ายที่เชื่อถือได้เท่านั้น คำขอ API ยอมรับชื่อ loopback, IP literals, ชื่อโฮสต์ที่ผูกไว้ที่เลือก และชื่อที่คั่นด้วยเครื่องหมายจุลภาคที่ระบุใน PI_WEB_ALLOWED_HOSTS กำหนดค่าตัวแปรนั้นเมื่อ reverse proxy ที่เชื่อถือได้ใช้ชื่อโฮสต์ภายนอกที่แตกต่างกัน

พร็อกซี HTTP

Pi Web อ่านตัวแปรสภาพแวดล้อมมาตรฐาน HTTP_PROXY, HTTPS_PROXY และ NO_PROXY สำหรับคำขอโมเดลและ API ฝั่งเซิร์ฟเวอร์

บน macOS หรือ Linux:

bash

HTTP_PROXY=http://127.0.0.1:7890 \
HTTPS_PROXY=http://127.0.0.1:7890 \
NO_PROXY=localhost,127.0.0.1 \
npx @agegr/pi-web@latest

บน Windows PowerShell:

powershell

$env:HTTP_PROXY = "http://127.0.0.1:7890"
$env:HTTPS_PROXY = "http://127.0.0.1:7890"
$env:NO_PROXY = "localhost,127.0.0.1"
npx @agegr/pi-web@latest

คุณสมบัติ

กลับมาทำงานต่อ: เรียกดูการสนทนา pi ครั้งก่อนตามโปรเจกต์โดยไม่ต้องค้นหาประวัติเทอร์มินัลหรือพาธเซสชัน
ลองทิศทางที่แตกต่างกันได้อย่างปลอดภัย: ดำเนินการต่อจากข้อความก่อนหน้าหรือแยกเซสชันออกเป็นเส้นทางที่แยกต่างหาก
ทำงานข้ามสาขา: สลับ Git worktrees จากแถบด้านข้าง เพื่อให้เซสชันใหม่และ Explorer เป็นไปตามการเช็คเอาต์ที่คุณเลือก
แชทข้างโปรเจกต์: เรียกดูไฟล์ทางซ้ายและดูตัวอย่างซอร์สโค้ด, เอกสาร, รูปภาพ, เสียง และ PDF ทางขวาในขณะที่เอเจนต์ทำงาน
เห็นสถานะเซสชันอย่างชัดเจน: การใช้บริบท, ค่าใช้จ่าย, สถานะการบีบอัด และรายละเอียดพรอมต์ระบบจะแสดงให้เห็นจากแถบด้านบน
กำหนดค่าน้อยลงจากเทอร์มินัล: จัดการโมเดล, การเข้าสู่ระบบ/คีย์ API, การทดสอบโมเดล และการสลับทักษะจากเว็บ UI
ใช้ส่วนต่อประสานในภาษาของคุณ: สลับระหว่างภาษา UI ที่รองรับจากแถบด้านบน

ข้อควรทราบ

ไดเรกทอรีข้อมูล: Pi Web อ่าน ~/.pi/agent/sessions โดยค่าเริ่มต้น ตั้งค่า PI_CODING_AGENT_DIR เพื่อชี้ไปยังไดเรกทอรี pi agent อื่น
ไฟล์เซสชัน: ไฟล์จะถูกจัดเก็บเป็น ~/.pi/agent/sessions/<encoded-cwd>/<timestamp>_<uuid>.jsonl
การกำหนดค่าโมเดล: แผง Models อ่านและเขียน models.json ในไดเรกทอรี pi agent รายการโมเดลและค่าเริ่มต้นมาจาก config ของ pi
การเข้าถึงไฟล์: การเรียกดูและดูตัวอย่างไฟล์ถูกจำกัดขอบเขตไว้ที่ไดเรกทอรีโปรเจกต์ที่เลือกและไดเรกทอรีการทำงานที่ปรากฏในเซสชัน
Git worktrees: ดู Worktrees in Pi Web สำหรับเมื่อตัวสลับปรากฏ, วิธีการสร้าง worktrees ใหม่ และการลบทำอะไร
Forks เทียบกับ in-session branches: Fork สร้างไฟล์ .jsonl ใหม่ "Edit from here" สร้าง branch อื่นภายในไฟล์เซสชันเดียวกัน
การทำให้เป็นสากล: ดู Internationalization สำหรับการใช้การแปลและการเพิ่มภาษาหรือข้อความ UI

การพัฒนา

bash

npm install
npm run dev

เซิร์ฟเวอร์ dev ในเครื่องทำงานที่ http://127.0.0.1:30141

การตรวจสอบทั่วไป:

bash

node_modules/.bin/tsc --noEmit
npm run lint

หลีกเลี่ยงการรัน next build / npm run build ระหว่างการพัฒนาในเครื่อง เนื่องจากจะเขียนไปยัง .next/ และอาจรบกวนเซิร์ฟเวอร์ dev; ให้เก็บการ build ไว้สำหรับงาน release

โครงสร้างโปรเจกต์

text

app/
  api/
    agent/          # สร้าง/ขับเคลื่อน AgentSession และเปิดเผยเหตุการณ์ SSE
    auth/           # การจัดการ OAuth และคีย์ API
    cwd/browse/     # รายการไดเรกทอรีเซิร์ฟเวอร์ที่เรียกดูได้
    cwd/validate/   # การตรวจสอบไดเรกทอรีการทำงานที่กำหนดเอง
    default-cwd/    # การค้นหาไดเรกทอรีการทำงานเริ่มต้นของ pi
    files/          # การแสดงรายการไฟล์, การอ่าน, การดูตัวอย่าง และการเฝ้าดู
    home/           # ไดเรกทอรีโฮมของผู้ใช้ปัจจุบัน
    models/         # โมเดลที่มีอยู่, โมเดลเริ่มต้น, ระดับการคิด
    models-config/  # อ่าน/เขียน models.json และทดสอบโมเดล
    sessions/       # การอ่านเซสชัน, การเปลี่ยนชื่อ, การลบ, บริบท, การส่งออก HTML
    skills/         # การแสดงรายการทักษะ, การค้นหา, การติดตั้ง, การเปิด/ปิดใช้งาน
components/
  AppShell.tsx        # เค้าโครงหลัก, สถานะ URL, แผงด้านบน, แถบไฟล์
  SessionSidebar.tsx  # ตัวเลือกโปรเจกต์, ผังเซสชัน, Explorer
  DirectoryPicker.tsx # ตัวเลือกไดเรกทอรีการทำงานที่เรียกดูและแก้ไขได้
  ChatWindow.tsx      # ข้อความ, SSE, การลาก/วางรูปภาพ, minimap
  ChatInput.tsx       # แถบอินพุต, การควบคุมโมเดล/เครื่องมือ/การคิด/การบีบอัด/เครื่องหมายทับ
  MessageView.tsx     # การแสดงผลข้อความ, การคิด, การเรียกใช้เครื่องมือ/ผลลัพธ์
  ModelsConfig.tsx    # แผงการกำหนดค่าโมเดลและการยืนยันตัวตน
  SkillsConfig.tsx    # แผงการจัดการทักษะ
  FileExplorer.tsx    # ผังไฟล์
  FileViewer.tsx      # การดูตัวอย่างซอร์สโค้ด, diff, รูปภาพ, เสียง, PDF, DOCX
lib/
  directory-browser.ts # ตัวช่วยในการทำให้ไดเรกทอรีเป็นมาตรฐานและการแสดงรายการที่ปลอดภัย
  http-dispatcher.ts  # การตั้งค่าพร็อกซี HTTP(S) สำหรับการดึงข้อมูลฝั่งเซิร์ฟเวอร์
  rpc-manager.ts      # วงจรชีวิตของ AgentSessionWrapper และรีจิสทรีทั่วโลก
  session-reader.ts   # แยกวิเคราะห์ไฟล์เซสชัน .jsonl และบริบทสาขา
  normalize.ts        # ทำให้ชื่อฟิลด์ toolCall เป็นมาตรฐาน
  file-access.ts      # ขอบเขตความปลอดภัยในการอ่านไฟล์
  file-paths.ts       # การเข้ารหัสพาธและตัวช่วยพาธสัมพัทธ์
  markdown.ts         # การกำหนดค่าปลั๊กอิน Markdown/Mermaid/KaTeX
  pi-types.ts         # ประเภทที่เกี่ยวข้องกับ pi
hooks/
  useAgentSession.ts  # การโหลดเซสชัน, การส่งคำสั่ง, เครื่องสถานะ SSE
  useAudio.ts         # เสียงแจ้งเตือนการเสร็จสิ้น
  useDragDrop.ts      # การลาก/วางรูปภาพ
  useTheme.ts         # การสลับธีม
bin/
  pi-web.js           # จุดเข้า CLI ของ npm
instrumentation.ts    # เริ่มต้นตัวจัดส่ง HTTP ของเซิร์ฟเวอร์

เอกสารโปรเจกต์

อ่านเอกสารต้นฉบับ

README วิธีติดตั้ง วิธีใช้งาน และข้อกำหนดจาก repository ต้นฉบับ

ดูไฟล์บน GitHub

Pi Web

中文文档 | 日本語

Local web UI for the pi coding agent. Pi Web reads your local pi session files and gives you a browser workspace for session browsing, real-time chat, model configuration, skill management, and project file preview.

Pi Web shows the same pi session with structured Markdown, tool calls, and project navigation beside the CLI

The same pi session in CLI and Pi Web: structured tool calls, readable Markdown, session browsing, and cleaner results.

Quick Start

Pi Web requires Node.js 22.19.0 or newer. Check your version with node --version.

Run without installing:

bash

npx @agegr/pi-web@latest

Or install globally:

bash

npm install -g @agegr/pi-web
pi-web

Then open http://127.0.0.1:30141. The CLI will try to open the browser automatically after the server is ready. Pi Web listens on 127.0.0.1 by default.

Options:

bash

pi-web --port 8080              # custom port
pi-web --hostname 0.0.0.0       # expose on a trusted network
pi-web -p 8080 -H 0.0.0.0       # combine options
pi-web --no-open                # do not open the browser automatically

PORT=8080 pi-web                # environment variable is also supported
PI_WEB_HOSTNAME=0.0.0.0 pi-web  # explicit network exposure
PI_WEB_ALLOWED_HOSTS=pi-web.internal pi-web  # allow an exact proxy/custom hostname
PI_WEB_NO_OPEN=1 pi-web         # useful when running as a background service

Pi Web has no application-level authentication and can invoke a high-privilege agent. Do not expose it to the internet; only use non-loopback bindings on a trusted network. API requests accept loopback names, IP literals, the selected bind hostname, and exact comma-separated names in PI_WEB_ALLOWED_HOSTS. Configure that variable when a trusted reverse proxy uses a different external hostname.

HTTP Proxy

Pi Web reads the standard HTTP_PROXY, HTTPS_PROXY, and NO_PROXY environment variables for server-side model and API requests.

On macOS or Linux:

bash

HTTP_PROXY=http://127.0.0.1:7890 \
HTTPS_PROXY=http://127.0.0.1:7890 \
NO_PROXY=localhost,127.0.0.1 \
npx @agegr/pi-web@latest

On Windows PowerShell:

powershell

$env:HTTP_PROXY = "http://127.0.0.1:7890"
$env:HTTPS_PROXY = "http://127.0.0.1:7890"
$env:NO_PROXY = "localhost,127.0.0.1"
npx @agegr/pi-web@latest

Features

Pick work back up: browse previous pi conversations by project without digging through terminal history or session paths.
Try different directions safely: continue from an earlier message or fork a session into a separate route.
Work across branches: switch Git worktrees from the sidebar so new sessions and the Explorer follow the checkout you choose.
Chat beside the project: browse files on the left and preview source, docs, images, audio, and PDFs on the right while the agent works.
See session state clearly: context usage, cost, compaction state, and system prompt details are visible from the top bar.
Configure less from the terminal: manage models, login/API keys, model tests, and skill switches from the web UI.
Use the interface in your language: switch between the supported UI languages from the top bar.

Notes

Data directory: Pi Web reads ~/.pi/agent/sessions by default. Set PI_CODING_AGENT_DIR to point at another pi agent directory.
Session files: files are stored as ~/.pi/agent/sessions/<encoded-cwd>/<timestamp>_<uuid>.jsonl.
Model config: the Models panel reads and writes models.json in the pi agent directory. Model lists and defaults come from pi's config.
File access: file browsing and preview are scoped to the selected project directory and working directories that appear in sessions.
Git worktrees: see Worktrees in Pi Web for when the switcher appears, how new worktrees are created, and what removal does.
Forks vs in-session branches: Fork creates a new .jsonl file. "Edit from here" creates another branch inside the same session file.
Internationalization: see Internationalization for using translations and adding languages or UI text.

Development

bash

npm install
npm run dev

The local dev server runs at http://127.0.0.1:30141.

Common checks:

bash

node_modules/.bin/tsc --noEmit
npm run lint

Avoid running next build / npm run build during local development. It writes to .next/ and can interfere with the dev server; leave builds for release work.

Project Structure

text

app/
  api/
    agent/          # creates/drives AgentSession and exposes SSE events
    auth/           # OAuth and API key management
    cwd/browse/     # browsable server directory listing
    cwd/validate/   # custom working directory validation
    default-cwd/    # pi default working directory lookup
    files/          # file listing, reading, preview, and watching
    home/           # current user home directory
    models/         # available models, default model, thinking levels
    models-config/  # read/write models.json and test models
    sessions/       # session reads, rename, delete, context, HTML export
    skills/         # skill listing, search, install, enable/disable
components/
  AppShell.tsx        # main layout, URL state, top panels, file tabs
  SessionSidebar.tsx  # project selector, session tree, Explorer
  DirectoryPicker.tsx # browsable and editable working-directory picker
  ChatWindow.tsx      # messages, SSE, image drag/drop, minimap
  ChatInput.tsx       # input bar, model/tools/thinking/compact/slash controls
  MessageView.tsx     # message, thinking, tool call/result rendering
  ModelsConfig.tsx    # model and auth configuration panel
  SkillsConfig.tsx    # skill management panel
  FileExplorer.tsx    # file tree
  FileViewer.tsx      # source, diff, image, audio, PDF, DOCX preview
lib/
  directory-browser.ts # directory normalization and safe listing helpers
  http-dispatcher.ts  # HTTP(S) proxy setup for server-side fetch
  rpc-manager.ts      # AgentSessionWrapper lifecycle and global registry
  session-reader.ts   # parses .jsonl session files and branch contexts
  normalize.ts        # normalizes toolCall field names
  file-access.ts      # file read safety boundary
  file-paths.ts       # path encoding and relative path helpers
  markdown.ts         # Markdown/Mermaid/KaTeX plugin configuration
  pi-types.ts         # pi-related types
hooks/
  useAgentSession.ts  # session loading, command sending, SSE state machine
  useAudio.ts         # completion sound
  useDragDrop.ts      # image drag/drop
  useTheme.ts         # theme switching
bin/
  pi-web.js           # npm CLI entrypoint
instrumentation.ts    # initializes the server HTTP dispatcher