ঘোষণামূলক এপিআই

Alexandra Klepper

François Beaufort

প্রকাশিত: ১৮ মে, ২০২৬

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

অ্যানোটেশন যোগ করে ডিক্লারেটিভ এপিআই ব্যবহার করে সাধারণ এইচটিএমএল ফর্মকে ওয়েবএমসিপি টুলে রূপান্তর করুন। অ্যানোটেশনগুলো <form> এলিমেন্টের মধ্যে টুলের নাম ও উদ্দেশ্য নির্ধারণ করে, এবং ফিল্ডগুলো টুলের প্যারামিটার হিসেবে কাজ করে। ব্রাউজার এই এলিমেন্টগুলোকে একটি কাঠামোগত উপস্থাপনায় অনুবাদ করে, যা এজেন্টরা ইম্পারেটিভ টুলের মতোই ব্যবহার করতে পারে।

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

টুল নিবন্ধন

আপনার ফর্মে নিম্নলিখিত HTML অ্যাট্রিবিউটগুলো যোগ করুন:

• toolname : টুলটির উদ্দেশ্য অনুযায়ী এর সুস্পষ্ট নামকরণ করুন।
• tooldescription : টুলটি কী কাজ করে এবং এর উদ্দেশ্য কী, তা বর্ণনা করুন।

উদাহরণস্বরূপ, নিম্নলিখিত ফর্মটি example.com/get-customer-support -এ পাওয়া যায়:

<form toolname="createSupportRequest" tooldescription="Submits a request for customer support.">
</form>

যখন কোনো এজেন্ট toolname কল করে, তখন ব্রাউজার ফর্মটিকে ফোকাসে নিয়ে আসে এবং এর ফিল্ডগুলো পূরণ করে। ফর্মটি ব্যবহারকারীর কাছে দৃশ্যমান থাকে।

যদি আপনি toolname অথবা tooldescription HTML অ্যাট্রিবিউটগুলোর যেকোনো একটি মুছে ফেলেন, তাহলে টুলটি অনিবন্ধিত হয়ে যাবে।

(ঐচ্ছিক) টুলের প্যারামিটার

নির্ভুলতা বাড়াতে, প্রতিটি ফর্ম এলিমেন্টে নিম্নলিখিত HTML অ্যাট্রিবিউটগুলো যোগ করুন:

• toolparamdescription : JSON স্কিমার মধ্যে থাকা একটি প্রপার্টি ডেসক্রিপশনের সাথে এলিমেন্টগুলোকে ম্যাপ করে। এই অ্যাট্রিবিউটটি ছাড়া, ব্রাউজার সংশ্লিষ্ট <label> এর ভেতরের কন্টেন্ট ব্যবহার করে এবং লেবেলযোগ্য ডিসেন্ড্যান্টগুলোকে এড়িয়ে যায়। যদি কোনো লেবেল না থাকে, তাহলে ব্রাউজার aria-description কে নির্দেশ করে।

নিম্নলিখিত ফর্মটি <select> এলিমেন্টের জন্য ঐচ্ছিক প্যারামিটার ব্যবহার করে।

<form toolname="supportRequestTool"
  tooldescription="Submit a request for support."
  action="/submit">

  <label for="firstName">First Name</label>
  <input type=text name=firstName>

  <label for="lastName">Last Name</label>
  <input type=text name=lastName>

  <select name="select" required 
    toolparamdescription="Determines what team this request is routed to.">
    <option value="Customer happiness team">Return my purchase.</option>
    <option value="Distribution team">Check where my package is.</option>
    <option value="Website support team">Get help on the website.</option>
  </select>

  <button type=submit>Submit</button>
</form>

ব্রাউজার এই ফর্মটিকে একটি টুল হিসেবে ব্যাখ্যা করে, যা নিম্নলিখিত JSON দ্বারা উপস্থাপিত হয়:

[
  {
    "name": "supportRequestTool",
    "description": "Submit a request for support.",
    "inputSchema": {
      "type": "object",
      "properties": {
        "firstName": {
          "type": "string"
        },
        "lastName": {
          "type": "string"
        },
        "select": {
          "type": "string",
          "anyOf": [
            {
              "type": "string",
              "const": "Customer happiness team",
              "title": "Return my purchase."
            },
            {
              "type": "string",
              "const": "Distribution team",
              "title": "Check where my package is."
            },
            {
              "type": "string",
              "const": "Website support team",
              "title": "Get help on the website."
            }
          ],
          "enum": [
            "Customer happiness team",
            "Distribution team",
            "Website support team"
          ],
          "description": "Determines what team this request is routed to."
        }
      },
      "required": [
        "select"
      ]
    }
  }
]

ফর্মটি জমা দিন

ফর্ম জমা দেওয়ার জন্য আপনার দুটি বিকল্প রয়েছে:

• কাজটি সম্পন্ন করতে ব্যবহারকারীকে ম্যানুয়ালি ' জমা দিন' (Submit) বোতামে ক্লিক করতে হবে।
• মডেল যখন এই টুলটি ব্যবহার করবে, তখন সাবমিশন ও নেভিগেশন চালু করার জন্য toolautosubmit যোগ করুন।

SubmitEvent ইন্টারফেসটি agentInvoked একটি বুলিয়ান অ্যাট্রিবিউট চালু করেছে। যখনই কোনো এআই এজেন্ট দ্বারা একটি ফর্ম ট্রিগার করা হয়, তখন এই অ্যাট্রিবিউটটির মান 'true' সেট করা হয়, যাতে এজেন্ট-ভিত্তিক ইন্টারঅ্যাকশনের জন্য আপনার ওয়েব অ্যাপের আচরণ বিশেষভাবে অভিযোজিত করা যায়।

এছাড়াও, SubmitEvent respondWith(Promise<any>) মেথডটি অন্তর্ভুক্ত রয়েছে, যার ফলে আপনি ব্রাউজারে একটি প্রমিজ পাঠাতে পারেন যা ফর্মের ফলাফল দিয়ে রিজলভ করা হয়। প্রাপ্ত মানটি এরপর সিরিয়ালাইজ করে টুলটির আউটপুট হিসেবে মডেলে ফেরত পাঠানো হয়। এই মেথডটি ব্যবহার করার জন্য, আপনাকে প্রথমে ব্রাউজারের সাধারণ ফর্ম সাবমিশন বন্ধ করতে preventDefault() কল করতে হবে।

<form toolautosubmit toolname="search_tool"
  tooldescription="Search the web" action="/search">
  <input type=text name=query>
</form>
<script>
  document.querySelector("form").addEventListener("submit", (e) => {
    e.preventDefault();
    if (!myFormIsValid()) {
      if (e.agentInvoked) { e.respondWith(myFormValidationErrorPromise) };
      return;
    }
    if (e.agentInvoked) { e.respondWith(Promise.resolve("Search is done!")); }
  });
</script>

ব্রাউজার "toolactivated" ইভেন্টের মাধ্যমে সংকেত দেয় যে একটি এআই এজেন্ট কোনো টুল কার্যকর করেছে। ফর্মের ফিল্ডগুলো আগে থেকে পূরণ করা হলে এই ইভেন্টটি উইন্ডোতে একবার সক্রিয় হয়। অন্যদিকে, যদি কোনো ব্যবহারকারী এজেন্টের অপারেশনটি বাতিল করে দেয় বা reset() মেথডটি কল করা হয়, তাহলে একটি "toolcancel" ইভেন্ট ট্রিগার হয়। এই দুটি ইভেন্টই বাতিলযোগ্য নয় এবং শনাক্তকরণের জন্য একটি toolName অ্যাট্রিবিউট প্রদান করে।

window.addEventListener('toolactivated', ({ toolName }) => {
  console.log(`the tool "${toolName}" execution was activated.`);
  // TODO: Update UI or validate form if needed.
});

window.addEventListener('toolcancel', ({ toolName }) => {
  console.log(`the tool "${toolName}" execution was cancelled.`);
  // TODO: Let the user know. Update UI.
});

ফোকাস সূচক পরিবর্তন করুন

ব্যবহারকারী এবং এজেন্টরা পৃষ্ঠার কোথায় আছেন, তা জানানোর জন্য একটি দৃশ্যমান ফোকাস ইন্ডিকেটর অত্যন্ত গুরুত্বপূর্ণ। যখন কোনো এজেন্ট সফলভাবে একটি টুল চালু করে, সংশ্লিষ্ট ফর্মে ফোকাস করে এবং এর ফিল্ডগুলো স্বয়ংক্রিয়ভাবে পূরণ করে, তখন ব্রাউজার ভিজ্যুয়াল ফিডব্যাকের জন্য নির্দিষ্ট CSS সিউডো-ক্লাস ট্রিগার করে:

• টুলের HTML form এলিমেন্টে :tool-form-active প্রয়োগ করা হয়।
• ফর্মের সাবমিট বাটনে যদি বাটন থাকে, তবে সেটিতে :tool-submit-active প্রয়োগ করা হয়।

ফর্ম সাবমিট করা হলে, এজেন্ট অ্যাকশনটি বাতিল করলে, বা ব্যবহারকারী ফর্মটি রিসেট করলে এই ক্লাসগুলো নিষ্ক্রিয় হয়ে যায়। আপনি এই অবস্থাগুলোর জন্য CSS কাস্টমাইজ করতে পারেন অথবা ডিফল্ট ব্রাউজার স্টাইলের উপর নির্ভর করতে পারেন।

/* Chrome default declarative form styles. */
form:tool-form-active {
  outline: light-dark(blue, cyan) dashed 1px;
  outline-offset: -1px;
}

input:tool-submit-active {
  outline: light-dark(red, pink) dashed 1px;
  outline-offset: -1px;
}

ফোকাসের সেরা অনুশীলন এবং স্টাইল সম্পর্কে আরও জানুন।

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

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

• WebMCP-এর ব্যাখ্যাটি পড়ুন , প্রশ্ন করুন এবং আলোচনায় অংশগ্রহণ করুন।
• WebMCP-এর সর্বোত্তম অনুশীলনগুলো পড়ুন।
• Chrome Status- এ Chrome-এর জন্য বাস্তবায়নটি পর্যালোচনা করুন।
• নতুন এপিআইগুলো আগে দেখার সুযোগ পেতে এবং আমাদের মেইলিং লিস্টে অ্যাক্সেস পেতে আর্লি প্রিভিউ প্রোগ্রামে যোগ দিন ।
• ক্রোমের বাস্তবায়ন সম্পর্কে আপনার কোনো মতামত থাকলে, একটি ক্রোমিয়াম বাগ রিপোর্ট করুন।