給 AI Agent 做的開源工作台

AI 一邊生成，
你的網站一邊長出來。

Penink Web Preview 是一個「零假設」的接收端：Agent 每推一個檔案，左邊立即以手機／平板／筆電／桌機預覽，右邊的程式碼可直接編輯、雙向同步。

立即開始（3 步驟）看更新日誌

🟢 MCP🔌 REST⚡ WebSocket👀 檔案監聽

http://localhost:8787

Sunrise Coffee ☕

<h1>它真的長出來了</h1> <p>Agent 寫一行，你改一行</p>

為什麼值得一試

🖼️

裝置邊匡預覽

手機、平板、筆電、桌機一鍵切換，尺寸自由拖拉。RWD 好不好看，當場見真章。

✏️

代碼雙向可編輯

右邊是真正的 Monaco 編輯器，你改完 Agent 繼續接，人 × AI 協作閉環。

🔌

四種接線方式

MCP、REST、WebSocket、本地檔案監聽，你想用哪種 Agent 都接得上。

⚡

一鍵啟動

macOS 雙擊「啟動工作台.command」：自動裝依賴、建置、註冊 Agent、開瀏覽器。

🤖

Agent 原生友好

opencode / Claude Desktop / Cursor 一鍵註冊，下指令就開始，不用學 API。

🧩

零假設設計

它是被動接收端，不預設你的框架與流程，讓任何驅動者送檔案進來。

三個步驟開始

1・啟動工作台
雙擊 啟動工作台.command，瀏覽器自動打開 http://localhost:8787。
2・啟動你的 AGENT
例如 opencode，輸入 /mcp 確認 website-preview 已連線。
3・下一個指令
「用 set_project_files 推送 index.html、style.css、app.js，每完成一檔就 update_file」— 預覽即時更新。

「幫我做咖啡店官網，用 website-preview 的 set_project_files 推送，每完成一檔就 update_file。」

— 一句話就能開始，剩下交給 Agent

給開發者的介面

MCP Server 推薦

http://localhost:8787/mcp

set_project_files — 整包推送
update_file — 單檔更新
delete_file / clear_project / get_project

REST / WS

/api/project · /api/file · /api/status

ws://localhost:8787/ws

檔案監聽 — watch 資料夾內 .html/.css/.js 變化自動反映

AI 一邊生成，你的網站一邊長出來。