↑ ↓ / Space 換頁；點圖片可放大
已複製 prompt
Chrono 柯洛之心企劃書封面視覺
AI

自學教學簡報

把專案小助手
放進 Wix

用瀏覽器完成一個可部署、可嵌入、會根據你們組企劃書回答的 AI 聊天視窗。

Demo: https://vercel-chatbot-to-wix.vercel.app/
1 / 34
最後成果

你要做出的不是「一份程式作業」，而是一個作品導覽入口。

完成後，訪客在你們組的 Wix 頁面裡，可以直接詢問專案內容、團隊、玩法、設計理念與核心知識。

  • 聊天機器人即時回答，不需要預先寫完所有問答。
  • 回答內容只根據你們整理的專案背景資料，不應自由亂編。
  • 最終交付是一個 Vercel 網址，再用 iframe 放進 Wix。
正式部署網址的手機版聊天視窗截圖
2 / 34
先看實物

打開 production 網址，先確認「成品長什麼樣」。

正式部署網址的桌面版聊天視窗截圖

看 demo 時，請觀察三件事：它不是整個 Wix 網站，只是一個可以嵌入的聊天小視窗。

  • 上方有專案名稱與小助手標題，讓訪客知道正在問哪個作品。
  • 中間是對話紀錄與 quick prompt，降低第一次互動的門檻。
  • 下方輸入框支援 Enter 送出，送出後會串流顯示 AI 回答。
3 / 34
大圖像

整件事其實只有一條路：資料進去，聊天視窗出來。

1

專案資料

把企劃書、海報文案、玩法說明整理成「背景資料包」。這是 chatbot 的唯一事實來源。

2

AI 產碼

把背景資料包放進 prompt，請 ChatGPT / Claude / Gemini 產出 4 個檔案。

3

Vercel 部署

GitHub 存檔案，Vercel 自動把它變成可以公開打開的網址。

4

Wix 嵌入

把 Vercel 網址貼到 Wix iframe，聊天視窗就出現在專案頁中。

4 / 34
10 steps

照這張地圖走，不需要安裝軟體或打 Terminal。

01註冊帳號GitHub、Vercel、OpenRouter。
02拿 API KeyOpenRouter 給聊天機器人使用。
03整理資料先做背景資料包，再請 AI 產碼。
04開 GitHub repo建立一個空白 repository。
05貼上 4 檔案注意 api/chat.js 的資料夾路徑。
06連到 VercelImport repo，保持 Other 設定。
07設環境變數把 Key 放在 Vercel，不放在程式碼。
08等部署拿到 https://xxx.vercel.app。
09測試聊天測專案問題、表格、拒答。
10放進 Wix用 Embed Site 或 iframe。
5 / 34
Step 3-0

先整理專案背景資料包，AI 才知道「只能回答什麼」。

事實來源

  • 企劃書、簡報、海報文案
  • 玩法、團隊、設計理念

禁止補腦

  • 沒有提到就寫資料未提供
  • 不確定就保守處理

人工檢查

  • 專案名稱、組員、分工要正確
  • 刪除 AI 自行美化的段落

背景資料包就是 chatbot 的知識庫草稿。它不是越華麗越好，而是越可靠越好；請把作品可以公開回答的資訊整理清楚。

如果這一步做得含糊，後面的 AI 程式碼即使能部署，也可能回答錯作品、混進範例內容，或捏造企劃書沒有寫的資訊。

Chrono 範例企劃書提到目標對象是國中學生、主題是綠能教育遊戲、關卡包含風力、水力、太陽能；這些才可以放進 system prompt。
6 / 34
資料包長相

把作品資訊整理成可直接貼進 prompt 的 Markdown。

## 基本資料 - 專案名稱： - 課程／學校／系所： - 指導老師： - 目標對象： - 作品類型： ## 製作團隊 - 成員姓名：負責項目 ## 專案摘要 3 到 5 句話說明這個專案是什麼。 ## 主要功能、玩法或體驗流程 - ## 可以回答的常見問題範圍 - ## 資料不足，建議補充的項目 -
  • Markdown 是為了讓 AI 容易讀，也方便你人工檢查與修改。
  • 「資料不足」不是失敗，而是讓 chatbot 不亂講的安全欄位。
  • 把背景資料包做好後，再進入產生程式碼的 prompt。
先做資料整理，再請 AI 寫程式；不要一開始就把整份企劃書丟給 AI 要它直接產碼。
7 / 34
用 AI 的方法

這份作業不是「讓 AI 隨便寫」，而是把任務講清楚。

先限縮事實

明確告訴 AI：只能根據你提供的背景資料包回答，不可以自行補充。

再限縮技術

要求只產生 4 個檔案，並使用 Vercel Serverless Function 呼叫 OpenRouter。

最後限縮輸出

請 AI 給完整檔案內容，不能省略，避免只拿到局部片段。

Prompt 是規格書。規格越清楚，AI 越不容易把範例專案、其他框架或不必要檔案混進來。
8 / 34
你的交付物

AI 最後應該只給你 4 個檔案。

index.html

聊天視窗骨架

放 header、對話區、輸入框、quick prompt 按鈕，讓瀏覽器知道畫面有哪些元素。

style.css

視覺樣式

控制黑底、白字、聊天氣泡、按鈕、手機響應式與 iframe 滿版顯示。

script.js

前端互動

處理 Enter 送出、停止串流、顯示回答、Markdown 渲染與錯誤提示。

api/chat.js

AI 後端

安全讀取 API Key，呼叫 OpenRouter，並把 AI 回答串流送回前端。

9 / 34
檔案怎麼合作

只要懂「誰負責哪一段」，不需要先學完整網站工程。

HTML

畫面元素

像舞台，先放好聊天室需要的區塊。

CSS

外觀樣式

像美術設定，決定畫面像不像一個正式作品。

JS

互動行為

像工作人員，負責把問題送出並更新對話紀錄。

API

安全串接

像後台櫃檯，替前端拿鑰匙去問 AI。

10 / 34
Step 1

先準備三個免費帳號，最好用同一個 email。

GH

GitHub

用來存放 4 個檔案。Vercel 會從 GitHub 讀取最新版本自動部署。

V

Vercel

把 GitHub 裡的檔案變成公開網址，並提供 /api/chat 後端功能。

OR

OpenRouter

提供 AI 模型 API。你會拿到一把 API Key，讓後端可以呼叫模型。

Vercel 註冊時選「Continue with GitHub」最省事，因為後面部署本來就要連 GitHub。
11 / 34
Step 2

API Key 是鑰匙：只放在 Vercel，不放在前端檔案。

去哪裡拿

  • OpenRouter → Keys
  • Create Key
  • 複製 sk-or-v1- 開頭字串

怎麼保存

  • 只會顯示一次
  • 先貼到安全筆記
  • 不要截圖公開

外流怎麼辦

  • Delete 舊 key
  • Create 新 key

API Key 代表「誰在付費或使用額度」。如果把它貼進 index.html 或 script.js，任何訪客都可能從瀏覽器看到並拿去使用。

這份簡化版的做法是：前端只問自己的 /api/chat，後端再用環境變數 OPENROUTER_API_KEY 去問 OpenRouter。這就是為什麼要用 Vercel 環境變數。

安全規則GitHub repo 裡不應出現真正的 API Key；只可以出現變數名稱，例如 process.env.OPENROUTER_API_KEY。
12 / 34

Source: OpenRouter API key documentation — https://openrouter.ai/docs/api-keys

Step 3-2

請 AI 產生程式碼時，最重要的是「不要省略」。

  • 把 Step 3-0 的背景資料包貼進 prompt 指定位置，取代方括號提示文字。
  • 要求 AI 輸出完整的 4 個檔案內容，每個檔案都用獨立 code block。
  • 若回應太長中斷，不要重開新對話，直接輸入「繼續」。
  • 若跑出 bug，把完整錯誤訊息貼回同一個對話請它修正。
請給我這 4 個檔案的「完整內容」： index.html style.css script.js api/chat.js 不要省略，不要寫「自行補完」。 如果回應太長被截斷，等我說「繼續」再接著輸出。
13 / 34
Step 3-3

先把 4 段程式碼存成正確檔名，錯一個字都可能部署失敗。

1

index.html 放在最外層，檔名全小寫。

2

style.css 放在最外層，負責視覺樣式。

3

script.js 放在最外層，負責前端互動。

4

api/chat.js 必須在 api 資料夾裡，不是放在根目錄。

macOS 文字編輯請先切成「純文字」。不要存成 RTF，也不要讓檔名變成 index.html.txt。
14 / 34
Step 4

GitHub repository 是你們 chatbot 的雲端資料夾。

  • 登入 GitHub 後，點右上角 + → New repository。
  • Repository name 用小寫英文與減號，例如 chrono-chatbot。
  • 選 Public，先不要勾 README、.gitignore、license。
  • Create repository 後，你會看到一個空白 repo，接著開始新增檔案。

命名原則

repo 名稱會影響網址與專案辨識。建議用「組別或作品名 + chatbot」，不要用中文、空白或太長的名稱。

good: green-energy-chatbot

15 / 34

Source: GitHub Docs — creating a new repository and creating files on GitHub.

Step 5

上傳檔案時，最常出錯的是 api/chat.js 的位置。

repo root ├── index.html ├── style.css ├── script.js └── api/ └── chat.js
  • GitHub 網頁操作：Add file → Create new file → 貼上內容 → Commit changes。
  • 建立後端檔案時，檔名欄直接輸入 api/chat.js，斜線會建立資料夾。
  • 如果只看到根目錄有 chat.js，代表路徑錯了，Vercel 的 /api/chat 會找不到。
16 / 34
Step 6

把 GitHub repo 匯入 Vercel，讓它自動部署。

Import

到 Vercel New Project，找到剛剛建立的 GitHub repo，點 Import。

Framework

這份簡化版沒有框架，Framework Preset 保持 Other 或自動設定即可。

Deploy

先展開 Environment Variables 區段，填完 Key 後再按 Deploy。

Vercel 是部署平台，不是寫程式的地方。程式碼來源是 GitHub，環境變數則在 Vercel 專案設定中管理。
17 / 34

Source: Vercel Git deployment docs — https://vercel.com/docs/git

Step 7

環境變數是把秘密交給後端的方式。

必填

  • OPENROUTER_API_KEY
  • 你的 sk-or-v1-... 字串

建議填

  • OPENROUTER_MODEL
  • 選當下可用的 free 模型

改完要做

  • Redeploy
  • 重新測試聊天

Vercel 的環境變數會在後端執行時被讀取。程式碼裡只會看到 process.env.OPENROUTER_API_KEY，不會看到真正的 key。

如果 deployment 已經產生，之後才新增或修改環境變數，舊的 deployment 不會自動改變。你需要重新部署，新的設定才會生效。

模型提醒免費模型清單會變動；如果模型 ID 失效，就到 OpenRouter Models 頁面選當下仍可用的 free 模型。
18 / 34

Source: Vercel environment variables docs — https://vercel.com/docs/projects/environment-variables

Step 8

部署成功後，你會拿到一個 Vercel 網址。

  • 看到 Congratulations 或 Ready，代表前端頁面已部署完成。
  • 打開網址後，應該看到聊天視窗、開場白與 quick prompt 按鈕。
  • 把這個網址記下來，等一下要貼進 Wix iframe。
https://vercel-chatbot-to-wix.vercel.app/
Vercel production demo 桌面截圖
19 / 34
Step 9-a

第一個測試：quick prompt 能不能帶出專案回答。

聊天機器人回答專案介紹的截圖
  • 點「介紹這個專案」，應該幾秒內開始出現 streaming 回答。
  • 回答要包含你們組作品的名稱、主題、核心體驗，而不是範例專案。
  • 如果按鈕沒有反應，先檢查 script.js 是否完整貼上。
20 / 34
Step 9-b

第二個測試：表格、粗體、條列能不能正常顯示。

聊天機器人用 Markdown 表格回答團隊分工的截圖
  • 問「製作團隊有誰？」這類比較型問題，AI 可能用 Markdown 表格回答。
  • 如果畫面出現原始管線符號或表格亂掉，檢查 marked 與 DOMPurify CDN 是否有載入。
  • user 訊息必須用純文字，assistant 訊息才渲染 Markdown。
21 / 34
Step 9-c

第三個測試：問離題問題，機器人要會守住範圍。

應該拒答的問題

「幫我寫排序演算法」

  • 如果題目和你們組專案、作品功能、設計理念、主題知識無關，機器人要禮貌婉拒。
  • 拒答不是壞事，而是表示 system prompt 的守護指令有效。
  • 如果它什麼都回答，回去檢查 api/chat.js 裡的 system prompt 是否有守護規則。
可靠的 chatbot 不只會回答，也要知道什麼不能回答。
22 / 34
Step 10

把 Vercel 網址貼進 Wix，聊天機器人就成為專案頁的一部分。

W

Wix 編輯器

進入你們組專案頁，選擇要放聊天視窗的位置。

+

Add Elements

選 Embed Code，再選 Embed a Site 或 HTML iframe。

URL

貼上網址

把 Vercel 的 https://xxx.vercel.app 貼進去。

✓

Publish

調整寬高，發布後用正式 Wix 網址再測一次。

23 / 34

Source: Wix Editor embed documentation — https://support.wix.com/en/article/wix-editor-embedding-a-site-or-a-widget

iframe 版本

如果 Wix 要你貼 HTML code，就貼 iframe。

<iframe src="https://你的網址.vercel.app" width="100%" height="640" style="border:0;border-radius:12px;" allow="clipboard-write" loading="lazy" ></iframe>
  • src 換成你的 Vercel 網址，不要保留範例網址。
  • 高度建議先用 640，再依 Wix 版面調整。
  • 如果手機版太窄，回 Wix 手機編輯模式調整 iframe 區塊寬度。
24 / 34
常見錯誤

先看錯誤碼，可以少猜很多。

404

/api/chat 找不到。 多半是 api/chat.js 路徑錯，或檔案沒有 commit。

401

API Key 無效。 回 Vercel 檢查 OPENROUTER_API_KEY 是否貼錯。

429

免費模型限流。 等一下再試，或換另一個當下可用的 free 模型。

500

後端錯誤。 到 Vercel Functions Logs 看紅字，整段貼給 AI 修正。

白畫面

前端載入失敗。 開瀏覽器 F12 Console，看 script.js 或 CDN 錯誤。

iframe 被擋

框架載入限制。 確認沒有設定 X-Frame-Options: DENY。

25 / 34
怎麼請 AI 除錯

不要只說「不能用」，要把症狀和錯誤訊息完整貼回去。

我部署後聊天送出沒有回應。 這是瀏覽器 Console 的錯誤： [貼完整紅字] 這是 Vercel Function Log： [貼完整紅字] 請判斷問題在哪個檔案， 並重新給我完整可覆蓋的檔案內容。
  • 完整錯誤訊息比截圖更有用，因為 AI 能直接讀到錯誤碼與行號。
  • 請它給「完整檔案」而不是小片段，比較不容易貼錯位置。
  • 修好後要重新 commit；Vercel 會自動部署新的版本。
26 / 34
之後怎麼改

上線後還能持續改善，不需要重做整個專案。

改內容

回 GitHub 編輯 api/chat.js 裡的 system prompt，加入新的作品資訊。

改外觀

編輯 style.css，調整顏色、字體、按鈕與聊天氣泡樣式。

改問題按鈕

編輯 script.js 中的 quick prompt 清單，換成更適合你們作品的問題。

每一次修改後，都要重新測：專案介紹、團隊分工、玩法功能、離題拒答、Wix 內嵌顯示。
27 / 34
交作業前

用這張 checklist 自我檢查。

✓

Vercel 網址可以打開，且不是白畫面。

✓

聊天送出後會 streaming 回應，不會無限載入。

✓

5 個 quick prompt 都問的是你們組專案。

✓

system prompt 有包含正確企劃書事實。

✓

問離題問題會禮貌拒答並引導回主題。

✓

API Key 沒有出現在 GitHub repo 的任何檔案中。

✓

Wix 桌面版與手機版都能正常顯示 iframe。

✓

繳交資料包含 GitHub repo、Vercel URL、Wix 頁面 URL。

28 / 34
作品脈絡

Chrono 範例提醒我們：小助手要服務作品，不是取代作品。

Chrono 企劃書中的設計理念頁
  • 好的 chatbot 會把作品核心概念講清楚，例如角色、世界觀、機制與學習目標。
  • 它不應該變成萬用問答機，也不應該回答企劃書沒有提供的細節。
  • 先把「我們希望訪客理解什麼」說清楚，AI 才能把回答收斂到作品上。
29 / 34
開始製作

先打開實作指南，再照 10 個步驟完成自己的版本。

先整理事實，再產生程式；先本頁測通，再放進 Wix。

Demo: https://vercel-chatbot-to-wix.vercel.app/
Guide: STUDENT_GUIDE.md

參考來源

  • 本 repo：STUDENT_GUIDE.md 與 production demo。
  • OpenRouter：API Keys 與 Authentication 文件。
  • Vercel：Git deployment 與 Environment Variables 文件。
  • Wix：Embedding a Site or Widget 文件。
  • GitHub：Repository 與 web file creation 文件。
30 / 34
Prompt 工具箱

最後 4 張是可複製的 prompt，照步驟使用。

Step 3-0

整理專案背景資料包

先把企劃書內容整理成 chatbot 的唯一事實來源，避免 AI 混入範例或自行補充。

Step 3-2

產生 4 個完整檔案

把背景資料包貼進指定位置，請 AI 產出 index、style、script 與 api/chat。

Step 3-4

回應被截斷時繼續

不要重開對話，直接要求從中斷處接續輸出，避免前後規格不一致。

Step 3-5

貼錯誤訊息請 AI 修正

把 Console、Network 或 Vercel Function Logs 的紅字完整貼回去。

上線後

改 quick prompts

用於把按鈕問題改成更貼合作品的提問，而不是保留範例問題。

交作業前

請 AI 做最後檢查

請 AI 根據規格逐項檢查，不改動作品事實，只指出風險與修正建議。

31 / 34
Step 3-0 Prompt

先複製這段，整理作品背景資料。

目的

把企劃書變成可用知識庫

輸出會是 Markdown，後面要直接貼進程式碼生成 prompt。整理時只根據提供資料，不自行美化。

貼上位置

先貼 prompt，再貼企劃書文字

如果企劃書很長，可以分批貼；AI 回覆後要人工檢查專案名稱、成員、分工與資料不足欄位。

這一步的品質會決定 chatbot 的回答邊界。背景資料包不清楚，後面的程式再完整也可能答錯內容。
32 / 34
Step 3-2 Prompt

背景資料包確認後，再複製這段產生 4 個檔案。

產碼

完整 4 檔案版本

要求檔案清楚、可直接部署到 Vercel、OpenRouter API Key 只從環境變數讀取。

中斷

回應太長時接續

如果 AI 只輸出一半，不要叫它重寫；請它從停止處繼續，保留同一份規格。

拿到程式碼後，請先確認檔名：index.html、style.css、script.js、api/chat.js。
33 / 34
修正與收尾 Prompt

部署、測試、修改時，用這三個 prompt 回到正軌。

除錯

貼完整錯誤請 AI 修正

適合白畫面、404、401、500、無限載入、Vercel Build Failed。

改內容

更新 quick prompts

適合展覽前改按鈕問題、補上新功能、改成更貼近作品的提問。

檢查

交作業前逐項檢查

請 AI 用 checklist 檢查安全、部署、回答邊界、Markdown、Wix iframe。

按鈕在 HTML 版可直接複製；PDF 版可作為流程提醒，實際複製請打開 HTML 投影片。
34 / 34