[{"data":1,"prerenderedAt":372},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-right":8,"doc-\u002Fdocs\u002Fwebmcp":10,"docs-sidebar":334,"doc-surround-\u002Fdocs\u002Fwebmcp":366,"i-lucide:arrow-left":370},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"\u002F>",{"id":11,"title":12,"body":13,"description":325,"extension":326,"group":327,"groupOrder":50,"meta":328,"navTitle":12,"navigation":329,"order":232,"path":330,"seo":331,"stem":332,"__hash__":333},"docs\u002Fdocs\u002Fwebmcp.md","WebMCP exposure",{"type":14,"value":15,"toc":318},"minimark",[16,20,29,37,103,111,115,118,182,193,197,267,287,302,306,314],[17,18,12],"h1",{"id":19},"webmcp-exposure",[21,22,23,24,28],"p",{},"WebMCP is an imperative browser API — ",[25,26,27],"code",{},"navigator.modelContext.registerTool(...)"," — that lets a page offer tools to an AI agent running in or alongside the browser. webmcpui controls can register themselves as tools.",[30,31,33,34],"h2",{"id":32},"opt-in-with-expose","Opt in with ",[25,35,36],{},"expose",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-html shiki shiki-themes github-light github-dark","\u003Cwmcp-input label=\"Email\" name=\"email\" type=\"email\" expose>\u003C\u002Fwmcp-input>\n\u003C!-- registers a \"fill_email\" tool an agent can call -->\n","html","",[25,45,46,96],{"__ignoreMap":43},[47,48,51,55,59,63,66,70,73,75,78,81,83,85,88,91,93],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"sVt8B","\u003C",[47,56,58],{"class":57},"s9eBZ","wmcp-input",[47,60,62],{"class":61},"sScJk"," label",[47,64,65],{"class":53},"=",[47,67,69],{"class":68},"sZZnC","\"Email\"",[47,71,72],{"class":61}," name",[47,74,65],{"class":53},[47,76,77],{"class":68},"\"email\"",[47,79,80],{"class":61}," type",[47,82,65],{"class":53},[47,84,77],{"class":68},[47,86,87],{"class":61}," expose",[47,89,90],{"class":53},">\u003C\u002F",[47,92,58],{"class":57},[47,94,95],{"class":53},">\n",[47,97,99],{"class":49,"line":98},2,[47,100,102],{"class":101},"sJ8bj","\u003C!-- registers a \"fill_email\" tool an agent can call -->\n",[21,104,105,106,110],{},"On connect, the element registers an imperative WebMCP tool; on disconnect, it unregisters. It is ",[107,108,109],"strong",{},"feature-detected"," — a complete no-op when no agent\u002Fhost is present (the common case today), so the control is always a good form control first.",[30,112,114],{"id":113},"the-generated-tool","The generated tool",[21,116,117],{},"For the example above, the registered tool is:",[119,120,121,134],"table",{},[122,123,124],"thead",{},[125,126,127,131],"tr",{},[128,129,130],"th",{},"Field",[128,132,133],{},"Value",[135,136,137,158,170],"tbody",{},[125,138,139,145],{},[140,141,142],"td",{},[25,143,144],{},"name",[140,146,147,150,151,154,155,157],{},[25,148,149],{},"fill_email"," (",[25,152,153],{},"fill_"," + the ",[25,156,144],{}," attribute)",[125,159,160,165],{},[140,161,162],{},[25,163,164],{},"description",[140,166,167],{},[25,168,169],{},"Set the value of the \"Email\" field.",[125,171,172,177],{},[140,173,174],{},[25,175,176],{},"inputSchema",[140,178,179],{},[25,180,181],{},"{ type: 'object', properties: { value: { type: 'string' } }, required: ['value'] }",[21,183,184,185,188,189,192],{},"When the agent calls the tool, the element applies the value exactly as if a user typed it — updating state, running validation, announcing errors, and firing ",[25,186,187],{},"input","\u002F",[25,190,191],{},"change"," events.",[30,194,196],{"id":195},"customizing-the-tool","Customizing the tool",[38,198,200],{"className":40,"code":199,"language":42,"meta":43,"style":43},"\u003Cwmcp-input\n  name=\"email\"\n  label=\"Work email\"\n  expose\n  tool-name=\"set_work_email\"\n  tool-description=\"Set the customer's work email address.\"\n>\u003C\u002Fwmcp-input>\n",[25,201,202,209,219,230,236,247,258],{"__ignoreMap":43},[47,203,204,206],{"class":49,"line":50},[47,205,54],{"class":53},[47,207,208],{"class":57},"wmcp-input\n",[47,210,211,214,216],{"class":49,"line":98},[47,212,213],{"class":61},"  name",[47,215,65],{"class":53},[47,217,218],{"class":68},"\"email\"\n",[47,220,222,225,227],{"class":49,"line":221},3,[47,223,224],{"class":61},"  label",[47,226,65],{"class":53},[47,228,229],{"class":68},"\"Work email\"\n",[47,231,233],{"class":49,"line":232},4,[47,234,235],{"class":61},"  expose\n",[47,237,239,242,244],{"class":49,"line":238},5,[47,240,241],{"class":61},"  tool-name",[47,243,65],{"class":53},[47,245,246],{"class":68},"\"set_work_email\"\n",[47,248,250,253,255],{"class":49,"line":249},6,[47,251,252],{"class":61},"  tool-description",[47,254,65],{"class":53},[47,256,257],{"class":68},"\"Set the customer's work email address.\"\n",[47,259,261,263,265],{"class":49,"line":260},7,[47,262,90],{"class":53},[47,264,58],{"class":57},[47,266,95],{"class":53},[268,269,270,281],"ul",{},[271,272,273,276,277,280],"li",{},[25,274,275],{},"tool-name"," overrides the generated ",[25,278,279],{},"fill_\u003Cname>",".",[271,282,283,286],{},[25,284,285],{},"tool-description"," overrides the generated description.",[21,288,289,290,293,294,297,298,301],{},"Controls with enumerated values (",[25,291,292],{},"\u003Cwmcp-select>",", ",[25,295,296],{},"\u003Cwmcp-radio-group>",") generate an ",[25,299,300],{},"enum","-typed schema so the agent knows the exact allowed values.",[30,303,305],{"id":304},"spec-status","Spec status",[21,307,308,309,280],{},"As of 2026 WebMCP is early — behind a flag in Chrome and undefined for almost everyone, with no mainstream agent consuming it yet. Everything here is additive and feature-detected, so adopting webmcpui costs nothing today and pays off as hosts ship. To exercise exposure now, use the ",[310,311,313],"a",{"href":312},"\u002Fdocs\u002Ftesting","fake agent",[315,316,317],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":43,"searchDepth":98,"depth":98,"links":319},[320,322,323,324],{"id":32,"depth":98,"text":321},"Opt in with expose",{"id":113,"depth":98,"text":114},{"id":195,"depth":98,"text":196},{"id":304,"depth":98,"text":305},"How a form control becomes an imperative WebMCP tool an agent can discover and call.","md","Getting started",{},true,"\u002Fdocs\u002Fwebmcp",{"title":12,"description":325},"docs\u002Fwebmcp","KOPxMb4ZlbcTTu8RTzhKip71NAVof93N69A3Pr-Pscs",[335,340,344,347,350,354,357,360,362,365],{"path":336,"title":337,"navTitle":338,"group":339,"order":232,"groupOrder":98},"\u002Fdocs\u002Felements\u002Fcheckbox","\u003Cwmcp-checkbox>","Checkbox","Elements",{"path":341,"title":342,"navTitle":343,"group":339,"order":50,"groupOrder":98},"\u002Fdocs\u002Felements\u002Finput","\u003Cwmcp-input>","Input",{"path":345,"title":296,"navTitle":346,"group":339,"order":238,"groupOrder":98},"\u002Fdocs\u002Felements\u002Fradio","Radio group",{"path":348,"title":292,"navTitle":349,"group":339,"order":221,"groupOrder":98},"\u002Fdocs\u002Felements\u002Fselect","Select",{"path":351,"title":352,"navTitle":353,"group":339,"order":98,"groupOrder":98},"\u002Fdocs\u002Felements\u002Ftextarea","\u003Cwmcp-textarea>","Textarea",{"path":355,"title":356,"navTitle":356,"group":327,"order":50,"groupOrder":50},"\u002Fdocs","Introduction",{"path":358,"title":359,"navTitle":359,"group":327,"order":98,"groupOrder":50},"\u002Fdocs\u002Finstallation","Installation",{"path":312,"title":361,"navTitle":361,"group":327,"order":238,"groupOrder":50},"Testing",{"path":363,"title":364,"navTitle":364,"group":327,"order":221,"groupOrder":50},"\u002Fdocs\u002Fvalidation","Validation",{"path":330,"title":12,"navTitle":12,"group":327,"order":232,"groupOrder":50},[367,369],{"title":364,"path":363,"stem":368,"navTitle":364,"children":-1},"docs\u002Fvalidation",null,{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":371},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",1781416228942]