Merge pull request #1975 from modelcontextprotocol/v2/fix/1908-structured-content

fix: render a tool result's structuredContent in the Tools screen (#1908)

README.md

@@ -138,6 +138,7 @@ Each config below is a ready-made server for exercising one feature by hand. Loa
 | `modern-network-http.json`                | Network tab: `Mcp-*` headers + error taxonomy      | [#1628](https://github.com/modelcontextprotocol/inspector/issues/1628) |
 | `xmcpheader-modern-http.json`             | Tools tab: `x-mcp-header` mirroring and exclusions | [#1632](https://github.com/modelcontextprotocol/inspector/issues/1632) |
 | `pagination-http.json`                    | Page-by-page list fetching                         | [#1721](https://github.com/modelcontextprotocol/inspector/issues/1721) |
+| `structured-output-http.json`             | Tools tab: a result's `structuredContent` section  | [#1908](https://github.com/modelcontextprotocol/inspector/issues/1908) |
 | `advertised-extensions-http.json`         | Tool registration gated on advertised extensions   | [#1739](https://github.com/modelcontextprotocol/inspector/issues/1739) |
 | `logging-{legacy,modern}-http.json`       | Logging, both eras                                 | [#1629](https://github.com/modelcontextprotocol/inspector/issues/1629) |
 | `subscriptions-{legacy,modern}-http.json` | Resource subscriptions, both eras                  | [#1630](https://github.com/modelcontextprotocol/inspector/issues/1630) |
@@ -206,6 +207,12 @@ Under SDK v2 a `tools/call` rejecting with `-32602` renders as a distinct error
 
 Turn on **"Fetch Lists One Page at a Time"** (Server Settings — the `paginatedLists` setting, or the **Paginated** switch in a list sidebar) and the lists load page 1 only (4 items) with a **Load next page** control and an _N pages loaded_ status. Each click fetches the next 4 and appends them; Refresh resets to page 1. With the switch off (the default), the same lists auto-aggregate all three pages on connect.
 
+#### Structured output
+
+`structured-output-http.json` serves `list_items` (nested `structuredContent` — objects inside arrays inside an object, the shape from [#1908](https://github.com/modelcontextprotocol/inspector/issues/1908)), `get_temp` (a flat three-key payload), and `echo` (no `outputSchema` at all). It is a plain streamable-HTTP server — connect with the **default (legacy)** protocol era.
+
+Run `list_items` from the Tools tab: the result panel shows the `content[]` text summary ("Found 2 items.") **and** a collapsible **Structured Output** section rendering the schema-validated payload as pretty-printed, copyable JSON. That section is what v2 was dropping — a tool declaring an `outputSchema` returns its real data there, and the text block usually only summarizes it. Run `echo` to confirm the section is absent when a result carries no `structuredContent`.
+
 #### Advertised extensions
 
 `advertised-extensions-http.json` serves `echo` (always) and a `get_weather` tool **gated on the `io.modelcontextprotocol/tasks` extension** (`extensionGatedTools`): the tool is registered but starts disabled, and the server enables it on `notifications/initialized` only when the client declared that extension in its `capabilities.extensions`.

clients/web/src/components/groups/StructuredOutputPanel/StructuredOutputPanel.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { StructuredOutputPanel } from "./StructuredOutputPanel";
+
+const nested = {
+  items: [
+    { id: 1, name: "Item A", tags: ["foo", "bar"] },
+    { id: 2, name: "Item B", tags: ["baz"] },
+  ],
+  total: 2,
+};
+
+const flat = {
+  temperature: 25,
+  unit: "C",
+  city: "San Francisco",
+};
+
+// Long enough that the payload exceeds the section's max height and scrolls
+// within it rather than pushing the rest of the result panel down.
+const large = {
+  rows: Array.from({ length: 60 }, (_, index) => ({
+    id: index + 1,
+    label: `Row ${index + 1}`,
+    value: index * 7,
+  })),
+  total: 60,
+};
+
+const meta: Meta<typeof StructuredOutputPanel> = {
+  title: "Groups/StructuredOutputPanel",
+  component: StructuredOutputPanel,
+};
+
+export default meta;
+type Story = StoryObj<typeof StructuredOutputPanel>;
+
+export const Nested: Story = {
+  args: {
+    structuredContent: nested,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(
+      canvas.getByRole("heading", { name: "Structured Output" }),
+    ).toBeInTheDocument();
+    // The section starts expanded, so the payload is visible without a click.
+    // Asserted on the container's text: once the Prism grammar loads, the JSON
+    // is split across per-token elements, so no single node holds the value.
+    await waitFor(() =>
+      expect(canvasElement.textContent).toContain('"Item A"'),
+    );
+  },
+};
+
+export const Flat: Story = {
+  args: {
+    structuredContent: flat,
+  },
+};
+
+// A payload taller than the section's cap scrolls inside it rather than
+// pushing the rest of the result panel down. Asserted on the real geometry,
+// so dropping `mah` (or moving it to the wrong element) fails here.
+export const Large: Story = {
+  args: {
+    structuredContent: large,
+  },
+  play: async ({ canvasElement }) => {
+    await waitFor(() =>
+      expect(canvasElement.textContent).toContain('"Row 60"'),
+    );
+    const viewport = canvasElement.querySelector(
+      ".mantine-ScrollArea-viewport",
+    );
+    if (!(viewport instanceof HTMLElement)) {
+      throw new Error("scroll viewport not found");
+    }
+    // Capped: the visible height stays at the section's `mah`, well under the
+    // payload's natural height…
+    expect(viewport.clientHeight).toBeLessThanOrEqual(400);
+    // …and the overflow is reachable by scrolling rather than clipped away.
+    expect(viewport.scrollHeight).toBeGreaterThan(viewport.clientHeight);
+  },
+};
+
+// Collapsing hides the payload; expanding brings it back.
+export const Collapsed: Story = {
+  args: {
+    structuredContent: nested,
+    defaultExpanded: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const toggle = canvas.getByRole("button", {
+      name: "Expand structured output",
+    });
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    await userEvent.click(toggle);
+    await waitFor(() =>
+      expect(
+        canvas.getByRole("button", { name: "Collapse structured output" }),
+      ).toHaveAttribute("aria-expanded", "true"),
+    );
+    await waitFor(() =>
+      expect(canvasElement.textContent).toContain('"Item A"'),
+    );
+  },
+};

clients/web/src/components/groups/StructuredOutputPanel/StructuredOutputPanel.test.tsx

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { StructuredOutputPanel } from "./StructuredOutputPanel";
+
+// The real CodeHighlight dynamic-imports the Prism runtime and each grammar
+// (its own behavior is covered in CodeHighlight.test.tsx). Stub it so these
+// tests assert on the JSON handed to it, synchronously.
+vi.mock("../../elements/CodeHighlight/CodeHighlight", () => ({
+  CodeHighlight: ({ language, code }: { language: string; code: string }) => (
+    <pre data-testid="code-highlight" data-language={language}>
+      {code}
+    </pre>
+  ),
+}));
+
+const structuredContent = {
+  items: [
+    { id: 1, name: "Item A", tags: ["foo", "bar"] },
+    { id: 2, name: "Item B", tags: ["baz"] },
+  ],
+  total: 2,
+};
+
+describe("StructuredOutputPanel", () => {
+  it("renders a labeled section with the payload as pretty-printed JSON", () => {
+    renderWithMantine(
+      <StructuredOutputPanel structuredContent={structuredContent} />,
+    );
+    expect(
+      screen.getByRole("heading", { name: "Structured Output" }),
+    ).toBeInTheDocument();
+    const code = screen.getByTestId("code-highlight");
+    expect(code).toHaveAttribute("data-language", "json");
+    expect(code).toHaveTextContent(/"total": 2/);
+    // Nested values are inspectable field by field, not summarized away.
+    expect(code).toHaveTextContent(/"name": "Item A"/);
+    expect(code).toHaveTextContent(/"tags"/);
+  });
+
+  it("starts expanded by default", () => {
+    renderWithMantine(
+      <StructuredOutputPanel structuredContent={structuredContent} />,
+    );
+    expect(
+      screen.getByRole("button", { name: "Collapse structured output" }),
+    ).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("starts collapsed when defaultExpanded is false", () => {
+    renderWithMantine(
+      <StructuredOutputPanel
+        structuredContent={structuredContent}
+        defaultExpanded={false}
+      />,
+    );
+    expect(
+      screen.getByRole("button", { name: "Expand structured output" }),
+    ).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("toggles between expanded and collapsed", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <StructuredOutputPanel structuredContent={structuredContent} />,
+    );
+    await user.click(
+      screen.getByRole("button", { name: "Collapse structured output" }),
+    );
+    const toggle = screen.getByRole("button", {
+      name: "Expand structured output",
+    });
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    await user.click(toggle);
+    expect(
+      screen.getByRole("button", { name: "Collapse structured output" }),
+    ).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("renders an empty structured payload rather than nothing", () => {
+    renderWithMantine(<StructuredOutputPanel structuredContent={{}} />);
+    expect(
+      screen.getByRole("heading", { name: "Structured Output" }),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("code-highlight")).toHaveTextContent("{}");
+  });
+});

clients/web/src/components/groups/StructuredOutputPanel/StructuredOutputPanel.tsx

@@ -0,0 +1,102 @@
+import { useState } from "react";
+import {
+  Collapse,
+  Group,
+  Paper,
+  ScrollArea,
+  Stack,
+  Title,
+} from "@mantine/core";
+import type { CallToolResult } from "@modelcontextprotocol/client";
+import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
+import { ExpandToggle } from "../../elements/ExpandToggle/ExpandToggle";
+
+export interface StructuredOutputPanelProps {
+  /** The result's `structuredContent` — the tool's schema-validated payload. */
+  structuredContent: NonNullable<CallToolResult["structuredContent"]>;
+  /** Whether the section starts expanded. Defaults to `true`. */
+  defaultExpanded?: boolean;
+}
+
+// Bordered box matching the "Resource Links" group in the result panel, so the
+// two supplementary sections of a tool result read as siblings.
+const StructuredBox = Paper.withProps({
+  withBorder: true,
+  radius: "md",
+  p: "md",
+  variant: "panel",
+});
+
+const StructuredInner = Stack.withProps({
+  gap: "sm",
+});
+
+const HeaderRow = Group.withProps({
+  justify: "space-between",
+  wrap: "nowrap",
+});
+
+// h4 (size h5) for the same reason as the "Resource Links" heading: the panel's
+// "Results" title is h3, so a sub-box heading is h4 and the heading order never
+// skips a level (axe `heading-order`).
+const StructuredHeader = Title.withProps({
+  order: 4,
+  size: "h5",
+});
+
+// Caps the payload so a large structured result scrolls within the box instead
+// of pushing the content blocks out of view. `Autosize` sizes to the content up
+// to `mah`, so a small object still takes only what it needs.
+const StructuredScroll = ScrollArea.Autosize.withProps({
+  mah: 400,
+  type: "auto",
+  scrollbars: "y",
+  offsetScrollbars: true,
+});
+
+/**
+ * Collapsible "Structured Output" section for a tool result's
+ * `structuredContent` (#1908). A tool declaring an `outputSchema` returns its
+ * real payload here — the `content[]` blocks usually only summarize it — so v1
+ * rendered it as its own inspectable JSON section. Without this, the payload is
+ * dropped from the Tools screen entirely, with no hint it was ever returned.
+ *
+ * The JSON is pretty-printed and syntax-highlighted through {@link ContentViewer}
+ * (an `application/json` text block), so it is copyable and scannable field by
+ * field.
+ */
+export function StructuredOutputPanel({
+  structuredContent,
+  defaultExpanded = true,
+}: StructuredOutputPanelProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  return (
+    <StructuredBox>
+      <StructuredInner>
+        <HeaderRow>
+          <StructuredHeader>Structured Output</StructuredHeader>
+          <ExpandToggle
+            expanded={expanded}
+            onToggle={() => setExpanded((value) => !value)}
+            ariaLabel={`${expanded ? "Collapse" : "Expand"} structured output`}
+          />
+        </HeaderRow>
+        {/* Content stays mounted across a collapse (Mantine `Collapse`), so the
+            highlighted JSON isn't re-rendered from scratch on every toggle. */}
+        <Collapse in={expanded}>
+          <StructuredScroll>
+            <ContentViewer
+              block={{
+                type: "text",
+                text: JSON.stringify(structuredContent, null, 2),
+              }}
+              mimeType="application/json"
+              copyable
+            />
+          </StructuredScroll>
+        </Collapse>
+      </StructuredInner>
+    </StructuredBox>
+  );
+}

clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.stories.tsx

@@ -173,6 +173,24 @@ export const ResourceLinksWithLongText: Story = {
   decorators: fillHeightDecorators,
 };
 
+// A tool declaring an `outputSchema` returns its real payload in
+// `structuredContent`, which the text block only summarizes (#1908). It gets
+// its own collapsible "Structured Output" section below the content blocks.
+export const StructuredOutput: Story = {
+  args: {
+    result: {
+      content: [{ type: "text", text: "Found 2 items." }],
+      structuredContent: {
+        items: [
+          { id: 1, name: "Item A", tags: ["foo", "bar"] },
+          { id: 2, name: "Item B", tags: ["baz"] },
+        ],
+        total: 2,
+      },
+    },
+  },
+};
+
 export const ErrorResult: Story = {
   args: {
     result: {

clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.test.tsx

@@ -109,6 +109,78 @@ describe("ToolResultPanel", () => {
     expect(screen.getByText("divider")).toBeInTheDocument();
   });
 
+  describe("structuredContent (#1908)", () => {
+    const structured = { items: [{ id: 1, name: "Item A" }], total: 1 };
+
+    it("renders a Structured Output section alongside the content blocks", () => {
+      renderWithMantine(
+        <ToolResultPanel
+          result={{ ...okResult, structuredContent: structured }}
+          onClear={() => {}}
+        />,
+      );
+      expect(screen.getByText("ok")).toBeInTheDocument();
+      expect(
+        screen.getByRole("heading", { name: "Structured Output" }),
+      ).toBeInTheDocument();
+    });
+
+    it("omits the section when the result has no structuredContent", () => {
+      renderWithMantine(
+        <ToolResultPanel result={okResult} onClear={() => {}} />,
+      );
+      expect(
+        screen.queryByRole("heading", { name: "Structured Output" }),
+      ).not.toBeInTheDocument();
+    });
+
+    it("renders the section instead of the empty state when content is empty", () => {
+      renderWithMantine(
+        <ToolResultPanel
+          result={{ content: [], structuredContent: structured }}
+          onClear={() => {}}
+        />,
+      );
+      expect(screen.queryByText("No results yet")).not.toBeInTheDocument();
+      expect(
+        screen.getByRole("heading", { name: "Structured Output" }),
+      ).toBeInTheDocument();
+    });
+
+    it("renders the section below the alert on an error result", () => {
+      renderWithMantine(
+        <ToolResultPanel
+          result={{ ...errorResult, structuredContent: structured }}
+          onClear={() => {}}
+        />,
+      );
+      expect(screen.getByText("Tool Error")).toBeInTheDocument();
+      expect(
+        screen.getByRole("heading", { name: "Structured Output" }),
+      ).toBeInTheDocument();
+    });
+
+    it("renders the section alongside a Resource Links box", () => {
+      renderWithMantine(
+        <ToolResultPanel
+          result={{
+            content: [
+              { type: "resource_link", uri: "demo://r/1", name: "One" },
+            ],
+            structuredContent: structured,
+          }}
+          onClear={() => {}}
+        />,
+      );
+      expect(
+        screen.getByRole("heading", { name: "Resource Links" }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("heading", { name: "Structured Output" }),
+      ).toBeInTheDocument();
+    });
+  });
+
   it("invokes onClear when the close button is clicked", async () => {
     const user = userEvent.setup();
     const onClear = vi.fn();

clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx

@@ -14,6 +14,7 @@ import type {
 } from "@modelcontextprotocol/client";
 import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
 import { ResourceLink } from "../ResourceLink/ResourceLink";
+import { StructuredOutputPanel } from "../StructuredOutputPanel/StructuredOutputPanel";
 import { resultHasResourceLinks } from "./toolResultUtils";
 
 export interface ToolResultPanelProps {
@@ -217,6 +218,16 @@ export function ToolResultPanel({
   // available height (and scrolls inside). Plain text/image results keep the
   // scroll-within-card body so a short result doesn't reserve empty height.
   const hasLinks = resultHasResourceLinks(result);
+  // A tool with an `outputSchema` returns its real payload in
+  // `structuredContent`, which the `content[]` blocks typically only summarize
+  // (#1908). Render it as its own section — including alongside an error or an
+  // empty `content` array, so it is never silently dropped.
+  const structuredNode = result.structuredContent ? (
+    <StructuredOutputPanel
+      key="structured-output"
+      structuredContent={result.structuredContent}
+    />
+  ) : null;
 
   const segmentNodes = segments.map((segment) => {
     if (segment.kind === "links") {
@@ -254,22 +265,31 @@ export function ToolResultPanel({
       </HeaderRow>
       {result.isError ? (
         <ResultScroll>
-          <ErrorAlert>
-            {result.content
-              .filter((b) => b.type === "text")
-              .map((b) => b.text)
-              .join("\n")}
-          </ErrorAlert>
+          <ResultStack>
+            <ErrorAlert>
+              {result.content
+                .filter((b) => b.type === "text")
+                .map((b) => b.text)
+                .join("\n")}
+            </ErrorAlert>
+            {structuredNode}
+          </ResultStack>
         </ResultScroll>
-      ) : result.content.length === 0 ? (
+      ) : result.content.length === 0 && !structuredNode ? (
         <ResultScroll>
           <Text c="dimmed">No results yet</Text>
         </ResultScroll>
       ) : hasLinks ? (
-        <FillStack>{segmentNodes}</FillStack>
+        <FillStack>
+          {segmentNodes}
+          {structuredNode}
+        </FillStack>
       ) : (
         <ResultScroll>
-          <ResultStack>{segmentNodes}</ResultStack>
+          <ResultStack>
+            {segmentNodes}
+            {structuredNode}
+          </ResultStack>
         </ResultScroll>
       )}
     </PanelStack>

clients/web/src/test/integration/mcp/inspectorClient.test.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { resolve } from "node:path";
 import * as z from "zod/v4";
 import { InspectorClient } from "@inspector/core/mcp/inspectorClient.js";
 import {
@@ -45,6 +46,8 @@ import {
   createAddResourceTool,
   createAddToolTool,
   createAddPromptTool,
+  loadConfig,
+  resolveConfig,
 } from "@modelcontextprotocol/inspector-test-server";
 import type {
   MessageEntry,
@@ -1214,6 +1217,52 @@ describe("InspectorClient", () => {
     });
   });
 
+  describe("Structured output showcase config (#1908)", () => {
+    // Drives the shipped `structured-output-http.json` end to end — the file
+    // itself, the `list_items` preset registration, and the fixture's nested
+    // payload. A typo in any of the three fails here rather than leaving the
+    // documented showcase quietly broken.
+    const showcaseConfigPath = resolve(
+      import.meta.dirname,
+      "../../../../../../test-servers/configs/structured-output-http.json",
+    );
+
+    it("serves list_items with a summary block and a nested structuredContent", async () => {
+      server = createTestServerHttp(
+        resolveConfig(loadConfig(showcaseConfigPath)),
+      );
+      await server.start();
+
+      client = new InspectorClient(
+        { type: "streamable-http", url: server.url },
+        { environment: { transport: createTransportNode } },
+      );
+      await client.connect();
+
+      const tool = await getTool(client, "list_items");
+      expect(tool.outputSchema).toBeDefined();
+
+      const result = await client.callTool(tool, {});
+      expect(result.success).toBe(true);
+
+      // The text block only summarizes — the payload is the structured half.
+      const content = result.result!.content as Array<{
+        type: string;
+        text?: string;
+      }>;
+      expect(content[0].type).toBe("text");
+      expect(content[0].text).toBe("Found 2 items.");
+
+      expect(result.result!.structuredContent).toEqual({
+        items: [
+          { id: 1, name: "Item A", tags: ["foo", "bar"] },
+          { id: 2, name: "Item B", tags: ["baz"] },
+        ],
+        total: 2,
+      });
+    });
+  });
+
   describe("Default metadata (server-wide _meta)", () => {
     function metaOf(req: { message: unknown }): Record<string, unknown> {
       const params = (req.message as { params?: { _meta?: unknown } }).params;

test-servers/configs/structured-output-http.json

@@ -0,0 +1,15 @@
+{
+  "serverInfo": {
+    "name": "structured-output-showcase",
+    "version": "1.0.0"
+  },
+  "tools": [
+    { "preset": "list_items" },
+    { "preset": "get_temp" },
+    { "preset": "echo" }
+  ],
+  "transport": {
+    "type": "streamable-http",
+    "port": 6601
+  }
+}

test-servers/src/preset-registry.ts

@@ -34,6 +34,7 @@ import {
   createGetAnnotatedMessageTool,
   createGetTempTool,
   createGetTempExtraTool,
+  createListItemsTool,
   createAddResourceTool,
   createRemoveResourceTool,
   createAddToolTool,
@@ -158,6 +159,8 @@ function resolveToolPreset(
       return createGetTempTool();
     case "get_temp_extra":
       return createGetTempExtraTool();
+    case "list_items":
+      return createListItemsTool();
     case "add_resource":
       return createAddResourceTool();
     case "remove_resource":

test-servers/src/test-server-fixtures.ts

@@ -1048,6 +1048,48 @@ export function createGetTempTool(): ToolDefinition {
   };
 }
 
+/** Output schema for list_items: a nested list of items plus a total. */
+const ListItemsOutputSchema = z.object({
+  items: z
+    .array(
+      z.object({
+        id: z.number().describe("Item id"),
+        name: z.string().describe("Item name"),
+        tags: z.array(z.string()).describe("Item tags"),
+      }),
+    )
+    .describe("The items"),
+  total: z.number().describe("Number of items"),
+});
+
+/**
+ * Create a "list_items" tool returning a short `content` summary alongside a
+ * DEEPLY NESTED `structuredContent` (objects inside arrays inside an object) —
+ * the shape from #1908, where the structured payload carries everything the
+ * text block only summarizes. Exercises the Structured Output section of the
+ * Tools screen result panel, which `get_temp`'s flat three-key object does not.
+ */
+export function createListItemsTool(): ToolDefinition {
+  return {
+    name: "list_items",
+    description: "Returns a list of items with nested structured output",
+    inputSchema: {},
+    outputSchema: ListItemsOutputSchema,
+    handler: async () => {
+      const items = [
+        { id: 1, name: "Item A", tags: ["foo", "bar"] },
+        { id: 2, name: "Item B", tags: ["baz"] },
+      ];
+      return {
+        content: [
+          { type: "text" as const, text: `Found ${items.length} items.` },
+        ],
+        structuredContent: { items, total: items.length },
+      };
+    },
+  };
+}
+
 /**
  * Create a "get_temp_extra" tool that declares the same output schema as
  * get_temp but returns an EXTRA, undeclared property in structuredContent.