chore: add demo tool to example

Author: idosal

examples/server/package.json

@@ -12,6 +12,7 @@
 	},
 	"packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977",
 	"dependencies": {
+		"@mcp-ui/server": "^1.0.4",
 		"@modelcontextprotocol/sdk": "^1.11.1",
 		"@vis.gl/react-google-maps": "^1.5.2",
 		"agents": "^0.0.80",

examples/server/pnpm-lock.yaml

@@ -2,6 +2,7 @@ import { McpAgent } from "agents/mcp";
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { z } from "zod";
 import { createRequestHandler } from "react-router";
+import { createHtmlResource } from "@mcp-ui/server";
 
 declare module "react-router" {
 	export interface AppLoadContext {
@@ -26,6 +27,10 @@ export class MyMCP extends McpAgent {
 	});
 
 	async init() {
+		const requestUrl = this.props.requestUrl as string;
+		const url = new URL(requestUrl);
+		const requestHost = url.host;
+
 		// Simple addition tool
 		this.server.tool(
 			"add",
@@ -37,46 +42,34 @@ export class MyMCP extends McpAgent {
 
 		// Calculator tool with multiple operations
 		this.server.tool(
-			"calculate",
-			{
-				operation: z.enum(["add", "subtract", "multiply", "divide"]),
-				a: z.number(),
-				b: z.number(),
-			},
-			async ({ operation, a, b }) => {
-				let result: number;
-				switch (operation) {
-					case "add":
-						result = a + b;
-						break;
-					case "subtract":
-						result = a - b;
-						break;
-					case "multiply":
-						result = a * b;
-						break;
-					case "divide":
-						if (b === 0)
-							return {
-								content: [
-									{
-										type: "text",
-										text: "Error: Cannot divide by zero",
-									},
-								],
-							};
-						result = a / b;
-						break;
-				}
-				return { content: [{ type: "text", text: String(result) }] };
-			}
+			"show_task_status",
+			"Displays a UI for the user to see the status of tasks",
+			async () => {
+				const scheme = requestHost.includes('localhost') || requestHost.includes('127.0.0.1') ? 'http' : 'https';
+				
+				const pickerPageUrl = `${scheme}://${requestHost}/task`;
+		  
+				// Generate a unique URI for this specific invocation of the file picker UI.
+				// This URI identifies the resource block itself, not the content of the iframe.
+				const uniqueUiAppUri = `ui-app://task-manager/${Date.now()}`;
+				const resourceBlock = createHtmlResource({
+				  uri: uniqueUiAppUri,
+				  content: { type: "externalUrl", iframeUrl: pickerPageUrl },
+				  delivery: "text" // The URL itself is delivered as text
+				});
+		  
+				return {
+				  content: [resourceBlock]
+				};
+			  }
 		);
 	}
 }
 
 export default {
 	fetch(request: Request, env: Env, ctx: ExecutionContext) {
 		const url = new URL(request.url);
+		ctx.props.requestUrl = request.url;
 
 		if (url.pathname === "/sse" || url.pathname === "/sse/message") {
 			return MyMCP.serveSSE("/sse").fetch(request, env, ctx);