[{"data":1,"prerenderedAt":549},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-right":8,"doc-\u002Fdocs\u002Fexamples\u002Fdashboard":10,"docs-sidebar":412,"i-lucide:file-text":541,"i-lucide:arrow-left":543,"i-lucide:chart-column":545,"i-lucide:arrow-up-right":547},{"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":402,"extension":403,"group":404,"groupOrder":225,"meta":405,"navTitle":406,"navigation":407,"order":361,"path":408,"seo":409,"stem":410,"__hash__":411},"docs\u002Fdocs\u002Fexamples\u002Fdashboard.md","Ask the dashboard a question",{"type":14,"value":15,"toc":398},"minimark",[16,20,29,32,37,115,119,122,240,243,376,394],[17,18,12],"h1",{"id":19},"ask-the-dashboard-a-question",[21,22,23,24,28],"p",{},"\"Show me Q3 EMEA revenue.\" The agent switches the quarter, switches the region, and then — the interesting part — ",[25,26,27],"strong",{},"reads the number the dashboard now displays"," and answers in a sentence. Actuate, then perceive: the two halves of WebMCP in one interaction.",[30,31],"dashboard-demo",{},[33,34,36],"h2",{"id":35},"the-tools","The tools",[38,39,40,56],"table",{},[41,42,43],"thead",{},[44,45,46,50,53],"tr",{},[47,48,49],"th",{},"Tool",[47,51,52],{},"Kind",[47,54,55],{},"What it does",[57,58,59,85,99],"tbody",{},[44,60,61,68,75],{},[62,63,64],"td",{},[65,66,67],"code",{},"switch_quarter",[62,69,70,71,74],{},"Element (",[65,72,73],{},"\u003Cwmcp-tabs expose>",")",[62,76,77,78,81,82],{},"Sets the quarter — enum ",[65,79,80],{},"q1","–",[65,83,84],{},"q4",[44,86,87,92,96],{},[62,88,89],{},[65,90,91],{},"switch_region",[62,93,70,94,74],{},[65,95,73],{},[62,97,98],{},"Sets the region — enum of sales regions",[44,100,101,106,112],{},[62,102,103],{},[65,104,105],{},"read_revenue",[62,107,108,109,74],{},"Page (",[65,110,111],{},"exposeTool",[62,113,114],{},"Returns the figure currently on screen",[33,116,118],{"id":117},"how-it-works","How it works",[21,120,121],{},"The filters are two exposed tab sets — a tab set's tool is an enum of its tabs, and switching by tool is the same state change as a human click:",[123,124,129],"pre",{"className":125,"code":126,"language":127,"meta":128,"style":128},"language-html shiki shiki-themes github-light-default ayu-dark","\u003Cwmcp-tabs name=\"quarter\" label=\"Quarter\" expose\n  tool-name=\"switch_quarter\"\n  tool-description=\"Switch the dashboard to a quarter (q1–q4).\">\n  \u003Csection tab=\"q1\" tab-label=\"Q1\" \u002F>\n  …\n\u003C\u002Fwmcp-tabs>\n","html","",[65,130,131,167,178,192,223,230],{"__ignoreMap":128},[132,133,136,140,144,148,152,156,159,161,164],"span",{"class":134,"line":135},"line",1,[132,137,139],{"class":138},"sqV5G","\u003C",[132,141,143],{"class":142},"sfBZl","wmcp-tabs",[132,145,147],{"class":146},"sI192"," name",[132,149,151],{"class":150},"siQKT","=",[132,153,155],{"class":154},"sxLuP","\"quarter\"",[132,157,158],{"class":146}," label",[132,160,151],{"class":150},[132,162,163],{"class":154},"\"Quarter\"",[132,165,166],{"class":146}," expose\n",[132,168,170,173,175],{"class":134,"line":169},2,[132,171,172],{"class":146},"  tool-name",[132,174,151],{"class":150},[132,176,177],{"class":154},"\"switch_quarter\"\n",[132,179,181,184,186,189],{"class":134,"line":180},3,[132,182,183],{"class":146},"  tool-description",[132,185,151],{"class":150},[132,187,188],{"class":154},"\"Switch the dashboard to a quarter (q1–q4).\"",[132,190,191],{"class":138},">\n",[132,193,195,198,201,204,206,209,212,214,217,221],{"class":134,"line":194},4,[132,196,197],{"class":138},"  \u003C",[132,199,200],{"class":142},"section",[132,202,203],{"class":146}," tab",[132,205,151],{"class":150},[132,207,208],{"class":154},"\"q1\"",[132,210,211],{"class":146}," tab-label",[132,213,151],{"class":150},[132,215,216],{"class":154},"\"Q1\"",[132,218,220],{"class":219},"sMGbx"," \u002F",[132,222,191],{"class":138},[132,224,226],{"class":134,"line":225},5,[132,227,229],{"class":228},"sBz_o","  …\n",[132,231,233,236,238],{"class":134,"line":232},6,[132,234,235],{"class":138},"\u003C\u002F",[132,237,143],{"class":142},[132,239,191],{"class":138},[21,241,242],{},"The read side is one page-level tool that reports what the human is looking at:",[123,244,248],{"className":245,"code":246,"language":247,"meta":128,"style":128},"language-ts shiki shiki-themes github-light-default ayu-dark","exposeTool({\n  name: 'read_revenue',\n  description: 'Read the revenue figure the dashboard currently displays.',\n  inputSchema: { type: 'object', properties: {} },\n  execute: () => ({\n    content: [{ type: 'text', text: `Q3 EMEA revenue is $1.69M, up 19% QoQ.` }],\n  }),\n});\n","ts",[65,249,250,258,272,284,312,329,359,367],{"__ignoreMap":128},[132,251,252,255],{"class":134,"line":135},[132,253,111],{"class":254},"s2DMw",[132,256,257],{"class":228},"({\n",[132,259,260,263,266,269],{"class":134,"line":169},[132,261,262],{"class":228},"  name",[132,264,265],{"class":150},":",[132,267,268],{"class":154}," 'read_revenue'",[132,270,271],{"class":150},",\n",[132,273,274,277,279,282],{"class":134,"line":180},[132,275,276],{"class":228},"  description",[132,278,265],{"class":150},[132,280,281],{"class":154}," 'Read the revenue figure the dashboard currently displays.'",[132,283,271],{"class":150},[132,285,286,289,291,294,296,299,302,305,307,310],{"class":134,"line":194},[132,287,288],{"class":228},"  inputSchema",[132,290,265],{"class":150},[132,292,293],{"class":228}," { type",[132,295,265],{"class":150},[132,297,298],{"class":154}," 'object'",[132,300,301],{"class":150},",",[132,303,304],{"class":228}," properties",[132,306,265],{"class":150},[132,308,309],{"class":228}," {} }",[132,311,271],{"class":150},[132,313,314,317,319,322,326],{"class":134,"line":225},[132,315,316],{"class":254},"  execute",[132,318,265],{"class":150},[132,320,321],{"class":228}," () ",[132,323,325],{"class":324},"s7jPt","=>",[132,327,328],{"class":228}," ({\n",[132,330,331,334,336,339,341,344,346,349,351,354,357],{"class":134,"line":232},[132,332,333],{"class":228},"    content",[132,335,265],{"class":150},[132,337,338],{"class":228}," [{ type",[132,340,265],{"class":150},[132,342,343],{"class":154}," 'text'",[132,345,301],{"class":150},[132,347,348],{"class":228}," text",[132,350,265],{"class":150},[132,352,353],{"class":154}," `Q3 EMEA revenue is $1.69M, up 19% QoQ.`",[132,355,356],{"class":228}," }]",[132,358,271],{"class":150},[132,360,362,365],{"class":134,"line":361},7,[132,363,364],{"class":228},"  })",[132,366,271],{"class":150},[132,368,370,373],{"class":134,"line":369},8,[132,371,372],{"class":228},"})",[132,374,375],{"class":150},";\n",[21,377,378,379,383,384,387,388,393],{},"That's the pattern for any analytics surface: expose the ",[380,381,382],"em",{},"controls"," as element tools and the ",[380,385,386],{},"readings"," as page tools, and an agent can answer questions about your data without you building a separate API — the dashboard already is one. The same perceive-side idea powers the ",[389,390,392],"a",{"href":391},"\u002Fdocs\u002Felements\u002Ftoast","toast element",".",[395,396,397],"style",{},"html pre.shiki code .sqV5G, html code.shiki .sqV5G{--shiki-default:#1F2328;--shiki-dark:#39BAE680}html pre.shiki code .sfBZl, html code.shiki .sfBZl{--shiki-default:#116329;--shiki-dark:#39BAE6}html pre.shiki code .sI192, html code.shiki .sI192{--shiki-default:#0550AE;--shiki-dark:#FFB454}html pre.shiki code .siQKT, html code.shiki .siQKT{--shiki-default:#1F2328;--shiki-dark:#BFBDB6B3}html pre.shiki code .sxLuP, html code.shiki .sxLuP{--shiki-default:#0A3069;--shiki-dark:#AAD94C}html pre.shiki code .sMGbx, html code.shiki .sMGbx{--shiki-default:#82071E;--shiki-default-font-style:italic;--shiki-dark:#D95757;--shiki-dark-font-style:inherit}html pre.shiki code .sBz_o, html code.shiki .sBz_o{--shiki-default:#1F2328;--shiki-dark:#BFBDB6}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);}html pre.shiki code .s2DMw, html code.shiki .s2DMw{--shiki-default:#8250DF;--shiki-dark:#FFB454}html pre.shiki code .s7jPt, html code.shiki .s7jPt{--shiki-default:#CF222E;--shiki-dark:#FF8F40}",{"title":128,"searchDepth":169,"depth":169,"links":399},[400,401],{"id":35,"depth":169,"text":36},{"id":117,"depth":169,"text":118},"The agent sets the dashboard's filters, then reads the answer off the page — actuate and perceive in one flow.","md","Examples",{},"Dashboard control",true,"\u002Fdocs\u002Fexamples\u002Fdashboard",{"title":12,"description":402},"docs\u002Fexamples\u002Fdashboard","8e2gaAwb9WA0Xzo6T16Zi6qz6JlvrSNhaB8nZesztCg",[413,418,422,426,431,435,440,444,448,452,456,460,464,468,472,476,480,484,488,492,495,499,503,506,507,511,514,518,522,526,529,532,535,538],{"path":414,"title":415,"navTitle":416,"group":417,"order":169,"groupOrder":194},"\u002Fdocs\u002Felements\u002Falert","\u003Cwmcp-alert>","Alert","Presentational",{"path":419,"title":420,"navTitle":421,"group":417,"order":180,"groupOrder":194},"\u002Fdocs\u002Felements\u002Favatar","\u003Cwmcp-avatar>","Avatar",{"path":423,"title":424,"navTitle":425,"group":417,"order":135,"groupOrder":194},"\u002Fdocs\u002Felements\u002Fbadge","\u003Cwmcp-badge>","Badge",{"path":427,"title":428,"navTitle":429,"group":430,"order":135,"groupOrder":180},"\u002Fdocs\u002Felements\u002Fbutton","\u003Cwmcp-button>","Button","Interaction",{"path":432,"title":433,"navTitle":434,"group":417,"order":232,"groupOrder":194},"\u002Fdocs\u002Felements\u002Fcard","\u003Cwmcp-card>","Card",{"path":436,"title":437,"navTitle":438,"group":439,"order":194,"groupOrder":169},"\u002Fdocs\u002Felements\u002Fcheckbox","\u003Cwmcp-checkbox>","Checkbox","Elements",{"path":441,"title":442,"navTitle":443,"group":430,"order":169,"groupOrder":180},"\u002Fdocs\u002Felements\u002Fdialog","\u003Cwmcp-dialog>","Dialog",{"path":445,"title":446,"navTitle":447,"group":439,"order":135,"groupOrder":169},"\u002Fdocs\u002Felements\u002Finput","\u003Cwmcp-input>","Input",{"path":449,"title":450,"navTitle":451,"group":430,"order":180,"groupOrder":180},"\u002Fdocs\u002Felements\u002Fmenu","\u003Cwmcp-menu>","Menu",{"path":453,"title":454,"navTitle":455,"group":430,"order":225,"groupOrder":180},"\u002Fdocs\u002Felements\u002Fpopover","\u003Cwmcp-popover>","Popover",{"path":457,"title":458,"navTitle":459,"group":417,"order":194,"groupOrder":194},"\u002Fdocs\u002Felements\u002Fprogress","\u003Cwmcp-progress>","Progress",{"path":461,"title":462,"navTitle":463,"group":439,"order":225,"groupOrder":169},"\u002Fdocs\u002Felements\u002Fradio","\u003Cwmcp-radio-group>","Radio group",{"path":465,"title":466,"navTitle":467,"group":439,"order":180,"groupOrder":169},"\u002Fdocs\u002Felements\u002Fselect","\u003Cwmcp-select>","Select",{"path":469,"title":470,"navTitle":471,"group":417,"order":225,"groupOrder":194},"\u002Fdocs\u002Felements\u002Fseparator","\u003Cwmcp-separator>","Separator",{"path":473,"title":474,"navTitle":475,"group":417,"order":361,"groupOrder":194},"\u002Fdocs\u002Felements\u002Fskeleton","\u003Cwmcp-skeleton>","Skeleton",{"path":477,"title":478,"navTitle":479,"group":417,"order":369,"groupOrder":194},"\u002Fdocs\u002Felements\u002Fspinner","\u003Cwmcp-spinner>","Spinner",{"path":481,"title":482,"navTitle":483,"group":430,"order":361,"groupOrder":180},"\u002Fdocs\u002Felements\u002Fswitch","\u003Cwmcp-switch>","Switch",{"path":485,"title":486,"navTitle":487,"group":430,"order":194,"groupOrder":180},"\u002Fdocs\u002Felements\u002Ftabs","\u003Cwmcp-tabs>","Tabs",{"path":489,"title":490,"navTitle":491,"group":439,"order":169,"groupOrder":169},"\u002Fdocs\u002Felements\u002Ftextarea","\u003Cwmcp-textarea>","Textarea",{"path":391,"title":493,"navTitle":494,"group":430,"order":232,"groupOrder":180},"\u003Cwmcp-toast>","Toast",{"path":496,"title":497,"navTitle":498,"group":430,"order":369,"groupOrder":180},"\u002Fdocs\u002Felements\u002Ftooltip","\u003Cwmcp-tooltip>","Tooltip",{"path":500,"title":501,"navTitle":502,"group":404,"order":194,"groupOrder":225},"\u002Fdocs\u002Fexamples\u002Fbrain-dump","Brain-dump → to-do list","Brain-dump → to-dos",{"path":504,"title":505,"navTitle":505,"group":404,"order":225,"groupOrder":225},"\u002Fdocs\u002Fexamples\u002Fcrm-lead","Email → CRM lead",{"path":408,"title":12,"navTitle":406,"group":404,"order":361,"groupOrder":225},{"path":508,"title":509,"navTitle":510,"group":404,"order":232,"groupOrder":225},"\u002Fdocs\u002Fexamples\u002Fexpense-report","Receipt → expense report","Receipt → expense",{"path":512,"title":404,"navTitle":513,"group":404,"order":135,"groupOrder":225},"\u002Fdocs\u002Fexamples","Overview",{"path":515,"title":516,"navTitle":517,"group":404,"order":169,"groupOrder":225},"\u002Fdocs\u002Fexamples\u002Frecipe-cart","Recipe → grocery cart","Recipe → cart",{"path":519,"title":520,"navTitle":521,"group":404,"order":180,"groupOrder":225},"\u002Fdocs\u002Fexamples\u002Frestaurant-booking","Book a table in one sentence","Restaurant booking",{"path":523,"title":524,"navTitle":524,"group":525,"order":232,"groupOrder":135},"\u002Fdocs\u002Fframeworks","React & Vue","Getting started",{"path":527,"title":528,"navTitle":528,"group":525,"order":135,"groupOrder":135},"\u002Fdocs","Introduction",{"path":530,"title":531,"navTitle":531,"group":525,"order":169,"groupOrder":135},"\u002Fdocs\u002Finstallation","Installation",{"path":533,"title":534,"navTitle":534,"group":525,"order":225,"groupOrder":135},"\u002Fdocs\u002Ftesting","Testing",{"path":536,"title":537,"navTitle":537,"group":525,"order":180,"groupOrder":135},"\u002Fdocs\u002Fvalidation","Validation",{"path":539,"title":540,"navTitle":540,"group":525,"order":194,"groupOrder":135},"\u002Fdocs\u002Fwebmcp","WebMCP exposure",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":542},"\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":544},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":546},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 3v16a2 2 0 0 0 2 2h16m-3-4V9m-5 8V5M8 17v-3\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":548},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",1784517901049]