From 924e30fa6e61975a0c482d97e69df5913306af87 Mon Sep 17 00:00:00 2001
From: "Michael@WCD" <Michael@whitecapdata.com>
Date: Thu, 17 Sep 2026 23:08:12 -0400
Subject: [PATCH] fix(basic-host): display human-readable tool title

---
 examples/basic-host/src/index.tsx             |  3 +-
 .../basic-host/src/tool-display-name.test.ts  | 30 +++++++++++++++++++
 examples/basic-host/src/tool-display-name.ts  |  5 ++++
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 examples/basic-host/src/tool-display-name.test.ts
 create mode 100644 examples/basic-host/src/tool-display-name.ts

diff --git a/examples/basic-host/src/index.tsx b/examples/basic-host/src/index.tsx
index 00c0d52b2..78621860b 100644
--- a/examples/basic-host/src/index.tsx
+++ b/examples/basic-host/src/index.tsx
@@ -4,6 +4,7 @@ import { Component, type ErrorInfo, type ReactNode, StrictMode, Suspense, use, u
 import { createRoot } from "react-dom/client";
 import { callTool, connectToServer, hasAppHtml, initializeApp, loadSandboxProxy, log, newAppBridge, type ServerInfo, type ToolCallInfo, type ModelContext, type AppMessage } from "./implementation";
 import { getTheme, toggleTheme, onThemeChange, type Theme } from "./theme";
+import { getToolDisplayName } from "./tool-display-name";
 import styles from "./index.module.css";
 
 /**
@@ -341,7 +342,7 @@ function ToolCallInfoPanel({ toolCallInfo, isDestroying, onRequestClose, onClose
     >
       {/* Row 1: Header with server:tool name and close button */}
       <div className={styles.appHeader}>
-        <span>{toolCallInfo.serverInfo.name}:<span className={styles.toolName}>{toolCallInfo.tool.name}</span></span>
+        <span>{toolCallInfo.serverInfo.name}:<span className={styles.toolName}>{getToolDisplayName(toolCallInfo.tool)}</span></span>
         {onRequestClose && !isDestroying && (
           <button
             className={styles.closeButton}
diff --git a/examples/basic-host/src/tool-display-name.test.ts b/examples/basic-host/src/tool-display-name.test.ts
new file mode 100644
index 000000000..07d1bbec8
--- /dev/null
+++ b/examples/basic-host/src/tool-display-name.test.ts
@@ -0,0 +1,30 @@
+/// <reference types="bun" />
+
+import { describe, expect, test } from "bun:test";
+import type { Tool } from "@modelcontextprotocol/client";
+import { getToolDisplayName } from "./tool-display-name";
+
+const tool = (overrides: Partial<Tool> = {}): Tool => ({
+  name: "list_design_systems",
+  inputSchema: { type: "object" },
+  ...overrides,
+});
+
+describe("getToolDisplayName", () => {
+  test("prefers title over annotations.title and name", () => {
+    expect(getToolDisplayName(tool({
+      title: "Listing design systems",
+      annotations: { title: "Annotated title" },
+    }))).toBe("Listing design systems");
+  });
+
+  test("falls back to annotations.title", () => {
+    expect(getToolDisplayName(tool({
+      annotations: { title: "Annotated title" },
+    }))).toBe("Annotated title");
+  });
+
+  test("falls back to name", () => {
+    expect(getToolDisplayName(tool())).toBe("list_design_systems");
+  });
+});
diff --git a/examples/basic-host/src/tool-display-name.ts b/examples/basic-host/src/tool-display-name.ts
new file mode 100644
index 000000000..19e0727c1
--- /dev/null
+++ b/examples/basic-host/src/tool-display-name.ts
@@ -0,0 +1,5 @@
+import type { Tool } from "@modelcontextprotocol/client";
+
+export function getToolDisplayName(tool: Tool): string {
+  return tool.title ?? tool.annotations?.title ?? tool.name;
+}