add icons and website URL support to MCP server implementation (#459)

* add icons and website URL support to MCP server implementation

* update biome schema, import types from SDK directly, and allow all CORS origins

* cleanup

* beep boop

* Delete inspector-jesse

* Create clear-mice-serve.md

---------

Co-authored-by: Sunil Pai <spai@cloudflare.com>

Author: whoiskatrin

.changeset/clear-mice-serve.md

@@ -0,0 +1,5 @@
+---
+"agents": patch
+---
+
+update mcp sdk

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.2/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
   "assist": {
     "actions": {
       "source": {

examples/mcp-client/package.json

@@ -8,7 +8,7 @@
     "start": "vite dev"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.17.5",
+    "@modelcontextprotocol/sdk": "^1.18.0",
     "nanoid": "^5.1.5"
   },
   "keywords": []

examples/mcp-elicitation-demo/package.json

@@ -1,7 +1,7 @@
 {
   "author": "",
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.17.5",
+    "@modelcontextprotocol/sdk": "^1.18.0",
     "nanoid": "^5.1.5",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",

examples/mcp/package.json

@@ -4,7 +4,7 @@
     "mcp-remote": "^0.1.29"
   },
   "devDependencies": {
-    "@modelcontextprotocol/sdk": "^1.17.5"
+    "@modelcontextprotocol/sdk": "^1.18.0"
   },
   "keywords": [],
   "name": "@cloudflare/agents-mcp-example",

examples/mcp/src/server.ts

@@ -11,20 +11,33 @@ type State = { counter: number };
 export class MyMCP extends McpAgent<Env, State, {}> {
   server = new McpServer({
     name: "Demo",
-    version: "1.0.0"
+    version: "1.0.0",
+    // Add icons and website URL to the server implementation
+    icons: [
+      {
+        src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIj48cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIiByeT0iMiI+PC9yZWN0PjxsaW5lIHgxPSI5IiB5MT0iOSIgeDI9IjE1IiB5Mj0iOSI+PC9saW5lPjxsaW5lIHgxPSI5IiB5MT0iMTUiIHgyPSIxNSIgeTI9IjE1Ij48L2xpbmU+PC9zdmc+",
+        sizes: "any",
+        mimeType: "image/svg+xml"
+      }
+    ],
+    websiteUrl: "https://github.com/cloudflare/agents"
   });
 
   initialState: State = {
     counter: 1
   };
 
   async init() {
+    // Register resource - Note: Current MCP SDK doesn't support icons in resource method yet
+    // Icons are supported at the server implementation level
     this.server.resource("counter", "mcp://resource/counter", (uri) => {
       return {
         contents: [{ text: String(this.state.counter), uri: uri.href }]
       };
     });
 
+    // Register tool - Note: Current MCP SDK doesn't support icons in tool method yet
+    // Icons are supported at the server implementation level
     this.server.tool(
       "add",
       "Add to the counter, stored in the MCP",
@@ -42,6 +55,27 @@ export class MyMCP extends McpAgent<Env, State, {}> {
         };
       }
     );
+
+    // Note: To fully support icons on tools and resources, you would need to use
+    // the server's setRequestHandler method to manually implement the list handlers
+    // with icon metadata, as shown in the commented example below:
+
+    /*
+    this.server.server.setRequestHandler("tools/list", async () => {
+      return {
+        tools: [{
+          name: "add",
+          description: "Add to the counter, stored in the MCP",
+          inputSchema: { type: "object", properties: { a: { type: "number" } }, required: ["a"] },
+          icons: [{
+            src: "data:image/svg+xml;base64,...",
+            mimeType: "image/svg+xml",
+            sizes: "any"
+          }]
+        }]
+      };
+    });
+    */
   }
 
   onStateUpdate(state: State) {