מודול 5 · 80 דקות · ליבת הקורס

WebMCP דקלרטיבי

הדפדפן הופך <form> לכלי. אין צורך ב־JSON Schema ידני: השדות, required וה־select הופכים לסכמה.

המאפיינים

<form
  toolname="make_reservation"
  tooldescription="Reserve a table at Zeit restaurant in Rehovot."
  toolautosubmit>
  <input name="date" type="date" required
         toolparamdescription="Reservation date in YYYY-MM-DD">
  ...
</form>

• toolname + tooldescription — חובה. בלי אחד מהם הכלי נמחק.
• toolparamdescription — אחרת נלקח ה־label.
• toolautosubmit — הסוכן גם שולח. בלי זה הוא ממלא והאדם לוחץ.

להחזיר תשובה לסוכן

form.addEventListener("submit", (e) => {
  if (!form.checkValidity()) {
    if (e.agentInvoked) e.respondWith(Promise.resolve("Validation failed"));
    return;
  }
  e.preventDefault();
  if (e.agentInvoked) e.respondWith(Promise.resolve("Reserved ZIT-123"));
});

agentInvoked מסמן שהשולח הוא סוכן. respondWith דורש preventDefault.

אירועים ועיצוב

toolactivated / toolcancel על window. CSS: form:tool-form-active.

הפעלה ב־Chrome

1. chrome://flags/#enable-webmcp-testing → Enabled.
2. הפעלה מחדש.
3. HTTPS או localhost.
4. תוסף Model Context Tool Inspector, או קונסול.

ה־API הרשמי: document.modelContext. navigator.modelContext הוא alias ישן.

שיעור 6 — כלים ב־JS