Make vite work out-of-the-box for simple-host (#33)

Author: hybrist

examples/simple-host/index.html

@@ -0,0 +1 @@
+<meta http-equiv="refresh" content="0; url=/example-host-react.html">

examples/simple-host/package.json

@@ -4,9 +4,9 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "start": "NODE_ENV=development npm run build && concurrently 'npm run start:server'",
-    "start:server": "bun serve.ts",
-    "build": "concurrently 'INPUT=example-host-vanilla.html vite build' 'INPUT=example-host-react.html vite build' 'INPUT=sandbox.html vite build'"
+    "start": "vite dev",
+    "start:server": "vite preview",
+    "build": "vite build"
   },
   "dependencies": {
     "@modelcontextprotocol/ext-apps": "../..",

examples/simple-host/serve.ts

@@ -8,7 +8,11 @@ import { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { AppRenderer, AppRendererProps } from "../src/AppRenderer";
 import { AppBridge } from "../../../dist/src/app-bridge";
 
-const SANDBOX_PROXY_URL = new URL("http://localhost:8081/sandbox.html");
+// We use '[::1]' for the sandbox to ensure it's a different origin from 'localhost'.
+const SANDBOX_PROXY_URL = new URL(
+  "/sandbox.html",
+  location.href.replace("localhost:", "[::1]:"),
+);
 
 /**
  * Example React application demonstrating the AppRenderer component.

examples/simple-host/src/example-host-react.tsx

@@ -18,7 +18,11 @@ import {
   McpUiSizeChangeNotificationSchema,
 } from "@modelcontextprotocol/ext-apps";
 
-const SANDBOX_PROXY_URL = new URL("http://localhost:8081/sandbox.html");
+// We use '[::1]' for the sandbox to ensure it's a different origin from 'localhost'.
+const SANDBOX_PROXY_URL = new URL(
+  "/sandbox.html",
+  location.href.replace("localhost:", "[::1]:"),
+);
 
 window.addEventListener("load", async () => {
   const client = new Client({

examples/simple-host/src/example-host-vanilla.ts

@@ -1,24 +1,24 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { viteSingleFile } from "vite-plugin-singlefile";
 
-const INPUT = process.env.INPUT;
-if (!INPUT) {
-  throw new Error("INPUT environment variable is not set");
-}
-
-const isDevelopment = process.env.NODE_ENV === "development";
-
-export default defineConfig({
-  plugins: [react(), viteSingleFile()],
-  build: {
-    sourcemap: isDevelopment ? "inline" : undefined,
-    cssMinify: !isDevelopment,
-    minify: !isDevelopment,
-    rollupOptions: {
-      input: INPUT,
+export default defineConfig(({ mode }) => {
+  const isDevelopment = mode === "development";
+  return {
+    plugins: [react()],
+    build: {
+      sourcemap: isDevelopment ? "inline" : undefined,
+      cssMinify: !isDevelopment,
+      minify: !isDevelopment,
+      rollupOptions: {
+        input: [
+          "index.html",
+          "example-host-vanilla.html",
+          "example-host-react.html",
+          "sandbox.html",
+        ],
+      },
+      outDir: `dist`,
+      emptyOutDir: false,
     },
-    outDir: `dist`,
-    emptyOutDir: false,
-  },
+  };
 });