Add basic-server-* examples for Vue, Svelte, Preact, and Solid (#141)

* Add basic-server-vue example

Demonstrates MCP App SDK usage with Vue 3, providing framework
parity alongside the existing React and vanilla JS examples.

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

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

* Add basic-server-svelte example

Demonstrates MCP App SDK usage with Svelte, providing parity
with the existing basic-server-react and basic-server-vue examples.

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

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

* Add basic-server-preact example

Demonstrates MCP App SDK usage with Preact, providing another
lightweight framework option alongside the existing React, Vue,
and Svelte examples.

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

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

* Add basic-server-solid example

Demonstrates MCP App SDK usage with Solid.js, providing another
reactive framework option alongside the existing React, Vue,
Svelte, and Preact examples.

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

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

* Add framework GitHub links to README

Link each framework name to its official GitHub repo in basic examples
list.

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

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

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

examples/basic-server-solid/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-solid/src/mcp-app.module.css

@@ -0,0 +1,65 @@
+.main {
+  --color-primary: #2563eb;
+  --color-primary-hover: #1d4ed8;
+  --color-notice-bg: #eff6ff;
+
+  width: 100%;
+  max-width: 425px;
+  box-sizing: border-box;
+
+  > * {
+    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-solid/src/mcp-app.tsx

@@ -0,0 +1,163 @@
+/**
+ * @file App that demonstrates a few features using MCP Apps SDK + Solid.
+ */
+import { App, type McpUiHostContext } from "@modelcontextprotocol/ext-apps";
+import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
+import { createEffect, createSignal, onMount, Show } from "solid-js";
+import { render } from "solid-js/web";
+import styles from "./mcp-app.module.css";
+
+
+const IMPLEMENTATION = { name: "Get Time App", version: "1.0.0" };
+
+
+const log = {
+  info: console.log.bind(console, "[APP]"),
+  warn: console.warn.bind(console, "[APP]"),
+  error: console.error.bind(console, "[APP]"),
+};
+
+
+function extractTime(callToolResult: CallToolResult): string {
+  const { text } = callToolResult.content?.find((c) => c.type === "text")!;
+  return text;
+}
+
+
+function GetTimeApp() {
+  const [app, setApp] = createSignal<App | null>(null);
+  const [error, setError] = createSignal<Error | null>(null);
+  const [toolResult, setToolResult] = createSignal<CallToolResult | null>(null);
+  const [hostContext, setHostContext] = createSignal<McpUiHostContext | undefined>();
+
+  onMount(async () => {
+    const instance = new App(IMPLEMENTATION);
+
+    instance.ontoolinput = async (input) => {
+      log.info("Received tool call input:", input);
+    };
+
+    instance.ontoolresult = async (result) => {
+      log.info("Received tool call result:", result);
+      setToolResult(result);
+    };
+
+    instance.onerror = log.error;
+
+    instance.onhostcontextchanged = (params) => {
+      setHostContext((prev) => ({ ...prev, ...params }));
+    };
+
+    try {
+      await instance.connect();
+      setApp(instance);
+      setHostContext(instance.getHostContext());
+    } catch (e) {
+      setError(e as Error);
+    }
+  });
+
+  return (
+    <Show when={!error()} fallback={<div><strong>ERROR:</strong> {error()!.message}</div>}>
+      <Show when={app()} fallback={<div>Connecting...</div>}>
+        <GetTimeAppInner app={app()!} toolResult={toolResult()} hostContext={hostContext()} />
+      </Show>
+    </Show>
+  );
+}
+
+
+interface GetTimeAppInnerProps {
+  app: App;
+  toolResult: CallToolResult | null;
+  hostContext?: McpUiHostContext;
+}
+function GetTimeAppInner(props: GetTimeAppInnerProps) {
+  const [serverTime, setServerTime] = createSignal("Loading...");
+  const [messageText, setMessageText] = createSignal("This is message text.");
+  const [logText, setLogText] = createSignal("This is log text.");
+  const [linkUrl, setLinkUrl] = createSignal("https://modelcontextprotocol.io/");
+
+  // Update serverTime when toolResult changes
+  createEffect(() => {
+    if (props.toolResult) {
+      setServerTime(extractTime(props.toolResult));
+    }
+  });
+
+  async function handleGetTime() {
+    try {
+      log.info("Calling get-time tool...");
+      const result = await props.app.callServerTool({ name: "get-time", arguments: {} });
+      log.info("get-time result:", result);
+      setServerTime(extractTime(result));
+    } catch (e) {
+      log.error(e);
+      setServerTime("[ERROR]");
+    }
+  }
+
+  async function handleSendMessage() {
+    const signal = AbortSignal.timeout(5000);
+    try {
+      log.info("Sending message text to Host:", messageText());
+      const { isError } = await props.app.sendMessage(
+        { role: "user", content: [{ type: "text", text: messageText() }] },
+        { signal },
+      );
+      log.info("Message", isError ? "rejected" : "accepted");
+    } catch (e) {
+      log.error("Message send error:", signal.aborted ? "timed out" : e);
+    }
+  }
+
+  async function handleSendLog() {
+    log.info("Sending log text to Host:", logText());
+    await props.app.sendLog({ level: "info", data: logText() });
+  }
+
+  async function handleOpenLink() {
+    log.info("Sending open link request to Host:", linkUrl());
+    const { isError } = await props.app.openLink({ url: linkUrl() });
+    log.info("Open link request", isError ? "rejected" : "accepted");
+  }
+
+  return (
+    <main
+      class={styles.main}
+      style={props.hostContext?.safeAreaInsets ? {
+        "padding-top": `${props.hostContext.safeAreaInsets.top}px`,
+        "padding-right": `${props.hostContext.safeAreaInsets.right}px`,
+        "padding-bottom": `${props.hostContext.safeAreaInsets.bottom}px`,
+        "padding-left": `${props.hostContext.safeAreaInsets.left}px`,
+      } : undefined}
+    >
+      <p class={styles.notice}>Watch activity in the DevTools console!</p>
+
+      <div class={styles.action}>
+        <p>
+          <strong>Server Time:</strong> <code id="server-time">{serverTime()}</code>
+        </p>
+        <button onClick={handleGetTime}>Get Server Time</button>
+      </div>
+
+      <div class={styles.action}>
+        <textarea value={messageText()} onInput={(e) => setMessageText(e.currentTarget.value)} />
+        <button onClick={handleSendMessage}>Send Message</button>
+      </div>
+
+      <div class={styles.action}>
+        <input type="text" value={logText()} onInput={(e) => setLogText(e.currentTarget.value)} />
+        <button onClick={handleSendLog}>Send Log</button>
+      </div>
+
+      <div class={styles.action}>
+        <input type="url" value={linkUrl()} onInput={(e) => setLinkUrl(e.currentTarget.value)} />
+        <button onClick={handleOpenLink}>Open Link</button>
+      </div>
+    </main>
+  );
+}
+
+
+render(() => <GetTimeApp />, document.getElementById("root")!);

examples/basic-server-solid/src/server-utils.ts

@@ -0,0 +1,110 @@
+/**
+ * Shared utilities for running MCP servers with various transports.
+ */
+
+import { createMcpExpressApp } from "@modelcontextprotocol/sdk/server/express.js";
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import cors from "cors";
+import type { Request, Response } from "express";
+
+/**
+ * Starts an MCP server using the appropriate transport based on command-line arguments.
+ *
+ * If `--stdio` is passed, uses stdio transport. Otherwise, uses Streamable HTTP transport.
+ *
+ * @param createServer - Factory function that creates a new McpServer instance.
+ */
+export async function startServer(
+  createServer: () => McpServer,
+): Promise<void> {
+  try {
+    if (process.argv.includes("--stdio")) {
+      await startStdioServer(createServer);
+    } else {
+      await startStreamableHttpServer(createServer);
+    }
+  } catch (e) {
+    console.error(e);
+    process.exit(1);
+  }
+}
+
+/**
+ * Starts an MCP server with stdio transport.
+ *
+ * @param createServer - Factory function that creates a new McpServer instance.
+ */
+export async function startStdioServer(
+  createServer: () => McpServer,
+): Promise<void> {
+  await createServer().connect(new StdioServerTransport());
+}
+
+/**
+ * Starts an MCP server with Streamable HTTP transport in stateless mode.
+ *
+ * Each request creates a fresh server and transport instance, which are
+ * closed when the response ends (no session tracking).
+ *
+ * The server listens on the port specified by the PORT environment variable,
+ * defaulting to 3001 if not set.
+ *
+ * @param createServer - Factory function that creates a new McpServer instance per request.
+ */
+export async function startStreamableHttpServer(
+  createServer: () => McpServer,
+): Promise<void> {
+  const port = parseInt(process.env.PORT ?? "3001", 10);
+
+  // Express app - bind to all interfaces for development/testing
+  const expressApp = createMcpExpressApp({ host: "0.0.0.0" });
+  expressApp.use(cors());
+
+  expressApp.all("/mcp", async (req: Request, res: Response) => {
+    // Create fresh server and transport for each request (stateless mode)
+    const server = createServer();
+    const transport = new StreamableHTTPServerTransport({
+      sessionIdGenerator: undefined,
+    });
+
+    // Clean up when response ends
+    res.on("close", () => {
+      transport.close().catch(() => {});
+      server.close().catch(() => {});
+    });
+
+    try {
+      await server.connect(transport);
+      await transport.handleRequest(req, res, req.body);
+    } catch (error) {
+      console.error("MCP error:", error);
+      if (!res.headersSent) {
+        res.status(500).json({
+          jsonrpc: "2.0",
+          error: { code: -32603, message: "Internal server error" },
+          id: null,
+        });
+      }
+    }
+  });
+
+  const { promise, resolve, reject } = Promise.withResolvers<void>();
+
+  const httpServer = expressApp.listen(port, (err?: Error) => {
+    if (err) return reject(err);
+    console.log(`Server listening on http://localhost:${port}/mcp`);
+    resolve();
+  });
+
+  const shutdown = () => {
+    console.log("\nShutting down...");
+    httpServer.close(() => process.exit(0));
+  };
+
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+
+  return promise;
+}

examples/basic-server-solid/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />