VS Code میں امیجز تیار کریں: Copilot MCP سیٹ اپ گائیڈ

VS Code کے لیے ایک MCP سرور ایک بیرونی ٹول باکس ہے جسے GitHub Copilot کا ایجنٹ موڈ چیٹ سے کال کر سکتا ہے: آپ کے ریپو میں صرف ایک JSON فائل، اور Copilot کو وہ ٹولز مل جاتے ہیں جو اس کے ماڈلز کے پاس نہیں ہیں، بشمول امیج جنریشن۔ Copilot سارا دن کمپوننٹس لکھتا ہے اور ٹیسٹ ریفیکٹر کرتا ہے، لیکن اس کے پیچھے کوئی بھی ماڈل امیج فائل تیار نہیں کر سکتا۔ ایک جنریشن سرور شامل کریں اور "اس README کے لیے ایک 16:9 بینر بنائیں" ایک ایسی چیٹ ہدایت بن جاتی ہے جس کا اختتام assets/ میں ایک حقیقی فائل پر ہوتا ہے۔

اگر آپ صرف اسی کے لیے آئے ہیں، تو یہ ہے پورا سیٹ اپ۔ اپنے BananaBanana profile میں ایک API کی بنائیں، پھر اسے ریپو روٹ پر .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 ہنٹ دکھاتا ہے)، پوچھے جانے پر ایک بار اپنی کی پیسٹ کریں، بس کام ہو گیا۔ فائل میں کوئی سیکیورٹیز (secrets) نہیں ہیں، اس لیے اسے کمٹ کرنا محفوظ ہے۔ کوئی مقامی پروسیس نہیں، کوئی Google Cloud اکاؤنٹ نہیں، کوئی سبسکرپشن نہیں: امیجز صرف $0.03 سے پری پیڈ بیلنس سے چارج کی جاتی ہیں، ویڈیوز $0.10 سے۔ نیچے دی گئی دونوں ڈیمو امیجز ایک لائیو کی پر اسی HTTP اینڈ پوائنٹ کے ذریعے تیار کی گئی تھیں جس کی طرف یہ کنفیگ اشارہ کرتا ہے، جب میں یہ ٹیکسٹ لکھ رہا تھا؛ ٹریسز اور $0.55 کا میڈیا بل نیچے دیا گیا ہے۔

GitHub Copilot کو امیجز بنانا کیوں سکھائیں؟

کیونکہ ریپوز کو امیجز کی ضرورت ایسے وقتوں پر ہوتی ہے جو سب سے کم موافق ہوتے ہیں۔ ایک README ہیرو امیج تاکہ پروجیکٹ کا صفحہ شیلڈز (shields) کی دیوار سے شروع نہ ہو۔ ڈاکس سائٹ کے لیے ایک بینر۔ اسکرین شاٹس کو چھوڑ کر، ان میں سے ہر ایک کے لیے ایک لمبا چکر کاٹنا پڑتا تھا: براؤزر ٹیب، پرامپٹ، ڈاؤن لوڈ، نام تبدیل کرنا، ریپو میں ڈریگ کرنا، دوبارہ ایڈیٹر پر واپس آنا۔ اگر کچھ غلط نہ ہو تو ہر اثاثے (asset) کے لیے دس منٹ۔

ایک MCP سرور کے ساتھ، Copilot ایجنٹ موڈ میں اس پورے لوپ کو چلاتا ہے۔ یہ پرامپٹ لکھتا ہے، generate_image کو کال کرتا ہے، فائل کو آپ کے بتائے ہوئے فولڈر میں لاتا ہے، اور مارک ڈاؤن ریفرنس کو ایڈٹ کرتا ہے۔ آپ صرف ایک diff کا جائزہ لیتے ہیں۔

اس سے بھی بڑی وجہ ٹیم کا زاویہ ہے، اور یہی وجہ ہے کہ یہ گائیڈ Cursor unique کے ایک پیراگراف کے بجائے ایک الگ مضمون کے طور پر موجود ہے۔ .vscode/mcp.json ایک ورک اسپیس فائل ہے۔ اسے ایک بار کمٹ کریں اور جو بھی ڈویلپر ریپو کلون کرے گا، اسے پہلی بار کھولنے پر ہی امیج ٹول باکس مل جائے گا، جبکہ VS Code ہر شخص سے اس کی اپنی کی مانگے گا۔ ایک کنفیگ، فی انسان ایک کی، اور git میں زیرو سیکیورٹیز۔

امیج جنریشن کے لیے مقامی MCP سرورز بھی موجود ہیں، اور وہ ٹھیک ہیں اگر آپ کو Node پروسيس چلانے اور اپنی کوٹہ کے ساتھ اپنی Google API کی لانے کا شوق ہو۔ ریموٹ آپشن اس سب کو چھوڑ دیتا ہے: اینڈ پوائنٹ پہلے ہی ہماری طرف چل رہا ہے، اسی پائپ لائن پر جس پر BananaBanana web generator چلتا ہے، اور آپ کا واحد کریڈنشل آپ کے پروفائل سے ایک قابل منسوخی bb_live_ کی ہے۔

VS Code میں mcp.json کیسے سیٹ اپ کریں؟

کنفیگریشن کی تفصیلات کو 11 جولائی 2026 تک کی official VS Code MCP docs کے مطابق چیک کیا گیا ہے۔ تین مرحلے۔

پہلا، register کریں اور Profile ← MCP API Keys کھولیں۔ کی (key) صرف ایک بار دکھائی جاتی ہے اور ہماری طرف ہیش کر کے محفوظ کی جاتی ہے، اس لیے اسے فوراً کاپی کر لیں۔ نئے اکاؤنٹس کے بیلنس میں $0.20 سے شروعات ہوتی ہے؛ یہ سب سے سستے ماڈل پر چھ ٹیسٹ امیجز کے برابر ہے۔

دوسرا، کنفیگ بنائیں۔ دو جگہیں کام کرتی ہیں:

• ریپو میں .vscode/mcp.json، جسے کمٹ کرنا فائدہ مند ہے؛
• ایک صارف کی سطح کا mcp.json (Command Palette ← MCP: Open User Configuration) جو ہر ورک اسپیس میں آپ کے ساتھ رہتا ہے۔

سب سے اوپر دیا گیا اسنیپٹ inputs میکانزم کا استعمال کرتا ہے، اور یہ میرے کنفیگر کردہ تمام MCP کلائنٹس میں سے سیکیورٹیز کو سنبھالنے کا واقعتاً سب سے خوبصورت طریقہ ہے۔ ${input:bb-api-key} VS Code کو بتاتا ہے کہ پہلی بار سرور شروع ہونے پر ویلیو کے لیے پوچھے. "password": true آپ کے ٹائپ کردہ متن کو چھپاتا ہے، اور ویلیو انکرپٹڈ اسٹوریج میں جاتی ہے، فائل میں نہیں۔ اس کا موازنہ Cursor سے کریں، جہاں ${env:…} انٹرپولیلیشن اس بات پر منحصر ہے کہ ایڈیٹر واقعی آپ کے شیل ماحول کو دیکھ پا رہا ہے یا نہیں (GUI سے لانچ ہونے والی ایپس کے لیے ایک کلاسک خاموش ناکامی)۔ VS Code اس مسئلے سے مکمل طور پر بچ نکلتا ہے۔

تیسرا، سرور شروع کریں: Command Palette ← MCP: List Servers ← bananabanana ← Start، یا JSON فائل میں ان لائن ہنٹ پر کلک کریں۔ ایجنٹ موڈ میں Copilot Chat کھولیں، ٹولز پکر چیک کریں، اور آپ کو سات ٹولز نظر آنے چاہئیں، list_models سے لے کر list_generations तक۔ ہمارا MCP server page ہمارے تصدیق شدہ ہر کلائنٹ کے لیے ایک مطابقت کی ٹیبل رکھتا ہے؛ VS Code کی رو (row) وہ ہے جس کی یہ مضمون وضاحت کرتا ہے:

کچھ نظر نہیں آ رہا؟ کوئیرکس (quirks) والا حصہ تین عام وجوہات کا احاطہ کرتا ہے، اور ان میں سے ایک GitHub org کی پالیسی ہے جسے آپ ایڈیٹر کے اندر سے ٹھیک نہیں کر سکتے۔

یوز کیس: README اور ڈاکس کے اثاثے براہ راست ریپو میں

وہ منظر نامہ جس کے گرد میں نے یہ مضمون لکھا ہے: آپ کی ٹیم ایک CLI ٹول اوپن سورس کرتی ہے، اور ریپو کو ایک README ہیرو اور ڈاکس کے کوئیک اسٹارٹ کے لیے ایک امیج کی ضرورت ہے۔ Copilot Chat (ایجنٹ موڈ) میں آپ بینر مانگتے ہیں، ایجنٹ فوٹوگرافی اسٹائل کا پرامپٹ بناتا ہے اور ٹول کو کال کرتا ہے۔ یہ اصل ٹریس ہے، حقیقی جاب آئی ڈی اور سب کچھ کے ساتھ:

→ 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/…"}]}

کال سے فائل تک تقریباً بیس سیکنڈ۔ یہ ہے وہ اصل آؤٹ پٹ، پہلی ہی کوشش میں:

اس جیسی کسی چیز کو بھیجنے سے پہلے ایک ایماندارانہ نوٹ: زوم ان کریں تو اسکرین پر موجود "ٹرمینل آؤٹ پٹ" بظاہر قابل اعتبار نظر آنے والی فضول بات ہے۔ README کی چوڑائی پر کوئی بھی اس پر غور نہیں کرے گا۔ لیکن ایک مکمل چوڑائی والے ڈاکس ہیرو کے طور پر جہاں ٹیکسٹ پڑھا جا سکتا ہے، وہ شاید پہچان لیں۔ تیار کردہ امیجز میں پڑھنے کے قابل UI ٹیکسٹ ابھی بھی ہر فوٹو ریئلسٹک ماڈل کے لیے ایک کمزور نقطہ ہے، اس لیے اسکرینز کو چھوٹا رکھیں یا اس کے بجائے ایک تجریدی (abstract) اسکرین مانگیں۔

ڈاکس کوئیک اسٹارٹ امیج بھی اسی طرح کا اقدام ہے لیکن ایک پرسکون بریف کے ساتھ: اوور ہیڈ فلیٹ لے (flat-lay)، کی بورڈ، اسٹکی نوٹس کے ساتھ ایک پرنٹ شدہ ڈایاگرام، چائے۔ ایک کال، $0.11:

دونوں ڈیمو Nano Banana Pro پر چلائے گئے تھے کیونکہ وہ اس صفحے پر بھیجے گئے ہیں۔ اندرونی ویکی اور ایشو ٹیمپلیٹس کے لیے میں بغیر کسی سوچ کے $0.03 پر nano-banana-2-lite پر چلا جاؤں گا؛ Lite guide نقشہ بناتا ہے جہاں سستا ماڈل کافی حد تک اچھا ہوتا ہے۔ سائن شدہ فائل URLs 24 گھنٹے تک کارآمد رہتے ہیں، اور ایک نیا get_result کال انہیں دوبارہ جاری کرتا ہے۔

ویڈیو بھی اسی چیٹ سے کام کرتی ہے۔ generate_video پہلی کال پر کبھی چارج نہیں کرتا: یہ ایک کوٹیشن (quote) واپس کرتا ہے، اور ایجنٹ کو بالکل درست رقم قبول کرتے ہوئے confirm_cost کے ساتھ کال دہرانی پڑتی ہے۔ ایک خاموش 720p کلپ $0.10 سے شروع ہوتا ہے; آواز کے ساتھ Omni Flash کی قیمت $0.10 فی سیکنڈ ہے، یعنی تین سیکنڈ کے شارٹ کے لیے $0.30۔

VS Code کے وہ مسائل (quirks) جنہیں آپ کو لانچ کرنے سے پہلے جاننا چاہیے

اوپر دیئے گئے سیٹ اپ کی جانچ کے دوران جمع کیے گئے، اسی ترتیب میں جس میں وہ آپ کے سامنے آ سکتے ہیں۔

1۔ ٹاپ لیول کی (key) servers ہے، نہ کہ mcpServers۔ دیگر تمام بڑے کلائنٹس (Claude, Cursor, Windsurf) mcpServers استعمال کرتے ہیں، اس لیے دوسرے ٹول کی دستاویزات سے کاپی کی گئی کنفیگریشنز VS Code میں فیل ہو جاتی ہیں، اور JSON اسکیمہ کے اشاروں کو نظر انداز کرنا آسان ہوتا ہے۔ جب آپ کہیں اور سے VS Code کے اسنیپٹس کاپی کرتے ہیں تو اس کے برعکس یہی جال بچھتا ہے۔ ریموٹ سرورز کے لیے type: "http" فیلڈ کو بھی واضح رکھنا فائدہ مند ہے۔

2۔ محفوظ شدہ ان پٹ ویلیو کو تبدیل کرنا حیرت انگیز طور پر مشکل ہے۔ پہلا پرامپٹ آپ کی کی کو انکرپٹڈ اسٹوریج میں محفوظ کرتا ہے، اور اس کے بعد کوئی واضح "ایڈٹ سیکریٹ" بٹن نہیں ہوتا۔ کام کرنے کا طریقہ کار: .vscode/mcp.json کھولیں، سرور پر ہور کریں، اور کلئیر ان پٹس کے ساتھ دوبارہ شروع کرنے کے لیے ان لائن کنٹرولز کا استعمال کریں، یا MCP: List Servers ← server ← disconnect اور دوبارہ شامل کرنے کے ذریعے محفوظ کردہ ویلیوز کو صاف کریں۔ یہ Remote SSH پر اور بھی مشکل ہے، جہاں دوبارہ پرامپٹ کرنے کے معلوم مسائل VS Code issue tracker کے مطابق موجود ہیں۔ کسی منسوخ شدہ کی کو تبدیل کرنا کلکنگ کا ایک منٹ لے لیتا ہے جس کا آپ نے منصوبہ نہیں بنایا تھا۔

3۔ Copilot Business یا Enterprise پر، MCP تب تک آف رہتا ہے جب تک کہ کوئی ایڈمن پالیسی تبدیل نہ کرے۔ GitHub's policy docs کے مطابق، آرگنائزیشن کی طرف سے جاری کردہ سیٹوں کے لیے "MCP servers in Copilot" پالیسی ڈیفالٹ طور پر غیر فعال ہوتی ہے۔ الجھن پیدا کرنے والا حصہ فیل ہونے کا انداز (failure mode) ہے: سرور ٹھیک کام کرتا ہے، کنفیگ تصدیق شدہ ہو جاتی ہے، لیکن ٹولز چیٹ میں کبھی ظاہر نہیں ہوتے۔ اگر آپ ذاتی Copilot پلان (بشمول فری) پر ہیں، تو اس میں سے کچھ بھی لاگو نہیں ہوتا۔

4۔ فی چیٹ ریکوسٹ 128 ٹولز کی سخت حد ہے۔ agent tools docs کے مطابق، ان بلٹ ٹولز، ایکسٹینشن ٹولز اور ہر فعال MCP سرور سبھی اس حد میں شمار ہوتے ہیں۔ ہمارا سرور سات ٹولز کا اضافہ کرتا ہے، جو بذات خود کچھ نہیں ہے، لیکن چند زیادہ فعال سرورز کو اکٹھا کریں تو ریکوسٹس فیل ہونا شروع ہو جاتی ہیں جب تک کہ آپ ٹولز پکر میں پورے سرورز کو غیر منتخب نہ کر دیں۔ VS Code اوور فلو کو ورچوئل ٹولز کے پیچھے گروپ کر سکتا ہے؛ میرے تجربے میں اب بھی صرف ان سرورز کو فعال رکھنا بہتر ہے جنہیں آپ واقعی استعمال کرتے ہیں۔

5۔ ٹولز ایجنٹ موڈ میں چلتے ہیں، اور ہر کال تصدیق کا تقاضา کرتی ہے۔ MCP ٹولز سادہ پوچھنے کے موڈ (plain ask mode) سے کام نہیں کرتے، لہذا اگر ماڈل امیجز بنانے کے بجائے ان کی وضاحت کرتا رہے، تو پہلے موڈ ڈراپ ڈاؤن کو چیک کریں۔ تصدیقات میں سیشن، ورک اسپیس یا ہمیشہ کے لیے ٹول کی اجازت دینے کا آپشن ہوتا ہے۔ list_models اور get_result جیسے مفت ٹولز کے لیے "always" ٹھیک ہے۔ generate_image کے لیے میں فی کال تصدیق کو آن رکھوں گا، کیونکہ ہر کال حقیقی رقم خرچ کرتی ہے؛ ویڈیو ہماری طرف بہرحال confirm_cost کے ذریعے ڈبل لاک ہے۔

اس مضمون کے ڈیمو میڈیا پر کیا لاگت آئی؟

معیاری فی جنریشن قیمتیں، وہی اعداد و شمار جو list_models ایجنٹ کو رپورٹ کرتا ہے:

اس بار پہلی ہی کوشش میں سب کچھ حاصل ہو گیا۔ ایسا ہمیشہ نہیں ہوگا، اس لیے نظر آنے والی اسکرینز یا آبجیکٹ جیومیٹری والی کسی بھی چیز پر دوبارہ کوشش کرنے کے لیے بجٹ رکھیں، اور مین برانچ میں بھیجنے سے پہلے نتائج کو پورے سائز میں دیکھیں۔

اگر آپ پہلے سے ہی دوسرے ایڈیٹر میں اس سرور کو استعمال کر رہے ہیں، تو اوپر دیا گیا .vscode/mcp.json واحد نیا حصہ ہے: وہی کی، وہی بیلنس، وہی جنریشن ہسٹری۔ صفر سے شروع کرنے والوں کے لیے، Claude Code walkthrough میں چار مزید یوز کیسز ہیں جو تقریباً لفظ بہ لفظ منتقل ہوتے ہیں۔ جب آپ تیار ہوں: create a key اور اپنے پہلے README بینر کے لیے Copilot سے پوچھیں۔

FAQ (اکثر پوچھے گئے سوالات)

کیا VS Code ریموٹ MCP سرورز کو ایک Authorization ہیڈر کے ساتھ سپورٹ کرتا ہے؟

جی ہاں، مقامی طور پر (natively)۔ ایک ریموٹ سرور mcp.json میں type: "http" کے ساتھ url اور ایک اختیاری headers آبجیکٹ ہے، اور ${input:…} ریفرنسز سیکیورٹی (secret) کو فائل سے باہر رکھتے ہیں، جس کی تصدیق 11 جولائی 2026 کو آفیشل VS Code MCP دستاويزات سے کی گئی ہے۔ VS Code ریموٹ سرورز کے لیے OAuth کو بھی سپورٹ کرتا ہے؛ ہمارا اینڈ پوائنٹ فی الحال Bearer کیز کے ساتھ تصدیق کرتا ہے، جبکہ دوسرے آپشن کے طور پر OAuth 2.1 پلان کیا گیا ہے۔

کیا .vscode/mcp.json کو git میں کمٹ کرنا محفوظ ہے؟

جی ہاں، اگر کی فائل کے بجائے inputs ریفرنس میں رہتی ہے۔ کمٹ کی گئی JSON صرف پلیس ہولڈر لے کر جاتی ہے; VS Code پہلی شروعات پر ہر ڈویلپر سے ان کی اپنی ویلیو کا تقاضا کرتا ہے اور اسے انکرپٹڈ اسٹوریج میں رکھتا ہے۔ یہ فی شخص کی تقسیم بہرحال کارآمد ہے: ہر کی کو Profile ← MCP API Keys میں اپنا استعمال کا لاگ اور اختیاری روزانہ کا USD کیپ حاصل ہوتا ہے، اور آف بورڈنگ صرف ایک کلک کی تنسیخ (revoke) ہے جو کسی دوسرے کو متاثر نہیں کرتی۔

MCP ٹولز Copilot Chat میں کیوں ظاہر نہیں ہو رہے؟

زیادہ تر معاملات تین وجوہات کی بنا پر ہوتے ہیں۔ آپ ایجنٹ موڈ میں نہیں ہیں، اور دیگر چیٹ موڈز MCP ٹولز کو ظاہر نہیں کرتے۔ سرور کبھی شروع ہی نہیں ہوا تھا، لہذا MCP: List Servers چلائیں اور اس کا اسٹیٹس چیک کریں۔ یا آپ کی Copilot سیٹ کسی آرگنائزیشن سے ہے اور "MCP servers in Copilot" پالیسی اب بھی غیر فعال ہے، جو خاموشی سے فیل ہو جاتی ہے؛ صرف ایک ارگنائزیشن ایڈمن ہی اسے فعال کر سکتا ہے۔ اگر ٹولز ظاہر ہوتے ہیں لیکن کالز 401 واپس کرتی ہیں، تو کی خود غلط یا منسوخ شدہ ہے، اور MCP server page پر موجود اسنیپٹ سے ایک خام ریکوسٹ سیکنڈوں میں اس کی تصدیق کر دے گی۔

کیا مجھے VS Code میں امیجز تیار کرنے کے لیے Google API کی ضرورت ہے؟

نہیں۔ مقامی طور پر چلنے والے امیج MCP سرورز براہ راست Gemini API سے بات کرتے ہیں، جس کا مطلب ہے کہ آپ کی اپنی Google کی، کوٹہ اور بلنگ۔ ریموٹ سرور BananaBanana کے منظم کردہ Vertex AI کیز کے پول پر جنریشن چلاتا ہے، اور آپ کا واحد کریڈنشل آپ کے پروفائل سے bb_live_ کی ہے: فی جنریشن قیمتیں، کوئی کم سے کم خرچ نہیں، ایک پری پیڈ بیلنس جو ویب ایپ کے ساتھ شیئر کیا جاتا ہے۔

کیا GitHub Copilot اسی سرور کے ذریعے ویڈیو تیار کر سکتا ہے؟

جی ہاں، لاگت کی تصدیق کے مرحلے کے ساتھ۔ generate_video پہلے ایک کوٹیشن واپس کرتا ہے، اور کسی بھی چارج سے پہلے ایجنٹ کو بالکل درست رقم سے مماثل confirm_cost کے ساتھ کال دہرانی ہوگی۔ قیمتیں ایک مختصر خاموش 720p کلپ کے لیے $0.10 سے شروع ہو کر آڈیو کے ساتھ ایک ٹاپ اینڈ Veo 3.1 رینڈر کے لیے $4.40 تک جاتی ہیں، اور اور آواز کے ساتھ Omni Flash کی قیمت $0.10 فی سیکنڈ ($0.30–$1.00 فی کلپ) ہے۔ کلپس میں ایک سے دس منٹ لگتے ہیں، اس لیے جب ایجنٹ آپ کے کوڈ پر کام جاری رکھتا ہے تو وہ get_result کو پول (poll) کرتا ہے۔