隨著 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>

<!-- 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;
  }
});

// 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;
  }
}

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 回覆 → 儲存與通知」的完整自動化流程。

標籤 #網頁開發 相關文章

如何在網頁中快速串接 OpenAI API？（前端 JS 實作）

標籤 #網頁開發相關文章