Supabase Auth اور DigitalOcean کا استعمال کرتے ہوئے اپنا MCP سرور کیسے بنائیں اور ChatGPT ایپ شائع کریں۔

LLM اور AI مقامی ایپس کی ترقی کے ساتھ، ایپ کی ایک نئی قسم ابھر رہی ہے۔ یہ مکمل طور پر مقامی ویب یا موبائل ایپ کے بجائے AI چیٹ (جیسے ChatGPT) کے اندر ہے۔

اس ٹیوٹوریل میں، آپ سیکھتے ہیں کہ شروع سے ماڈل سیاق و سباق پروٹوکول (MCP) سرور کیسے بنایا جائے، جس میں ایک UI بھی شامل ہے جسے تصدیق اور ڈیٹا بیس کے ساتھ ChatGPT ایپ کے طور پر استعمال کیا جا سکتا ہے۔

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

• لیول 1: ایک بنیادی MCP سرور بنائیں جو ٹیکسٹ ڈیٹا واپس کرے۔

• لیول 2: LLM UI میں استعمال ہونے والے MCP سرور کے لیے UI بنائیں۔

• سطح 3: MCP سرور میں توثیق اور ڈیٹا بیس شامل کریں۔

اس مضمون کو مکمل طور پر سمجھنے کے لیے، آپ کو بنیادی معلومات کی ضرورت ہے:

• ویب کی ترقی

• جاوا اسکرپٹ

• React اور React Native

• ایس کیو ایل اور ڈیٹا بیس

ہم کیا احاطہ کریں گے:

MCP سرور کیا ہے؟

ایک ماڈل سیاق و سباق پروٹوکول (MCP) سرور ایک ایسا پروگرام ہے جو معیاری پروٹوکول کے ذریعے AI ایپلی کیشنز کو ٹولز، وسائل اور اشارہ دیتا ہے۔ ایم سی پی سرورز صرف پڑھنے کے لیے سیاق و سباق، کال کے قابل ٹولز، یا دوبارہ قابل استعمال پرامپٹ ٹیمپلیٹس فراہم کر سکتے ہیں تاکہ AI ایپلی کیشنز کیا کر سکتی ہیں اس میں توسیع کرنے میں مدد کریں۔

ڈویلپرز ایک MCP سرور بناتے یا تشکیل دیتے ہیں، اور میزبان ایپلیکیشن کے اندر موجود MCP کلائنٹس اس سے جڑ جاتے ہیں۔ اس کے بعد ایپلیکیشن ماڈل کو دستیاب خصوصیات کو دریافت کرنے کی اجازت دے سکتی ہے اور، جب مناسب ہو، ٹولز کو کال کر سکتی ہے یا MCP پروٹوکول کے ذریعے وسائل حاصل کر سکتی ہے تاکہ کام کو مکمل کرنے میں مدد مل سکے۔

میں MCP سرور کے ساتھ کیا کر سکتا ہوں؟

MCP سرورز AI ایپلی کیشنز کو ماڈل سے باہر معلومات اور سسٹمز کے ساتھ کام کرنے کی اجازت دیتے ہیں۔ مثال کے طور پر، ایک ماڈل آپ کو موجودہ معلومات سے استفسار کرنے، صارف کے ڈیٹا کو ذخیرہ کرنے اور بازیافت کرنے، دستاویزات کی بازیافت، اور دیگر ایپلیکیشنز میں کارروائیوں کو متحرک کرنے میں مدد کر سکتا ہے۔

عملی طور پر، ایک MCP سرور آن لائن ڈیٹا بیس سے جڑ سکتا ہے اور دوسرا MCP سرور مقامی سسٹم پر فائلوں کے ساتھ کام کر سکتا ہے۔ یہ آپ کو AI ورک فلو بنانے کی اجازت دیتا ہے جو زیادہ مفید، عملی اور حقیقی دنیا کے ٹولز سے جڑے ہوئے ہیں۔

لیول 1: اپنا MCP سرور کیسے بنائیں

اس ٹیوٹوریل میں، آپ سیکھیں گے کہ Node.js میں ایک بنیادی HTTP سرور کا استعمال کرتے ہوئے MCP سرور کیسے بنایا جائے، ڈیٹا بیس اور تصدیق کے لیے Supabase، اور سرکاری MCP سرور SDK۔ پھر اسے DigitalOcean میں تعینات کریں اور ایپ کو ChatGPT پر شائع کریں۔

اس کا مطلب ہے کہ یہاں دو قدم اٹھانے ہیں۔

• پہلا مرحلہ: تعینات ایم سی پی سرور کو ایک ایپ/ کنیکٹر کے ساتھ ChatGPT سے جوڑیں تاکہ اسے ChatGPT کے اندر استعمال کیا جا سکے۔

• دوسرا مرحلہ: جائزہ کے لیے اپنی ایپ جمع کروائیں اور اگر منظور ہو جائے تو اسے ChatGPT ایپ ڈائرکٹری میں شائع کریں۔

MCP سرور SDK آپ کا اپنا MCP سرور بنانے کا واحد ٹول یا فریم ورک نہیں ہے۔ اگر آپ چاہیں تو دیگر SDKs اور ٹولز استعمال کر سکتے ہیں۔ تاہم، پہلے مرحلے کو آسان بنانے کے لیے، ہم نے یہاں ایک آسان ٹول استعمال کرنے کا فیصلہ کیا۔

مرحلہ 0: پروجیکٹ تیار کریں۔

چونکہ ہم یہاں پورا پروجیکٹ بنا رہے ہیں، ہمیں پہلے ایک پیکج بنانا ہوگا اور پروجیکٹ کو شروع کرنا ہوگا۔ ایسا کرنے کے لیے، ان اقدامات پر عمل کریں:

• اپنے پروجیکٹ کے نام کے ساتھ ایک نیا فولڈر بنائیں۔ اس مثال میں آپ استعمال کر سکتے ہیں: mcp_todo.

• اس نئے فولڈر میں جائیں۔

• اس فولڈر میں ٹرمینل کھولیں۔

• این پی ایم پروجیکٹ کو استعمال کرتے ہوئے شروع کریں: npm init --init-type=module -y JavaScript پیکیج فائلیں بنائیں اور ES6 سپورٹ کے ساتھ اپنے پروجیکٹ میں پیکجز شامل کریں۔

• اگلا، گٹ شروع کریں۔ git init ورژن کنٹرول کو فعال کرنے اور اپنے پروجیکٹ میں تبدیلیوں کو ٹریک کرنے کے لیے،

• متعلقہ پیکیجز انسٹال کریں جو آپ اپنے پروجیکٹ میں استعمال کریں گے۔

  • پیکیجز ہیں Supabase، MCP SDK (مرحلہ 2 میں شامل کیا جائے گا)، اور LLM ان پٹ اور ڈیٹا کی توثیق کے لیے zod validation پیکیج۔

    npm install @modelcontextprotocol/sdk zod @supabase/supabase-js
    

• بنانا .gitignore فائل شامل کریں node_modules Git کو آپ کو ٹریک کرنے نہ دیں۔

• لکھ کر اپنے پروجیکٹ کی موجودہ حالت کو گٹ ٹریکر میں شامل کریں:

اس کے ساتھ، آپ نے خود ایک نیا پروجیکٹ بنایا ہے جسے آپ اپنے پروجیکٹس کو منظم کرنے اور اس کی پیروی کرنے کے لیے نقطہ آغاز کے طور پر استعمال کر سکتے ہیں۔

مرحلہ 1: Node.js سرور بنائیں

پروجیکٹ کے ساتھ شروع کرنے کے لیے، ہمیں ایک سادہ Node.js سرور بنانا ہوگا۔ یہ اس طرح ایک نئی فائل بنا کر کیا جا سکتا ہے: server.js اور درج ذیل کوڈ لکھیں:

import { createServer } from "node:http";

const port = Number(process.env.PORT ?? 8787);

const httpServer = createServer(async (req, res) => {

    console.log(`${req.method} ${req.url}`);

    if (!req.url) {

        res.writeHead(400).end("Missing URL");

        return;

    }

    const url = new URL(req.url, `http://${req.headers.host ?? "localhost"}`);

    res.writeHead(404).end("Not Found");

});

httpServer.listen(port, () => {
    console.log(`Todo MCP server listening on http://localhost:${port}, press Ctrl+C to stop`);
});

یہ ایک سادہ نوڈ سرور ہے جسے MCP سرور بنانے کے لیے بیس کے طور پر استعمال کرنا ہے۔

ایک MCP سرور بنانے کے لیے، آپ کو MCP سرور SDK کا استعمال کرتے ہوئے اسے ترتیب دینے کی ضرورت ہے۔ اس کے بعد آپ کو دو چیزوں کی وضاحت کرنے کی ضرورت ہے: وہ ٹول جو LLM کو ظاہر کرے گا، اور وہ UI اور وسائل جو LLM اسے رینڈر کرنے کے لیے استعمال کرے گا۔

ٹولز اور UI تصورات کی وضاحت کے لیے MCP سرور SDK استعمال کریں۔

مرحلہ 2: MCP سرور SDK سیٹ اپ کریں۔

MCP سرور کو ترتیب دینے اور شروع کرنے کے لیے، آپ کو ضرورت ہو گی:

• ٹولز: فعالیت جو MCP سرور LLM کو ظاہر کرتا ہے، LLM کو سرور اور بیرونی نظاموں کے ساتھ تعامل کرنے کی اجازت دیتا ہے۔ جیسے کسی API کو کال کرنا، حساب کتاب کرنا، یا ڈیٹا بیس سے استفسار کرنا۔

• وسائل (اختیاری): ڈیٹا جو MCP سرور LLM کے ساتھ شیئر کرتا ہے۔ مثال کے طور پر، LLM Chat UI کے اندر ایمبیڈڈ فریم کے طور پر استعمال کرنے کے لیے ایک فائل، ڈیٹا بیس اسکیما، یا HTML UI۔

آپ کوڈ کی درج ذیل لائن کو سرور ڈاٹ جے ایس فائل کے اوپری حصے میں شامل کر کے سرور شروع کر سکتے ہیں۔

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";

function createTodoServer() {
    const server = new McpServer({ name: "todo-app", version: "0.1.0" });
    return server;
}

پھر درج ذیل فنکشن دستخط کا استعمال کرتے ہوئے ٹولز اور وسائل شامل کریں:

server.registerTool(
    "NAME",
    {},
    async (args, meta) => { }
);

آپ ٹول رجسٹرار کو MCP سرور کے اختتامی نقطہ کے طور پر سوچ سکتے ہیں۔ LLM اسے چیک کرے گا اور نام اور میٹا ڈیٹا کی بنیاد پر اس ٹول میں دلائل اور نتائج کا استعمال کرتے ہوئے ڈیٹا پر کارروائی شروع کرے گا۔

آج ہم تین آسان ٹولز بنائیں گے۔

• سب شامل کریں

• ہر چیز کو اپ ڈیٹ کریں۔

• سب کی فہرست

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

مرحلہ 3: ایم سی پی سرور ٹولز شامل کریں – ٹوڈو بنائیں اور شامل کریں۔

سب سے پہلے، ہمیں کاموں کو شامل کرتے وقت ہیرا پھیری کے لیے میموری میں ایک سادہ صف کی ضرورت ہوتی ہے۔ آپ سرور بنانے کے فنکشن سے باہر صفیں بنا سکتے ہیں اور انہیں سرور پر قابل رسائی بنا سکتے ہیں۔

let todos = [];// outside the createTodoServer function block
let nextId = 1; // outside the createTodoServer function block (this is a mock id for your todos)

صفوں کے بعد ہمیں دو مزید سپورٹ فنکشنز کی ضرورت ہے: پہلا ٹول کے لیے ایک توثیق کنندہ ہے جو LLM سے متوقع ان پٹ قسموں کی وضاحت کرتا ہے۔

آپ کو فائل کے اوپری حصے میں موجود زوڈ لائبریری کو درآمد کرنے کی ضرورت ہے۔

import { z } from "zod";

اس کے بعد آپ اسے درست کرنے کے لیے ایک مددگار فنکشن لکھ سکتے ہیں اور LLM کو بتا سکتے ہیں کہ کیا امید رکھی جائے۔

const addTodoInputSchema = {
    title: z.string().min(1),
}; // outside the createTodoServer function block

اگلا، ہمیں ایک ریٹرن فنکشن کی ضرورت ہے جو دوسرے فنکشنز کے ساتھ مل کر استعمال کیا جا سکے تاکہ ہمارے ٹول کے لیے یونیفائیڈ ریٹرن فنکشن ہو۔

const replyWithTodos = (message) => ({
    content: message ? [{ type: 'text', text: message }] : [],
    structuredContent: { tasks: todos },
}); //outside the createTodoServer function block

اس کے بعد آپ ایڈ ٹو ڈو فنکشن کو سرور کے createTodoServer فنکشن بلاک میں رجسٹر کر سکتے ہیں۔ return server:

server.registerTool(
    'add_todo',
    {
        title: 'Add todo',
        description: 'Creates a todo item with the given title.',
        inputSchema: addTodoInputSchema,
        _meta: {
            'openai/toolInvocation/invoking': 'Adding todo',
            'openai/toolInvocation/invoked': 'Added todo',
        },
    },
    async (args) => {
        const title = args?.title?.trim?.() ?? '';
        if (!title) return replyWithTodos('Missing title.');
        const todo = { id: `todo-${nextId++}`, title, completed: false };
        todos = [...todos, todo];
        return replyWithTodos(`${todo.title}`);
    },
); // inside the createTodoServer function block

مندرجہ بالا کوڈ میں، ہم نے ٹول کے نام اور کاموں کو ایک ان میموری سرنی میں شامل کیا ہے جس کی ہم نے پہلے ہی ایک سادہ طریقہ استعمال کرتے ہوئے شناخت کی تھی۔ یہاں اہم بات یہ ہے کہ ڈیٹا کو درست کرنا اور اسے شامل کرنے سے پہلے متعلقہ اشیاء بنانا۔

میٹا ڈیٹا میں میں نے ایک عنوان، تفصیل، inputSchema اور _meta شامل کیا ہے تاکہ OpenAI کو رینڈر کرتے وقت استعمال کیا جا سکے۔ آپ کو ایک رینڈر ملتا ہے، ٹوڈو شامل کریں جیسا کہ AI انہیں شامل کرتا ہے، اور جب یہ ہو جائے گا، آپ کے پاس شامل کیے گئے ٹوڈو کا تازہ ترین ورژن ہوگا۔

اسی وقت، ہم نے ایک ان پٹ اسکیما شامل کیا ہے تاکہ LLM کو معلوم ہو کہ جب وہ سرور کو کال کرتا ہے تو اسے کیا فراہم کرنا ہے، اور ہم نے ایک رسپانس ہیلپر فنکشن شامل کیا ہے تاکہ اسے کیا کرنا ہے۔ یہ ایک سادہ خصوصیت ہے جو آپ کو دکھاتی ہے کہ ایک منظم طریقے سے کیا کرنا ہے جسے LLM سمجھ سکتا ہے۔

مرحلہ 4: MCP سرور پر ٹوڈو لسٹ درج کریں۔

اپنے کرنے کے کاموں کی فہرست بنانے کے لیے، آپ سادہ فہرست فنکشن کو استعمال کر سکتے ہیں تاکہ بغیر کسی تبدیلی کے اپنے کام کو ظاہر کریں۔ ذیل کا کوڈ وہی نام، میٹا ڈیٹا، اور وضاحت کے سیاق و سباق کے تصورات کا استعمال کرتا ہے جو پہلے فراہم کیے گئے تھے۔ ہم میموری میں todos کو واپس کرنے کے لیے پچھلا مددگار فنکشن بھی استعمال کرتے ہیں۔ آپ کو یہ کوڈ createTodoServer فنکشن بلاک کے اندر لکھنا ہوگا۔

server.registerTool(
  'list_todos',
  {
    title: 'List todos',
    description: 'Lists all todo items.',
    _meta: {
      'openai/toolInvocation/invoking': 'Listing todos',
      'openai/toolInvocation/invoked': 'Listed todos',
    },
  },
  async () => {
    return replyWithTodos();
  },
);

مرحلہ 5: ٹوڈو تکمیل کی فعالیت شامل کریں۔

کسی کام کو مکمل کرنے اور اس میں ترمیم کرنے کے لیے، آپ اس نام کے ساتھ ایک نیا ٹول بنا سکتے ہیں جو ٹو ڈو ID لیتا ہے اور اپ ڈیٹ کردہ کام کو لوٹاتا ہے۔ ایسا کرنے کے لیے، آپ کو createTodoServer سے باہر درخواست کی توثیق کرنے کے لیے ایک مددگار فنکشن شامل کرنا ہوگا۔

const completeTodoInputSchema = {
    id: z.string().min(1),
};

اس کے بعد آپ createTodoServer فنکشن کے اندر درج ذیل کو شامل کر سکتے ہیں۔

server.registerTool(
    'complete_todo',

    {
        title: 'Complete todo',
        description: 'Marks a todo as done by id.',
        inputSchema: completeTodoInputSchema,
        _meta: {
            'openai/toolInvocation/invoking': 'Completing todo',
            'openai/toolInvocation/invoked': 'Completed todo',
        },
    },

    async (args) => {
        const id = args?.id;
        if (!id) return replyWithTodos('Missing todo id.');
        const todo = todos.find((task) => task.id === id);
        if (!todo) {
            return replyWithTodos(`Todo ${id} was not found.`);
        }
        todos = todos.map((task) =>
            task.id === id ? { ...task, completed: true } : task,
        );
        return replyWithTodos(`Completed "${todo.title}".`);
    },
);

یہ ٹول وہی فنکشن ڈیفینیشن استعمال کرتا ہے جیسا کہ ٹو ڈو لسٹ ہے، جبکہ اضافی گارڈز کو شامل کرتے ہوئے اس بات کو یقینی بناتا ہے کہ LLM نے ایک ID واپس کی ہے اور ID درست ہے۔ چونکہ LLM hallucinatory ہو سکتا ہے اور اس کے لیے آدانوں کی توثیق کی ضرورت نہیں ہے، اس لیے پروسیسنگ سے پہلے ڈیٹا کو ہمیشہ دستی طور پر چیک کیا جانا چاہیے۔

اب آپ اپنے کوڈ کو گٹ میں بھیج سکتے ہیں اور اسے درخت میں ٹریک کرسکتے ہیں۔

مرحلہ 6: MCP سرور کو Node.js سرور سے مربوط کریں۔

اب جب کہ ہم نے MCP سرور کی مرکزی فعالیت لکھ دی ہے، ہمیں MCP سرور کو Node.js HTTP سرور سے جوڑنے کی ضرورت ہے۔

ایسا کرنے کے لیے، آپ کو سٹریم ایبل فنکشنز اور متعلقہ کوڈ لکھنے کی ضرورت ہے۔ اس کوڈ میں MCP سرورز کو سنبھالنے کے لیے مزید فعالیت شامل ہے، اس لیے اسے مرحلہ 1 میں سرور کوڈ کے متبادل کے طور پر استعمال کیا گیا ہے۔

سب سے پہلے، StreamableHTTPServerTransport فنکشن درآمد کریں۔

import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";

اس کے بعد آپ مندرجہ ذیل کوڈ کو کاپی کر سکتے ہیں اور اسے سرور کوڈ سے بدل سکتے ہیں جس میں آپ کے پروجیکٹ میں استعمال کرنے کے لیے آپ کے سرور کی ساخت موجود ہے۔

const port = Number(process.env.PORT ?? 8787);
const MCP_PATH = '/mcp';

const httpServer = createServer(async (req, res) => {
    if (!req.url) {
        res.writeHead(400).end('Missing URL');
        return;
    }

    const url = new URL(req.url, `http://${req.headers.host ?? 'localhost'}`);

    // handle the options call for the endpoint
    if (req.method === 'OPTIONS' && url.pathname === MCP_PATH) {
        res.writeHead(204, {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
            'Access-Control-Allow-Headers': 'content-type, mcp-session-id',
            'Access-Control-Expose-Headers': 'Mcp-Session-Id',
        });
        res.end();
        return;
    }

    // handles normal get method for the main link
    if (req.method === 'GET' && url.pathname === '/') {
        res.writeHead(200, { 'content-type': 'text/plain' }).end('Todo MCP server');
        return;
    }
    // here you are handling your MCP calls with streamable HTTP
    const MCP_METHODS = new Set(['POST', 'GET', 'DELETE']);
    if (url.pathname === MCP_PATH && req.method && MCP_METHODS.has(req.method)) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.setHeader('Access-Control-Expose-Headers', 'Mcp-Session-Id');
        const server = createTodoServer();
        const transport = new StreamableHTTPServerTransport({
            sessionIdGenerator: undefined, // stateless mode
            enableJsonResponse: true,
        });
        res.on('close', () => {
            transport.close();
            server.close();
        });
        try {
            await server.connect(transport);
            await transport.handleRequest(req, res);
        } catch (error) {
            console.error('Error handling MCP request:', error);
            if (!res.headersSent) {
                res.writeHead(500).end('Internal server error');
            }
        }
        return;
    }
    res.writeHead(404).end('Not Found');
});

httpServer.listen(port, () => {
    console.log(
        `Todo MCP server listening on http://localhost:${port}${MCP_PATH}`,
    );
});

یہ کوڈ درخواستوں کو سنبھالنے کے لیے ایک بنیادی HTTP سرور چلا رہا ہے۔ سرور /mcp اختتامی نقطہ کو MCP کلائنٹس کے سامنے لاتا ہے اور ہر درخواست کو اسٹیٹ لیس MCP سرور سے مربوط کرنے کے لیے Streamable HTTP کا استعمال کرتا ہے۔

اب آپ اپنے کوڈ کو گٹ میں بھیج سکتے ہیں اور اسے درخت میں ٹریک کرسکتے ہیں۔

اپنے MCP سرور کی جانچ کیسے کریں۔

اب آپ درج ذیل کوڈ کو چلا کر اپنے MCP سرور کی بنیادی ساخت کی جانچ کر سکتے ہیں:

node server.js

یہ کمانڈ پچھلے مرحلے میں بنائے گئے سرور کو چلائے گی۔ یہ اسے چالو کر دے گا اور آپ کو تبدیلیاں سنائی دیں گی۔ http://localhost:8787/mcp. server.js چلانے کے بعد، آپ کو انسپکٹر کو کھولنے کی ضرورت ہے، ایک ایسا ٹول جو آپ کو اپنے MCP سرور کے رجسٹریشن کی تصدیق کرنے میں مدد کرتا ہے اور اس کے استعمال اور محفوظ ماحول میں چلانے کے لیے اس کے آخری پوائنٹس اور ٹولز کی ضرورت ہے۔

npx @modelcontextprotocol/inspector@latest --server-url http://localhost:8787/mcp --transport http

پچھلی کمانڈ کو چلانے سے اس بات کی تصدیق ہو جائے گی کہ آپ MCP سے جڑے ہوئے ہیں اور آپ کو اسے چلانے اور انسپکٹر UI کے ذریعے استعمال کرنے کی ضرورت ہوگی۔ Validator UI آپ کو اپنے MCP سرور کی جانچ کرنے اور بیرونی سروس سے منسلک کیے بغیر مقامی طور پر ان پٹ اور آؤٹ پٹس کی جانچ کرنے میں مدد کرتا ہے۔

کسی ٹول کو جانچنے کے لیے، آپ پہلے سرور سے جڑ سکتے ہیں اور پھر ٹول کو دیکھ اور دریافت کر سکتے ہیں۔

اس کوڈ کو لکھنے کے بعد، آپ سوچ رہے ہوں گے کہ آپ LLM کے ساتھ اپنے صارفین کو کس قسم کا UI دکھا سکتے ہیں۔ اگر آپ ابھی پروجیکٹ چلاتے ہیں، تو آپ کو صرف LLM چیٹ جوابات کے ساتھ ٹیکسٹ نتائج ملیں گے۔ تاہم، UI بنانا آپ کے LLM کے تجربے کو بہتر بنا سکتا ہے۔ ہم اگلے حصے میں اس کا احاطہ کریں گے۔

لیول 2: اپنا UI کیسے بنایا جائے۔

پچھلے کوڈ کا استعمال کرتے ہوئے، میں نے ایک سادہ MCP سرور بنایا جو کاموں کو کرنے کی فہرست میں شامل کرتا ہے اور انہیں ایپ میں مکمل کے طور پر نشان زد کرتا ہے۔ اب آئیے RegisterResource ٹول کو دیکھتے ہیں، جو آپ کے ڈیزائن کے UI وسائل کو رجسٹر کرتا ہے تاکہ ChatGPT انہیں استعمال کر سکے۔

وسائل MCP سرور کے ذریعہ فراہم کردہ LLM سے متعلق ڈیٹا ہیں۔ اگر آپ LLM کے ساتھ اپنے UI کا اشتراک کرتے ہیں، تو آپ اسے اپنی چیٹ میں اضافی ڈیٹا اور ویجٹس ڈسپلے کرنے کے لیے استعمال کر سکتے ہیں۔

UI کو شیئر کرنے کے لیے HTML فائلز کی ضرورت ہوتی ہے جو MCP سرور ڈیٹا پر انحصار کرتی ہیں اور MCP سرور استعمال کرتی ہیں۔ ایسا کرنے کے لیے، ایک نئی HTML فائل بنائیں۔

مرحلہ 1: UI کو ظاہر کرنے کے لیے ایک HTML فائل بنائیں

پہلے فراہم کردہ TodoHTML ایک HTML فائل ہونی چاہیے جو سرور اور ChatGPT UI کے ساتھ بات چیت کر سکے۔ UI کو درج ذیل تصویر کی طرح نظر آنا چاہئے:

جیسا کہ آپ نے پہلے دیکھا تھا جیسا UI بنانے کے لیے، آپ کو بنانے کی ضرورت ہوگی: public/todo-widget.html ایک فائل بنائیں اور سٹرکچرڈ کوڈ اس طرح لکھیں: