Add MCP Apps hello world demo tool

Implements a simple MCP Apps tool that returns an interactive React UI:

- Add `mcp_apps_hello_world` tool with `_meta.ui/resourceUri` metadata
- Add resource handler for `ui://hello-world/app.html` returning HTML
- Create React app using `@modelcontextprotocol/ext-apps/react` hooks
- Add Vite build tooling to bundle React apps into single HTML files

The tool demonstrates the MCP Apps extension (SEP-1865) which allows
MCP servers to return interactive UI that runs in the client.

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

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

src/apps/hello-world/App.tsx

@@ -0,0 +1,126 @@
+/**
+ * Simple Hello World MCP App demonstrating the ext-apps SDK with React.
+ */
+import { useApp } from "@modelcontextprotocol/ext-apps/react";
+import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
+import { StrictMode, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+const IMPLEMENTATION = { name: "Hello World App", version: "1.0.0" };
+
+function HelloWorldApp() {
+  const [toolInput, setToolInput] = useState<Record<string, unknown> | null>(null);
+  const [toolResult, setToolResult] = useState<CallToolResult | null>(null);
+
+  const { app, error } = useApp({
+    appInfo: IMPLEMENTATION,
+    capabilities: {},
+    onAppCreated: (app) => {
+      app.ontoolinput = async (input) => {
+        console.log("[HelloWorldApp] Received tool input:", input);
+        setToolInput(input.arguments ?? {});
+      };
+
+      app.ontoolresult = async (result) => {
+        console.log("[HelloWorldApp] Received tool result:", result);
+        setToolResult(result);
+      };
+
+      app.onerror = (err) => console.error("[HelloWorldApp] Error:", err);
+    },
+  });
+
+  if (error) {
+    return (
+      <div style={styles.container}>
+        <h1 style={styles.error}>Error</h1>
+        <p>{error.message}</p>
+      </div>
+    );
+  }
+
+  if (!app) {
+    return (
+      <div style={styles.container}>
+        <p>Connecting to host...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.container}>
+      <h1 style={styles.title}>Hello World MCP App</h1>
+
+      <section style={styles.section}>
+        <h2>Tool Input</h2>
+        {toolInput ? (
+          <pre style={styles.code}>{JSON.stringify(toolInput, null, 2)}</pre>
+        ) : (
+          <p style={styles.muted}>Waiting for tool input...</p>
+        )}
+      </section>
+
+      <section style={styles.section}>
+        <h2>Tool Result</h2>
+        {toolResult ? (
+          <pre style={styles.code}>{JSON.stringify(toolResult, null, 2)}</pre>
+        ) : (
+          <p style={styles.muted}>Waiting for tool result...</p>
+        )}
+      </section>
+
+      <section style={styles.section}>
+        <h2>Actions</h2>
+        <button
+          style={styles.button}
+          onClick={() => app.sendMessage({
+            role: "user",
+            content: [{ type: "text", text: "Hello from MCP App!" }]
+          })}
+        >
+          Send Message to Chat
+        </button>
+      </section>
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    padding: "1rem",
+    maxWidth: "600px",
+  },
+  title: {
+    margin: "0 0 1rem 0",
+    fontSize: "1.5rem",
+  },
+  section: {
+    marginBottom: "1.5rem",
+  },
+  code: {
+    background: "#f4f4f4",
+    padding: "0.75rem",
+    borderRadius: "4px",
+    fontSize: "0.875rem",
+    overflow: "auto",
+  },
+  muted: {
+    color: "#666",
+    fontStyle: "italic",
+  },
+  button: {
+    padding: "0.5rem 1rem",
+    fontSize: "1rem",
+    cursor: "pointer",
+  },
+  error: {
+    color: "#c00",
+  },
+};
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <HelloWorldApp />
+  </StrictMode>
+);

src/apps/hello-world/mcp-app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hello World MCP App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./App.tsx"></script>
+  </body>
+</html>