คู่มือการตั้งค่าการเชื่อมต่อ Storefront MCP Server กับ OpenAI Responses API

คู่มือฉบับนี้จะพาคุณผ่านขั้นตอนการตั้งค่าและเชื่อมต่อ Shopify Storefront MCP Server กับ OpenAI Responses API แบบละเอียดทีละขั้นตอน เหมาะสำหรับนักพัฒนาที่เพิ่งเริ่มต้น

📋 สิ่งที่คุณต้องเตรียม

1. บัญชีและ API Keys

  • ✅ บัญชี Shopify ที่ใช้งานอยู่
  • ✅ Storefront API Access Token
  • ✅ OpenAI API Key (สมัครได้ที่ platform.openai.com)

2. เครื่องมือพัฒนา

  • Node.js เวอร์ชัน 18.0.0 ขึ้นไป
  • npm หรือ yarn
  • Text Editor (แนะนำ VS Code)
  • Terminal หรือ Command Line

🔑 ขั้นตอนที่ 1: สร้าง Storefront API Access Token

1.1 เข้าสู่ Shopify Admin

  1. เข้าสู่ระบบ Shopify Admin ของคุณ
  2. ไปที่ Settings → Apps and sales channels
  3. คลิก Develop apps

1.2 สร้าง Custom App

  1. คลิก Create an app
  2. ตั้งชื่อแอป เช่น \"Storefront MCP Server\"
  3. คลิก Create app

1.3 กำหนดสิทธิ์ Storefront API

  1. ไปที่แท็บ Configuration
  2. ในส่วน Storefront API คลิก Configure
  3. เลือกสิทธิ์ที่จำเป็น:
    • ✅ unauthenticated_read_product_listings
    • ✅ unauthenticated_read_product_inventory
    • ✅ unauthenticated_write_checkouts
    • ✅ unauthenticated_read_checkouts
  4. คลิก Save

1.4 สร้าง Access Token

  1. ไปที่แท็บ API credentials
  2. ในส่วน Storefront API access token คลิก Install app
  3. คัดลอก Storefront API access token และเก็บไว้ในที่ปลอดภัย
ตัวอย่าง Token:shpat_1234567890abcdefghijklmnopqrstuvwxyz

🤖 ขั้นตอนที่ 2: สร้าง OpenAI API Key

2.1 สมัครบัญชี OpenAI

  1. ไปที่ platform.openai.com/signup
  2. สมัครบัญชีหรือเข้าสู่ระบบ
  3. เติมเครดิตในบัญชี (ขั้นต่ำ $5)

2.2 สร้าง API Key

  1. ไปที่ API Keys
  2. คลิก Create new secret key
  3. ตั้งชื่อ key เช่น \"Shopify MCP Server\"
  4. คัดลอก API key และเก็บไว้ในที่ปลอดภัย (จะแสดงเพียงครั้งเดียว)
ตัวอย่าง API Key:sk-proj-1234567890abcdefghijklmnopqrstuvwxyz

💻 ขั้นตอนที่ 3: ติดตั้งและตั้งค่าโปรเจกต์

3.1 สร้างโปรเจกต์ใหม่

# สร้างโฟลเดอร์โปรเจกต์mkdir shopify-mcp-servercd shopify-mcp-server# เริ่มต้นโปรเจกต์ Node.jsnpm init -y

3.2 ติดตั้ง Dependencies

npm install @shopify/storefront-mcp-server openai dotenv

3.3 สร้างไฟล์ .env

สร้างไฟล์ .env ในโฟลเดอร์โปรเจกต์:

# Shopify ConfigurationSHOPIFY_STORE_DOMAIN=your-store.myshopify.comSHOPIFY_STOREFRONT_ACCESS_TOKEN=shpat_your_token_here# OpenAI ConfigurationOPENAI_API_KEY=sk-proj-your_key_here# Optional: Server ConfigurationPORT=3000NODE_ENV=development

⚠️ สำคัญ: แทนที่ค่าต่อไปนี้ด้วยข้อมูลจริงของคุณ:

  • your-store.myshopify.com → ชื่อโดเมนร้านของคุณ
  • shpat_your_token_here → Storefront API token ที่คัดลอกไว้
  • sk-proj-your_key_here → OpenAI API key ที่คัดลอกไว้

3.4 สร้างไฟล์ .gitignore

# .gitignorenode_modules/.env.DS_Store*.log

🔧 ขั้นตอนที่ 4: เขียนโค้ดเชื่อมต่อ

4.1 สร้างไฟล์ config.js

// config.jsimport dotenv from 'dotenv';dotenv.config();// ตรวจสอบว่ามี environment variables ครบถ้วนconst requiredEnvVars = [  'SHOPIFY_STORE_DOMAIN',  'SHOPIFY_STOREFRONT_ACCESS_TOKEN',  'OPENAI_API_KEY'];requiredEnvVars.forEach(varName => {  if (!process.env[varName]) {    throw new Error(`❌ Missing required environment variable: ${varName}`);  }});export const config = {  shopify: {    storeDomain: process.env.SHOPIFY_STORE_DOMAIN,    storefrontAccessToken: process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN  },  openai: {    apiKey: process.env.OPENAI_API_KEY  },  server: {    port: process.env.PORT || 3000,    env: process.env.NODE_ENV || 'development'  }};console.log('✅ Configuration loaded successfully');

4.2 สร้างไฟล์ server.js

// server.jsimport { StorefrontMCPServer } from '@shopify/storefront-mcp-server';import OpenAI from 'openai';import { config } from './config.js';class ShopifyMCPServer {  constructor() {    console.log('🚀 Initializing Shopify MCP Server...');    // สร้าง MCP Server instance    this.mcpServer = new StorefrontMCPServer({      storeDomain: config.shopify.storeDomain,      storefrontAccessToken: config.shopify.storefrontAccessToken    });    // สร้าง OpenAI instance    this.openai = new OpenAI({      apiKey: config.openai.apiKey    });    console.log('✅ Server initialized successfully');  }  async testConnection() {    try {      console.log('🔍 Testing Shopify connection...');      // ทดสอบการเชื่อมต่อกับ Shopify      const shop = await this.mcpServer.getShop();      console.log('✅ Connected to shop:', shop.name);      // ทดสอบการเชื่อมต่อกับ OpenAI      console.log('🔍 Testing OpenAI connection...');      const completion = await this.openai.chat.completions.create({        model: 'gpt-3.5-turbo',        messages: [{ role: 'user', content: 'Hello' }],        max_tokens: 5      });      console.log('✅ OpenAI connection successful');      return true;    } catch (error) {      console.error('❌ Connection test failed:', error.message);      return false;    }  }  async start() {    console.log('\\n🎯 Starting Shopify MCP Server...');    const isConnected = await this.testConnection();    if (isConnected) {      console.log('\\n✨ Server is ready!');      console.log('📍 Store:', config.shopify.storeDomain);      console.log('🤖 OpenAI: Connected');      console.log('\\n💡 You can now use the MCP Server with OpenAI Responses API');    } else {      console.error('\\n❌ Server failed to start. Please check your configuration.');      process.exit(1);    }  }}// เริ่มต้น serverconst server = new ShopifyMCPServer();server.start().catch(console.error);export default ShopifyMCPServer;

4.3 อัปเดต package.json

เพิ่ม \"type\": \"module\" ใน package.json:

{  \"name\": \"shopify-mcp-server\",  \"version\": \"1.0.0\",  \"type\": \"module\",  \"main\": \"server.js\",  \"scripts\": {    \"start\": \"node server.js\",    \"dev\": \"node --watch server.js\