Restore educational comments in basic-server-* examples

PR #184 accidentally removed/reverted educational comments from
`basic-server-react` and `basic-server-vanillajs` that were established
in PR #182. This restores consistency with the other basic-server
examples (Vue, Svelte, Preact, Solid).

Changes:
- Add back the three-comment pattern explaining two-part registration
- Restore full tool description ("as an ISO 8601 string")
- Change vanillajs to return plain text instead of JSON (matching #182)
- Use local `resourceUri` variable instead of top-level constant

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

Author: jonathanhefner

examples/basic-server-react/server.ts

@@ -17,21 +17,27 @@ export function createServer(): McpServer {
     version: "1.0.0",
   });
 
+  // Two-part registration: tool + resource, tied together by the resource URI.
   const resourceUri = "ui://get-time/mcp-app.html";
 
+  // Register a tool with UI metadata. When the host calls this tool, it reads
+  // `_meta[RESOURCE_URI_META_KEY]` to know which resource to fetch and render
+  // as an interactive UI.
   registerAppTool(server,
     "get-time",
     {
       title: "Get Time",
-      description: "Returns the current server time.",
+      description: "Returns the current server time as an ISO 8601 string.",
       inputSchema: {},
       _meta: { [RESOURCE_URI_META_KEY]: resourceUri },
     },
     async (): Promise<CallToolResult> => {
-      return { content: [{ type: "text", text: new Date().toISOString() }] };
+      const time = new Date().toISOString();
+      return { content: [{ type: "text", text: time }] };
     },
   );
 
+  // Register the resource, which returns the bundled HTML/JavaScript for the UI.
   registerAppResource(server,
     resourceUri,
     resourceUri,

examples/basic-server-vanillajs/server.ts

@@ -7,49 +7,47 @@ import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE, RESOURCE_URI_
 import { startServer } from "./server-utils.js";
 
 const DIST_DIR = path.join(import.meta.dirname, "dist");
-const RESOURCE_URI = "ui://get-time/mcp-app.html";
 
 /**
  * Creates a new MCP server instance with tools and resources registered.
- * Each HTTP session needs its own server instance because McpServer only supports one transport.
  */
 export function createServer(): McpServer {
   const server = new McpServer({
     name: "Basic MCP App Server (Vanilla JS)",
     version: "1.0.0",
   });
 
-  // MCP Apps require two-part registration: a tool (what the LLM calls) and a
-  // resource (the UI it renders). The `_meta` field on the tool links to the
-  // resource URI, telling hosts which UI to display when the tool executes.
+  // Two-part registration: tool + resource, tied together by the resource URI.
+  const resourceUri = "ui://get-time/mcp-app.html";
+
+  // Register a tool with UI metadata. When the host calls this tool, it reads
+  // `_meta[RESOURCE_URI_META_KEY]` to know which resource to fetch and render
+  // as an interactive UI.
   registerAppTool(server,
     "get-time",
     {
       title: "Get Time",
       description: "Returns the current server time as an ISO 8601 string.",
       inputSchema: {},
-      _meta: { [RESOURCE_URI_META_KEY]: RESOURCE_URI },
+      _meta: { [RESOURCE_URI_META_KEY]: resourceUri },
     },
     async (): Promise<CallToolResult> => {
       const time = new Date().toISOString();
-      return {
-        content: [{ type: "text", text: JSON.stringify({ time }) }],
-      };
+      return { content: [{ type: "text", text: time }] };
     },
   );
 
+  // Register the resource, which returns the bundled HTML/JavaScript for the UI.
   registerAppResource(server,
-    RESOURCE_URI,
-    RESOURCE_URI,
+    resourceUri,
+    resourceUri,
     { mimeType: RESOURCE_MIME_TYPE },
     async (): Promise<ReadResourceResult> => {
       const html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8");
 
       return {
         contents: [
-          // Per the MCP App specification, "text/html;profile=mcp-app" signals
-          // to the Host that this resource is indeed for an MCP App UI.
-          { uri: RESOURCE_URI, mimeType: RESOURCE_MIME_TYPE, text: html },
+          { uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html },
         ],
       };
     },