feat: Add structured output support to browser UI

This commit adds comprehensive support for structured output validation in tool calls,
following the MCP specification for tools with output schemas.

UI Changes:
1. Output Schema Display:
   - Added collapsible output schema section in ToolsTab
   - Shows output schemas after input fields, before the Run Tool button
   - Default view shows 8 lines with scrolling, expandable to full view
   - Expand/Collapse button with chevron icons for better UX

2. Structured Content Display:
   - New "Structured Content" section when tools return structuredContent
   - Shows structured data in a formatted JSON view
   - Validation status indicator (green checkmark for valid, red X for errors)
   - Detailed validation error messages when content doesn't match schema

3. Unstructured Content Labeling:
   - Added "Unstructured Content" heading when both structured and unstructured content exist
   - Only shows label when structured content is also present
   - Maintains clean UI when only unstructured content exists

4. Compatibility Checking:
   - Checks if unstructured content matches structured content (when output schema exists)
   - Shows compatibility status with blue (compatible) or yellow (incompatible) indicators
   - Detailed messages explain why content doesn't match
   - Only runs compatibility check for tools with output schemas

5. Validation Error Handling:
   - Shows error when tool with output schema doesn't return structured content
   - Clear error messages for schema validation failures
   - Maintains proper error state display

Technical Implementation:
- Added schema validation utilities using Ajv (same as SDK)
- Caches compiled validators for performance
- Validates on tool result display, not during the call
- Follows SDK's Client.callTool validation pattern

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Basil Hosmer 2025-05-27 16:39:39 -04:00
commit de84c472ce
No known key found for this signature in database

View file

@ -20,6 +20,7 @@ import {
import { OAuthTokensSchema } from "@modelcontextprotocol/sdk/shared/auth.js";
import { SESSION_KEYS, getServerSpecificKey } from "./lib/constants";
import { AuthDebuggerState } from "./lib/auth-types";
import { cacheToolOutputSchemas } from "./utils/schemaUtils";
import React, {
Suspense,
useCallback,
@ -473,6 +474,8 @@ const App = () => {
);
setTools(response.tools);
setNextToolCursor(response.nextCursor);
// Cache output schemas for validation
cacheToolOutputSchemas(response.tools);
};
const callTool = async (name: string, params: Record<string, unknown>) => {
@ -759,6 +762,8 @@ const App = () => {
clearTools={() => {
setTools([]);
setNextToolCursor(undefined);
// Clear cached output schemas
cacheToolOutputSchemas([]);
}}
callTool={async (name, params) => {
clearError("tools");