From 5dd661513bbc641422a491646ccf0d1210336287 Mon Sep 17 00:00:00 2001
From: Eric Horacek <eric.horacek@openai.com>
Date: Sun, 13 Jul 2025 14:33:39 -0700
Subject: [PATCH 1/2] feat: Add _meta field support to tool UI

Shows [_meta](https://modelcontextprotocol.io/specification/2025-06-18/basic/index#meta) fields if present when listing and calling tools
---
 client/src/components/ToolResults.tsx         |  8 ++
 client/src/components/ToolsTab.tsx            | 33 ++++++++
 .../components/__tests__/ToolsTab.test.tsx    | 81 +++++++++++++++++++
 3 files changed, 122 insertions(+)

diff --git a/client/src/components/ToolResults.tsx b/client/src/components/ToolResults.tsx
index a3cecf55..6479b5fb 100644
--- a/client/src/components/ToolResults.tsx
+++ b/client/src/components/ToolResults.tsx
@@ -154,6 +154,14 @@ const ToolResults = ({
             </div>
           </div>
         )}
+        {structuredResult._meta && (
+          <div className="mb-4">
+            <h5 className="font-semibold mb-2 text-sm">Meta:</h5>
+            <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg">
+              <JsonView data={structuredResult._meta} />
+            </div>
+          </div>
+        )}
         {!structuredResult.structuredContent &&
           validationResult &&
           !validationResult.isValid && (
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 3c7db84e..fcd3ffbd 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -46,6 +46,7 @@ const ToolsTab = ({
   const [params, setParams] = useState<Record<string, unknown>>({});
   const [isToolRunning, setIsToolRunning] = useState(false);
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false);
+  const [isMetaExpanded, setIsMetaExpanded] = useState(false);
 
   useEffect(() => {
     const params = Object.entries(
@@ -245,6 +246,38 @@ const ToolsTab = ({
                     </div>
                   </div>
                 )}
+                {selectedTool && (selectedTool as any)._meta && (
+                  <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg">
+                    <div className="flex items-center justify-between mb-2">
+                      <h4 className="text-sm font-semibold">Meta:</h4>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => setIsMetaExpanded(!isMetaExpanded)}
+                        className="h-6 px-2"
+                      >
+                        {isMetaExpanded ? (
+                          <>
+                            <ChevronUp className="h-3 w-3 mr-1" />
+                            Collapse
+                          </>
+                        ) : (
+                          <>
+                            <ChevronDown className="h-3 w-3 mr-1" />
+                            Expand
+                          </>
+                        )}
+                      </Button>
+                    </div>
+                    <div
+                      className={`transition-all ${
+                        isMetaExpanded ? "" : "max-h-[8rem] overflow-y-auto"
+                      }`}
+                    >
+                      <JsonView data={(selectedTool as any)._meta} />
+                    </div>
+                  </div>
+                )}
                 <Button
                   onClick={async () => {
                     try {
diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx
index 9b399af9..bc75401d 100644
--- a/client/src/components/__tests__/ToolsTab.test.tsx
+++ b/client/src/components/__tests__/ToolsTab.test.tsx
@@ -5,6 +5,7 @@ import ToolsTab from "../ToolsTab";
 import { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { Tabs } from "@/components/ui/tabs";
 import { cacheToolOutputSchemas } from "@/utils/schemaUtils";
+import { within } from "@testing-library/react";
 
 describe("ToolsTab", () => {
   beforeEach(() => {
@@ -556,4 +557,84 @@ describe("ToolsTab", () => {
       expect(mockOnReadResource).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe("Meta Display", () => {
+    const toolWithMeta = {
+      name: "metaTool",
+      description: "Tool with meta",
+      inputSchema: {
+        type: "object" as const,
+        properties: {
+          foo: { type: "string" as const },
+        },
+      },
+      _meta: {
+        author: "tester",
+        version: 1,
+      },
+    } as unknown as Tool;
+
+    it("should display meta section when tool has _meta", () => {
+      renderToolsTab({
+        tools: [toolWithMeta],
+        selectedTool: toolWithMeta,
+      });
+
+      expect(screen.getByText("Meta:")).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: /expand/i }),
+      ).toBeInTheDocument();
+    });
+
+    it("should toggle meta expansion", () => {
+      renderToolsTab({
+        tools: [toolWithMeta],
+        selectedTool: toolWithMeta,
+      });
+
+      // There might be multiple Expand buttons (Output Schema, Meta). We need the one within Meta section
+      const metaHeading = screen.getByText("Meta:");
+      const metaContainer = metaHeading.closest("div");
+      expect(metaContainer).toBeTruthy();
+      const toggleButton = within(metaContainer as HTMLElement).getByRole(
+        "button",
+        { name: /expand/i },
+      );
+
+      // Expand Meta
+      fireEvent.click(toggleButton);
+      expect(
+        within(metaContainer as HTMLElement).getByRole("button", {
+          name: /collapse/i,
+        }),
+      ).toBeInTheDocument();
+
+      // Collapse Meta
+      fireEvent.click(toggleButton);
+      expect(
+        within(metaContainer as HTMLElement).getByRole("button", {
+          name: /expand/i,
+        }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("ToolResults Meta", () => {
+    it("should display meta information when present in toolResult", () => {
+      const resultWithMeta = {
+        content: [],
+        _meta: { info: "details", version: 2 },
+      };
+
+      renderToolsTab({
+        selectedTool: mockTools[0],
+        toolResult: resultWithMeta,
+      });
+
+      // Only ToolResults meta should be present since selectedTool has no _meta
+      expect(screen.getAllByText("Meta:")).toHaveLength(1);
+      expect(screen.getByText(/info/i)).toBeInTheDocument();
+      expect(screen.getByText(/version/i)).toBeInTheDocument();
+    });
+  });
 });

From 444c6b5704543f07c41e9158c5a203fabdae943d Mon Sep 17 00:00:00 2001
From: Eric Horacek <eric.horacek@openai.com>
Date: Sun, 13 Jul 2025 18:25:53 -0700
Subject: [PATCH 2/2] Fix lint

---
 client/src/components/ToolsTab.tsx | 66 ++++++++++++++++--------------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index fcd3ffbd..2eb682e5 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -19,6 +19,10 @@ import ListPane from "./ListPane";
 import JsonView from "./JsonView";
 import ToolResults from "./ToolResults";
 
+// Type guard to safely detect the optional _meta field without using `any`
+const hasMeta = (tool: Tool): tool is Tool & { _meta: unknown } =>
+  typeof (tool as { _meta?: unknown })._meta !== "undefined";
+
 const ToolsTab = ({
   tools,
   listTools,
@@ -246,38 +250,40 @@ const ToolsTab = ({
                     </div>
                   </div>
                 )}
-                {selectedTool && (selectedTool as any)._meta && (
-                  <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg">
-                    <div className="flex items-center justify-between mb-2">
-                      <h4 className="text-sm font-semibold">Meta:</h4>
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => setIsMetaExpanded(!isMetaExpanded)}
-                        className="h-6 px-2"
+                {selectedTool &&
+                  hasMeta(selectedTool) &&
+                  selectedTool._meta && (
+                    <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg">
+                      <div className="flex items-center justify-between mb-2">
+                        <h4 className="text-sm font-semibold">Meta:</h4>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => setIsMetaExpanded(!isMetaExpanded)}
+                          className="h-6 px-2"
+                        >
+                          {isMetaExpanded ? (
+                            <>
+                              <ChevronUp className="h-3 w-3 mr-1" />
+                              Collapse
+                            </>
+                          ) : (
+                            <>
+                              <ChevronDown className="h-3 w-3 mr-1" />
+                              Expand
+                            </>
+                          )}
+                        </Button>
+                      </div>
+                      <div
+                        className={`transition-all ${
+                          isMetaExpanded ? "" : "max-h-[8rem] overflow-y-auto"
+                        }`}
                       >
-                        {isMetaExpanded ? (
-                          <>
-                            <ChevronUp className="h-3 w-3 mr-1" />
-                            Collapse
-                          </>
-                        ) : (
-                          <>
-                            <ChevronDown className="h-3 w-3 mr-1" />
-                            Expand
-                          </>
-                        )}
-                      </Button>
+                        <JsonView data={selectedTool._meta} />
+                      </div>
                     </div>
-                    <div
-                      className={`transition-all ${
-                        isMetaExpanded ? "" : "max-h-[8rem] overflow-y-auto"
-                      }`}
-                    >
-                      <JsonView data={(selectedTool as any)._meta} />
-                    </div>
-                  </div>
-                )}
+                  )}
                 <Button
                   onClick={async () => {
                     try {