WebMCP با یه اپ To-Do ساده توضیح داده شد
خلاصهٔ کاملتر
امروز ایجنتهای هوش مصنوعی توی مرورگر برای اضافه کردن یه آیتم به لیست، صفحه رو میخونن، دنبال چیزی شبیه input میگردن، تایپ میکنن و دوباره صفحه رو چک میکنن که کار انجام شده یا نه. WebMCP یه پیشنهاد جدید مرورگره که صفحه خودش به ایجنت میگه چه ابزارهایی داره و ایجنت مستقیم صداشون میزنه. ایدهش از MCP (یعنی Model Context Protocol، روشی استاندارد برای دادن ابزار به مدل) اومده، با این فرق که ابزارها داخل تب کاربر و با همون session لاگینشدهش اجرا میشن، نه روی سرور.
هر ابزار چهار بخش داره: اسم، توضیح به زبان ساده، input schema به شکل JSON Schema و hintهای اختیاری. مدل فقط همینها رو میبینه و کد رو نمیبینه، پس به گفتهٔ نویسنده نوشتن یه ابزار خوب بیشتر یعنی نوشتن یه توضیح خوب. نویسنده روی TodoMVC تست گرفته: بدون WebMCP ایجنت 13 اکشن، 4 اسکرینشات، حدود 1200 توکن و 13.1 ثانیه لازم داشت؛ با WebMCP، 4 اکشن، بدون اسکرینشات، حدود 600 توکن و 9.6 ثانیه. خودش میگه عدد زمان ضعیفترین معیاره و فاصلهٔ توکن تو صفحههای شلوغتر بیشتر هم میشه.
دو راه برای تعریف ابزار هست. راه declarative اینه که با چند attribute یه فرم HTML رو به ابزار تبدیل کنی و مرورگر schema رو از فیلدهای فرم بسازه:
<form class="new-todo-form"
toolname="add_todo"
tooldescription="Add one to-do to the list. To add several, call it once per item."
toolautosubmit>
<input class="new-todo" name="title" placeholder="What needs to be done?" autofocus
toolparamdescription="The text of the to-do, for example: Buy milk" />
</form>تو handler فرم، event.agentInvoked نشون میده ایجنت فرم رو فرستاده و با respondWith() جواب ابزار برمیگرده، مثلاً «Added the to-do with id 4». نویسنده listener رویداد change رو حذف کرده چون وقتی مرورگر فرم رو برای ایجنت پر میکنه، change هم فایر میشه و to-do دو بار اضافه میشه.
راه imperative هم ثبت یه آبجکت با document.modelContext.registerTool() هست. ابزار list_todos تنها ابزاریه که عنوان to-doها رو برمیگردونه و untrustedContentHint داره، یعنی خروجیش متن کاربره و ایجنت باید اون رو داده حساب کنه نه دستور. بقیهٔ ابزارها فقط با id کار میکنن. برای set_filter هم بهجای توضیح طولانی از enum استفاده شده تا مدل نتونه فیلتر مندرآوردی بسازه. نویسنده تأکید میکنه schema فقط راهنماست، پس execute باید ورودی رو چک کنه و موقع خطا یه جملهٔ روشن برگردونه که بگه قدم بعدی چیه.
برای کارهای برگشتناپذیر مثل clear_completed و delete_todo، consequentialHint باعث میشه قبل از اجرا از کاربر تأیید گرفته بشه. متد unregisterTool() وجود نداره؛ موقع ثبت یه AbortSignal میدی و با abort() ابزار حذف میشه و ایجنتها رویداد toolchange میگیرن. نویسنده اینطوری clear_completed رو فقط وقتی ثبت میکنه که حداقل یه to-do تمومشده باشه، چون ابزاری که الان کاری ازش برنمیاد فقط مدل رو گیج میکنه.
به گفتهٔ نویسنده WebMCP برای تست UI نیست، چون صدا زدن ابزار اصلاً به input واقعی دست نمیزنه؛ جای API یا MCP Server رو هم نمیگیره چون فقط وقتی صفحه بازه وجود داره؛ و با Playwright MCP هم فرق داره که کلیک و تایپ عمومی روی هر سایتی انجام میده. WebMCP هنوز اولشه: پیشنویس یه W3C Community Group هست، از Chrome 149 بهصورت origin trial اومده، بقیهٔ مرورگرها پشتیبانی نمیکنن و API از navigator.modelContext به document.modelContext منتقل شده، پس خیلی از آموزشهای قدیمی دیگه درست نیستن.
نکات کلیدی:
- تو تست TodoMVC، WebMCP تعداد اکشنها رو از 13 به 4 و توکنها رو از حدود 1200 به حدود 600 رسوند
- ابزار رو میشه declarative با attributeهای فرم یا imperative با document.modelContext.registerTool() تعریف کرد
- untrustedContentHint برای خروجیهایی که متن کاربر دارن و consequentialHint برای کارهای برگشتناپذیره
- حذف ابزار با AbortSignal انجام میشه چون unregisterTool() وجود نداره
- WebMCP از Chrome 149 بهصورت origin trial در دسترسه و API حالا روی document.modelContext هست




