你是否想過在網站中加入 AI 功能，卻被「API」「串接」這些名詞嚇退？別擔心，這篇教學專門為完全零基礎的讀者設計。我會用最淺白的語言，一步一步帶你完成 SolidStart 與 HolySheep AI 的整合。

甚麼是 SolidStart？為何要用它？

SolidStart 是一個現代化的網頁開發框架，它的特點是速度非常快，而且學習曲線平緩。你可以把它想像成一個幫你快速建造網站的工具箱。

當我們說「集成 AI」，意思是把你的網站和 AI 大腦連接在一起，讓網站可以回答問題、生成內容翻譯文字等等。就像給你的網站安裝一個智慧助理。

前置準備：你需要先準備這些

第一步：建立 SolidStart 專案

開啟你的終端機（Windows 使用者按 Win+R，輸入 cmd；Mac 使用者開啟 Terminal），然後輸入以下指令：

npx create-solid@latest my-ai-app
cd my-ai-app
npm install

系統會問你幾個問題，選擇「Yes」或直接按 Enter 即可。完成後，你的專案資料夾就建立起來了。

第二步：申請 HolySheep AI API Key

登入 HolySheep AI 後，在儀表板找到「API Key」選項，點擊複製你的密鑰。這個密鑰就像是一把鑰匙，讓你的網站可以連接 HolySheep AI 的服務。

重要提醒：千萬不要把 API Key 直接寫在程式碼裡分享出去，否則別人可能會免費使用你的額度！

第三步：建立 AI 服務模組

在專案資料夾中建立一個新檔案，名為 ai-service.ts（如果使用 JavaScript 則為 ai-service.js）：

// ai-service.ts
const HOLYSHEEP_BASE_URL = "https://api.holysheep.ai/v1";
const API_KEY = "YOUR_HOLYSHEEP_API_KEY"; // 請替換成你的密鑰

interface ChatMessage {
  role: "user" | "assistant";
  content: string;
}

interface ChatResponse {
  choices: Array<{
    message: {
      content: string;
    };
  }>;
}

export async function sendChat(messages: ChatMessage[]): Promise {
  const response = await fetch(${HOLYSHEEP_BASE_URL}/chat/completions, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": Bearer ${API_KEY}
    },
    body: JSON.stringify({
      model: "gpt-4.1",
      messages: messages
    })
  });

  if (!response.ok) {
    throw new Error(API 請求失敗：${response.status});
  }

  const data: ChatResponse = await response.json();
  return data.choices[0].message.content;
}

// 便捷函數：只用一行就能問問題
export async function askAI(question: string): Promise {
  return sendChat([
    { role: "user", content: question }
  ]);
}

第四步：在頁面中使用 AI

現在開啟 src/routes 目錄下的 index.tsx（這是首頁檔案），我們要加入一個簡單的 AI 對話框：

// src/routes/index.tsx
import { createSignal } from "solid-js";
import { askAI } from "../ai-service";

export default function Home() {
  const [question, setQuestion] = createSignal("");
  const [answer, setAnswer] = createSignal("");
  const [loading, setLoading] = createSignal(false);

  async function handleSubmit(e: Event) {
    e.preventDefault();
    setLoading(true);
    setAnswer("思考中...");

    try {
      const result = await askAI(question());
      setAnswer(result);
    } catch (error) {
      setAnswer("抱歉，發生錯誤：" + error);
    } finally {
      setLoading(false);
    }
  }

  return (
    

      
我的 AI 助手