@modelcontextprotocol/server-basic-vue 1.0.1 → 1.1.0

package/dist/mcp-app.html

@@ -119,8 +119,8 @@ Note: This type uses \`Record<K, string | undefined>\` rather than \`Partial<Rec
 for compatibility with Zod schema generation. Both are functionally equivalent for validation.`);m.object({method:m.literal("ui/open-link"),params:m.object({url:m.string().describe("URL to open in the host's browser")})});var F6=m.object({isError:m.boolean().optional().describe("True if the host failed to open the URL (e.g., due to security policy).")}).passthrough(),J6=m.object({isError:m.boolean().optional().describe("True if the host rejected or failed to deliver the message.")}).passthrough();m.object({method:m.literal("ui/notifications/sandbox-proxy-ready"),params:m.object({})});var El=m.object({connectDomains:m.array(m.string()).optional().describe("Origins for network requests (fetch/XHR/WebSocket)."),resourceDomains:m.array(m.string()).optional().describe("Origins for static resources (scripts, images, styles, fonts)."),frameDomains:m.array(m.string()).optional().describe("Origins for nested iframes (frame-src directive)."),baseUriDomains:m.array(m.string()).optional().describe("Allowed base URIs for the document (base-uri directive).")}),Ul=m.object({camera:m.object({}).optional().describe("Request camera access (Permission Policy `camera` feature)."),microphone:m.object({}).optional().describe("Request microphone access (Permission Policy `microphone` feature)."),geolocation:m.object({}).optional().describe("Request geolocation access (Permission Policy `geolocation` feature)."),clipboardWrite:m.object({}).optional().describe("Request clipboard write access (Permission Policy `clipboard-write` feature).")});m.object({method:m.literal("ui/notifications/size-changed"),params:m.object({width:m.number().optional().describe("New width in pixels."),height:m.number().optional().describe("New height in pixels.")})});var q6=m.object({method:m.literal("ui/notifications/tool-input"),params:m.object({arguments:m.record(m.string(),m.unknown().describe("Complete tool call arguments as key-value pairs.")).optional().describe("Complete tool call arguments as key-value pairs.")})}),V6=m.object({method:m.literal("ui/notifications/tool-input-partial"),params:m.object({arguments:m.record(m.string(),m.unknown().describe("Partial tool call arguments (incomplete, may change).")).optional().describe("Partial tool call arguments (incomplete, may change).")})}),H6=m.object({method:m.literal("ui/notifications/tool-cancelled"),params:m.object({reason:m.string().optional().describe('Optional reason for the cancellation (e.g., "user action", "timeout").')})}),W6=m.object({fonts:m.string().optional()}),K6=m.object({variables:L6.optional().describe("CSS variables for theming the app."),css:W6.optional().describe("CSS blocks that apps can inject.")}),B6=m.object({method:m.literal("ui/resource-teardown"),params:m.object({})});m.record(m.string(),m.unknown());var rd=m.object({text:m.object({}).optional().describe("Host supports text content blocks."),image:m.object({}).optional().describe("Host supports image content blocks."),audio:m.object({}).optional().describe("Host supports audio content blocks."),resource:m.object({}).optional().describe("Host supports resource content blocks."),resourceLink:m.object({}).optional().describe("Host supports resource link content blocks."),structuredContent:m.object({}).optional().describe("Host supports structured content.")}),G6=m.object({experimental:m.object({}).optional().describe("Experimental features (structure TBD)."),openLinks:m.object({}).optional().describe("Host supports opening external URLs."),serverTools:m.object({listChanged:m.boolean().optional().describe("Host supports tools/list_changed notifications.")}).optional().describe("Host can proxy tool calls to the MCP server."),serverResources:m.object({listChanged:m.boolean().optional().describe("Host supports resources/list_changed notifications.")}).optional().describe("Host can proxy resource reads to the MCP server."),logging:m.object({}).optional().describe("Host accepts log messages."),sandbox:m.object({permissions:Ul.optional().describe("Permissions granted by the host (camera, microphone, geolocation)."),csp:El.optional().describe("CSP domains approved by the host.")}).optional().describe("Sandbox configuration applied by the host."),updateModelContext:rd.optional().describe("Host accepts context updates (ui/update-model-context) to be included in the model's context for future turns."),message:rd.optional().describe("Host supports receiving content messages (ui/message) from the view.")}),X6=m.object({experimental:m.object({}).optional().describe("Experimental features (structure TBD)."),tools:m.object({listChanged:m.boolean().optional().describe("App supports tools/list_changed notifications.")}).optional().describe("App exposes MCP-style tools that the host can call."),availableDisplayModes:m.array(Pi).optional().describe("Display modes the app supports.")});m.object({method:m.literal("ui/notifications/initialized"),params:m.object({}).optional()});m.object({csp:El.optional().describe("Content Security Policy configuration."),permissions:Ul.optional().describe("Sandbox permissions requested by the UI."),domain:m.string().optional().describe("Dedicated origin for view sandbox."),prefersBorder:m.boolean().optional().describe("Visual boundary preference - true if UI prefers a visible border.")});m.object({method:m.literal("ui/request-display-mode"),params:m.object({mode:Pi.describe("The display mode being requested.")})});var Y6=m.object({mode:Pi.describe("The display mode that was actually set. May differ from requested if not supported.")}).passthrough(),Q6=m.union([m.literal("model"),m.literal("app")]).describe("Tool visibility scope - who can access the tool.");m.object({resourceUri:m.string().optional(),visibility:m.array(Q6).optional().describe(`Who can access this tool. Default: ["model", "app"]
 - "model": Tool visible to and callable by the agent
 - "app": Tool callable by the app from this server only`)});m.object({mimeTypes:m.array(m.string()).optional().describe('Array of supported MIME types for UI resources.\nMust include `"text/html;profile=mcp-app"` for MCP Apps support.')});m.object({method:m.literal("ui/message"),params:m.object({role:m.literal("user").describe('Message role, currently only "user" is supported.'),content:m.array(Mi).describe("Message content blocks (text, image, etc.).")})});m.object({method:m.literal("ui/notifications/sandbox-resource-ready"),params:m.object({html:m.string().describe("HTML content to load into the inner iframe."),sandbox:m.string().optional().describe("Optional override for the inner iframe's sandbox attribute."),csp:El.optional().describe("CSP configuration from resource metadata."),permissions:Ul.optional().describe("Sandbox permissions from resource metadata.")})});var eT=m.object({method:m.literal("ui/notifications/tool-result"),params:mo.describe("Standard MCP tool execution result.")}),G_=m.object({toolInfo:m.object({id:Ui.optional().describe("JSON-RPC id of the tools/call request."),tool:Rs.describe("Tool definition including name, inputSchema, etc.")}).optional().describe("Metadata of the tool call that instantiated this App."),theme:C6.optional().describe("Current color theme preference."),styles:K6.optional().describe("Style configuration for theming the app."),displayMode:Pi.optional().describe("How the UI is currently displayed."),availableDisplayModes:m.array(Pi).optional().describe("Display modes the host supports."),containerDimensions:m.union([m.object({height:m.number().describe("Fixed container height in pixels.")}),m.object({maxHeight:m.union([m.number(),m.undefined()]).optional().describe("Maximum container height in pixels.")})]).and(m.union([m.object({width:m.number().describe("Fixed container width in pixels.")}),m.object({maxWidth:m.union([m.number(),m.undefined()]).optional().describe("Maximum container width in pixels.")})])).optional().describe(`Container dimensions. Represents the dimensions of the iframe or other
-container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:m.string().optional().describe("User's language and region preference in BCP 47 format."),timeZone:m.string().optional().describe("User's timezone in IANA format."),userAgent:m.string().optional().describe("Host application identifier."),platform:m.union([m.literal("web"),m.literal("desktop"),m.literal("mobile")]).optional().describe("Platform type for responsive design decisions."),deviceCapabilities:m.object({touch:m.boolean().optional().describe("Whether the device supports touch input."),hover:m.boolean().optional().describe("Whether the device supports hover interactions.")}).optional().describe("Device input capabilities."),safeAreaInsets:m.object({top:m.number().describe("Top safe area inset in pixels."),right:m.number().describe("Right safe area inset in pixels."),bottom:m.number().describe("Bottom safe area inset in pixels."),left:m.number().describe("Left safe area inset in pixels.")}).optional().describe("Mobile safe area boundaries in pixels.")}).passthrough(),tT=m.object({method:m.literal("ui/notifications/host-context-changed"),params:G_.describe("Partial context update containing only changed fields.")});m.object({method:m.literal("ui/update-model-context"),params:m.object({content:m.array(Mi).optional().describe("Context content blocks (text, image, etc.)."),structuredContent:m.record(m.string(),m.unknown().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")})});m.object({method:m.literal("ui/initialize"),params:m.object({appInfo:co.describe("App identification (name and version)."),appCapabilities:X6.describe("Features and capabilities this app provides."),protocolVersion:m.string().describe("Protocol version this app supports.")})});var nT=m.object({protocolVersion:m.string().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:co.describe("Host application identification and version."),hostCapabilities:G6.describe("Features and capabilities provided by the host."),hostContext:G_.describe("Rich context about the host environment.")}).passthrough();function iT(e){let t=document.documentElement;t.setAttribute("data-theme",e),t.style.colorScheme=e}function rT(e,t=document.documentElement){for(let[i,r]of Object.entries(e))r!==void 0&&t.style.setProperty(i,r)}function oT(e){if(document.getElementById("__mcp-host-fonts"))return;let t=document.createElement("style");t.id="__mcp-host-fonts",t.textContent=e,document.head.appendChild(t)}class aT extends r0{constructor(i,r={},n={autoResize:!0}){super(n);Ce(this,"_appInfo");Ce(this,"_capabilities");Ce(this,"options");Ce(this,"_hostCapabilities");Ce(this,"_hostInfo");Ce(this,"_hostContext");Ce(this,"sendOpenLink",this.openLink);this._appInfo=i,this._capabilities=r,this.options=n,this.setRequestHandler(fo,o=>(console.log("Received ping:",o.params),{})),this.onhostcontextchanged=()=>{}}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}set ontoolinput(i){this.setNotificationHandler(q6,r=>i(r.params))}set ontoolinputpartial(i){this.setNotificationHandler(V6,r=>i(r.params))}set ontoolresult(i){this.setNotificationHandler(eT,r=>i(r.params))}set ontoolcancelled(i){this.setNotificationHandler(H6,r=>i(r.params))}set onhostcontextchanged(i){this.setNotificationHandler(tT,r=>{this._hostContext={...this._hostContext,...r.params},i(r.params)})}set onteardown(i){this.setRequestHandler(B6,(r,n)=>i(r.params,n))}set oncalltool(i){this.setRequestHandler(sm,(r,n)=>i(r.params,n))}set onlisttools(i){this.setRequestHandler(am,(r,n)=>i(r.params,n))}assertCapabilityForMethod(i){}assertRequestHandlerCapability(i){switch(i){case"tools/call":case"tools/list":if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${i})`);return;case"ping":case"ui/resource-teardown":return;default:throw Error(`No handler for method ${i} registered`)}}assertNotificationCapability(i){}assertTaskCapability(i){throw Error("Tasks are not supported in MCP Apps")}assertTaskHandlerCapability(i){throw Error("Task handlers are not supported in MCP Apps")}async callServerTool(i,r){return await this.request({method:"tools/call",params:i},mo,r)}sendMessage(i,r){return this.request({method:"ui/message",params:i},J6,r)}sendLog(i){return this.notification({method:"notifications/message",params:i})}updateModelContext(i,r){return this.request({method:"ui/update-model-context",params:i},ks,r)}openLink(i,r){return this.request({method:"ui/open-link",params:i},F6,r)}requestDisplayMode(i,r){return this.request({method:"ui/request-display-mode",params:i},Y6,r)}sendSizeChanged(i){return this.notification({method:"ui/notifications/size-changed",params:i})}setupSizeChangedNotifications(){let i=!1,r=0,n=0,o=()=>{i||(i=!0,requestAnimationFrame(()=>{i=!1;let s=document.documentElement,u=s.style.width,l=s.style.height;s.style.width="fit-content",s.style.height="fit-content";let c=s.getBoundingClientRect();s.style.width=u,s.style.height=l;let d=window.innerWidth-s.clientWidth,f=Math.ceil(c.width+d),h=Math.ceil(c.height);(f!==r||h!==n)&&(r=f,n=h,this.sendSizeChanged({width:f,height:h}))}))};o();let a=new ResizeObserver(o);return a.observe(document.documentElement),a.observe(document.body),()=>a.disconnect()}async connect(i=new a0(window.parent,window.parent),r){var n;await super.connect(i);try{let o=await this.request({method:"ui/initialize",params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:s0}},nT,r);if(o===void 0)throw Error(`Server sent invalid initialize result: ${o}`);this._hostCapabilities=o.hostCapabilities,this._hostInfo=o.hostInfo,this._hostContext=o.hostContext,await this.notification({method:"ui/notifications/initialized"}),(n=this.options)!=null&&n.autoResize&&this.setupSizeChangedNotifications()}catch(o){throw this.close(),o}}}const sT={class:"action"},uT={id:"server-time"},lT={class:"action"},cT={class:"action"},dT={class:"action"},fT=e$({__name:"App",setup(e){function t(f){var _;const{text:h}=(_=f.content)==null?void 0:_.find($=>$.type==="text");return h}const i=xn(null),r=xn(),n=xn("Loading..."),o=xn("This is message text."),a=xn("This is log text."),s=xn("https://modelcontextprotocol.io/");Bb(()=>{var h,_,$;const f=r.value;f!=null&&f.theme&&iT(f.theme),(h=f==null?void 0:f.styles)!=null&&h.variables&&rT(f.styles.variables),($=(_=f==null?void 0:f.styles)==null?void 0:_.css)!=null&&$.fonts&&oT(f.styles.css.fonts)}),Md(async()=>{const f=new aT({name:"Get Time App",version:"1.0.0"});f.ontoolinput=h=>{console.info("Received tool call input:",h)},f.ontoolresult=h=>{console.info("Received tool call result:",h),n.value=t(h)},f.ontoolcancelled=h=>{console.info("Tool call cancelled:",h.reason)},f.onerror=console.error,f.onhostcontextchanged=h=>{r.value={...r.value,...h}},await f.connect(),i.value=f,r.value=f.getHostContext()});async function u(){if(i.value)try{console.info("Calling get-time tool...");const f=await i.value.callServerTool({name:"get-time",arguments:{}});console.info("get-time result:",f),n.value=t(f)}catch(f){console.error(f),n.value="[ERROR]"}}async function l(){if(!i.value)return;const f=AbortSignal.timeout(5e3);try{console.info("Sending message text to Host:",o.value);const{isError:h}=await i.value.sendMessage({role:"user",content:[{type:"text",text:o.value}]},{signal:f});console.info("Message",h?"rejected":"accepted")}catch(h){console.error("Message send error:",f.aborted?"timed out":h)}}async function c(){i.value&&(console.info("Sending log text to Host:",a.value),await i.value.sendLog({level:"info",data:a.value}))}async function d(){if(!i.value)return;console.info("Sending open link request to Host:",s.value);const{isError:f}=await i.value.openLink({url:s.value});console.info("Open link request",f?"rejected":"accepted")}return(f,h)=>{var _;return C$(),F$("main",{class:"main",style:Qr(((_=r.value)==null?void 0:_.safeAreaInsets)&&{paddingTop:r.value.safeAreaInsets.top+"px",paddingRight:r.value.safeAreaInsets.right+"px",paddingBottom:r.value.safeAreaInsets.bottom+"px",paddingLeft:r.value.safeAreaInsets.left+"px"})},[h[5]||(h[5]=Ne("p",{class:"notice"},"Watch activity in the DevTools console!",-1)),Ne("div",sT,[Ne("p",null,[h[3]||(h[3]=Ne("strong",null,"Server Time:",-1)),h[4]||(h[4]=sf()),Ne("code",uT,pd(n.value),1)]),Ne("button",{onClick:u},"Get Server Time")]),Ne("div",lT,[fa(Ne("textarea",{"onUpdate:modelValue":h[0]||(h[0]=$=>o.value=$)},null,512),[[$a,o.value]]),Ne("button",{onClick:l},"Send Message")]),Ne("div",cT,[fa(Ne("input",{type:"text","onUpdate:modelValue":h[1]||(h[1]=$=>a.value=$)},null,512),[[$a,a.value]]),Ne("button",{onClick:c},"Send Log")]),Ne("div",dT,[fa(Ne("input",{type:"url","onUpdate:modelValue":h[2]||(h[2]=$=>s.value=$)},null,512),[[$a,s.value]]),Ne("button",{onClick:d},"Open Link")])],4)}}}),mT=(e,t)=>{const i=e.__vccOpts||e;for(const[r,n]of t)i[r]=n;return i},pT=mT(fT,[["__scopeId","data-v-5e8ae3e1"]]);Iy(pT).mount("#app");</script>
-  <style rel="stylesheet" crossorigin>*{box-sizing:border-box}html,body{font-family:system-ui,-apple-system,sans-serif;font-size:1rem}code{font-size:1em}.main[data-v-5e8ae3e1]{--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-notice-bg: #eff6ff;width:100%;max-width:425px;box-sizing:border-box}.main>*[data-v-5e8ae3e1]{margin-top:0;margin-bottom:0}.main>*[data-v-5e8ae3e1]+*{margin-top:1.5rem}.action>*[data-v-5e8ae3e1]{margin-top:0;margin-bottom:0;width:100%}.action>*[data-v-5e8ae3e1]+*{margin-top:.5rem}.action>p[data-v-5e8ae3e1]{display:flex;align-items:baseline;gap:.25em}.action textarea[data-v-5e8ae3e1],.action input[data-v-5e8ae3e1]{font-family:inherit;font-size:inherit}.action button[data-v-5e8ae3e1]{padding:.5rem 1rem;border:none;border-radius:6px;color:#fff;font-weight:700;background-color:var(--color-primary);cursor:pointer}.action button[data-v-5e8ae3e1]:hover,.action button[data-v-5e8ae3e1]:focus-visible{background-color:var(--color-primary-hover)}.notice[data-v-5e8ae3e1]{padding:.5rem .75rem;color:var(--color-primary);text-align:center;font-style:italic;background-color:var(--color-notice-bg)}.notice[data-v-5e8ae3e1]:before{content:"ℹ️ ";font-style:normal}[data-v-5e8ae3e1] #server-time{flex:1;min-width:0}</style>
+container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:m.string().optional().describe("User's language and region preference in BCP 47 format."),timeZone:m.string().optional().describe("User's timezone in IANA format."),userAgent:m.string().optional().describe("Host application identifier."),platform:m.union([m.literal("web"),m.literal("desktop"),m.literal("mobile")]).optional().describe("Platform type for responsive design decisions."),deviceCapabilities:m.object({touch:m.boolean().optional().describe("Whether the device supports touch input."),hover:m.boolean().optional().describe("Whether the device supports hover interactions.")}).optional().describe("Device input capabilities."),safeAreaInsets:m.object({top:m.number().describe("Top safe area inset in pixels."),right:m.number().describe("Right safe area inset in pixels."),bottom:m.number().describe("Bottom safe area inset in pixels."),left:m.number().describe("Left safe area inset in pixels.")}).optional().describe("Mobile safe area boundaries in pixels.")}).passthrough(),tT=m.object({method:m.literal("ui/notifications/host-context-changed"),params:G_.describe("Partial context update containing only changed fields.")});m.object({method:m.literal("ui/update-model-context"),params:m.object({content:m.array(Mi).optional().describe("Context content blocks (text, image, etc.)."),structuredContent:m.record(m.string(),m.unknown().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")})});m.object({method:m.literal("ui/initialize"),params:m.object({appInfo:co.describe("App identification (name and version)."),appCapabilities:X6.describe("Features and capabilities this app provides."),protocolVersion:m.string().describe("Protocol version this app supports.")})});var nT=m.object({protocolVersion:m.string().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:co.describe("Host application identification and version."),hostCapabilities:G6.describe("Features and capabilities provided by the host."),hostContext:G_.describe("Rich context about the host environment.")}).passthrough();function iT(e){let t=document.documentElement;t.setAttribute("data-theme",e),t.style.colorScheme=e}function rT(e,t=document.documentElement){for(let[i,r]of Object.entries(e))r!==void 0&&t.style.setProperty(i,r)}function oT(e){if(document.getElementById("__mcp-host-fonts"))return;let t=document.createElement("style");t.id="__mcp-host-fonts",t.textContent=e,document.head.appendChild(t)}class aT extends r0{constructor(i,r={},n={autoResize:!0}){super(n);Ce(this,"_appInfo");Ce(this,"_capabilities");Ce(this,"options");Ce(this,"_hostCapabilities");Ce(this,"_hostInfo");Ce(this,"_hostContext");Ce(this,"sendOpenLink",this.openLink);this._appInfo=i,this._capabilities=r,this.options=n,this.setRequestHandler(fo,o=>(console.log("Received ping:",o.params),{})),this.onhostcontextchanged=()=>{}}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}set ontoolinput(i){this.setNotificationHandler(q6,r=>i(r.params))}set ontoolinputpartial(i){this.setNotificationHandler(V6,r=>i(r.params))}set ontoolresult(i){this.setNotificationHandler(eT,r=>i(r.params))}set ontoolcancelled(i){this.setNotificationHandler(H6,r=>i(r.params))}set onhostcontextchanged(i){this.setNotificationHandler(tT,r=>{this._hostContext={...this._hostContext,...r.params},i(r.params)})}set onteardown(i){this.setRequestHandler(B6,(r,n)=>i(r.params,n))}set oncalltool(i){this.setRequestHandler(sm,(r,n)=>i(r.params,n))}set onlisttools(i){this.setRequestHandler(am,(r,n)=>i(r.params,n))}assertCapabilityForMethod(i){}assertRequestHandlerCapability(i){switch(i){case"tools/call":case"tools/list":if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${i})`);return;case"ping":case"ui/resource-teardown":return;default:throw Error(`No handler for method ${i} registered`)}}assertNotificationCapability(i){}assertTaskCapability(i){throw Error("Tasks are not supported in MCP Apps")}assertTaskHandlerCapability(i){throw Error("Task handlers are not supported in MCP Apps")}async callServerTool(i,r){return await this.request({method:"tools/call",params:i},mo,r)}sendMessage(i,r){return this.request({method:"ui/message",params:i},J6,r)}sendLog(i){return this.notification({method:"notifications/message",params:i})}updateModelContext(i,r){return this.request({method:"ui/update-model-context",params:i},ks,r)}openLink(i,r){return this.request({method:"ui/open-link",params:i},F6,r)}requestDisplayMode(i,r){return this.request({method:"ui/request-display-mode",params:i},Y6,r)}sendSizeChanged(i){return this.notification({method:"ui/notifications/size-changed",params:i})}setupSizeChangedNotifications(){let i=!1,r=0,n=0,o=()=>{i||(i=!0,requestAnimationFrame(()=>{i=!1;let s=document.documentElement,u=s.style.width,l=s.style.height;s.style.width="fit-content",s.style.height="fit-content";let c=s.getBoundingClientRect();s.style.width=u,s.style.height=l;let d=window.innerWidth-s.clientWidth,f=Math.ceil(c.width+d),h=Math.ceil(c.height);(f!==r||h!==n)&&(r=f,n=h,this.sendSizeChanged({width:f,height:h}))}))};o();let a=new ResizeObserver(o);return a.observe(document.documentElement),a.observe(document.body),()=>a.disconnect()}async connect(i=new a0(window.parent,window.parent),r){var n;await super.connect(i);try{let o=await this.request({method:"ui/initialize",params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:s0}},nT,r);if(o===void 0)throw Error(`Server sent invalid initialize result: ${o}`);this._hostCapabilities=o.hostCapabilities,this._hostInfo=o.hostInfo,this._hostContext=o.hostContext,await this.notification({method:"ui/notifications/initialized"}),(n=this.options)!=null&&n.autoResize&&this.setupSizeChangedNotifications()}catch(o){throw this.close(),o}}}const sT={class:"action"},uT={class:"server-time"},lT={class:"action"},cT={class:"action"},dT={class:"action"},fT=e$({__name:"App",setup(e){function t(f){var _;const{text:h}=(_=f.content)==null?void 0:_.find($=>$.type==="text");return h}const i=xn(null),r=xn(),n=xn("Loading..."),o=xn("This is message text."),a=xn("This is log text."),s=xn("https://modelcontextprotocol.io/");Bb(()=>{var h,_,$;const f=r.value;f!=null&&f.theme&&iT(f.theme),(h=f==null?void 0:f.styles)!=null&&h.variables&&rT(f.styles.variables),($=(_=f==null?void 0:f.styles)==null?void 0:_.css)!=null&&$.fonts&&oT(f.styles.css.fonts)}),Md(async()=>{const f=new aT({name:"Get Time App",version:"1.0.0"});f.ontoolinput=h=>{console.info("Received tool call input:",h)},f.ontoolresult=h=>{console.info("Received tool call result:",h),n.value=t(h)},f.ontoolcancelled=h=>{console.info("Tool call cancelled:",h.reason)},f.onerror=console.error,f.onhostcontextchanged=h=>{r.value={...r.value,...h}},await f.connect(),i.value=f,r.value=f.getHostContext()});async function u(){if(i.value)try{console.info("Calling get-time tool...");const f=await i.value.callServerTool({name:"get-time",arguments:{}});console.info("get-time result:",f),n.value=t(f)}catch(f){console.error(f),n.value="[ERROR]"}}async function l(){if(!i.value)return;const f=AbortSignal.timeout(5e3);try{console.info("Sending message text to Host:",o.value);const{isError:h}=await i.value.sendMessage({role:"user",content:[{type:"text",text:o.value}]},{signal:f});console.info("Message",h?"rejected":"accepted")}catch(h){console.error("Message send error:",f.aborted?"timed out":h)}}async function c(){i.value&&(console.info("Sending log text to Host:",a.value),await i.value.sendLog({level:"info",data:a.value}))}async function d(){if(!i.value)return;console.info("Sending open link request to Host:",s.value);const{isError:f}=await i.value.openLink({url:s.value});console.info("Open link request",f?"rejected":"accepted")}return(f,h)=>{var _;return C$(),F$("main",{class:"main",style:Qr(((_=r.value)==null?void 0:_.safeAreaInsets)&&{paddingTop:r.value.safeAreaInsets.top+"px",paddingRight:r.value.safeAreaInsets.right+"px",paddingBottom:r.value.safeAreaInsets.bottom+"px",paddingLeft:r.value.safeAreaInsets.left+"px"})},[h[5]||(h[5]=Ne("p",{class:"notice"},"Watch activity in the DevTools console!",-1)),Ne("div",sT,[Ne("p",null,[h[3]||(h[3]=Ne("strong",null,"Server Time:",-1)),h[4]||(h[4]=sf()),Ne("code",uT,pd(n.value),1)]),Ne("button",{onClick:u},"Get Server Time")]),Ne("div",lT,[fa(Ne("textarea",{"onUpdate:modelValue":h[0]||(h[0]=$=>o.value=$)},null,512),[[$a,o.value]]),Ne("button",{onClick:l},"Send Message")]),Ne("div",cT,[fa(Ne("input",{type:"text","onUpdate:modelValue":h[1]||(h[1]=$=>a.value=$)},null,512),[[$a,a.value]]),Ne("button",{onClick:c},"Send Log")]),Ne("div",dT,[fa(Ne("input",{type:"url","onUpdate:modelValue":h[2]||(h[2]=$=>s.value=$)},null,512),[[$a,s.value]]),Ne("button",{onClick:d},"Open Link")])],4)}}}),mT=(e,t)=>{const i=e.__vccOpts||e;for(const[r,n]of t)i[r]=n;return i},pT=mT(fT,[["__scopeId","data-v-36e0b893"]]);Iy(pT).mount("#app");</script>
+  <style rel="stylesheet" crossorigin>:root{color-scheme:light dark;--color-text-primary: light-dark(#1f2937, #f3f4f6);--color-text-inverse: light-dark(#f3f4f6, #1f2937);--color-text-info: light-dark(#1d4ed8, #60a5fa);--color-background-primary: light-dark(#ffffff, #1a1a1a);--color-background-inverse: light-dark(#1a1a1a, #ffffff);--color-background-info: light-dark(#eff6ff, #1e3a5f);--color-ring-primary: light-dark(#3b82f6, #60a5fa);--border-radius-md: 6px;--border-width-regular: 1px;--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--font-weight-normal: 400;--font-weight-bold: 700;--font-text-md-size: 1rem;--font-text-md-line-height: 1.5;--font-heading-3xl-size: 2.25rem;--font-heading-3xl-line-height: 1.1;--font-heading-2xl-size: 1.875rem;--font-heading-2xl-line-height: 1.2;--font-heading-xl-size: 1.5rem;--font-heading-xl-line-height: 1.25;--font-heading-lg-size: 1.25rem;--font-heading-lg-line-height: 1.3;--font-heading-md-size: 1rem;--font-heading-md-line-height: 1.4;--font-heading-sm-size: .875rem;--font-heading-sm-line-height: 1.4;--spacing-unit: var(--font-text-md-size);--spacing-xs: calc(var(--spacing-unit) * .25);--spacing-sm: calc(var(--spacing-unit) * .5);--spacing-md: var(--spacing-unit);--spacing-lg: calc(var(--spacing-unit) * 1.5);--color-accent: #2563eb;--color-text-on-accent: #ffffff}*{box-sizing:border-box}html,body{font-family:var(--font-sans);font-size:var(--font-text-md-size);font-weight:var(--font-weight-normal);line-height:var(--font-text-md-line-height);color:var(--color-text-primary)}h1{font-size:var(--font-heading-3xl-size);line-height:var(--font-heading-3xl-line-height)}h2{font-size:var(--font-heading-2xl-size);line-height:var(--font-heading-2xl-line-height)}h3{font-size:var(--font-heading-xl-size);line-height:var(--font-heading-xl-line-height)}h4{font-size:var(--font-heading-lg-size);line-height:var(--font-heading-lg-line-height)}h5{font-size:var(--font-heading-md-size);line-height:var(--font-heading-md-line-height)}h6{font-size:var(--font-heading-sm-size);line-height:var(--font-heading-sm-line-height)}code,pre,kbd{font-family:var(--font-mono);font-size:1em}b,strong{font-weight:var(--font-weight-bold)}.main[data-v-36e0b893]{width:100%;max-width:425px;box-sizing:border-box}.main>*[data-v-36e0b893]{margin-top:0;margin-bottom:0}.main>*[data-v-36e0b893]+*{margin-top:var(--spacing-lg)}.action>*[data-v-36e0b893]{margin-top:0;margin-bottom:0;width:100%}.action>*[data-v-36e0b893]+*{margin-top:var(--spacing-sm)}.action>p[data-v-36e0b893]{display:flex;align-items:baseline;gap:var(--spacing-xs)}.action textarea[data-v-36e0b893],.action input[data-v-36e0b893]{display:block;font-family:inherit;font-size:inherit}.action button[data-v-36e0b893]{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--border-radius-md);color:var(--color-text-on-accent);font-weight:var(--font-weight-bold);background-color:var(--color-accent);cursor:pointer}.action button[data-v-36e0b893]:hover{background-color:color-mix(in srgb,var(--color-accent) 85%,var(--color-background-inverse))}.action button[data-v-36e0b893]:focus-visible{outline:calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);outline-offset:var(--border-width-regular)}.notice[data-v-36e0b893]{padding:var(--spacing-sm) var(--spacing-md);color:var(--color-text-info);text-align:center;font-style:italic;background-color:var(--color-background-info)}.notice[data-v-36e0b893]:before{content:"ℹ️ ";font-style:normal}.server-time[data-v-36e0b893]{flex:1;min-width:0}</style>
 </head>
 <body>
   <div id="app"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/server-basic-vue",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "description": "Basic MCP App Server example using Vue",
   "repository": {
@@ -18,7 +18,7 @@
     "watch": "cross-env INPUT=mcp-app.html vite build --watch",
     "serve": "bun --watch main.ts",
     "start": "cross-env NODE_ENV=development npm run build && npm run serve",
-    "dev": "cross-env NODE_ENV=development concurrently 'npm run watch' 'npm run serve'",
+    "dev": "cross-env NODE_ENV=development concurrently \"npm run watch\" \"npm run serve\"",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {