กลับไปที่บล็อก
BananaBanana Teamtutorialmcpcursor

สร้างรูปภาพใน Cursor: คู่มือการตั้งค่า MCP Server

เชื่อมต่อ Cursor กับ remote MCP server เพื่อสร้างรูปภาพลงในคลังโค้ดของคุณโดยตรง: การตั้งค่า mcp.json, จัดการความลับด้วย env-var และค่าใช้จ่ายจริงเริ่มต้นที่ $0.03

สร้างรูปภาพใน Cursor: คู่มือการตั้งค่า MCP Server

MCP server สำหรับ Cursor เปรียบเสมือนกล่องเครื่องมือภายนอกที่เอเจนต์ของเอดิเตอร์สามารถเรียกใช้งานได้โดยตรงจากแชท เพียงคุณเพิ่มบล็อก JSON บล็อกเดียวลงใน mcp.json แล้ว Cursor ก็จะมีความสามารถที่โมเดลพื้นฐานทั่วไปไม่มี ซึ่งรวมถึงการสร้างรูปภาพด้วย ปกติแล้วเอเจนต์ของ Cursor สามารถแก้ไขไฟล์และรันคำสั่งเทอร์มินัลได้ทั้งวัน แต่ไม่มีโมเดลเบื้องหลังตัวไหนเลยที่สามารถสร้างไฟล์รูปภาพขึ้นมาได้เอง การเชื่อมต่อเซิร์ฟเวอร์สำหรับสร้างรูปภาพจะเปลี่ยนคำสั่งอย่าง "สร้างรูปภาพ hero ขนาด 16:9 สำหรับแลนดิ้งเพจนี้ให้หน่อย" ให้กลายเป็นคำสั่งแชททั่วไปที่ลงท้ายด้วยไฟล์รูปภาพจริง ๆ ในคลังโค้ดของคุณ

นี่คือขั้นตอนการตั้งค่าทั้งหมด หากนั่นคือสิ่งที่คุณกำลังตามหา ขั้นแรกให้สร้าง API key ใน โปรไฟล์ BananaBanana ของคุณ จากนั้นเพิ่มโค้ดนี้ลงใน ~/.cursor/mcp.json (สำหรับใช้งานทั่วทั้งระบบ) หรือ .cursor/mcp.json ในโปรเจกต์ของคุณ:

{
  "mcpServers": {
    "bananabanana": {
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer ${env:BB_API_KEY}"
      }
    }
  }
}

จากนั้นทำการส่งออก (export) BB_API_KEY=bb_live_YOUR_KEY ไปยังสภาพแวดล้อม (environment) ของคุณก็เป็นอันเสร็จเรียบร้อย ไม่ต้องรันกระบวนการเซิร์ฟเวอร์ในเครื่อง (local server process) ไม่ต้องมีบัญชี Google Cloud และไม่ต้องสมัครสมาชิกรายเดือน ระบบจะคิดค่าบริการรูปภาพเริ่มต้นที่ $0.03 จากยอดเงินคงเหลือแบบเติมเงิน และวิดีโอเริ่มต้นที่ $0.10 ภาพตัวอย่างทั้งสองภาพในคู่มือนี้สร้างขึ้นผ่านการตั้งค่านี้โดยใช้คีย์จริงในขณะที่ฉันกำลังเขียนบทความนี้ ข้อมูลประวัติการใช้งาน (traces) และบิลค่าสื่อจำนวน $0.55 แสดงอยู่ด้านล่างนี้

ทำไมต้องติดตั้งระบบสร้างรูปภาพเพิ่มเข้าไปใน Cursor?

นั่นเป็นเพราะงานฟรอนต์เอนด์มักต้องการรูปภาพในจังหวะที่คุณกำลังเขียนโค้ดอยู่พอดี ไม่ว่าจะเป็นรูปภาพ hero สำหรับแลนดิ้งเพจ รูปภาพจำลอง (placeholder) สำหรับการ์ดสินค้าเพื่อไม่ให้ตารางแสดงผลเป็นกล่องสีเทาว่างเปล่า หรือรูปภาพ OG สำหรับบล็อกโพสต์ที่คุณเพิ่งเขียนเสร็จ สิ่งเหล่านี้ไม่ได้ยากเย็นอะไร แต่การทำแบบเดิม ๆ มักทำให้คุณต้องเสียเวลาอ้อมไปทำอย่างอื่นเสมอ: เปิดโปรแกรมสร้างรูปภาพในแท็บเบราว์เซอร์, พิมพ์คำสั่ง (prompt), ดาวน์โหลด, เปลี่ยนชื่อไฟล์, ลากไฟล์เข้าไปในโฟลเดอร์ public/, กลับมาที่เอดิเตอร์ และเขียนแท็ก <img> การทำงานเชื่อมต่อเล็ก ๆ น้อย ๆ เหล่านี้อาจใช้เวลากกว่าสิบนาทีต่อหนึ่งชิ้นงาน และนั่นทำให้คุณเสียสมาธิจากคอมโพเนนต์ที่กำลังเขียนอยู่

เมื่อมี MCP server เอเจนต์จะเข้ามาจัดการลูปทั้งหมดนี้แทนคุณ ตั้งแต่การเขียนคำสั่ง (prompt) (ซึ่งมักจะเขียนได้ดีกว่าคำสั่งแรกที่ฉันคิดแบบส่ง ๆ เสียอีก) เรียกใช้งานฟังก์ชัน generate_image ดาวน์โหลดผลลัพธ์ลงในโฟลเดอร์ที่ถูกต้อง และเขียนมาร์กอัปพร้อมระบุข้อความ alt (alt text) ให้เสร็จสรรพ ทำให้คุณแค่ตรวจสอบการเปลี่ยนแปลงของโค้ด (diff) แทนที่จะต้องมานั่งทำงานจุกจิกเหล่านี้เอง

อีกหนึ่งจุดเด่นที่น่าสนใจคือสิ่งที่คุณไม่ต้องติดตั้งด้วยตนเอง แม้จะมี MCP server แบบโลคัล (local) สำหรับการสร้างรูปภาพอยู่จริงและสามารถใช้งานได้ แต่นั่นหมายความว่าคุณต้องรันกระบวนการ Node หรือ Python ของตัวเอง และต้องนำ Google API key ของคุณมาใช้เอง ซึ่งมาพร้อมกับโควตาและการคิดค่าบริการในบัญชี Google ของคุณ แต่ remote server จะช่วยข้ามขั้นตอนเหล่านั้นทั้งหมด เพราะปลายทาง (endpoint) รันอยู่บนฝั่งของเราเรียบร้อยแล้ว บนไปป์ไลน์เดียวกันกับ เครื่องมือสร้างรูปภาพ BananaBanana และข้อมูลประจำตัวเดียวที่คุณต้องใช้มีเพียงคีย์ bb_live_ แค่คีย์เดียวเท่านั้น

ภาพประกอบแนวบรรณาธิการแสดงแล็ปท็อปที่เชื่อมต่อด้วยสายเคเบิลเรืองแสงไปยังสตูดิโอศิลปะขนาดเล็กบนก้อนเมฆ ซึ่งเป็นสัญลักษณ์แทนการที่ Cursor เรียกใช้งาน remote image generation MCP server

วิธีการเพิ่ม MCP server เข้าไปใน Cursor?

เพียงสามขั้นตอน ใช้เวลาประมาณสองนาที รายละเอียดการตั้งค่าด้านล่างนี้ได้รับการตรวจสอบความถูกต้องกับ เอกสารอย่างเป็นทางการของ Cursor MCP ณ วันที่ 11 กรกฎาคม 2026

ขั้นตอนแรก ให้ทำการ สมัครสมาชิก และไปที่ โปรไฟล์ → MCP API Keys จากนั้นสร้างคีย์ขึ้นมา คีย์นี้จะแสดงให้เห็นเพียงครั้งเดียว โดยจะขึ้นต้นด้วย bb_live_ และจะถูกบันทึกในรูปแบบแฮช (hashed) บนฝั่งของเรา ดังนั้นโปรดคัดลอกเก็บไว้ทันที บัญชีใหม่จะเริ่มต้นด้วยยอดเงินทดลองใช้งาน $0.20 ซึ่งเพียงพอสำหรับการสร้างรูปภาพทดสอบหกภาพด้วยโมเดลราคาประหยัดที่สุด

ขั้นตอนที่สอง เลือกตำแหน่งที่ไฟล์การตั้งค่าจะอยู่ โดย Cursor จะอ่านไฟล์จากสองตำแหน่งดังนี้:

  • ~/.cursor/mcp.json — แบบโกลบอล (global) เซิร์ฟเวอร์จะติดตามคุณไปในทุก ๆ โปรเจกต์
  • .cursor/mcp.json ในโฟลเดอร์รูทของคลังโค้ด — แบบเฉพาะเจาะจงในโปรเจกต์ (project-scoped) และสามารถคอมมิต (commit) ได้อย่างปลอดภัย หาก คุณไม่ได้ใส่คีย์จริงลงไปในไฟล์นี้

เงื่อนไข "หาก" ดังกล่าวนั้นได้รับการแก้ไขด้วยการแทนที่ค่าแบบสอดแทรก (interpolation) ${env:BB_API_KEY} ในส่วนของโค้ดตัวอย่างด้านบน โดย Cursor จะนำตัวแปรสภาพแวดล้อม (environment variables) ไปแทนที่ในค่าของไฟล์ mcp.json ในตอนที่โหลดไฟล์ ทำให้ตัวไฟล์เองไม่มีข้อมูลที่เป็นความลับอยู่เลย นอกจากนี้ ไวยากรณ์เดียวกันนี้ยังรองรับ ${workspaceFolder} และตัวแปรอื่น ๆ อีกสองสามตัวตามที่ระบุไว้ในเอกสารประกอบ

ขั้นตอนที่สาม รีสตาร์ทหรือโหลด Cursor ใหม่ แล้วเปิดไปที่ Cursor Settings → MCP ตัวเซิร์ฟเวอร์ควรจะแสดงขึ้นมาพร้อมกับไฟสถานะสีเขียวและรายการเครื่องมือเจ็ดรายการ ตั้งแต่ list_models ไปจนถึง list_generations หน้า MCP server ของเรามีโค้ดตัวอย่างเดียวกันนี้พร้อมกับตารางความเข้ากันได้สำหรับไคลเอนต์อื่น ๆ ทั้งหมดที่เราได้ทดสอบแล้ว:

ภาพหน้าจอโค้ดตัวอย่างการตั้งค่า Cursor บนหน้าเอกสารประกอบ BananaBanana MCP แสดงบล็อก mcp.json พร้อมการแทนที่ค่าตัวแปรสภาพแวดล้อม

หากเซิร์ฟเวอร์ไม่ปรากฏขึ้นมา ให้ข้ามไปดูที่หัวข้อข้อควรระวัง (quirks) สาเหตุมักเกิดจากตัวแปรสภาพแวดล้อมมากกว่าที่จะเป็นเรื่องของไฟล์ตั้งค่าเอง

ตัวอย่างการใช้งาน: การสร้างรูปภาพ hero สำหรับแลนดิ้งเพจและภาพถ่ายสินค้าโดยไม่ต้องออกจากแชท

สถานการณ์สมมติที่เป็นที่มาของบทความนี้คือ: คุณเป็นนักพัฒนาฟรอนต์เอนด์ที่กำลังประกอบหน้าแลนดิ้งเพจสำหรับแบรนด์อุปกรณ์กลางแจ้ง และการออกแบบกำหนดให้ใช้รูปภาพ hero แบบเต็มความกว้างในธีมการตั้งแคมป์ตอนรุ่งสาง ในแชทของ Cursor คุณเพียงแค่เอ่ยปากขอ เอเจนต์จะเขียนคำสั่ง (prompt) ในสไตล์การถ่ายภาพขึ้นมาและเรียกใช้งานเครื่องมือ นี่คือข้อมูลประวัติการรันจริง (trace) จากเซสชันของฉัน พร้อมด้วยรหัสงาน (job id) จริงทั้งหมด:

→ generate_image {"prompt": "A photorealistic wide hero shot for an outdoor
   gear brand landing page: a lone orange tent glowing softly on the shore of
   a still alpine lake at dawn, mist over the water, sharp granite peaks
   catching the first pink light, generous empty sky for headline text, low
   angle, 35mm lens, no text", "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmrgox3xj000s…", "status": "processing",
   "cost_charged_usd": 0.11, "balance_remaining_usd": 1554.40}
→ get_result {"job_id": "cmrgox3xj000s…"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

ใช้เวลาเพียงสิบแปดวินาทีตั้งแต่เริ่มเรียกใช้งานจนได้ไฟล์ที่เสร็จสมบูรณ์ และนี่คือผลลัพธ์ที่ได้จากการสร้างครั้งแรกโดยไม่มีการทำซ้ำแต่อย่างใด:

ภาพ hero สำหรับแลนดิ้งเพจที่สร้างโดย AI แสดงเต็นท์สีส้มริมทะเลสาบอัลไพน์ที่มีหมอกจาง ๆ ในตอนรุ่งสาง สร้างขึ้นใน Cursor ผ่าน BananaBanana MCP server

จากนั้นเอเจนต์จะดึงไฟล์จาก URL ที่ลงนามแล้ว (signed URL) เข้าไปในโฟลเดอร์ public/ และเขียนคอมโพเนนต์ให้คุณ ลิงก์เหล่านี้จะมีอายุใช้งานได้ 24 ชั่วโมง หลังจากนั้นหากต้องการใช้งานอีกก็เพียงแค่เรียกใช้งาน get_result ใหม่อีกครั้งเพื่อขอรับลิงก์ใหม่

สำหรับการสร้างรูปภาพจำลองสินค้า (product placeholder) ก็ใช้วิธีการเดียวกันแต่ใช้บรีฟที่เป็นทรงสี่เหลี่ยมจัตุรัสมากขึ้น สำหรับตารางการ์ดแสดงสินค้า ฉันขอให้ระบบสร้างภาพขวดน้ำในรูปแบบเดียวกับที่คุณจะบรีฟช่างภาพจริงๆ: วัตถุหลัก, พื้นผิว, แสง และเลนส์ เรียกใช้งานเพียงครั้งเดียว เสียค่าใช้จ่าย $0.11 และใช้เวลาเพียงยี่สิบวินาที:

ภาพจำลองสินค้าที่มีความสมจริงในระดับภาพถ่ายของขวดน้ำสเตนเลสแบบขัดเงาพร้อมฝาสีเขียวเซจบนหินแกรนิต สร้างขึ้นใน Cursor ผ่าน MCP สำหรับตารางการ์ดในแลนดิ้งเพจ

ภาพตัวอย่างทั้งสองนี้รันบนรุ่น Nano Banana Pro เนื่องจากพอร์ตการใช้งานจริงถูกนำเสนออยู่บนหน้านี้ สำหรับภาพจำลองในตารางสินค้าที่ใช้แล้วทิ้ง ฉันแนะนำให้ใช้ nano-banana-2-lite ในราคาเพียง $0.03 และค่อยอัปเกรดเฉพาะภาพที่ผ่านการอนุมัติการออกแบบเท่านั้น ซึ่ง คู่มือรุ่น Lite ของเราจะบอกเล่าอย่างละเอียดว่าโมเดลราคาประหยัดตัวนี้ทำงานได้ดีเพียงใดในสถานการณ์ต่าง ๆ และหากคุณต้องการให้ตัวละครหลัก (mascot) เดียวกันปรากฏอยู่ในรูปภาพหลาย ๆ ภาพ เทคนิคการเขียนคำสั่ง (prompting technique) จะมีความสำคัญมากกว่าตัวไคลเอนต์ที่ใช้ สามารถศึกษาเพิ่มเติมได้ที่ คู่มือการสร้างรูปภาพให้ตัวละครมีความสม่ำเสมอ

การสร้างวิดีโอก็สามารถทำได้จากในแชทเดียวกันนี้เช่นกัน ฟังก์ชัน generate_video จะไม่เคยคิดค่าบริการในการเรียกใช้งานครั้งแรก โดยระบบจะส่งใบเสนอราคา (quote) กลับมาก่อน และเอเจนต์จะต้องเรียกใช้งานฟังก์ชันซ้ำอีกครั้งด้วยคำสั่ง confirm_cost เพื่อยอมรับยอดเงินที่แน่นอน วิดีโอแบบไม่มีเสียงความละเอียด 720p ที่สร้างจาก Veo 3.1 Lite มีราคาเริ่มต้นที่ $0.10; ส่วน Omni Flash แบบมีเสียงมีราคา $0.10 ต่อวินาที ดังนั้นหากสร้างคลิปสามวินาทีจะมีค่าใช้จ่าย $0.30

ข้อควรระวังเกี่ยวกับ Cursor ที่คุณควรรู้ก่อนเริ่มใช้งานจริง

ไคลเอนต์ทุกตัวย่อมมีจุดบกพร่องและข้อจำกัดเฉพาะตัว และนี่คือสิ่งต่าง ๆ ที่ฉันอยากจะเตือนเพื่อนร่วมทีมของฉันโดยตรง ซึ่งรวบรวมมาจากตอนที่ฉันทำการทดสอบการตั้งค่าต่าง ๆ ด้านบนนี้

ภาพประกอบแนวบรรณาธิการแสดงหุ่นยนต์ตัวเล็ก ๆ กำลังตรวจสอบป้ายบอกทางสามป้ายที่มีรูปบ้าน โฟลเดอร์ และแม่กุญแจ ซึ่งเป็นสัญลักษณ์แทนขอบเขตการกำหนดค่าและข้อมูลที่เป็นความลับใน Cursor

1. ${env:…} จะทำงานได้ก็ต่อเมื่อ Cursor มองเห็นตัวแปรนั้น ๆ เท่านั้น การทำ export ในไฟล์ .zshrc ของคุณจะมองเห็นได้เมื่อคุณเปิด Cursor ผ่านเทอร์มินัล แต่แอปพลิเคชันรูปแบบกราฟิก (GUI) ที่เปิดจาก Dock หรือไอคอนเปิดโปรแกรมบนเดสก์ท็อปจะไม่สามารถอ่านข้อมูลโปรไฟล์เชลล์ของคุณได้ ส่งผลให้การตั้งค่าเดียวกันนี้ล้มเหลวโดยไม่แจ้งเตือนใด ๆ จากประสบการณ์ของฉัน นี่คือสาเหตุอันดับหนึ่งของปัญหา "เซิร์ฟเวอร์เชื่อมต่อไม่ได้" บน macOS วิธีแก้ไขคือ: ให้กำหนดค่าตัวแปรกระบวนการในระดับระบบปฏิบัติการ (เช่น ใช้คำสั่ง launchctl setenv บน macOS หรือตั้งค่าตัวแปรสภาพแวดล้อมระบบใน Windows) หรือเปิด Cursor ผ่านเทอร์มินัลสักครั้งเพื่อตรวจสอบว่าการตั้งค่าอื่น ๆ ทำงานได้ปกติหรือไม่

2. การตั้งค่าระดับโปรเจกต์เป็นฟีเจอร์สำหรับทีม โดยทุกคนใช้คีย์ส่วนตัวของตนเอง เมื่อคุณคอมมิตไฟล์ .cursor/mcp.json พร้อมระบุตัวแปรตัวแทน ${env:BB_API_KEY} เพื่อนร่วมทีมทุกคนก็จะสามารถใช้งานเซิร์ฟเวอร์ได้ทันทีหลังจากทำการโคลนโปรเจกต์ โดยต่างคนต่างใช้คีย์ของตัวเอง การแยกการใช้งานลักษณะนี้มีความสำคัญมากกว่าที่คิด: คีย์นั้นใช้งานได้ฟรี และแต่ละคีย์จะมีประวัติการใช้งาน (usage log) ของตัวเอง (รวมถึงเครื่องมือ, โมเดล, ค่าใช้จ่าย, และตัวอย่างคำสั่งที่ใช้) อีกทั้งยังสามารถกำหนดเพดานค่าใช้จ่ายรายวันในสกุลเงิน USD ได้ในหน้า โปรไฟล์ → MCP API Keys เมื่อมีคนออกจากทีม คุณเพียงแค่ยกเลิกคีย์นั้นไป โดยที่คนอื่น ๆ ในทีมไม่ได้รับผลกระทบใด ๆ เลย นอกจากนี้ แผนการใช้งานเชิงธุรกิจของ Cursor ยังสามารถผลักดันการตั้งค่า MCP server จากแดชบอร์ดทีมได้อีกด้วย แต่ไฟล์การตั้งค่าที่คอมมิตนี้ก็สามารถทำงานได้ในทุกแผนการใช้งานเช่นกัน

3. Cursor จะถามความสมัครใจก่อนที่จะเรียกใช้เครื่องมือเสมอ และคุณควรเปิดฟังก์ชันนี้ทิ้งไว้ โดยค่าเริ่มต้น การเรียกใช้งาน MCP แต่ละครั้งจะรอการอนุมัติจากคุณ โดยจะแสดงพารามิเตอร์ต่าง ๆ ให้เห็นภายใต้ลูกศรขนาดเล็กถัดจากชื่อเครื่องมือ ในโหมดรันอัตโนมัติ เครื่องมือที่อยู่ในรายการที่อนุญาต (allowlist) จะทำงานในทันที การคลิกอนุมัติยี่สิบครั้งในระหว่างที่รันงานเป็นชุดอาจเป็นเรื่องที่น่าเบื่อ แต่สำหรับเครื่องมือที่มีค่าใช้จ่ายจริงในการเรียกใช้งานในแต่ละครั้ง ฉันขอแนะนำให้เปิดการแจ้งเตือนเพื่ออนุมัติไว้ และอนุญาตให้รันอัตโนมัติเฉพาะเครื่องมือที่ใช้งานฟรีเท่านั้น (เช่น list_models, get_result) สำหรับการสร้างวิดีโอนั้นจะมีความปลอดภัยเพิ่มขึ้นอีกชั้นหนึ่งจากฝั่งของเรา: ยอดเงินที่เกินกว่าใบเสนอราคาจะไม่ถูกหักหากไม่มีการส่งคำสั่ง confirm_cost

4. คุณสามารถมองเห็นผลงานที่เรนเดอร์ได้จากในแชทโดยตรง ตามเอกสารของ Cursor รูปภาพที่ส่งกลับมาจากเครื่องมือ MCP จะแนบเข้าไปในบทสนทนา และโมเดลที่มีความสามารถในการประมวลผลภาพ (vision-capable models) จะทำการวิเคราะห์รูปภาพเหล่านั้น ฟังก์ชัน get_result ของเราจะแนบภาพตัวอย่างขนาดเล็กในรูปแบบไฟล์ webp ไปพร้อมกับ URL เพื่อให้เอเจนต์ (รวมถึงตัวคุณ) สามารถตรวจสอบภาพเรนเดอร์ได้โดยไม่ต้องสลับหน้าจอไปเปิดเบราว์เซอร์ ซึ่งนี่ช่วยให้เอเจนต์สามารถแก้ไขงานด้วยตัวเองได้ด้วย: ตัวอย่างเช่น คุณสามารถบอกให้เอเจนต์ตรวจสอบภาพและสั่งรันใหม่หากพบว่าเต็นท์ไปตั้งอยู่ตรงจุดที่ควรจะเป็นหัวข้อหลักของหน้าเว็บ

5. แม้จะมีลิงก์สำหรับติดตั้งในคลิกเดียว แต่ห้ามใส่คีย์จริงลงไปในลิงก์เด็ดขาด Cursor รองรับดีปลิงก์ (deeplink) รูปแบบ cursor:// ซึ่งสามารถติดตั้ง MCP server จากรหัสการตั้งค่าที่เข้ารหัสแบบ base64 ตามที่ระบุไว้ใน เอกสารประกอบการใช้งานลิงก์ติดตั้ง ซึ่งมีความสะดวกสบายสำหรับเซิร์ฟเวอร์แบบเปิดทั่วไป แต่อาจเป็นอันตรายอย่างยิ่งสำหรับเซิร์ฟเวอร์ที่ต้องการสิทธิ์การเข้าถึง เพราะรหัสการตั้งค่าที่เข้ารหัสจะนำพาคีย์จริงของคุณไปด้วย และใครก็ตามที่ได้ลิงก์นั้นไปก็จะสามารถใช้เงินในบัญชีของคุณได้ทันที นี่จึงเป็นเหตุผลว่าทำไมปุ่มบนเว็บไซต์ของเราจึงเป็นเพียงโค้ดสำหรับคัดลอกและวางที่มีตัวแปรตัวแทนของสภาพแวดล้อม แทนที่จะเป็นดีปลิงก์แบบกดเพิ่มใน Cursor โดยตรง เพียงแต่วางโค้ด แล้วส่งออกตัวแปรนั้นก็พร้อมใช้งานแล้ว

ขอชี้แจงข้อจำกัดอย่างตรงไปตรงมาประการหนึ่งในด้านของผลิตภัณฑ์: ในปัจจุบันเครื่องมือ MCP generate_image ยังไม่รองรับการส่งภาพอินพุตเข้าไป ดังนั้นระบบการสร้างรูปภาพตามข้อมูลอ้างอิง (reference-based generation) และการสร้างวิดีโอจากภาพนิ่ง (image-to-video) จึงยังจำเป็นต้องใช้บริการผ่าน เครื่องมือสร้างรูปภาพบนเว็บ อยู่ อย่างไรก็ตาม ระบบสร้างรูปภาพจากข้อความ (text-to-image) การแก้ไขปรับแต่งรูปภาพแบบโต้ตอบหลายขั้นตอน (edit_image) และระบบสร้างวิดีโอจากข้อความ (text-to-video) ทั้งหมดนี้สามารถใช้งานผ่าน MCP ได้อย่างสมบูรณ์แบบแล้วในวันนี้

สื่อตัวอย่างในบทความนี้มีค่าใช้จ่ายเท่าไร?

นี่คือราคามาตรฐานต่อการสร้างหนึ่งครั้ง ซึ่งเป็นตัวเลขเดียวกับที่เครื่องมือ list_models รายงานให้เอเจนต์ทราบ โดยไม่มีการลดราคาสิทธิพิเศษสำหรับทีมงานใด ๆ ทั้งสิ้น:

ชิ้นงานสื่อโมเดลราคา
ตัวอย่างภาพ hero สำหรับแลนดิ้งเพจ ผ่าน MCP ด้วยคีย์จริงNano Banana Pro, 1K$0.11
ตัวอย่างภาพจำลองสินค้า ผ่าน MCPNano Banana Pro, 1K$0.11
ภาพหน้าปก + ภาพประกอบแนวบรรณาธิการ 2 ภาพNano Banana Pro, 1K$0.33
ภาพหน้าจอเอกสารประกอบการใช้งานถ่ายจากเบราว์เซอร์ ไม่ใช่ภาพที่สร้างขึ้น$0.00
ยอดรวม$0.55

ในครั้งนี้ภาพทุกภาพถูกสร้างขึ้นอย่างสวยงามตั้งแต่การพยายามครั้งแรก ซึ่งในความเป็นจริงอาจไม่ได้โชคดีแบบนี้เสมอไป ดังนั้นคุณควรเผื่อการสร้างซ้ำ (reroll) ไว้สักครั้งหรือสองครั้งสำหรับภาพถ่ายสินค้า และอย่าลืมซูมดูรายละเอียดอย่างใกล้ชิดก่อนนำไปใช้งานจริง เนื่องจากเรขาคณิตของวัตถุ (object geometry) ยังคงเป็นจุดที่โมเดลแนวสมจริง (photorealistic models) มักจะทำงานผิดพลาดได้ง่ายที่สุด

หากคุณใช้งานเซิร์ฟเวอร์นี้ใน Claude อยู่แล้ว การตั้งค่าใน Cursor ข้างต้นนี้ถือเป็นส่วนเดียวที่คุณต้องดำเนินการเพิ่มเติม โดยสามารถใช้คีย์เดิม ยอดเงินเดิม และมีประวัติการใช้งานเหมือนเดิม หากคุณกำลังเริ่มต้นจากศูนย์ คู่มือการใช้งาน Claude Code ของเรามีการรวบรวมตัวอย่างการใช้งานอีกสี่รูปแบบที่สามารถนำมาประยุกต์ใช้กับ Cursor ได้เกือบทั้งหมด หากคุณพร้อมที่จะทดสอบแล้ว สร้างคีย์ของคุณ และลองขอให้ Cursor สร้างรูปภาพ hero ภาพแรกให้กับคุณได้เลย

คำถามที่พบบ่อย (FAQ)

Cursor รองรับ remote MCP servers ที่มีการระบุส่วนหัว Authorization หรือไม่?

รองรับได้อย่างเป็นธรรมชาติเลยทีเดียว ตั้งแต่ที่ Cursor ได้เพิ่มคุณสมบัติการส่งผ่านข้อมูลรูปแบบ Streamable HTTP ตัว remote server ก็มีโครงสร้างเพียงแค่ url พร้อมออบเจกต์ headers เสริมในไฟล์ mcp.json เท่านั้น โดยไม่จำเป็นต้องใช้กระบวนการสะพานเชื่อมต่อภายในเครื่อง (local bridge process) และฟังก์ชันการแทนที่ข้อมูลแบบ ${env:VAR} จะช่วยเก็บรักษาความลับไม่ให้รั่วไหลเข้าไปในไฟล์ ซึ่งนี่เป็นรูปแบบการตั้งค่าที่คู่มือนี้ใช้งาน และผ่านการตรวจสอบความเข้ากันได้กับเอกสาร Cursor MCP อย่างเป็นทางการเมื่อวันที่ 11 กรกฎาคม 2026 เรียบร้อยแล้ว นอกจากนี้ Cursor ยังรองรับระบบยืนยันตัวตนแบบ OAuth สำหรับ remote servers อีกด้วย โดยในปัจจุบันปลายทาง (endpoint) ของเราได้รับการยืนยันตัวตนด้วย Bearer keys และเรามีแผนที่จะเปิดใช้งาน OAuth 2.1 เป็นทางเลือกที่สองในอนาคต

ฉันจำเป็นต้องใช้ Google API key ในการสร้างรูปภาพใน Cursor หรือไม่?

ไม่จำเป็นเลย หากใช้ MCP server สำหรับสร้างรูปภาพที่รันในเครื่อง (local) ระบบจะเรียกใช้งาน Gemini API โดยตรง ซึ่งจำเป็นต้องใช้คีย์ Google ของคุณเองพร้อมทั้งต้องจัดการโควตาและการหักยอดค่าบริการในบัญชี Google ของคุณ แต่เมื่อเปลี่ยนมาใช้งาน remote server กระบวนการสร้างจะรันอยู่บนกลุ่มคีย์ Vertex AI ที่ได้รับการดูแลจัดการโดย BananaBanana และข้อมูลสิทธิ์การใช้งานเพียงหนึ่งเดียวที่คุณต้องใช้ก็คือคีย์ bb_live_ จากหน้าโปรไฟล์ของคุณ วิธีนี้เป็นการเปลี่ยนจากการเข้าถึง API ดิบของ Google โดยตรง มาเป็นการคิดราคาต่อครั้งของการสร้างโดยไม่มีข้อกำหนดขั้นต่ำในการใช้จ่าย ใช้ยอดเติมเงินก้อนเดียว และสามารถยกเลิกสิทธิ์ของคีย์ได้ในคลิกเดียวเพื่อความปลอดภัย

การตั้งค่า MCP ควรใช้แบบทั่วทั้งระบบ (global) หรือแยกตามโปรเจกต์ (per-project)?

สามารถใช้งานได้ดีทั้งสองรูปแบบ โดยมีจุดแตกต่างกันที่ขอบเขตการทำงานและการทำงานร่วมกัน ไฟล์ ~/.cursor/mcp.json จะติดตามคุณไปในทุกคลังโค้ด ซึ่งเหมาะสำหรับการใช้งานส่วนตัว ส่วนไฟล์ .cursor/mcp.json ในระดับโฟลเดอร์รูทของโปรเจกต์จะติดไปกับตัวคลังโค้ดด้วย ทำให้ทุกคนในทีมได้รับการตั้งค่าใช้งานเซิร์ฟเวอร์โดยอัตโนมัติหลังจากที่ทำการโคลนโปรเจกต์ เพียงคุณระบุอ้างอิงคีย์ไว้ในรูปแบบ ${env:…} ไฟล์นี้ก็จะสามารถคอมมิตได้อย่างปลอดภัย ทางเลือกเริ่มต้นของฉันคือการเลือกตั้งค่าในระดับโปรเจกต์สำหรับงานใด ๆ ก็ตามที่ต้องทำงานร่วมกันในทีม เนื่องจากไฟล์การตั้งค่าที่บันทึกร่วมกับการใช้คีย์แยกรายบุคคลของนักพัฒนาแต่ละคนจะช่วยให้คุณได้รับประวัติการใช้งานจริงและสามารถระงับสิทธิ์ของคีย์แยกเป็นรายบุคคลได้ทันที

Cursor สามารถสร้างวิดีโอผ่านเซิร์ฟเวอร์เดียวกันนี้ได้หรือไม่?

ได้แน่นอน โดยจะมีขั้นตอนการยืนยันค่าใช้จ่ายเพิ่มเติมเข้ามา โดยเครื่องมือ generate_video จะส่งใบเสนอราคากลับมาก่อนเสมอ และเอเจนต์จะต้องทำการยืนยันการทำรายการด้วยคำสั่ง confirm_cost ที่ระบุยอดเงินตรงกันจึงจะเริ่มหักเงินจริง อัตราราคาจะเริ่มต้นที่ $0.10 สำหรับคลิปแบบไม่มีเสียงความยาว 4 วินาที ที่ระดับความละเอียด 720p จากรุ่น Veo 3.1 Lite ไปจนถึง $4.40 สำหรับการเรนเดอร์ระดับสูงสุดจากรุ่น Veo 3.1 แบบมีเสียงประกอบ และสำหรับรุ่น Omni Flash พร้อมเสียงประกอบจะมีราคา $0.10 ต่อวินาที (หรือ $0.30–$1.00 ต่อคลิป) การสร้างคลิปวิดีโออาจใช้เวลาประมาณหนึ่งถึงสิบนาที โดยเอเจนต์จะทำการสืบค้น (poll) ด้วยฟังก์ชัน get_result เป็นระยะ ๆ ในขณะที่ยังสามารถดำเนินงานเขียนโค้ดต่อให้กับคุณไปพร้อม ๆ กันได้

ทำไมเซิร์ฟเวอร์จึงไม่ปรากฏใน Cursor หลังจากที่แก้ไขไฟล์ mcp.json แล้ว?

มีผู้ต้องสงสัยยอดฮิตสามประการเรียงตามโอกาสที่น่าจะเกิดมากที่สุด ประการแรกคือตัวแปรสภาพแวดล้อมไม่ถูกมองเห็นโดยกระบวนการของ Cursor: แอปที่เปิดในลักษณะกราฟิก (GUI) จะไม่ได้อ่านไฟล์โปรไฟล์เชลล์ของคุณ... ดังนั้นโปรดกำหนดค่าตัวแปรในระดับระบบปฏิบัติการหรือเปิด Cursor จากหน้าต่างเทอร์มินัลแทน ประการที่สองคือหน้าการตั้งค่าไม่ถูกโหลดใหม่: ให้ทำการรีสตาร์ท Cursor ใหม่ทั้งหมด หรือคลิกที่ปุ่มรีเฟรชในเมนูการตั้งค่า MCP ประการที่สามคือไวยากรณ์ไฟล์ JSON อาจมีจุดผิดพลาดเล็กน้อย เช่น การใส่เครื่องหมายจุลภาค (comma) เกินที่ด้านท้ายสุด และหากเซิร์ฟเวอร์แสดงขึ้นมาปกติแต่การเรียกใช้งานเครื่องมือล้มเหลวด้วยรหัสข้อผิดพลาด 401 นั่นหมายความว่าคีย์ที่ใส่ไว้ไม่ถูกต้องหรือถูกยกเลิกสิทธิ์การใช้งานไปแล้ว คุณสามารถทดสอบคีย์ดังกล่าวด้วยการลองส่งคำขอแบบปกติโดยใช้โค้ดตัวอย่างในหน้า MCP server ของเรา

tutorialmcpcursor