隨著 AI 技術逐漸普及，越來越多開發者想要在自己的網站中加入 ChatGPT 這樣的 AI 功能。不論是建立智慧客服、文件摘要、內容生成，甚至互動式學習工具，都能透過 OpenAI API 快速完成。
本文將帶你從 申請金鑰 → 建立前端專案 → 撰寫 JavaScript 程式碼 → 測試與最佳化，逐步實作如何在網頁中串接 OpenAI API。
一、準備工作
在開始寫程式前，我們需要先準備以下資源：
- OpenAI 帳號與 API Key
- 前往 OpenAI 平台，註冊並登入
- 在 API Keys 頁面點擊「Create new secret key」
- 複製這組金鑰，稍後會在程式中使用
- 建立一個前端專案
- 建立一個資料夾，例如
ai-chat-demo - 建立
index.html與script.js檔案 - 可使用類似 VS Code 等IDE來編輯
- 建立一個資料夾，例如
二、基本 HTML 架構
我們先建立一個簡單的 HTML 頁面，包含輸入框、按鈕與輸出區域。
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 聊天範例</title>
</head>
<body>
<h1>AI 聊天助理</h1>
<textarea id="userInput" rows="4" cols="50" placeholder="輸入你的問題..."></textarea>
<br>
<button id="sendBtn">送出</button>
<h2>AI 回覆</h2>
<div id="response"></div>
<script src="script.js"></script>
</body>
</html>
這段程式碼建立了一個輸入框與按鈕，並保留了一個 div 用於顯示 AI 回覆。
三、在前端使用 OpenAI API
⚠️ 注意：由於 API Key 屬於敏感資訊，建議不要直接放在前端程式碼中。如果是測試專案可以這樣做，但正式專案應透過後端 Proxy 或 Serverless Function 保護金鑰。
以下是最簡單的 fetch API 呼叫範例：
// script.js
const OPENAI_API_KEY = "你的_API_KEY"; // 測試用，正式專案請用後端保護
document.getElementById("sendBtn").addEventListener("click", async () => {
const userMessage = document.getElementById("userInput").value;
const responseDiv = document.getElementById("response");
responseDiv.innerHTML = "正在生成回覆中...";
try {
const res = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${OPENAI_API_KEY}`
},
body: JSON.stringify({
model: "gpt-4o-mini", // 你可以改成 gpt-4o 或 gpt-3.5-turbo
messages: [{ role: "user", content: userMessage }]
})
});
const data = await res.json();
responseDiv.innerHTML = data.choices[0].message.content;
} catch (error) {
responseDiv.innerHTML = "發生錯誤：" + error.message;
}
});
當使用者輸入文字並按下按鈕，程式會呼叫 OpenAI API，並將回覆顯示在網頁上。
四、最佳化：支援串流回應
若要讓回覆「逐字顯示」（像 ChatGPT 的效果），可以使用 Server-Sent Events (SSE) 或 WebSocket。
以下是一個簡單的 串流回覆示例（需搭配後端 Proxy）：
async function fetchStreamedResponse(userMessage) {
const res = await fetch("/api/openai", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: userMessage })
});
const reader = res.body.getReader();
const decoder = new TextDecoder("utf-8");
let result = "";
while (true) {
const { done, value } = await reader.read();
if (done) break;
result += decoder.decode(value, { stream: true });
document.getElementById("response").innerHTML = result;
}
}
這樣可以實現與 ChatGPT 類似的「即時生成」效果。
五、結合其他工具
若你希望將 AI 回覆存到資料庫或 Google Sheets，可以使用自動化平台：
- Make (Integromat)：簡單拖拉即可建立「使用者 → AI → Google Sheet」流程
- Zapier：支援將 AI 回覆自動寄送 Email 或存入 CRM
- Firebase：適合需要會員登入、儲存聊天紀錄的專案
範例（Make 的流程示意）：
- Webhook 接收使用者輸入
- 呼叫 OpenAI API 生成回覆
- 將回覆存入 Google Sheets
六、安全性考量
- 不要將 API Key 硬編碼於前端程式碼中
→ 請用後端或 Cloud Function 中轉 - 設定使用上限與額度
→ 在 OpenAI 帳戶控制台 查看使用情況 - 針對不同專案建立多組 API Key
→ 降低單一 Key 被濫用的風險
七、完整專案延伸
你可以將本文的程式碼整合成一個小專案，例如：
- 智慧客服頁面：使用者輸入問題，AI 即時回覆
- 文件助理：上傳 PDF，AI 進行摘要（可搭配 Humata 或後端 PDF Parser）
- 行銷文案工具：輸入主題，AI 生成貼文或 Email
結語
在 2025 年，串接 OpenAI API 已經成為前端工程師的必備技能。透過簡單的 JavaScript 程式碼，你就能在網頁中快速實現 AI 對話、內容生成、甚至即時資料分析。
下一步，你可以嘗試將這些功能與 Zapier、Make 或 Firebase 結合，打造一個從「輸入 → AI 回覆 → 儲存與通知」的完整自動化流程。
最新線上課程
AI 賦能：全方位能力進化課程
這是一堂教你怎麼樣學會正確使用AI的課程。懂的利用AI，你將獲得超能力。
$4280
$5680
初學者的網頁開發超級課程
史上最完整的詳細內容，超過20個完整版型案例，主打實作學習。手把手帶你進入前端工程師的世界！
$7800
$8800
