অপরিহার্য এপিআই

আলেকজান্দ্রা ক্লেপার
Alexandra Klepper
GitHub Bluesky
ফ্রাঁসোয়া বোফোর্ট
François Beaufort
GitHub

প্রকাশিত: ১৮ মে, ২০২৬, সর্বশেষ হালনাগাদ: ১৮ আগস্ট, ২০২৬

ব্যাখ্যাকারী ওয়েব এক্সটেনশন ক্রোম স্ট্যাটাস উদ্দেশ্য
গিটহাব উৎপত্তির বিচার উৎপত্তির বিচার দেখুন পরীক্ষা করার অভিপ্রায়

আপনি WebMCP Imperative API ব্যবহার করে সাধারণ জাভাস্ক্রিপ্টের সাহায্যে বিভিন্ন ধরণের টুল তৈরি করতে পারেন। আপনার টুলগুলো বিভিন্ন কাজ সম্পাদন করতে পারে, যেমন ফর্ম ইনপুট, সাইট নেভিগেশন এবং স্টেট ম্যানেজমেন্ট।

এই এপিআই ব্যবহার করার আগে, এর উদাহরণগুলো সম্পর্কে পড়ে নিন।

মডেলের প্রেক্ষাপট প্রদান করুন

টুল নিবন্ধন করতে modelContext ইন্টারফেসটি ব্যবহার করুন। টুল নিবন্ধনের জন্য একটি নাম, বিবরণ এবং প্রাসঙ্গিক বৈশিষ্ট্যসহ একটি ইনপুট স্কিমা প্রয়োজন।

মডেল কনটেক্সটে একটিমাত্র টুল যোগ করতে registerTool ব্যবহার করুন।

WebMCPza Maker 

await document.modelContext.registerTool({
  name: 'toggle_layer',
  description: 'Control pizza layers (sauce, cheese). Use "add", "remove", or "toggle".',
  inputSchema: {
    type: 'object',
    properties: {
      layer: { type: 'string', enum: ['sauce-layer', 'cheese-layer'] },
      action: { type: 'string', enum: ['add', 'remove', 'toggle'] },
    },
    required: ['layer'],
  },
  execute: async ({ layer, action }) => {
    await toggleLayer(layer, action);
    return `Performed ${action || 'toggle'} on layer: ${layer}`;
  },
});

অর্ডারের অবস্থা জানুন 

await document.modelContext.registerTool({
  name: 'get_order_status',
  description: 'Search orders in a given timeframe. Returns order number, shipping status and location',
  inputSchema: {
    "type": "object",
    "properties": {
      "timeframe": { "type": "string", "oneOf": [
        { "type": "string", "const": "today", "title": "Today" },
        { "type": "string", "const": "yesterday", "title": "Yesterday" },
        { "type": "string", "const": "last_7_days", "title": "Last 7 Days" },
        { "type": "string", "const": "last_30_days", "title": "Last 30 Days" },
        { "type": "string", "const": "last_6_months", "title": "Last 6 Months" }],
      "enum": [ "today", "yesterday", "last_7_days", "last_30_days", "last_6_months" ],
      "description": "Timeframe for the order lookup." }
    },
    "required": [ "timeframe" ]
  },
  execute: async ({ timeframe }) => {
    // Add your API or database logic here to fetch and return the order data as a string.
  },
});

অনিবন্ধন সরঞ্জাম

ঐচ্ছিক প্যারামিটার হিসেবে AbortSignal পাস করা হলে, আপনি এর মাধ্যমে কোনো টুল অপসারণ করতে পারেন।

const addTodoTool = {
  name: "addTodo",
  description: "Add a new item to the to-do list",
  inputSchema: {
    type: "object",
    properties: { text: { type: "string" } },
  },
  execute: async ({ text }) => {
    // You should handle the persistence logic here (omitted for demo)
    return `Added to-do: ${text}`;
  },
  annotations: {
    readOnlyHint: false,
    untrustedContentHint: true
  },
};
const controller = new AbortController();
await document.modelContext.registerTool(addTodoTool, { signal: controller.signal });

// Unregister the tool later...
controller.abort();

ক্রোম ১৫৩ সংস্করণ থেকে, চলমান কোনো এক্সিকিউশন বাতিল বা ব্যাহত না করেই একটি টুলের নিবন্ধন বাতিল করা যায়। এর ফলে কম্পোনেন্ট ফ্রেমওয়ার্কে টুলের লাইফসাইকেল পরিচালনা করার সময় অপ্রত্যাশিত পার্শ্বপ্রতিক্রিয়া প্রতিরোধ করা যায়।

টুল বাতিলকরণ পরিচালনা করুন

ব্যবহারকারী বা এজেন্টের দ্বারা শুরু করা এক্সিকিউশন বাতিলকরণকে সুষ্ঠুভাবে পরিচালনা করার জন্য execute ফাংশনটি তার দ্বিতীয় আর্গুমেন্ট হিসেবে signal নামের একটি AbortSignal প্যারামিটার গ্রহণ করে। দীর্ঘ সময় ধরে চলা অ্যাসিঙ্ক্রোনাস টাস্ক বা নেটওয়ার্ক অপারেশনে (যেমন fetch() ) এই সিগন্যালটি পাস করলে তা অপ্রয়োজনীয় কাজ প্রতিরোধ করতে, সামগ্রিক রিসোর্স ব্যবস্থাপনা উন্নত করতে এবং সম্ভাব্য মেমোরি লিক এড়াতে সাহায্য করে।

await document.modelContext.registerTool({
  name: 'fetch_tool',
  description: 'Fetch the text content of a URL and stream the response.',
  inputSchema: {
    type: 'object',
    properties: {
      url: { type: 'string', description: 'The URL to fetch' },
      priority: { type: 'string', enum: ['high', 'low', 'auto'] },
    },
    required: ['url'],
  },
  execute: async ({ url, priority }, { signal }) => {
    // Abort the fetch request when tool execution is aborted.
    const response = await fetch(url, { priority, signal });
    const stream = response.body.pipeThrough(new TextDecoderStream());
    for await (const chunk of stream) {
      document.querySelector('pre').textContent += chunk;
    }
    return 'Success';
  },
});

সরঞ্জামগুলি আবিষ্কার করুন

Use document.modelContext.getTools() to retrieve available tools. This asynchronous method returns an alphabetically ordered list of tools that the calling document is authorized to access.

const [tool] = await document.modelContext.getTools();
console.log(tool);

// {
//   annotations: { readOnlyHint: false, untrustedContentHint: true },
//   description: "Add a new item to the to-do list",
//   inputSchema: '{"type":"object","properties":{"text":{"type":"string"}}}',
//   name: "addTodo",
//   origin: "https://example.com",
//   window: Window {window: Window, self: Window, ...},
// }

ডিফল্টরূপে, getTools() শুধুমাত্র কলিং ডকুমেন্ট বা ফ্রেম ট্রিতে থাকা অন্য একই-অরিজিন ডকুমেন্ট দ্বারা নিবন্ধিত একই-অরিজিনের টুলগুলো ফেরত দেয়। ক্রস-অরিজিনের টুলগুলো পুনরুদ্ধার করতে, আপনাকে অবশ্যই fromOrigins অপশনে তাদের অরিজিনগুলো স্পষ্টভাবে তালিকাভুক্ত করতে হবে। এই অ্যারেটি শুধুমাত্র সিকিওর অরিজিন সমর্থন করে।

বিভিন্ন উৎস থেকে প্রাপ্ত নথির সরঞ্জামগুলি শুধুমাত্র তখনই অন্তর্ভুক্ত করা হয়, যদি:

  1. হোস্টিং অরিজিনটি fromOrigins অপশনে তালিকাভুক্ত থাকে।
  2. টুলটি আপনার উৎসের কাছে স্পষ্টভাবে উন্মুক্ত করা হয়েছে। 
// https://example.com

// Get same-origin tools only
const sameOriginTools = await document.modelContext.getTools();

// Get same-origin tools plus tools from specific cross-origin documents
const allTools = await document.modelContext.getTools({
  fromOrigins: ['https://partner.org']
});

একটি আইফ্রেম থেকে কীভাবে টুলস পুনরুদ্ধার করে ওয়েব-ভিত্তিক চ্যাট ইন্টারফেসের মধ্যে চালানো যায়, তার উদাহরণের জন্য WebMCP পেজ এজেন্ট ডেমোটি দেখুন।

টুলটি চালান

getTools() -এ আবিষ্কৃত কোনো টুল ম্যানুয়ালি চালাতে, একটি বৈধ JSON স্ট্রিং ইনপুট আর্গুমেন্ট হিসেবে দিয়ে document.modelContext.executeTool() কল করুন। এই অ্যাসিঙ্ক্রোনাস মেথডটি টুল এক্সিকিউশনের ফলাফল রিটার্ন করে, অথবা কোনো নেভিগেশন ট্রিগার হলে null রিটার্ন করে।

const result = await document.modelContext.executeTool(tool, '{"text": "Buy milk"}');
console.log(result);

// 'Added to-do: Buy milk'

ঐচ্ছিক প্যারামিটার হিসেবে AbortSignal পাস করা হলে, আপনি এর মাধ্যমে কোনো অপেক্ষাধীন টুল এক্সিকিউশন বাতিল করতে পারেন।

const controller = new AbortController();
document.modelContext.executeTool(tool, '{"text": "Buy milk"}', {
  signal: controller.signal,
});

// Cancel tool execution later...
controller.abort();

ইভেন্টগুলি

উপলব্ধ টুলের তালিকা পরিবর্তিত হলে বিজ্ঞপ্তি পাওয়ার জন্য ফ্রেমগুলো document.modelContext এর toolchange ইভেন্টটি শুনতে পারে।

document.modelContext.addEventListener("toolchange", (event) => {
  // Tools have changed.
});

ক্রস-অরিজিন আইফ্রেম

WebMCP এমন ক্রস-অরিজিন আইফ্রেম সমর্থন করে যা পারমিশন পলিসি এবং সুস্পষ্ট অরিজিন গেটিং উভয়ই ব্যবহার করে।

অনুমতি নীতি

ক্রস-অরিজিন আইফ্রেমগুলিতে টুল রেজিস্ট্রেশন ডিফল্টরূপে নিষ্ক্রিয় থাকে। একটি পৃষ্ঠাকে অবশ্যই tools অনুমতি নীতি ব্যবহার করে অ্যাক্সেস অর্পণ করতে হবে। 

<iframe src="https://example.com" allow="tools"></iframe>

উৎপত্তির সংস্পর্শ

ডিফল্টরূপে ক্রস-অরিজিন ডকুমেন্টের জন্য টুলগুলো অনুপলব্ধ থাকে। কোনো টুল দেখা ও চালানোর অনুমতিপ্রাপ্ত নির্দিষ্ট অরিজিনগুলোর তালিকা করতে আপনি registerTool মধ্যে exposedTo অ্যারেটি ব্যবহার করতে পারেন। এই অ্যারেটি শুধুমাত্র সিকিওর অরিজিন সমর্থন করে।

// https://partner.org

await document.modelContext.registerTool({
  name: 'my_shared_tool',
  description: 'Shared across origins',
  // ...
}, {
  exposedTo: ['https://example.com']
});

রিঅ্যাক্ট সমর্থন

usewebmcp প্যাকেজ ব্যবহার করে React- এ WebMCP-এর জন্য পরীক্ষামূলক সমর্থন রয়েছে। যদি আপনার অ্যাপ্লিকেশনটি ইতিমধ্যেই React দিয়ে লেখা হয়ে থাকে, তাহলে আপনি আপনার কম্পোনেন্টের মাউন্ট এবং আনমাউন্ট লাইফসাইকেলের সাথে যুক্ত স্বতন্ত্র হুক ব্যবহার করে টুলগুলো রেজিস্টার করতে পারেন। useWebMCP হুকটি স্কিমা-চালিত টাইপ ইনফারেন্সও প্রদান করে এবং লোকাল এক্সিকিউশন স্টেট প্রকাশ করে।

অ্যাঙ্গুলার সাপোর্ট

অ্যাঙ্গুলারে WebMCP-এর জন্য পরীক্ষামূলক সমর্থন রয়েছে। যদি আপনার অ্যাপ্লিকেশনটি ইতিমধ্যেই অ্যাঙ্গুলার দিয়ে লেখা হয়ে থাকে, তবে আপনি অ্যাপ্লিকেশনটির ডিপেন্ডেন্সি ইনজেকশন লাইফসাইকেলের সাথে যুক্ত টুলগুলো রেজিস্টার করে আপনার সিগন্যাল ফর্মগুলোকে WebMCP টুলে পরিণত করতে পারেন।

অংশগ্রহণ করুন এবং মতামত জানান

WebMCP নিয়ে সক্রিয় আলোচনা চলছে এবং ভবিষ্যতে এটিতে পরিবর্তন আসতে পারে। আপনি যদি এই API-টি ব্যবহার করে কোনো মতামত জানাতে চান, তবে আমরা তা জানতে আগ্রহী।