@modelcontextprotocol/server-basic-vanillajs 1.0.1 → 1.1.0

package/dist/mcp-app.html

@@ -104,7 +104,7 @@ for compatibility with Zod schema generation. Both are functionally equivalent f
 - "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(Rt).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:ma.optional().describe("CSP configuration from resource metadata."),permissions:fa.optional().describe("Sandbox permissions from resource metadata.")})});var kI=m.object({method:m.literal("ui/notifications/tool-result"),params:An.describe("Standard MCP tool execution result.")}),qf=m.object({toolInfo:m.object({id:Nt.optional().describe("JSON-RPC id of the tools/call request."),tool:vr.describe("Tool definition including name, inputSchema, etc.")}).optional().describe("Metadata of the tool call that instantiated this App."),theme:sI.optional().describe("Current color theme preference."),styles:hI.optional().describe("Style configuration for theming the app."),displayMode:Zt.optional().describe("How the UI is currently displayed."),availableDisplayModes:m.array(Zt).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(),wI=m.object({method:m.literal("ui/notifications/host-context-changed"),params:qf.describe("Partial context update containing only changed fields.")});m.object({method:m.literal("ui/update-model-context"),params:m.object({content:m.array(Rt).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:Dn.describe("App identification (name and version)."),appCapabilities:$I.describe("Features and capabilities this app provides."),protocolVersion:m.string().describe("Protocol version this app supports.")})});var II=m.object({protocolVersion:m.string().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:Dn.describe("Host application identification and version."),hostCapabilities:_I.describe("Features and capabilities provided by the host."),hostContext:qf.describe("Rich context about the host environment.")}).passthrough();function SI(e){let t=document.documentElement;t.setAttribute("data-theme",e),t.style.colorScheme=e}function zI(e,t=document.documentElement){for(let[i,r]of Object.entries(e))r!==void 0&&t.style.setProperty(i,r)}function xI(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 OI extends zb{constructor(i,r={},n={autoResize:!0}){super(n);se(this,"_appInfo");se(this,"_capabilities");se(this,"options");se(this,"_hostCapabilities");se(this,"_hostInfo");se(this,"_hostContext");se(this,"sendOpenLink",this.openLink);this._appInfo=i,this._capabilities=r,this.options=n,this.setRequestHandler(Rn,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(mI,r=>i(r.params))}set ontoolinputpartial(i){this.setNotificationHandler(fI,r=>i(r.params))}set ontoolresult(i){this.setNotificationHandler(kI,r=>i(r.params))}set ontoolcancelled(i){this.setNotificationHandler(pI,r=>i(r.params))}set onhostcontextchanged(i){this.setNotificationHandler(wI,r=>{this._hostContext={...this._hostContext,...r.params},i(r.params)})}set onteardown(i){this.setRequestHandler(gI,(r,n)=>i(r.params,n))}set oncalltool(i){this.setRequestHandler(eu,(r,n)=>i(r.params,n))}set onlisttools(i){this.setRequestHandler(Qs,(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},An,r)}sendMessage(i,r){return this.request({method:"ui/message",params:i},dI,r)}sendLog(i){return this.notification({method:"notifications/message",params:i})}updateModelContext(i,r){return this.request({method:"ui/update-model-context",params:i},er,r)}openLink(i,r){return this.request({method:"ui/open-link",params:i},cI,r)}requestDisplayMode(i,r){return this.request({method:"ui/request-display-mode",params:i},bI,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 Ob(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:Zb}},II,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}}}function Vf(e){const{time:t}=e.structuredContent??{};return t??"[ERROR]"}const hn=document.querySelector(".main"),Mi=document.getElementById("server-time"),ZI=document.getElementById("get-time-btn"),ts=document.getElementById("message-text"),UI=document.getElementById("send-message-btn"),ns=document.getElementById("log-text"),NI=document.getElementById("send-log-btn"),is=document.getElementById("link-url"),TI=document.getElementById("open-link-btn");function Wf(e){var t,i,r;e.theme&&SI(e.theme),(t=e.styles)!=null&&t.variables&&zI(e.styles.variables),(r=(i=e.styles)==null?void 0:i.css)!=null&&r.fonts&&xI(e.styles.css.fonts),e.safeAreaInsets&&(hn.style.paddingTop=`${e.safeAreaInsets.top}px`,hn.style.paddingRight=`${e.safeAreaInsets.right}px`,hn.style.paddingBottom=`${e.safeAreaInsets.bottom}px`,hn.style.paddingLeft=`${e.safeAreaInsets.left}px`)}const we=new OI({name:"Get Time App",version:"1.0.0"});we.onteardown=async()=>(console.info("App is being torn down"),{});we.ontoolinput=e=>{console.info("Received tool call input:",e)};we.ontoolresult=e=>{console.info("Received tool call result:",e),Mi.textContent=Vf(e)};we.ontoolcancelled=e=>{console.info("Tool call cancelled:",e.reason)};we.onerror=console.error;we.onhostcontextchanged=Wf;ZI.addEventListener("click",async()=>{try{console.info("Calling get-time tool...");const e=await we.callServerTool({name:"get-time",arguments:{}});console.info("get-time result:",e),Mi.textContent=Vf(e)}catch(e){console.error(e),Mi.textContent="[ERROR]"}});UI.addEventListener("click",async()=>{const e=AbortSignal.timeout(5e3);try{console.info("Sending message text to Host:",ts.value);const{isError:t}=await we.sendMessage({role:"user",content:[{type:"text",text:ts.value}]},{signal:e});console.info("Message",t?"rejected":"accepted")}catch(t){console.error("Message send error:",e.aborted?"timed out":t)}});NI.addEventListener("click",async()=>{console.info("Sending log text to Host:",ns.value),await we.sendLog({level:"info",data:ns.value})});TI.addEventListener("click",async()=>{console.info("Sending open link request to Host:",is.value);const{isError:e}=await we.openLink({url:is.value});console.info("Open link request",e?"rejected":"accepted")});we.connect().then(()=>{const e=we.getHostContext();e&&Wf(e)});</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}#server-time{flex:1;min-width:0}.main{--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-notice-bg: #eff6ff;width:100%;max-width:425px;box-sizing:border-box}.main>*{margin-top:0;margin-bottom:0}.main>*+*{margin-top:1.5rem}.action>*{margin-top:0;margin-bottom:0;width:100%}.action>*+*{margin-top:.5rem}.action>p{display:flex;align-items:baseline;gap:.25em}.action textarea,.action input{font-family:inherit;font-size:inherit}.action button{padding:.5rem 1rem;border:none;border-radius:6px;color:#fff;font-weight:700;background-color:var(--color-primary);cursor:pointer}.action button:hover,.action button:focus-visible{background-color:var(--color-primary-hover)}.notice{padding:.5rem .75rem;color:var(--color-primary);text-align:center;font-style:italic;background-color:var(--color-notice-bg)}.notice:before{content:"ℹ️ ";font-style:normal}</style>
+  <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{width:100%;max-width:425px;box-sizing:border-box}.main>*{margin-top:0;margin-bottom:0}.main>*+*{margin-top:var(--spacing-lg)}.action>*{margin-top:0;margin-bottom:0;width:100%}.action>*+*{margin-top:var(--spacing-sm)}.action>p{display:flex;align-items:baseline;gap:var(--spacing-xs)}.action textarea,.action input{display:block;font-family:inherit;font-size:inherit}.action button{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:hover{background-color:color-mix(in srgb,var(--color-accent) 85%,var(--color-background-inverse))}.action button:focus-visible{outline:calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);outline-offset:var(--border-width-regular)}.notice{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:before{content:"ℹ️ ";font-style:normal}#server-time{flex:1;min-width:0}</style>
 </head>
 <body>
   <main class="main">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/server-basic-vanillajs",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "description": "Basic MCP App Server example using vanilla JavaScript",
   "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": {