![]()
一個腳本標簽,讓網頁上所有表單變成AI可調用的工具——不用手寫JSON Schema。這是auto-webmcp第一版的承諾。過去48小時,他們遭遇了真實網頁的每一種刁難:React表單跟你對著干、游離在form標簽外的輸入框、撒謊的下拉菜單,還有新版WebMCP規范里讓工具好用10倍的新字段。
好消息是,v0.3.0全解決了。
React的"影子狀態":你改了DOM,它裝沒看見
原生表單像敞開的倉庫,直接進去搬東西就行。React表單是個黑箱——你往input.value塞數據,界面變了,React的狀態管理卻毫無知覺。
DOM顯示"foo",React內部記的還是空字符串。表單提交時,數據干干凈凈地消失了。
auto-webmcp的解法很粗暴:繞過React的合成事件系統,直接操作HTMLInputElement的原型方法。先調用原生setter改值,再手動拋出一個冒泡的input事件,騙過React的onChange監聽:
// 內部處理React受控輸入的方式 const nativeSetter = Object.getOwnPropertyDescriptor( HTMLInputElement.prototype, 'value' ).set; nativeSetter.call(input, value); input.dispatchEvent(new Event('input', { bubbles: true }));
老舊的content-editable編輯器用execCommand插入文本?也做了降級兼容。
更隱蔽的坑:AI填完表,React觸發重渲染,字段值可能被重置。現在他們在填充完成后立即捕獲快照,提交時用這個快照構造響應,而不是回頭去查可能已經變了的DOM。
多步React流程里,表單字段是懶加載的。MutationObserver的重新分析加了防抖——新字段出現時自動更新schema,不會重復注冊工具。
ARIA角色:屏幕讀者能讀的,AI也該能讀
網頁上大量輸入框根本不是input元素。富文本編輯器、自定義下拉、日期選擇器——它們靠role="textbox"、role="combobox"、role="spinbutton"告訴屏幕閱讀器"我是輸入框"。
auto-webmcp現在讀同樣的信號。帶ARIA輸入角色的元素會被納入schema,字段名從aria-label或關聯的label元素推斷。
React里常見一種情況:輸入框沒有name屬性,表單狀態存在JS里而非DOM中。現在用id或aria-label作為schema字段的key,AI仍能按名稱引用和填充。
一個具體修復:Ghost的郵件訂閱表單用了input type="email",沒有name也沒有id,只有一個placeholder。以前這種表單被靜默忽略,現在placeholder直接當字段key和標題用。
WebMCP規范:讓工具從"能用"變"好用"
v0.3.0完整支持新版WebMCP規范的幾個關鍵字段。destinations字段讓工具聲明自己能往哪發請求——某些代理會據此決定是否調用。annotations.cost提示工具的執行成本,幫助代理做預算控制。示例字段直接告訴AI"這個參數該填什么格式"。
這些不是裝飾。一個沒填destinations的工具,可能在代理眼里根本不存在;沒給annotations.cost的,可能在復雜工作流里被無限期擱置。
schema生成也有改進。textarea現在正確標記為多行文本,number和range輸入框帶上min/max約束,checkbox和radio的選項從label文本提取而非留空。
錯誤處理更細了。表單驗證失敗時,返回的結構包含具體字段的錯誤信息,代理可以針對性重試而非盲目再填一遍。
性能方面,大型表單的schema生成快了約40%。他們緩存了DOM查詢結果,避免在復雜表單里反復遍歷同一棵樹。
一個被反復請求的功能:現在支持通過data-auto-webmcp="exclude"屬性手動排除特定字段。敏感信息、CSRF令牌、裝飾性輸入——開發者可以精確控制AI能看到什么。
文檔站點同步更新,每個新特性都有可運行的代碼片段。GitHub Releases頁面列出了完整的遷移指南,從v0.2.x升級通常只需改幾行配置。
團隊在社區討論里提到,下一個版本的重點是多頁應用支持——目前auto-webmcp假設所有表單都在當前頁面上,SPA路由切換后的新表單需要重新初始化。他們正在探索與React Router、Vue Router等主流方案的無縫集成。
如果你在用React做后臺系統,表單復雜到讓人頭疼,現在有個問題:你會愿意讓AI代理直接操作這些表單,還是寧可自己封裝API?
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.