Penink Web Preview

penink-web-wch — Penink Web Preview 工作台

============================================

版本：1.0.0 ｜ 授權：MIT ｜ 狀態：開源

■ 這是什麼？

Penink Web Preview 是一個「給 AI Agent 用的即時網站預覽工作台」。

把網站的 HTML / CSS / JS 原始碼推送進來，左邊立即以手機、平板、

筆電、桌機等裝置邊匡預覽，右邊是可直接編輯的程式碼面板，雙向同步。

整個工具「沒有預設假設」：它是被動的 receiver，等外部『驅動者』送上檔案。

■ 為什麼需要它？

AI Agent（如 opencode）在生成網站時，往往「看得到結果」與「改得動程式碼」

兩者分離。Penink Web Preview 同時解決兩件事：

• 即時回饋：Agent 每生成一個檔案，預覽馬上更新，不用手動重新整理。
• 雙向編輯：使用者可以直接改右邊的程式碼，Agent 也能繼續接手修改，

形成「人 × AI 協作」的閉環。

■ 核心功能

• 裝置邊匡預覽：手機、平板、筆電、桌機，一鍵切換，可自由調整尺寸。
• 可編輯代碼面板：Monaco Editor，真實的 HTML/CSS/JS 高亮與補全。
• 多種接線方式：MCP（Model Context Protocol）、REST API、WebSocket、

本地檔案監聽，四種方式都能把檔案送進預覽。

• AI Agent 整合：已提供 opencode / Claude Desktop / Cursor 一鍵註冊。
• 一鍵啟動：macOS 雙擊「啟動工作台.command」即可，自動裝依賴、建置、

註冊 Agent、開瀏覽器。

■ 技術棧

• 前端：React 18 + TypeScript + Vite + Monaco Editor
• 後端：Node.js + Express + tsx
• 通訊：@modelcontextprotocol/sdk（Streamable HTTP）、ws、chokidar

■ 使用方式（三個步驟）

1. 雙擊「啟動工作台.command」 → 自動開啟 http://localhost:8787

2. 啟動你的 AI Agent（如 opencode），/mcp 確認 website-preview 已連線

3. 對 Agent 說：用 website-preview 推送 index.html、style.css、app.js 給我

過程中有進度立刻 update_file，左邊預覽即時更新。

■ 給開發者的 API

• MCP Server： http://localhost:8787/mcp

工具：set_project_files（整包推送）、update_file（單檔更新）、

delete_file、clear_project、get_project

• REST： GET/POST /api/project、/api/file、/api/status
• WS： ws://localhost:8787/ws
• 檔案監聽：watch 資料夾內的 .html/.css/.js 變動自動反映

■ 更新日誌

• -----------------------------------------------------------------

v1.0.0（2026-09-18）— 第一個正式版本

• -----------------------------------------------------------------
• 首次公開版本
• 裝置邊匡預覽（手機/平板/筆電/桌機，尺寸可調）
• 可編輯代碼面板（Monaco），Agent 與使用者雙向同步
• MCP / REST / WebSocket / 檔案監聽四種接線
• opencode / Claude Desktop / Cursor 一鍵註冊腳本
• macOS 一鍵啟動包（啟動工作台.command）
• 自動開啟瀏覽器、掛空畫面「複製生網站提示詞」快速開始
• 開源釋出（MIT），對應官網 site/

■ 專案位置

• 官網：https://penink-web-wch.pages.dev/
• 原始碼：penink-web-wch/（本目錄）
• 官網原始碼：site/（純靜態，可直接部署到 Cloudflare Pages）
• 部署：將 site/ 上傳至 Cloudflare Pages 即可