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

เซิร์ฟเวอร์ MCP สำหรับ VS Code เปรียบเสมือนกล่องเครื่องมือภายนอกที่โหมด agent ของ GitHub Copilot สามารถเรียกใช้ได้โดยตรงจากหน้าแชท เพียงแค่มีไฟล์ JSON ไฟล์เดียวในรีโพสิทอรีของคุณ Copilot ก็จะสามารถเข้าถึงเครื่องมือต่าง ๆ ที่โมเดลพื้นฐานของมันไม่มี ซึ่งรวมถึงการสร้างรูปภาพด้วย ปกติแล้ว Copilot สามารถช่วยเขียนคอมโพเนนต์หรือปรับปรุงโค้ดทดสอบ (refactor) ได้ตลอดทั้งวัน แต่ไม่มีโมเดลเบื้องหลังตัวใดที่สามารถสร้างไฟล์รูปภาพขึ้นมาจริง ๆ ได้ การเพิ่มเซิร์ฟเวอร์สำหรับสร้างรูปภาพเข้ามาจะทำให้คำสั่งอย่าง "ช่วยทำแบนเนอร์ขนาด 16:9 สำหรับ README นี้หน่อย" กลายเป็นคำสั่งในแชทที่สามารถสร้างไฟล์รูปภาพขึ้นมาให้คุณใช้งานได้จริงในโฟลเดอร์ assets/

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

{
  "inputs": [
    {
      "type": "promptString",
      "id": "bb-api-key",
      "description": "BananaBanana API key (bb_live_...)",
      "password": true
    }
  ],
  "servers": {
    "bananabanana": {
      "type": "http",
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer ${input:bb-api-key}"
      }
    }
  }
}

เริ่มต้นการทำงานของเซิร์ฟเวอร์ (VS Code จะแสดงคำแนะนำ Start ให้คุณกดได้โดยตรงจากในไฟล์) วางคีย์ของคุณหนึ่งครั้งเมื่อระบบแจ้งเตือน เพียงเท่านี้ก็เรียบร้อย เนื่องจากไฟล์นี้ไม่มีข้อมูลที่เป็นความลับใด ๆ จึงสามารถกดคอมมิตเข้าระบบได้อย่างปลอดภัย ไม่ต้องรันโปรเซสในเครื่อง ไม่ต้องมีบัญชี Google Cloud และไม่ต้องสมัครสมาชิกรายเดือน ระบบจะหักค่าใช้จ่ายรูปภาพเริ่มต้นเพียง $0.03 จากยอดเงินเติมล่วงหน้า (prepaid) และวิดีโอเริ่มต้นที่ $0.10 รูปภาพตัวอย่างทั้งสองภาพด้านล่างนี้ถูกสร้างขึ้นด้วยคีย์ที่ใช้งานจริงผ่านเอ็นด์พอยต์ HTTP เดียวกันกับที่ระบุในไฟล์การตั้งค่านี้ ในขณะที่ฉันกำลังเขียนบทความนี้อยู่ โดยรายละเอียดของ trace (บันทึกการทำงาน) และบิลค่าสื่อโฆษณาจำนวน $0.55 จะอยู่ถัดไปด้านล่าง

ทำไมต้องสอนให้ GitHub Copilot สร้างรูปภาพได้?

นั่นเป็นเพราะว่าโปรเจกต์ต่าง ๆ มักจะต้องการรูปภาพในเวลาที่เร่งรีบหรือไม่สะดวกที่สุดเสมอ เช่น รูปภาพส่วนหัว (hero image) ของ README เพื่อไม่ให้หน้าโปรเจกต์เปิดมาเจอแต่ปุ่มไอคอนและข้อมูลดิบจำนวนมาก หรือการทำแบนเนอร์สำหรับเว็บไซต์เอกสาร (docs) หากไม่นับรวมภาพหน้าจอแล้ว ทุกรูปภาพที่ว่ามานี้มักจะต้องผ่านขั้นตอนที่ยุ่งยากเสมอ ตั้งแต่การเปิดแท็บเบราว์เซอร์ใหม่, ใส่คำสั่งพรอมต์, ดาวน์โหลดไฟล์, เปลี่ยนชื่อ, ลากไฟล์เข้ามาใส่ในโปรเจกต์ แล้วจึงค่อยสลับกลับมาที่โปรแกรมแก้ไขโค้ด ซึ่งต้องใช้เวลาอย่างน้อยสิบนาทีต่อหนึ่งภาพหากไม่มีอะไรผิดพลาด

แต่เมื่อมีเซิร์ฟเวอร์ MCP แล้ว Copilot จะช่วยทำงานวนลูปนั้นให้คุณในโหมด agent โดยอัตโนมัติ มันจะเขียนพรอมต์ให้, เรียกใช้งานเครื่องมือ generate_image, ดึงไฟล์รูปภาพเข้ามาใส่ในโฟลเดอร์ที่คุณกำหนดไว้ และแก้ไขการอ้างอิงไฟล์ในเอกสาร markdown ให้ทันที โดยที่คุณมีหน้าที่เพียงแค่ตรวจสอบความเปลี่ยนแปลงของโค้ด (diff) เท่านั้น

เหตุผลที่สำคัญยิ่งกว่าคือเรื่องของการทำงานร่วมกันเป็นทีม และนี่คือเหตุผลที่คู่มือนี้ถูกแยกออกมาเป็นบทความเฉพาะ แทนที่จะเป็นเพียงย่อหน้าสั้น ๆ ใน คู่มือของ Cursor เพราะว่า .vscode/mcp.json เป็นไฟล์ระดับเวิร์กสเปซ การคอมมิตไฟล์นี้เพียงครั้งเดียวจะทำให้นักพัฒนาทุกคนที่โคลนโปรเจกต์นี้ไปสามารถใช้งานกล่องเครื่องมือสร้างรูปภาพได้ทันทีที่เปิดโปรแกรมขึ้นมาเป็นครั้งแรก โดย VS Code จะขอให้แต่ละคนใส่คีย์ของตัวเองแยกกัน ทำให้ทีมใช้ไฟล์การตั้งค่าร่วมกันได้ คีย์แยกกันตามบุคคล และไม่มีข้อมูลความลับใด ๆ หลุดรอดไปในระบบ git

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

วิธีตั้งค่า mcp.json ใน VS Code

รายละเอียดการกำหนดค่าได้รับการตรวจสอบและอ้างอิงตาม เอกสารประกอบการใช้งาน MCP อย่างเป็นทางการของ VS Code ณ วันที่ 11 กรกฎาคม 2026 โดยมีขั้นตอนง่าย ๆ เพียง 3 ขั้นตอนดังนี้

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

ขั้นตอนที่สอง สร้างไฟล์การตั้งค่า ซึ่งคุณสามารถเลือกบันทึกไฟล์ได้ในสองตำแหน่งดังนี้:

• ไฟล์ .vscode/mcp.json ในตัวโครงการ (repo) ซึ่งเป็นแบบที่แนะนำให้คอมมิตเก็บไว้ในระบบ
• ไฟล์ mcp.json ในระดับผู้ใช้ (ไปที่ Command Palette → MCP: Open User Configuration) ซึ่งการตั้งค่านี้จะนำไปใช้ในทุก ๆ พื้นที่ทำงาน (workspace) ที่คุณเปิดใช้งาน

โค้ดตัวอย่างที่อยู่ด้านบนสุดนั้นใช้กลไกของ inputs ซึ่งเป็นระบบจัดการความลับ (secret) ที่ยอดเยี่ยมและเป็นระเบียบเรียบร้อยที่สุดในบรรดาไคลเอนต์ MCP ทั้งหมดที่ฉันเคยตั้งค่ามา โดยคำสั่ง ${input:bb-api-key} จะบอกให้ VS Code แสดงกล่องข้อความให้กรอกข้อมูลในครั้งแรกที่เซิร์ฟเวอร์เริ่มทำงาน ส่วนคำสั่ง "password": true จะซ่อนข้อความที่คุณพิมพ์เอาไว้ และค่านั้นจะถูกบันทึกไว้ในพื้นที่จัดเก็บข้อมูลที่เข้ารหัสภายในเครื่องแทนที่จะถูกบันทึกดิบ ๆ ลงในไฟล์ หากเทียบกับ Cursor ที่ระบบการแทนค่าตัวแปรอย่าง ${env:…} จะขึ้นอยู่กับการที่โปรแกรมแก้ไขโค้ดมองเห็นสภาพแวดล้อมเชลล์ (shell environment) ของคุณจริง ๆ หรือไม่ (ซึ่งมักจะเกิดปัญหาเงียบหรือ silent failure บ่อยครั้งกับแอปที่เปิดผ่านหน้าจอ GUI) ทาง VS Code ได้ช่วยหลีกเลี่ยงปัญหานี้ไปได้อย่างหมดจด

ขั้นตอนที่สาม เริ่มต้นการทำงานของเซิร์ฟเวอร์: ไปที่ Command Palette → MCP: List Servers → เลือก bananabanana → กด Start หรือคลิกปุ่มแนะนำที่ปรากฏขึ้นมาโดยตรงภายในไฟล์ JSON จากนั้นเปิด Copilot Chat ในโหมด agent และตรวจสอบตัวเลือกเครื่องมือ (tools picker) คุณควรจะพบเครื่องมือทั้งหมด 7 รายการ ตั้งแต่ list_models ไปจนถึง list_generations ทั้งนี้ หน้าบริการเซิร์ฟเวอร์ MCP ของเรา มีตารางเปรียบเทียบความเข้ากันได้สำหรับไคลเอนต์ทุกตัวที่เราได้ตรวจสอบและยืนยันแล้ว โดยข้อมูลแถวของ VS Code คือเนื้อหาหลักที่บทความนี้อธิบายอย่างละเอียด:

หากไม่มีอะไรแสดงขึ้นมา? ในส่วนของข้อจำกัดเฉพาะตัว (quirks) ของเราจะครอบคลุมถึง 3 สาเหตุทั่วไปที่พบบ่อย และหนึ่งในนั้นคือนโยบายของ GitHub organization ที่คุณไม่สามารถเข้าไปแก้ไขได้จากภายในโปรแกรมแก้ไขโค้ด

ตัวอย่างการใช้งานจริง: การสร้างรูปภาพ README และเอกสารต่าง ๆ ลงในโปรเจกต์โดยตรง

สถานการณ์จำลองที่ฉันใช้อ้างอิงสำหรับบทความนี้ก็คือ: ทีมของคุณกำลังเผยแพร่เครื่องมือ CLI ตัวหนึ่งเป็นแบบโอเพนซอร์ส และระบบต้องการภาพส่วนหัวขนาดใหญ่สำหรับ README พร้อมทั้งรูปภาพสำหรับใช้ในส่วนการเริ่มต้นใช้งานด่วน (quickstart) ของหน้าเอกสาร ในโปรแกรมแชท Copilot Chat (ในโหมด agent) คุณสามารถพิมพ์ขอให้ช่วยทำแบนเนอร์ให้ได้ทันที จากนั้น agent จะทำการเขียนคำสั่ง พรอมต์สไตล์ถ่ายภาพอย่างมืออาชีพขึ้นมา แล้วเรียกใช้เครื่องมือสร้างรูปภาพให้คุณโดยอัตโนมัติ และนี่คือ trace บันทึกขั้นตอนการทำงานจริง พร้อมทั้งรหัสงานจริงทั้งหมด:

→ generate_image {"prompt": "A wide photorealistic hero banner for a GitHub
   README of an open-source terminal application: a sleek dark laptop on a
   light oak desk showing colorful command-line output, soft morning window
   light from the left, shallow depth of field, 50mm lens, generous clean
   negative space on the right side for a project title, no text, no logos",
   "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmrgq90ou00036k7f86f0y54w", "status": "processing",
   "cost_charged_usd": 0.11, "balance_remaining_usd": 1554.18}
→ get_result {"job_id": "cmrgq90ou00036k7f86f0y54w"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

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

ข้อสังเกตเล็กน้อยอย่างจริงใจก่อนที่คุณจะนำรูปภาพทำนองนี้ไปใช้งานจริง: หากคุณลองซูมภาพเข้าไปดูใกล้ ๆ จะพบว่าข้อความ "เทอร์มินัล" บนหน้าจอนั้นเป็นเพียงตัวอักษรจำลองที่ไม่มีความหมาย (gibberish) แต่ดูเนียนตาเมื่อมองผ่าน ๆ ซึ่งในความกว้างปกติบนหน้า README ทั่วไปจะไม่มีใครสังเกตเห็นอย่างแน่นอน แต่ถ้าหากนำไปใช้เป็นภาพส่วนหัวหน้าเอกสารแบบขยายเต็มจอที่ผู้อ่านสามารถเพ่งอ่านตัวหนังสือได้ พวกเขาอาจจะสังเกตเห็น เนื่องจากความถูกต้องของข้อความบนหน้าจอระบบ (UI text) ในรูปภาพที่สร้างขึ้นนั้น ยังคงเป็นจุดอ่อนของโมเดลภาพแนวสมจริง (photorealistic) ทุกตัวในปัจจุบัน ดังนั้นแนะนำให้กำหนดให้หน้าจอระบบมีขนาดเล็กในภาพรวม หรือเปลี่ยนไปพิมพ์ขอเป็นหน้าจอแบบกึ่งนามธรรม (abstract) แทน

สำหรับรูปภาพในส่วนการเริ่มต้นใช้งานด่วนของเอกสาร ก็ใช้ขั้นตอนวิธีแบบเดียวกันแต่กำหนดองค์ประกอบให้ดูเรียบง่ายและอบอุ่นขึ้น: ถ่ายภาพจากมุมสูง (overhead flat-lay), มีคีย์บอร์ด, กระดาษแผนภาพที่มีกระดาษโน้ตกาว (sticky notes) แปะอยู่ และถ้วยชา เรียกใช้งานหนึ่งครั้ง มีค่าใช้จ่ายเพียง $0.11:

รูปภาพตัวอย่างทั้งสองนี้สร้างขึ้นด้วย Nano Banana Pro เพื่อนำมาแสดงบนหน้าเว็บนี้โดยเฉพาะ แต่หากคุณต้องการใช้สำหรับหน้าวิกิภายในทีม (internal wikis) หรือใช้ทำเทมเพลตสำหรับแจ้งปัญหา (issue templates) ฉันแนะนำให้ลดระดับไปใช้งานโมเดล nano-banana-2-lite ที่ราคาเพียง $0.03 ได้ทันทีโดยไม่ต้องลังเล โดยคุณสามารถศึกษาเพิ่มเติมใน คู่มือโมเดลรุ่น Lite ของเราเพื่อดูว่ามีกรณีการใช้งานใดบ้างที่โมเดลราคาประหยัดสามารถทำงานตอบโจทย์ได้เป็นอย่างดี ทั้งนี้ลิงก์ดาวน์โหลดไฟล์รูปภาพที่มีการลงชื่อกำกับ (signed URL) จะใช้งานได้เป็นเวลา 24 ชั่วโมง และหากต้องการขอลิงก์ใหม่ก็เพียงแค่ให้ agent เรียกฟังก์ชัน get_result อีกครั้งหนึ่ง

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

ข้อจำกัดจุกจิกของ VS Code ที่ควรทราบก่อนเริ่มใช้งานจริง

ข้อมูลเหล่านี้ถูกรวบรวมขึ้นในระหว่างที่ฉันทำการทดสอบการตั้งค่าตามขั้นตอนข้างต้น โดยเรียงลำดับตามความน่าจะเป็นที่คุณอาจจะพบเจอระหว่างการใช้งาน:

1. คีย์ระดับบนสุดคือชื่อ servers ไม่ใช่ mcpServers ไคลเอนต์หลักยอดนิยมอื่น ๆ ทั้งหมด (เช่น Claude, Cursor, Windsurf) จะใช้งานคำว่า mcpServers เป็นหลัก ดังนั้นโค้ดการตั้งค่าใด ๆ ที่คัดลอกมาจากคู่มือของเครื่องมืออื่น ๆ จะใช้งานไม่ได้ใน VS Code และคำแนะนำโครงสร้างข้อมูล (JSON schema) ในระบบก็มักจะถูกมองข้ามได้ง่าย เช่นเดียวกันในทางกลับกันเมื่อคุณคัดลอกส่วนของโค้ดการตั้งค่าจาก VS Code ไปใช้กับเครื่องมืออื่น นอกจากนี้สำหรับเซิร์ฟเวอร์ระยะไกล แนะนำให้กำหนดค่าช่อง type: "http" เอาไว้อย่างชัดเจนเสมอ

2. การแก้ไขค่าอินพุตที่จัดเก็บไปแล้วนั้นทำได้ยากอย่างน่าประหลาดใจ ในการกรอกข้อมูลครั้งแรกระบบจะนำคีย์ของคุณไปเก็บไว้ในพื้นที่เก็บข้อมูลที่เข้ารหัสปลอดภัย ซึ่งต่อจากนั้นจะไม่มีปุ่มประเภท "แก้ไขข้อมูลความลับ" ปรากฏขึ้นมาให้เห็นชัดเจน วิธีการแก้ไขที่ได้ผลจริงคือ: เปิดไฟล์ .vscode/mcp.json นำเมาส์ไปชี้เหนือชื่อเซิร์ฟเวอร์ และคลิกใช้งานการควบคุมบนหน้าจอ (inline controls) เพื่อสั่งเริ่มการทำงานใหม่พร้อมล้างค่าอินพุตเดิมออก หรือสั่งล้างข้อมูลคีย์ผ่านเมนู MCP: List Servers → เลือกเซิร์ฟเวอร์ → กด disconnect แล้วจึงแอดเข้ามาใหม่อีกครั้ง ปัญหานี้จะยิ่งยุ่งยากขึ้นไปอีกหากคุณใช้งานผ่านระบบ Remote SSH เนื่องจากระบบแจ้งเตือนให้กรอกข้อมูลซ้ำยังมีข้อบกพร่องตามที่ระบุไว้ใน ระบบรายงานปัญหาของ VS Code การล้างคีย์ที่หมดอายุเพื่อเปลี่ยนคีย์ใหม่อาจทำให้คุณต้องเสียเวลาคลิกไปมามากกว่าที่คิด

3. สำหรับผู้ใช้งานบัญชีประเภท Copilot Business หรือ Enterprise ระบบ MCP จะถูกปิดไว้จนกว่าผู้ดูแลระบบจะกดยอมรับนโยบาย นโยบาย "MCP servers in Copilot" จะถูกปิดใช้งานเป็นค่าเริ่มต้นสำหรับบัญชีที่ออกให้โดยองค์กร อ้างอิงตาม เอกสารนโยบายความปลอดภัยของ GitHub ส่วนที่น่าสับสนที่สุดก็คืออาการเมื่อใช้งานไม่ได้: ตัวเซิร์ฟเวอร์จะแสดงสถานะเริ่มต้นใช้งานได้ปกติ ไฟล์การตั้งค่าผ่านการตรวจสอบ แต่เครื่องมือสร้างรูปภาพกลับไม่ยอมปรากฏขึ้นมาในหน้าแชทเลย อย่างไรก็ดี หากคุณใช้งานผ่านแพ็กเกจ Copilot ส่วนตัว (รวมถึงเวอร์ชันใช้งานฟรี Free) ข้อจำกัดข้อนี้จะไม่ส่งผลกระทบใด ๆ กับคุณ

4. มีการจำกัดจำนวนเครื่องมือสูงสุดไว้ที่ 128 รายการต่อหนึ่งคำขอในแชท เครื่องมือพื้นฐานในโปรแกรม, เครื่องมือจากส่วนขยายอื่น ๆ และเซิร์ฟเวอร์ MCP ทุกตัวที่เปิดใช้งาน จะถูกนำไปนับรวมในจำนวนจำกัดนี้ทั้งหมด อ้างอิงตาม เอกสารเครื่องมือของ agent ซึ่งเซิร์ฟเวอร์ของเราจะเพิ่มเครื่องมือเข้ามา 7 รายการ แม้ว่ามันจะดูไม่เยอะนัก แต่หากคุณเปิดใช้งานเซิร์ฟเวอร์ตัวอื่น ๆ พร้อมกันหลายตัว คำสั่งแชทของคุณจะเริ่มทำงานล้มเหลว จนกว่าคุณจะเข้าไปกดยกเลิกการใช้งานเซิร์ฟเวอร์บางตัวในหน้าเลือกเครื่องมือ แม้ว่า VS Code จะสามารถจับกลุ่มเครื่องมือส่วนเกินไปซ่อนไว้หลังเครื่องมือเสมือน (virtual tools) ได้ แต่จากประสบการณ์จริงของฉัน แนะนำให้เปิดใช้งานเฉพาะเซิร์ฟเวอร์ที่คุณจำเป็นต้องใช้งานในขณะนั้นจะดีที่สุด

5. เครื่องมือจะทำงานในโหมด agent เท่านั้น และทุกการเรียกใช้งานจะขอคำยืนยันเสมอ เครื่องมือระบบ MCP จะไม่เริ่มทำงานในโหมดคำถามทั่วไป (plain ask mode) ดังนั้นหากโมเดลปัญญาประดิษฐ์พยายามพิมพ์อธิบายภาพให้คุณฟังแทนที่จะกดสร้างรูปภาพ ให้คุณสลับตัวเลือกโหมดในแชทให้ถูกต้องก่อนเป็นอันดับแรก สำหรับการกดยืนยันตัวเลือก คุณสามารถเลือกตั้งค่าได้ว่ายอมรับเฉพาะเซสชันนี้, เฉพาะโครงการนี้ หรือกดยอมรับตลอดไป (always) ซึ่งสำหรับเครื่องมือใช้งานฟรีอย่าง list_models และ get_result การตั้งค่าเป็น "always" นั้นเหมาะสมและช่วยอำนวยความสะดวกได้ดี แต่สำหรับคำสั่ง generate_image ฉันแนะนำให้เปิดระบบขอคำยืนยันทุกครั้งแยกตามคำขอเอาไว้จะดีกว่า เนื่องจากทุกคำสั่งสร้างรูปภาพมีการหักยอดเงินจริง ส่วนฟังก์ชันสร้างวิดีโอนั้นจะถูกล็อกสองชั้นด้วยคำสั่ง confirm_cost ของฝั่งเซิร์ฟเวอร์เราอยู่แล้วในทุกกรณี

ค่าใช้จ่ายในการสร้างสื่อโฆษณาประกอบบทความนี้เป็นเงินเท่าไหร่?

นี่คือข้อมูลราคามาตรฐานต่อการสร้างภาพหนึ่งครั้ง ซึ่งเป็นตัวเลขชุดเดียวกันกับที่คำสั่ง list_models รายงานให้ทาง agent ทราบ:

สำหรับครั้งนี้ สื่อประกอบบทความทั้งหมดสามารถสร้างเสร็จสิ้นได้สำเร็จตั้งแต่การทดลองครั้งแรกทันที แต่อย่างไรก็ตาม ผลลัพธ์อาจไม่ได้สวยงามในครั้งแรกเสมอไป ดังนั้นโปรดเตรียมงบประมาณสำรองสำหรับการสั่งรันใหม่ (reroll) สำหรับภาพแนวที่มีหน้าจอระบบแสดงอยู่หรือภาพที่มีองค์ประกอบทางเรขาคณิตที่ซับซ้อน และควรตรวจสอบรูปภาพที่ขนาดจริงแบบเต็มจอเสมอก่อนที่จะสั่งรวมไฟล์เข้ากับกิ่งพัฒนาหลัก (main branch) ของโครงการ

หากคุณใช้งานเซิร์ฟเวอร์นี้ในโปรแกรมแก้ไขโค้ดตัวอื่น ๆ อยู่ก่อนแล้ว ข้อมูลส่วนแบ่งย่อยในไฟล์ .vscode/mcp.json ด้านบนนี้คือส่วนเดียวที่ถูกเพิ่มเข้ามาใหม่ โดยสามารถใช้งานร่วมกับคีย์ชุดเดิม, ยอดเงินคงเหลือเดิม และประวัติการสร้างภาพชุดเดิมได้ทันที ส่วนสำหรับผู้ที่เริ่มต้นจากศูนย์ คู่มือการใช้งานร่วมกับ Claude Code ของเรามีตัวอย่างการใช้งานเพิ่มเติมอีกสี่ตัวอย่างที่คุณสามารถนำไปปรับใช้ได้แบบคำต่อคำ หากคุณพร้อมแล้ว: สามารถกด สร้างคีย์ใหม่ได้ที่นี่ และเริ่มแชทสั่งให้ Copilot ช่วยทำแบนเนอร์ README ภาพแรกให้คุณได้ทันที

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

VS Code รองรับการเชื่อมต่อเซิร์ฟเวอร์ MCP ระยะไกลที่มีการแนบส่วนหัว (header) สำหรับ Authorization หรือไม่?

รองรับโดยตรงทันที (natively) โดยเซิร์ฟเวอร์ระยะไกลจะถูกระบุเป็นประเภท type: "http" ร่วมกับคีย์ระบุ url และออบเจกต์ตัวเลือกเพิ่มเติมอย่าง headers ภายในไฟล์ mcp.json และการใช้งานตัวแปรอ้างอิงอย่าง ${input:…} จะช่วยป้องกันคีย์ความลับไม่ให้ถูกบันทึกลงไปในตัวไฟล์การตั้งค่าดิบ ๆ โดยรายละเอียดข้อมูลนี้ได้รับการยืนยันความถูกต้องอ้างอิงตามคู่มือระบบ VS Code MCP อย่างเป็นทางการ ณ วันที่ 11 กรกฎาคม 2026 นอกจากนี้ VS Code ยังรองรับมาตรฐานความปลอดภัย OAuth สำหรับเซิร์ฟเวอร์ระยะไกลด้วย โดยเอ็นด์พอยต์ฝั่งเราในปัจจุบันจะเข้าใช้ระบบยืนยันตัวตนผ่าน Bearer key และมีแผนจะเพิ่ม OAuth 2.1 เข้ามาเป็นตัวเลือกเสริมถัดไปในอนาคต

เป็นการปลอดภัยหรือไม่ที่จะคอมมิตไฟล์ .vscode/mcp.json ลงใน git?

ปลอดภัยแน่นอน ตราบใดที่ข้อมูลคีย์เข้าใช้งานของคุณถูกกำหนดให้อยู่ในรูปแบบอ้างอิงผ่าน inputs แทนที่จะถูกพิมพ์ลงไปดิบ ๆ ในตัวไฟล์โดยตรง เนื่องจากโค้ดไฟล์ JSON ที่ถูกคอมมิตขึ้นระบบจะมีเพียงแค่รหัสตำแหน่งจำลอง (placeholder) เท่านั้น และ VS Code จะขอให้นักพัฒนาแต่ละคนกรอกข้อมูลคีย์ของตัวเองแยกกันเมื่อเปิดโปรแกรมเป็นครั้งแรก พร้อมจัดเก็บข้อมูลนั้นไว้ในพื้นที่จัดเก็บที่เข้ารหัสภายในเครื่องอย่างปลอดภัย ซึ่งการแยกใช้งานคีย์ของใครของมันนี้ยังมีข้อดีอย่างมากในการจัดการ: คีย์ของนักพัฒนาแต่ละคนจะถูกแยกบันทึกข้อมูลการใช้งาน (usage logs) ของตนเองและสามารถกำหนดขีดจำกัดงบประมาณรายวันแยกตามมูลค่าดอลลาร์ USD ได้ในส่วนของ Profile → MCP API Keys และหากมีนักพัฒนาลาออกจากโครงการไป ผู้ดูแลระบบก็สามารถกดสั่งยกเลิกสิทธิ์ใช้งานคีย์นั้นได้ในคลิกเดียวโดยไม่ส่งผลกระทบต่อนักพัฒนาคนอื่น ๆ ในทีมเลย

ทำไมเครื่องมือระบบ MCP ถึงไม่ปรากฏขึ้นในหน้าแชท Copilot Chat?

ส่วนใหญ่แล้วมักจะมี 3 สาเหตุหลักด้วยกัน สาเหตุแรกคือคุณอาจจะไม่ได้สลับช่องแชทให้อยู่ในโหมด agent เนื่องจากโหมดแชทแบบอื่น ๆ จะไม่สามารถเรียกใช้เครื่องมือภายนอกของ MCP ได้ สาเหตุที่สองคือตัวเซิร์ฟเวอร์อาจจะยังไม่ได้เปิดใช้งาน แนะนำให้ลองรันคำสั่ง MCP: List Servers เพื่อตรวจสอบสถานะการรัน หรือสาเหตุสุดท้ายคือบัญชี Copilot ของคุณอาจจะเป็นบัญชีที่ออกให้โดยองค์กร และนโยบาย "MCP servers in Copilot" ยังไม่ได้เปิดใช้งาน (ซึ่งอาการข้อผิดพลาดนี้มักจะเกิดเงียบโดยไม่มีหน้าต่างแจ้งเตือน) โดยผู้ดูแลระบบขององค์กรเท่านั้นที่จะสามารถตั้งค่าเปิดใช้งานส่วนนี้ได้ แต่หากมีชื่อเครื่องมือขึ้นมาปกติแต่การเรียกใช้งานส่งข้อความเตือน 401 กลับมา แสดงว่าข้อมูลคีย์ระบุตัวตนของคุณอาจจะพิมพ์ผิดหรือหมดสิทธิ์การใช้งานแล้ว ซึ่งคุณสามารถเข้าไปสุ่มทดสอบรันโค้ดสั้น ๆ จากหน้าเอกสาร บริการเซิร์ฟเวอร์ MCP ของเราเพื่อช่วยยืนยันความถูกต้องของคีย์ได้ภายในไม่กี่วินาที

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

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

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

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