Add basic-server-vanillajs example

Demonstrates MCP App SDK usage with vanilla JavaScript (no framework),
providing parity with the existing basic-server-react example.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

examples/basic-server-vanillajs/src/global.css

@@ -0,0 +1,12 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 1rem;
+}
+
+code {
+  font-size: 1em;
+}

examples/basic-server-vanillajs/src/mcp-app.css

@@ -0,0 +1,63 @@
+.main {
+  --color-primary: #2563eb;
+  --color-primary-hover: #1d4ed8;
+  --color-notice-bg: #eff6ff;
+
+  min-width: 425px;
+
+  > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  > * + * {
+    margin-top: 1.5rem;
+  }
+}
+
+.action {
+  > * {
+    margin-top: 0;
+    margin-bottom: 0;
+    width: 100%;
+  }
+
+  > * + * {
+    margin-top: 0.5rem;
+  }
+
+  /* Consistent font for form inputs (inherits from global.css) */
+  textarea,
+  input {
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  button {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 6px;
+    color: white;
+    font-weight: bold;
+    background-color: var(--color-primary);
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--color-primary-hover);
+    }
+  }
+}
+
+.notice {
+  padding: 0.5rem 0.75rem;
+  color: var(--color-primary);
+  text-align: center;
+  font-style: italic;
+  background-color: var(--color-notice-bg);
+
+  &::before {
+    content: "ℹ️ ";
+    font-style: normal;
+  }
+}

examples/basic-server-vanillajs/src/mcp-app.ts

@@ -0,0 +1,91 @@
+/**
+ * @file App that demonstrates a few features using MCP Apps SDK with vanilla JS.
+ */
+import { App, PostMessageTransport } from "@modelcontextprotocol/ext-apps";
+import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
+import "./global.css";
+import "./mcp-app.css";
+
+
+const log = {
+  info: console.log.bind(console, "[APP]"),
+  warn: console.warn.bind(console, "[APP]"),
+  error: console.error.bind(console, "[APP]"),
+};
+
+
+function extractTime(result: CallToolResult): string {
+  const { time } = (result.structuredContent as { time?: string }) ?? {};
+  return time ?? "[ERROR]";
+}
+
+
+// Get element references
+const serverTimeEl = document.getElementById("server-time")!;
+const getTimeBtn = document.getElementById("get-time-btn")!;
+const messageText = document.getElementById("message-text") as HTMLTextAreaElement;
+const sendMessageBtn = document.getElementById("send-message-btn")!;
+const logText = document.getElementById("log-text") as HTMLInputElement;
+const sendLogBtn = document.getElementById("send-log-btn")!;
+const linkUrl = document.getElementById("link-url") as HTMLInputElement;
+const openLinkBtn = document.getElementById("open-link-btn")!;
+
+
+// Create app instance
+const app = new App({ name: "Get Time App", version: "1.0.0" });
+
+
+// Register handlers BEFORE connecting
+app.ontoolinput = (params) => {
+  log.info("Received tool call input:", params);
+};
+
+app.ontoolresult = (result) => {
+  log.info("Received tool call result:", result);
+  serverTimeEl.textContent = extractTime(result);
+};
+
+app.onerror = log.error;
+
+
+// Add event listeners
+getTimeBtn.addEventListener("click", async () => {
+  try {
+    log.info("Calling get-time tool...");
+    const result = await app.callServerTool({ name: "get-time", arguments: {} });
+    log.info("get-time result:", result);
+    serverTimeEl.textContent = extractTime(result);
+  } catch (e) {
+    log.error(e);
+    serverTimeEl.textContent = "[ERROR]";
+  }
+});
+
+sendMessageBtn.addEventListener("click", async () => {
+  const signal = AbortSignal.timeout(5000);
+  try {
+    log.info("Sending message text to Host:", messageText.value);
+    const { isError } = await app.sendMessage(
+      { role: "user", content: [{ type: "text", text: messageText.value }] },
+      { signal },
+    );
+    log.info("Message", isError ? "rejected" : "accepted");
+  } catch (e) {
+    log.error("Message send error:", signal.aborted ? "timed out" : e);
+  }
+});
+
+sendLogBtn.addEventListener("click", async () => {
+  log.info("Sending log text to Host:", logText.value);
+  await app.sendLog({ level: "info", data: logText.value });
+});
+
+openLinkBtn.addEventListener("click", async () => {
+  log.info("Sending open link request to Host:", linkUrl.value);
+  const { isError } = await app.sendOpenLink({ url: linkUrl.value });
+  log.info("Open link request", isError ? "rejected" : "accepted");
+});
+
+
+// Connect to host
+app.connect(new PostMessageTransport(window.parent));