inspector/client
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Basil Hosmer de84c472ce
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>
2025-05-28 15:24:40 -04:00
..
bin Merge branch 'main' into auto_open 2025-05-04 19:46:52 +09:00
public switch favicon 2024-11-19 14:13:19 -08:00
src feat: Add structured output support to browser UI 2025-05-28 15:24:40 -04:00
.gitignore init client 2024-10-07 16:28:05 -07:00
components.json run prettier 2024-11-04 21:29:59 +00:00
eslint.config.js don't disable rules-of-hooks 2025-03-29 01:22:35 +05:30
index.html switch favicon 2024-11-19 14:13:19 -08:00
jest.config.cjs Fix failing unit tests 2025-04-23 17:52:17 -04:00
package.json update TS sdk 2025-05-21 20:56:25 +01:00
postcss.config.js run prettier 2024-11-04 21:29:59 +00:00
README.md init client 2024-10-07 16:28:05 -07:00
tailwind.config.js Make tailwind config work on Windows 2024-11-26 16:51:50 +01:00
tsconfig.app.json Add jest-dom types 2025-03-23 13:22:31 -07:00
tsconfig.jest.json Handle edge case and add tests for functions 2025-02-27 06:40:01 -07:00
tsconfig.json init client 2024-10-07 16:28:05 -07:00
tsconfig.node.json init client 2024-10-07 16:28:05 -07:00
vite.config.ts Update Vite configuration to enable host access and fix proxy server URL to use the current hostname. 2025-03-20 22:04:59 +08:00

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

  • Configure the top-level parserOptions property like this:
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});
  • Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
  • Optionally add ...tseslint.configs.stylisticTypeChecked
  • Install eslint-plugin-react and update the config:
// eslint.config.js
import react from "eslint-plugin-react";

export default tseslint.config({
  // Set the react version
  settings: { react: { version: "18.3" } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs["jsx-runtime"].rules,
  },
});