[{"data":1,"prerenderedAt":655},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-right":8,"doc-\u002Fdocs\u002Fexamples":10,"docs-sidebar":532,"i-lucide:file-text":651,"i-lucide:arrow-left":653},{"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":524,"extension":525,"group":12,"groupOrder":164,"meta":526,"navTitle":527,"navigation":125,"order":100,"path":528,"seo":529,"stem":530,"__hash__":531},"docs\u002Fdocs\u002Fexamples\u002Findex.md","Examples",{"type":14,"value":15,"toc":520},"minimark",[16,20,29,41,46,49,87,394,397,401,513,516],[17,18,12],"h1",{"id":19},"examples",[21,22,23,24,28],"p",{},"The element pages show one control exposing one tool. These examples show why that matters: ",[25,26,27],"strong",{},"whole workflows"," — paste a recipe and the cart fills itself, paste an email and the CRM form fills itself — driven through the same tools a real WebMCP agent would call.",[21,30,31,32,36,37,40],{},"Every demo runs a simulated agent (",[33,34,35],"code",{},"installFakeAgent()"," from ",[33,38,39],{},"@webmcpui\u002Fcore\u002Ftesting",") with a small deterministic parser standing in for the model's language understanding. The tools are the real thing: exactly what a WebMCP host sees on the page.",[42,43,45],"h2",{"id":44},"two-kinds-of-tools","Two kinds of tools",[21,47,48],{},"The examples deliberately mix both ways of exposing capability:",[50,51,52,74],"ul",{},[53,54,55,58,59,62,63,66,67,62,70,73],"li",{},[25,56,57],{},"Element tools"," — a ",[33,60,61],{},"\u003Cwmcp-input expose>"," registers ",[33,64,65],{},"fill_\u003Cname>",", a ",[33,68,69],{},"\u003Cwmcp-tabs expose>",[33,71,72],{},"switch_\u003Cname>",", and so on. One control, one tool, zero extra code.",[53,75,76,79,80,36,83,86],{},[25,77,78],{},"Page tools"," — dynamic collections like a cart or a task list aren't a single control, so the page registers its own tools with ",[33,81,82],{},"exposeTool()",[33,84,85],{},"@webmcpui\u002Fcore",":",[88,89,94],"pre",{"className":90,"code":91,"language":92,"meta":93,"style":93},"language-ts shiki shiki-themes github-light-default ayu-dark","import { exposeTool } from '@webmcpui\u002Fcore';\n\nconst dispose = exposeTool({\n  name: 'add_to_cart',\n  description: 'Add an item to the grocery cart.',\n  inputSchema: {\n    type: 'object',\n    properties: { item: { type: 'string' }, quantity: { type: 'string' } },\n    required: ['item'],\n  },\n  execute: ({ item, quantity }) => {\n    cart.push({ item, quantity });\n    return { content: [{ type: 'text', text: `Added ${quantity} ${item}.` }] };\n  },\n});\n","ts","",[33,95,96,120,127,148,162,175,186,199,242,261,269,302,325,379,386],{"__ignoreMap":93},[97,98,101,105,109,112,116],"span",{"class":99,"line":100},"line",1,[97,102,104],{"class":103},"s7jPt","import",[97,106,108],{"class":107},"sBz_o"," { exposeTool } ",[97,110,111],{"class":103},"from",[97,113,115],{"class":114},"sxLuP"," '@webmcpui\u002Fcore'",[97,117,119],{"class":118},"siQKT",";\n",[97,121,123],{"class":99,"line":122},2,[97,124,126],{"emptyLinePlaceholder":125},true,"\n",[97,128,130,133,137,141,145],{"class":99,"line":129},3,[97,131,132],{"class":103},"const",[97,134,136],{"class":135},"sgp7R"," dispose",[97,138,140],{"class":139},"snFdW"," =",[97,142,144],{"class":143},"s2DMw"," exposeTool",[97,146,147],{"class":107},"({\n",[97,149,151,154,156,159],{"class":99,"line":150},4,[97,152,153],{"class":107},"  name",[97,155,86],{"class":118},[97,157,158],{"class":114}," 'add_to_cart'",[97,160,161],{"class":118},",\n",[97,163,165,168,170,173],{"class":99,"line":164},5,[97,166,167],{"class":107},"  description",[97,169,86],{"class":118},[97,171,172],{"class":114}," 'Add an item to the grocery cart.'",[97,174,161],{"class":118},[97,176,178,181,183],{"class":99,"line":177},6,[97,179,180],{"class":107},"  inputSchema",[97,182,86],{"class":118},[97,184,185],{"class":107}," {\n",[97,187,189,192,194,197],{"class":99,"line":188},7,[97,190,191],{"class":107},"    type",[97,193,86],{"class":118},[97,195,196],{"class":114}," 'object'",[97,198,161],{"class":118},[97,200,202,205,207,210,212,215,217,220,223,226,229,231,233,235,237,240],{"class":99,"line":201},8,[97,203,204],{"class":107},"    properties",[97,206,86],{"class":118},[97,208,209],{"class":107}," { item",[97,211,86],{"class":118},[97,213,214],{"class":107}," { type",[97,216,86],{"class":118},[97,218,219],{"class":114}," 'string'",[97,221,222],{"class":107}," }",[97,224,225],{"class":118},",",[97,227,228],{"class":107}," quantity",[97,230,86],{"class":118},[97,232,214],{"class":107},[97,234,86],{"class":118},[97,236,219],{"class":114},[97,238,239],{"class":107}," } }",[97,241,161],{"class":118},[97,243,245,248,250,253,256,259],{"class":99,"line":244},9,[97,246,247],{"class":107},"    required",[97,249,86],{"class":118},[97,251,252],{"class":107}," [",[97,254,255],{"class":114},"'item'",[97,257,258],{"class":107},"]",[97,260,161],{"class":118},[97,262,264,267],{"class":99,"line":263},10,[97,265,266],{"class":107},"  }",[97,268,161],{"class":118},[97,270,272,275,277,280,284,288,290,292,294,297,300],{"class":99,"line":271},11,[97,273,274],{"class":143},"  execute",[97,276,86],{"class":118},[97,278,279],{"class":107}," (",[97,281,283],{"class":282},"s2gyY","{ ",[97,285,287],{"class":286},"stxvc","item",[97,289,225],{"class":118},[97,291,228],{"class":286},[97,293,222],{"class":282},[97,295,296],{"class":107},") ",[97,298,299],{"class":103},"=>",[97,301,185],{"class":107},[97,303,305,308,312,315,318,320,323],{"class":99,"line":304},12,[97,306,307],{"class":107},"    cart",[97,309,311],{"class":310},"s0eYM",".",[97,313,314],{"class":143},"push",[97,316,317],{"class":107},"({ item",[97,319,225],{"class":118},[97,321,322],{"class":107}," quantity })",[97,324,119],{"class":118},[97,326,328,331,334,336,339,341,344,346,349,351,354,358,361,364,367,369,371,374,377],{"class":99,"line":327},13,[97,329,330],{"class":103},"    return",[97,332,333],{"class":107}," { content",[97,335,86],{"class":118},[97,337,338],{"class":107}," [{ type",[97,340,86],{"class":118},[97,342,343],{"class":114}," 'text'",[97,345,225],{"class":118},[97,347,348],{"class":107}," text",[97,350,86],{"class":118},[97,352,353],{"class":114}," `Added ",[97,355,357],{"class":356},"sDTZu","${",[97,359,360],{"class":107},"quantity",[97,362,363],{"class":356},"}",[97,365,366],{"class":356}," ${",[97,368,287],{"class":107},[97,370,363],{"class":356},[97,372,373],{"class":114},".`",[97,375,376],{"class":107}," }] }",[97,378,119],{"class":118},[97,380,382,384],{"class":99,"line":381},14,[97,383,266],{"class":107},[97,385,161],{"class":118},[97,387,389,392],{"class":99,"line":388},15,[97,390,391],{"class":107},"})",[97,393,119],{"class":118},[21,395,396],{},"Both are feature-detected no-ops when no agent host is present.",[42,398,400],{"id":399},"the-examples","The examples",[402,403,404,420],"table",{},[405,406,407],"thead",{},[408,409,410,414,417],"tr",{},[411,412,413],"th",{},"Example",[411,415,416],{},"Flavor",[411,418,419],{},"What the agent does",[421,422,423,443,456,469,483,496],"tbody",{},[408,424,425,433,436],{},[426,427,428],"td",{},[429,430,432],"a",{"href":431},"\u002Fdocs\u002Fexamples\u002Frecipe-cart","Recipe → grocery cart",[426,434,435],{},"Everyday",[426,437,438,439,442],{},"Parses a pasted recipe and fills the cart, one ",[33,440,441],{},"add_to_cart"," at a time",[408,444,445,451,453],{},[426,446,447],{},[429,448,450],{"href":449},"\u002Fdocs\u002Fexamples\u002Frestaurant-booking","Restaurant booking",[426,452,435],{},[426,454,455],{},"Turns one sentence into three filled selects and a confirm dialog",[408,457,458,464,466],{},[426,459,460],{},[429,461,463],{"href":462},"\u002Fdocs\u002Fexamples\u002Fbrain-dump","Brain-dump → to-dos",[426,465,435],{},[426,467,468],{},"Splits a rambling paragraph into prioritized tasks",[408,470,471,477,480],{},[426,472,473],{},[429,474,476],{"href":475},"\u002Fdocs\u002Fexamples\u002Fcrm-lead","Email → CRM lead",[426,478,479],{},"Business",[426,481,482],{},"Extracts contact, company, budget, and need from a messy email",[408,484,485,491,493],{},[426,486,487],{},[429,488,490],{"href":489},"\u002Fdocs\u002Fexamples\u002Fexpense-report","Receipt → expense",[426,492,479],{},[426,494,495],{},"Reads a receipt into a filed expense row",[408,497,498,504,506],{},[426,499,500],{},[429,501,503],{"href":502},"\u002Fdocs\u002Fexamples\u002Fdashboard","Dashboard control",[426,505,479],{},[426,507,508,509],{},"Sets filters, then ",[510,511,512],"em",{},"reads the answer off the page",[21,514,515],{},"A thread runs through all six: the agent does the tedious part, and the consequential click — place the order, confirm the table, save the lead — stays with the human.",[517,518,519],"style",{},"html pre.shiki code .s7jPt, html code.shiki .s7jPt{--shiki-default:#CF222E;--shiki-dark:#FF8F40}html pre.shiki code .sBz_o, html code.shiki .sBz_o{--shiki-default:#1F2328;--shiki-dark:#BFBDB6}html pre.shiki code .sxLuP, html code.shiki .sxLuP{--shiki-default:#0A3069;--shiki-dark:#AAD94C}html pre.shiki code .siQKT, html code.shiki .siQKT{--shiki-default:#1F2328;--shiki-dark:#BFBDB6B3}html pre.shiki code .sgp7R, html code.shiki .sgp7R{--shiki-default:#0550AE;--shiki-dark:#BFBDB6}html pre.shiki code .snFdW, html code.shiki .snFdW{--shiki-default:#CF222E;--shiki-dark:#F29668}html pre.shiki code .s2DMw, html code.shiki .s2DMw{--shiki-default:#8250DF;--shiki-dark:#FFB454}html pre.shiki code .s2gyY, html code.shiki .s2gyY{--shiki-default:#1F2328;--shiki-dark:#D2A6FF}html pre.shiki code .stxvc, html code.shiki .stxvc{--shiki-default:#953800;--shiki-dark:#D2A6FF}html pre.shiki code .s0eYM, html code.shiki .s0eYM{--shiki-default:#1F2328;--shiki-dark:#F29668}html pre.shiki code .sDTZu, html code.shiki .sDTZu{--shiki-default:#0A3069;--shiki-dark:#FF8F40}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":93,"searchDepth":122,"depth":122,"links":521},[522,523],{"id":44,"depth":122,"text":45},{"id":399,"depth":122,"text":400},"Real-world, multi-tool WebMCP demos — everyday and business workflows an agent can drive end to end.","md",{},"Overview","\u002Fdocs\u002Fexamples",{"title":12,"description":524},"docs\u002Fexamples\u002Findex","SChYMfoGjdl688P4X7zkEQ-nuU7o520hTuJgUvYRfpU",[533,538,542,546,551,555,560,564,568,572,576,580,584,588,592,596,600,604,608,612,616,620,622,623,625,627,628,630,632,636,639,642,645,648],{"path":534,"title":535,"navTitle":536,"group":537,"order":122,"groupOrder":150},"\u002Fdocs\u002Felements\u002Falert","\u003Cwmcp-alert>","Alert","Presentational",{"path":539,"title":540,"navTitle":541,"group":537,"order":129,"groupOrder":150},"\u002Fdocs\u002Felements\u002Favatar","\u003Cwmcp-avatar>","Avatar",{"path":543,"title":544,"navTitle":545,"group":537,"order":100,"groupOrder":150},"\u002Fdocs\u002Felements\u002Fbadge","\u003Cwmcp-badge>","Badge",{"path":547,"title":548,"navTitle":549,"group":550,"order":100,"groupOrder":129},"\u002Fdocs\u002Felements\u002Fbutton","\u003Cwmcp-button>","Button","Interaction",{"path":552,"title":553,"navTitle":554,"group":537,"order":177,"groupOrder":150},"\u002Fdocs\u002Felements\u002Fcard","\u003Cwmcp-card>","Card",{"path":556,"title":557,"navTitle":558,"group":559,"order":150,"groupOrder":122},"\u002Fdocs\u002Felements\u002Fcheckbox","\u003Cwmcp-checkbox>","Checkbox","Elements",{"path":561,"title":562,"navTitle":563,"group":550,"order":122,"groupOrder":129},"\u002Fdocs\u002Felements\u002Fdialog","\u003Cwmcp-dialog>","Dialog",{"path":565,"title":566,"navTitle":567,"group":559,"order":100,"groupOrder":122},"\u002Fdocs\u002Felements\u002Finput","\u003Cwmcp-input>","Input",{"path":569,"title":570,"navTitle":571,"group":550,"order":129,"groupOrder":129},"\u002Fdocs\u002Felements\u002Fmenu","\u003Cwmcp-menu>","Menu",{"path":573,"title":574,"navTitle":575,"group":550,"order":164,"groupOrder":129},"\u002Fdocs\u002Felements\u002Fpopover","\u003Cwmcp-popover>","Popover",{"path":577,"title":578,"navTitle":579,"group":537,"order":150,"groupOrder":150},"\u002Fdocs\u002Felements\u002Fprogress","\u003Cwmcp-progress>","Progress",{"path":581,"title":582,"navTitle":583,"group":559,"order":164,"groupOrder":122},"\u002Fdocs\u002Felements\u002Fradio","\u003Cwmcp-radio-group>","Radio group",{"path":585,"title":586,"navTitle":587,"group":559,"order":129,"groupOrder":122},"\u002Fdocs\u002Felements\u002Fselect","\u003Cwmcp-select>","Select",{"path":589,"title":590,"navTitle":591,"group":537,"order":164,"groupOrder":150},"\u002Fdocs\u002Felements\u002Fseparator","\u003Cwmcp-separator>","Separator",{"path":593,"title":594,"navTitle":595,"group":537,"order":188,"groupOrder":150},"\u002Fdocs\u002Felements\u002Fskeleton","\u003Cwmcp-skeleton>","Skeleton",{"path":597,"title":598,"navTitle":599,"group":537,"order":201,"groupOrder":150},"\u002Fdocs\u002Felements\u002Fspinner","\u003Cwmcp-spinner>","Spinner",{"path":601,"title":602,"navTitle":603,"group":550,"order":188,"groupOrder":129},"\u002Fdocs\u002Felements\u002Fswitch","\u003Cwmcp-switch>","Switch",{"path":605,"title":606,"navTitle":607,"group":550,"order":150,"groupOrder":129},"\u002Fdocs\u002Felements\u002Ftabs","\u003Cwmcp-tabs>","Tabs",{"path":609,"title":610,"navTitle":611,"group":559,"order":122,"groupOrder":122},"\u002Fdocs\u002Felements\u002Ftextarea","\u003Cwmcp-textarea>","Textarea",{"path":613,"title":614,"navTitle":615,"group":550,"order":177,"groupOrder":129},"\u002Fdocs\u002Felements\u002Ftoast","\u003Cwmcp-toast>","Toast",{"path":617,"title":618,"navTitle":619,"group":550,"order":201,"groupOrder":129},"\u002Fdocs\u002Felements\u002Ftooltip","\u003Cwmcp-tooltip>","Tooltip",{"path":462,"title":621,"navTitle":463,"group":12,"order":150,"groupOrder":164},"Brain-dump → to-do list",{"path":475,"title":476,"navTitle":476,"group":12,"order":164,"groupOrder":164},{"path":502,"title":624,"navTitle":503,"group":12,"order":188,"groupOrder":164},"Ask the dashboard a question",{"path":489,"title":626,"navTitle":490,"group":12,"order":177,"groupOrder":164},"Receipt → expense report",{"path":528,"title":12,"navTitle":527,"group":12,"order":100,"groupOrder":164},{"path":431,"title":432,"navTitle":629,"group":12,"order":122,"groupOrder":164},"Recipe → cart",{"path":449,"title":631,"navTitle":450,"group":12,"order":129,"groupOrder":164},"Book a table in one sentence",{"path":633,"title":634,"navTitle":634,"group":635,"order":177,"groupOrder":100},"\u002Fdocs\u002Fframeworks","React & Vue","Getting started",{"path":637,"title":638,"navTitle":638,"group":635,"order":100,"groupOrder":100},"\u002Fdocs","Introduction",{"path":640,"title":641,"navTitle":641,"group":635,"order":122,"groupOrder":100},"\u002Fdocs\u002Finstallation","Installation",{"path":643,"title":644,"navTitle":644,"group":635,"order":164,"groupOrder":100},"\u002Fdocs\u002Ftesting","Testing",{"path":646,"title":647,"navTitle":647,"group":635,"order":129,"groupOrder":100},"\u002Fdocs\u002Fvalidation","Validation",{"path":649,"title":650,"navTitle":650,"group":635,"order":150,"groupOrder":100},"\u002Fdocs\u002Fwebmcp","WebMCP exposure",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":652},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":654},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",1784517900895]