ในยุคที่ AI กลายเป็นหัวใจสำคัญของธุรกิจอีคอมเมิร์ซ การสร้างระบบตอบคำถามลูกค้าด้วย Server-Side Rendering (SSR) จะช่วยให้ SEO ดีขึ้น โหลดเร็วขึ้น และประสบการณ์ผู้ใช้ราบรื่นกว่าเดิม ในบทความนี้ผมจะพาคุณสร้างระบบ AI Customer Service สำหรับร้านค้าออนไลน์ด้วย SvelteKit และ HolySheep AI ซึ่งมีราคาประหยัดกว่า 85% เมื่อเทียบกับ API อื่น พร้อมความหน่วงต่ำกว่า 50 มิลลิวินาที

ทำไมต้องใช้ SSR กับ AI?

การใช้ AI ฝั่งเซิร์ฟเวอร์มีข้อดีหลายประการ: ปกป้อง API Key (ไม่โดนขโมย), ประมวลผล RAG ฝั่งเซิร์ฟเวอร์เพื่อลดขนาด payload, ทำ caching ของ embedding ได้ และ SEO ดีขึ้นเพราะเนื้อหาถูก render ก่อนส่งให้ client

ตั้งค่าโปรเจกต์ SvelteKit

npm create svelte@latest ecommerce-ai
cd ecommerce-ai
npm install


ติดตั้ง dependencies ที่จำเป็น

npm install @sveltejs/adapter-node
npm install ai zod
npm install dotenv

สร้างไฟล์ .env สำหรับเก็บ API Key อย่างปลอดภัย:

# .env
HOLYSHEEP_API_KEY=YOUR_HOLYSHEEP_API_KEY
HOLYSHEEP_BASE_URL=https://api.holysheep.ai/v1
EMBEDDING_MODEL=text-embedding-3-small
COMPLETION_MODEL=gpt-4.1

สร้าง Server Module สำหรับ HolySheep AI

สร้างไฟล์ src/lib/server/holysheep.ts เพื่อ封装 API call ทั้งหมด:

import { env } from '$env/dynamic/private';

export const HOLYSHEEP_CONFIG = {
  baseUrl: 'https://api.holysheep.ai/v1',
  apiKey: env.HOLYSHEEP_API_KEY,
  embeddingModel: 'text-embedding-3-small',
  completionModel: 'gpt-4.1'
};

export async function createEmbedding(text: string): Promise<number[]> {
  const response = await fetch(${HOLYSHEEP_CONFIG.baseUrl}/embeddings, {
    method: 'POST',
    headers: {
      'Authorization': Bearer ${HOLYSHEEP_CONFIG.apiKey},
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      input: text,
      model: HOLYSHEEP_CONFIG.embeddingModel
    })
  });

  if (!response.ok) {
    throw new Error(Embedding API Error: ${response.status});
  }

  const data = await response.json();
  return data.data[0].embedding;
}

export async function createCompletion(
  messages: Array<{role: string; content: string}>,
  context?: string
): Promise<string> {
  // แทรก context จาก RAG เข้าไปใน system prompt
  const systemMessage = context 
    ? `คุณคือพนักงานบริการลูกค้าอีคอมเมิร์ซ 
ข้อมูลสินค้าที่เกี่ยวข้อง: ${context}
ตอบกลับอย่างเป็นมิตรและให้ข้อมูลที่ถูกต้อง`
    : 'คุณคือพนักงานบริการลูกค้าอีคอมเมิร์ซ';

  const response = await fetch(${HOLYSHEEP_CONFIG.baseUrl}/chat/completions, {
    method: 'POST',
    headers: {
      'Authorization': Bearer ${HOLYSHEEP_CONFIG.apiKey},
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      model: HOLYSHEEP_CONFIG.completionModel,
      messages: [
        { role: 'system', content: systemMessage },
        ...messages
      ],
      temperature: 0.7,
      max_tokens: 1000
    })
  });

  if (!response.ok) {
    throw new Error(Completion API Error: ${response.status});
  }

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

สร้างระบบ RAG สำหรับฐานข้อมูลสินค้า

// src/lib/server/rag.ts
import { createEmbedding } from './holysheep';

interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  category: string;
}

// In-memory vector store (สำหรับ production ใช้ Pinecone/Weaviate)
const vectorStore = new Map<string, { embedding: number[]; product: Product }>();

export async function indexProduct(product: Product): Promise<void> {
  const text = ${product.name}. ${product.description}. หมวดหมู่: ${product.category};
  const embedding = await createEmbedding(text);
  vectorStore.set(product.id, { embedding, product });
}

export async function searchProducts(
  query: string,
  topK: number = 5
): Promise<Product[]> {
  const queryEmbedding = await createEmbedding(query);
  
  const similarities = Array.from(vectorStore.values()).map(({ embedding, product }) => {
    const similarity = cosineSimilarity(queryEmbedding, embedding);
    return { product, similarity };
  });

  return similarities
    .sort((a, b) => b.similarity - a.similarity)
    .slice(0, topK)
    .map(item => item.product);
}

function cosineSimilarity(a: number[], b: number[]): number {
  let dotProduct = 0;
  let normA = 0;
  let normB = 0;
  
  for (let i = 0; i < a.length; i++) {
    dotProduct += a[i] * b[i];
    normA += a[i] * a[i];
    normB += b[i] * b[i];
  }
  
  return dotProduct / (Math.sqrt(normA) * Math.sqrt(normB));
}

// ฟังก์ชันสร้าง context string สำหรับ AI
export function createContextFromProducts(products: Product[]): string {
  return products.map(p => 
    - ${p.name}: ${p.description} (ราคา ${p.price} บาท)
  ).join('\n');
}

สร้าง API Endpoint สำหรับ Server-Side Rendering

// src/routes/api/chat/+server.ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { createCompletion, searchProducts, createContextFromProducts } from '$lib/server/rag';

export const POST: RequestHandler = async ({ request }) => {
  try {
    const { message, history } = await request.json();

    // 1. ค้นหาสินค้าที่เกี่ยวข้องด้วย RAG
    const relevantProducts = await searchProducts(message, 5);
    const context = createContextFromProducts(relevantProducts);

    // 2. สร้าง completion พร้อม context
    const aiResponse = await createCompletion(history, context);

    return json({
      success: true,
      response: aiResponse,
      products: relevantProducts
    });

  } catch (error) {
    console.error('AI Chat Error:', error);
    return json(
      { success: false, error: 'เกิดข้อผิดพลาด กรุณาลองใหม่' },
      { status: 500 }
    );
  }
};

สร้างหน้า Chat UI แบบ SSR

<!-- src/routes/chat/+page.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  
  let messages: Array<{role: string; content: string}> = [];
  let input = '';
  let isLoading = false;
  let recommendedProducts: any[] = [];

  async function sendMessage() {
    if (!input.trim() || isLoading) return;
    
    const userMessage = { role: 'user', content: input };
    messages = [...messages, userMessage];
    input = '';
    isLoading = true;

    try {
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          message: userMessage.content,
          history: messages.slice(0, -1)
        })
      });

      const data = await res.json();
      
      if (data.success) {
        messages = [...messages, { role: 'assistant', content: data.response }];
        recommendedProducts = data.products || [];
      }
    } catch (error) {
      messages = [...messages, { role: 'assistant', content: 'ขอโทษค่ะ เกิดข้อผิดพลาด' }];
    } finally {
      isLoading = false;
    }
  }
</script>

<div class="chat-container">
  <h1>💬 ถามเรื่องสินค้าได้เลย</h1>
  
  <div class="messages">
    {#each messages as msg}
      <div class="message {msg.role}">
        {msg.content}
      </div>
    {/each}
    {#if isLoading}
      <div class="message assistant">กำลังคิด...</div>
    {/if}
  </div>

  {#if recommendedProducts.length > 0}
    <div class="products">
      <h3>สินค้าแนะนำ:</h3>
      {#each recommendedProducts as product}
        <div class="product-card">
          <strong>{product.name}</strong>
          <span>{product.price} บาท</span>
        </div>
      {/each}
    </div>
  {/if}

  <div class="input-area">
    <input 
      bind:value={input} 
      placeholder="ถามเรื่องสินค้า..."
      on:keydown={(e) => e.key === 'Enter' && sendMessage()}
    />
    <button on:click={sendMessage} disabled={isLoading}>
      ส่ง
    </button>
  </div>
</div>

โครงสร้างราคาและการประหยัดค่าใช้จ่าย

เมื่อใช้ HolySheep AI คุณจะได้รับประโยชน์ด้านราคาอย่างมาก โดยเปรียบเทียบได้ดังนี้:

รองรับการชำระเงินผ่าน WeChat และ Alipay พร้อมเครดิตฟรีเมื่อลงทะเบียน ความหน่วงต่ำกว่า 50 มิลลิวินาทีทำให้เหมาะสำหรับ real-time chat

ข้อผิดพลาดที่พบบ่อยและวิธีแก้ไข

กรณีที่ 1: Error 401 Unauthorized

// ❌ ผิด: ใช้ variable ผิด
const apiKey = process.env.HOLYSHEEP_API_KEY; // undefined ใน SvelteKit

// ✅ ถูก: ใช้ $env/dynamic/private หรือ $env/static/private
import { env } from '$env/dynamic/private';

const response = await fetch(url, {
  headers: {
    'Authorization': Bearer ${env.HOLYSHEEP_API_KEY} // ต้องเรียกจาก env
  }
});

กรณีที่ 2: Streaming Response ทำให้ UI พัง

// ❌ ผิด: ใช้ streaming กับ SSR โดยไม่ handle ถูกต้อง
const stream = await openai.chat.completions.create({
  model: 'gpt-4.1',
  stream: true,
  messages
});
// พอ return json() ก็พัง

// ✅ ถูก: สำหรับ SSR ใช้ non-streaming แทน
const response = await fetch(${HOLYSHEEP_CONFIG.baseUrl}/chat/completions, {
  method: 'POST',
  headers: { 'Authorization': Bearer ${apiKey} },
  body: JSON.stringify({
    model: 'gpt-4.1',
    messages,
    stream: false // ปิด streaming สำหรับ SSR
  })
});
const data = await response.json();
return json({ content: data.choices[0].message.content });

กรณีที่ 3: Memory Leak จาก Vector Store

// ❌ ผิด: Map โตเรื่อยๆ ไม่มีที่สิ้นสุด
const vectorStore = new Map();

// ✅ ถูก: ใช้ LRU Cache หรือ limit size
import { LRUCache } from 'lru-cache';

const vectorStore = new LRUCache({
  max: 1000, // เก็บได้สูงสุด 1000 items
  ttl: 1000 * 60 * 60 // 1 ชั่วโมง
});

// หรือใช้ Redis สำหรับ production
import { Redis } from 'ioredis';
const redis = new Redis(process.env.REDIS_URL);

กรณีที่ 4: CORS Error เมื่อเรียก API จาก Client

// ❌ ผิด: เรียก HolySheep API ตรงจาก client
const res = await fetch('https://api.holysheep.ai/v1/chat/completions', ...);

// ✅ ถูก: สร้าง server endpoint เป็น proxy
// src/routes/api/proxy/+server.ts
export async function POST({ request }) {
  const body = await request.json();
  
  const response = await fetch('https://api.holysheep.ai/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': Bearer ${env.HOLYSHEEP_API_KEY},
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(body)
  });
  
  return new Response(response.body, {
    headers: { 'Content-Type': 'application/json' }
  });
}

สรุป

การใช้ SvelteKit ร่วมกับ HolySheep AI สำหรับ Server-Side Rendering ช่วยให้คุณสร้างระบบ AI Chat ที่มีประสิทธิภาพสูง ปลอดภัย และประหยัดค่าใช้จ่ายได้อย่างแท้จริง ด้วยราคาที่ประหยัดกว่า 85% และความหน่วงต่ำกว่า 50 มิลลิวินาที คุณสามารถสร้างระบบ RAG สำหรับอีคอมเมิร์ซที่ตอบคำถามลูกค้าได้อย่างรวดเร็วและแม่นยำ

👉 สมัคร HolySheep AI — รับเครดิตฟรีเมื่อลงทะเบียน

แหล่งข้อมูลที่เกี่ยวข้อง

บทความที่เกี่ยวข้อง