# Inspector V2 UX Specification ### [Brief](README.md) | [V1 Problems](v1_problems.md) | [V2 Scope](v2_scope.md) | [V2 Tech Stack](v2_tech_stack.md) | V2 UX ## Table of Contents * [Design Principles](#design-principles) * [Navigation Model](#navigation-model) * [Screen Flows](#screen-flows) * [Server List (Home)](#server-list-home) * [Server Connection Card](#server-connection-card) * [Server Settings Modal](#server-settings-modal) * [Import server.json Modal](#import-serverjson-modal) * [Server Info (Connected)](#server-info-connected) * [OAuth Debugger](#oauth-debugger) * [Feature Screens](#feature-screens) * [Tools Screen](#tools-screen) * [Resources Screen](#resources-screen) * [Prompts Screen](#prompts-screen) * [Logging Screen](#logging-screen) * [Tasks Screen](#tasks-screen) * [History Screen](#history-screen) * [Client Feature Handlers](#client-feature-handlers) * [Sampling Panel](#sampling-panel) * [Elicitation Handler](#elicitation-handler) * [Roots Configuration](#roots-configuration) * [Experimental Features Panel](#experimental-features-panel) * [Form Generation](#form-generation) * [Error Handling UX](#error-handling-ux) * [MCP Protocol Coverage](#mcp-protocol-coverage) ## Design Principles - **Single server connection** - No multiple concurrent connections (defer to plugins) - **MCPJam-inspired** - Use MCPJam Inspector as UX reference model - **Full-width content** - Maximize screen real estate for each section - **No sidebar** - Deferred until menu becomes cumbersome or extensions multiply - **Progressive disclosure** - Show relevant information at each connection stage - **Resizable panels** - Allow users to adjust panel sizes on feature screens ## Navigation Model ``` ┌─────────────────────────────────────────────────────────────────────────────────────────┐ │ [Server Name ▼] ● Connected (23ms) [Tools] [Resources] [Prompts] [Logs] [Tasks] [History] [Disconnect] │ ├─────────────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Full-width content │ │ │ └─────────────────────────────────────────────────────────────────────────────────────────┘ ``` - **Menu bar** displays server name, connection status with latency, and disconnect button when connected - **Top navigation** links to Tools, Resources, Prompts, Logs, Tasks, and History sections - **Connection indicator** shows latency from periodic `ping` requests - **No sidebar** - content areas use full width ## Screen Flows ### Server List (Home) Initial screen shown when no server is connected. Displays server cards in a responsive grid (1-2 columns). ``` ┌─────────────────────────────────────────────────────────┐ │ MCP Inspector │ │ [+ Add Server ▼] │ ├─────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────┐ ┌─────────────────────────┐ │ │ Server Card 1 │ │ Server Card 2 │ │ │ (see below) │ │ (see below) │ │ └─────────────────────────┘ └─────────────────────────┘ │ │ │ ┌─────────────────────────┐ │ │ │ Server Card 3 │ │ │ └─────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────┘ ``` **Add Server Options:** - **Add manually** - Opens form modal for manual configuration - **Import config** - Paste/upload internal `mcp.json` config - **Import server.json** - Import MCP Registry format ([Issue #922](https://github.com/modelcontextprotocol/inspector/issues/922)) **Functionality:** - List servers from `mcp.json` config file - Add/edit/delete servers via CRUD endpoints on proxy - Responsive grid layout (1 column mobile, 2 columns desktop) ### Server Connection Card Each server in the list is displayed as a card with connection controls and status. ``` ┌─────────────────────────────────────────────────────────────────┐ │ [Icon] Server Name v1.0.0 │ │ STDIO [●] Connected [Toggle]│ ├─────────────────────────────────────────────────────────────────┤ │ npx -y @modelcontextprotocol/server-everything [Copy]│ ├─────────────────────────────────────────────────────────────────┤ │ [Server Info] [Settings] [Clone] [Edit] [Remove]│ └─────────────────────────────────────────────────────────────────┘ ``` **With OAuth (shows OAuth Debug button):** ``` ┌─────────────────────────────────────────────────────────────────┐ │ [Icon] Server Name v1.0.0 │ │ HTTP (OAuth) [●] Connected [Toggle]│ ├─────────────────────────────────────────────────────────────────┤ │ https://api.example.com/mcp [Copy]│ ├─────────────────────────────────────────────────────────────────┤ │ [Server Info] [Settings] [OAuth Debug] [Clone] [Edit] [Remove]│ └─────────────────────────────────────────────────────────────────┘ ``` **With Error State:** ``` ┌─────────────────────────────────────────────────────────────────┐ │ [Icon] Server Name v1.0.0 │ │ HTTP [●] Failed (3)[Toggle]│ ├─────────────────────────────────────────────────────────────────┤ │ https://api.example.com/mcp [Copy]│ ├─────────────────────────────────────────────────────────────────┤ │ [Server Info] [Settings] [Clone] [Edit] [Remove]│ ├─────────────────────────────────────────────────────────────────┤ │ [!] Connection timeout after 20s │ │ [Show more] [View Troubleshooting Guide] │ └─────────────────────────────────────────────────────────────────┘ ``` **Status Indicators:** | Status | Indicator | Display | |--------|-----------|---------| | Connected | Green dot | "Connected" | | Connecting | Yellow pulsing dot | "Connecting..." | | Failed | Red dot | "Failed (N)" with retry count | | Disconnected | Gray dot | "Disconnected" | **Card Actions:** - **Toggle switch** - Connect/disconnect the server - **Copy** - Copy command/URL to clipboard - **Server Info** - Opens server info modal - **Settings** - Opens server settings modal (see below) - **OAuth Debug** - Opens OAuth debugger modal (visible when server uses OAuth) - **Clone** - Duplicates server config for creating variants - **Edit** - Opens edit server modal - **Remove** - Deletes server (with confirmation) ### Server Settings Modal Per-server configuration for connection behavior, headers, metadata, timeouts, and OAuth credentials. ``` +---------------------------------------------------------------------------+ | Server Settings: my-server [x] | +---------------------------------------------------------------------------+ | | | Connection Mode | | +-----------------------------------------------------------------------+ | | | Via Proxy v | | | +-----------------------------------------------------------------------+ | | Direct - Connect directly to server (requires CORS support) | | Via Proxy - Route through inspector proxy (required for STDIO) | | | | --------------------------------------------------------------------------- | | | Custom Headers | | +-----------------------------------------------------------------------+ | | | Authorization | Bearer sk-... [Remove]| | | | X-Custom-Header | custom-value [Remove]| | | +-----------------------------------------------------------------------+ | | [+ Add Header] | | | | --------------------------------------------------------------------------- | | | Request Metadata | | Metadata sent with every MCP request to this server. | | +-----------------------------------------------------------------------+ | | | session_id | abc123 [Remove]| | | +-----------------------------------------------------------------------+ | | [+ Add Metadata] | | | | --------------------------------------------------------------------------- | | | Timeouts | | +-----------------------------------+-----------------------------------+ | | | Connection Timeout | Request Timeout | | | | +-----------------------------+ | +-----------------------------+ | | | | | 30000 ms| | | 60000 ms| | | | | +-----------------------------+ | +-----------------------------+ | | | +-----------------------------------+-----------------------------------+ | | | | --------------------------------------------------------------------------- | | | OAuth Settings (for servers requiring authentication) | | +-----------------------------------------------------------------------+ | | | Client ID | | | | +-------------------------------------------------------------------+ | | | | | my-client-id | | | | | +-------------------------------------------------------------------+ | | | | | | | | Client Secret | | | | +-------------------------------------------------------------------+ | | | | | ******** [Show/Hide] | | | | | +-------------------------------------------------------------------+ | | | | | | | | Scopes | | | | +-------------------------------------------------------------------+ | | | | | read write profile | | | | | +-------------------------------------------------------------------+ | | | +-----------------------------------------------------------------------+ | | | | [Cancel] [Save Settings] | +---------------------------------------------------------------------------+ ``` **Connection Mode:** - **Direct** - Browser connects directly to server (requires server to have CORS headers) - **Via Proxy** - Route through inspector proxy (required for STDIO transport, useful for CORS-restricted servers) **Custom Headers:** - Key-value pairs sent with every HTTP request to this server - Useful for API keys, authorization tokens, custom routing **Request Metadata:** - Data included in `_meta` field of every MCP request - Per-server isolation (previously stored globally in localStorage) **Timeouts:** - **Connection Timeout** - Max time to establish connection (ms) - **Request Timeout** - Max time for individual requests (ms) **OAuth Settings:** - Pre-configure OAuth credentials for servers requiring authentication - Client ID and Client Secret for OAuth 2.0 flows - Scopes to request during authorization **Clone Functionality:** The [Clone] button on the server card creates a duplicate configuration, enabling: - Testing same server with different headers/metadata - Comparing behavior with different timeout settings - Maintaining separate OAuth credentials for different environments ### Import server.json Modal Support for importing MCP Registry `server.json` format for testing servers before publishing. ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ Import MCP Registry server.json [×] │ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ Paste server.json content or drag and drop a file: │ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ { │ │ │ │ "$schema": "https://static.modelcontextprotocol.io/schemas/...", │ │ │ │ "name": "io.github.user/my-server", │ │ │ │ "description": "A sample MCP server", │ │ │ │ "version": "1.0.0", │ │ │ │ "packages": [{ │ │ │ │ "registryType": "npm", │ │ │ │ "identifier": "my-mcp-server", │ │ │ │ "runtimeHint": "npx", │ │ │ │ "transport": { "type": "stdio" }, │ │ │ │ "environmentVariables": [ │ │ │ │ { "name": "API_KEY", "description": "API key", "required": true } │ │ │ │ ] │ │ │ │ }] │ │ │ │ } │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ [Browse...] [Clear]│ │ │ │ ─────────────────────────────────────────────────────────────────────────── │ │ │ │ Validation Results: │ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ ✓ Schema validation passed │ │ │ │ ✓ Package found: my-mcp-server (npm) │ │ │ │ ⚠ Environment variable API_KEY not set │ │ │ │ ℹ Runtime hint: npx │ │ │ │ ℹ Transport: stdio │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ─────────────────────────────────────────────────────────────────────────── │ │ │ │ Package Selection (if multiple packages): │ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ ● npm: my-mcp-server (npx) │ │ │ │ ○ pypi: my-mcp-server (uvx) │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ │ │ Environment Variables: │ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ API_KEY * Description: API key │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ sk-... │ │ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ OPTIONAL_VAR Description: Optional setting │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ │ │ Server Name (optional override): │ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ my-server │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ │ │ [Validate Again] [Cancel] [Add Server] │ └─────────────────────────────────────────────────────────────────────────────┘ ``` **Browse Button:** - Opens native file picker to select a local `server.json` file - Supports `.json` file filter - Note: Registry browser may be added as future enhancement or plugin **Schema Validation:** - Validate against official MCP Registry schema - Show validation errors inline with line numbers - Highlight issues in the JSON editor **Package Selection:** - If server.json contains multiple packages (npm + pypi), let user choose which to use - Display registry type, identifier, and runtime hint for each option **Environment Variables:** - Parse `environmentVariables` array from selected package - Generate form fields for each variable - Mark required variables with asterisk (*) - Show description as helper text - Validate required variables are filled before enabling "Add Server" **Value Verification:** - Check if package exists in registry (npm, pypi) - Verify environment variables are set (or prompt user) - For HTTP transport: optionally verify URL is reachable - For STDIO: verify command is available (e.g., `npx` installed) **Server Generation:** - Convert server.json to internal config format - Construct command from runtime hint + package identifier (e.g., `npx -y my-mcp-server`) - Apply environment variables - Set transport type from package.transport **server.json to Internal Config Mapping:** | server.json Field | Internal Config Field | |-------------------|----------------------| | `name` | `name` (display name) | | `packages[n].registryType` | Determines command prefix | | `packages[n].identifier` | Package name in command | | `packages[n].runtimeHint` | Command prefix (npx, uvx, etc.) | | `packages[n].transport.type` | `transportType` | | `packages[n].environmentVariables` | `env` object | **Use Cases:** 1. MCP authors testing server.json before publishing to registry 2. Developers importing servers from registry without manual setup 3. Configuration troubleshooting with detailed validation feedback ### Server Info (Connected) Shown as a modal or dedicated screen after successful connection. ``` ┌─────────────────────────────────────────────────────────┐ │ Server Information [×] │ ├─────────────────────────────────────────────────────────┤ │ │ │ Name: everything-server │ │ Version: 1.0.0 │ │ Protocol: 2025-11-25 │ │ Transport: stdio │ │ │ │ Server Capabilities Client Capabilities │ │ ───────────────────── ───────────────────── │ │ ✓ Tools (4) ✓ Sampling │ │ ✓ Resources (12) ✓ Elicitation │ │ ✓ Prompts (2) ✓ Roots (3) │ │ ✓ Logging ✓ Tasks │ │ ✓ Completions │ │ ✓ Tasks │ │ ✗ Experimental │ │ │ │ Server Instructions │ │ ─────────────────── │ │ "This server provides testing tools for MCP..." │ │ │ │ OAuth Details (if applicable) │ │ ───────────── │ │ Auth URL: https://auth.example.com │ │ Scopes: read, write │ │ Access Token: eyJhbG... [Copy] [Decode JWT ▼] │ │ │ └─────────────────────────────────────────────────────────┘ ``` **Functionality:** - Display server metadata, version, and negotiated protocol version - Show both **server** and **client** capabilities with counts - Server capabilities: Tools, Resources, Prompts, Logging, Completions, Tasks, Experimental - Client capabilities: Sampling, Elicitation, Roots, Tasks, Experimental - Display server instructions if provided - Show OAuth tokens with copy and JWT decode options ### OAuth Debugger Accessed via [OAuth Debug] button on the server card (visible when server uses OAuth). ``` +---------------------------------------------------------------------------+ | OAuth Debugger: my-server [x] | +---------------------------------------------------------------------------+ | | | OAuth Flow Status | | +-----------------------------------------------------------------------+ | | | Step 1: Authorization Request [Completed] | | | | +-------------------------------------------------------------------+ | | | | | GET https://auth.example.com/authorize | | | | | | ?client_id=my-client-id | | | | | | &redirect_uri=http://localhost:5173/callback | | | | | | &response_type=code | | | | | | &scope=read%20write | | | | | | &state=abc123 | | | | | +-------------------------------------------------------------------+ | | | | [Copy URL] | | | +-----------------------------------------------------------------------+ | | | | +-----------------------------------------------------------------------+ | | | Step 2: Authorization Code [Completed] | | | | +-------------------------------------------------------------------+ | | | | | code: xyz789... | | | | | | state: abc123 (verified) | | | | | +-------------------------------------------------------------------+ | | | +-----------------------------------------------------------------------+ | | | | +-----------------------------------------------------------------------+ | | | Step 3: Token Exchange [Completed] | | | | +-------------------------------------------------------------------+ | | | | | POST https://auth.example.com/token | | | | | | grant_type=authorization_code&code=xyz789... | | | | | +-------------------------------------------------------------------+ | | | +-----------------------------------------------------------------------+ | | | | +-----------------------------------------------------------------------+ | | | Step 4: Access Token [Active] | | | | +-------------------------------------------------------------------+ | | | | | access_token: eyJhbG... [Copy] [Decode] | | | | | | token_type: Bearer | | | | | | expires_in: 3600 (expires at 15:32:00) | | | | | | scope: read write | | | | | +-------------------------------------------------------------------+ | | | +-----------------------------------------------------------------------+ | | | | +-----------------------------------------------------------------------+ | | | Refresh Token | | | | +-------------------------------------------------------------------+ | | | | | refresh_token: def456... [Copy] | | | | | +-------------------------------------------------------------------+ | | | | [Test Refresh Now] | | | +-----------------------------------------------------------------------+ | | | | --------------------------------------------------------------------------- | | | Decoded Access Token (JWT) | | +-----------------------------------------------------------------------+ | | | Header: | | | | { "alg": "RS256", "typ": "JWT" } | | | | | | | | Payload: | | | | { | | | | "sub": "user123", | | | | "aud": "my-client-id", | | | | "scope": "read write", | | | | "exp": 1732990800, | | | | "iat": 1732987200 | | | | } | | | +-----------------------------------------------------------------------+ | | | | [Revoke Token] [Start New Flow] | +---------------------------------------------------------------------------+ ``` **Features:** - **Flow Visualization** - Step-by-step view of OAuth 2.0 flow - Authorization request URL with all parameters - Authorization code received - Token exchange request/response - Access token details - **Token Display:** - Access token with copy and decode options - Token type and expiration time - Refresh token (if available) - Decoded JWT payload and header - **Actions:** - [Test Refresh Now] - Manually trigger token refresh - [Revoke Token] - Revoke current access token - [Start New Flow] - Begin fresh OAuth flow - [Copy] - Copy tokens/URLs to clipboard - [Decode] - Show JWT contents **Use Cases:** 1. Debugging OAuth configuration issues 2. Verifying token claims and scopes 3. Testing token refresh behavior 4. Understanding the full OAuth handshake ### Feature Screens Each feature screen uses a **resizable panel layout** for flexibility. #### Tools Screen ``` ┌─────────────────┬──────────────────────────────────────┬────────────────────────┐ │ Tools (4) │ Parameters │ Results │ │ ● List updated │ (40%) │ (30%) │ │ [Refresh Now] │ ↔ resize │ │ ├─────────────────┼──────────────────────────────────────┼────────────────────────┤ │ │ │ │ │ [Search...] │ Tool: query_database │ Output: │ │ │ ─────────────────── │ │ │ ● query_db │ Annotations: │ ┌──────────────────┐ │ │ [user] │ Audience: user │ │ │ │ │ [read-only] │ Read-only: true │ │ [Image] │ │ │ │ Hints: "Useful for data queries" │ │ │ │ │ ○ echo │ │ └──────────────────┘ │ │ ○ add │ table * │ │ │ ○ longOp │ ┌────────────────────────────────┐ │ { │ │ [long-run] │ │ users ▼ │ │ "rows": 42, │ │ ○ dangerOp │ └────────────────────────────────┘ │ "data": [...] │ │ [destructive]│ Suggestions: users, orders, items │ } │ │ │ │ │ │ │ limit │ [Play Audio] │ │ │ ┌────────────────────────────────┐ │ │ │ │ │ 100 │ │ [Copy] [Clear] │ │ │ └────────────────────────────────┘ │ │ │ │ │ │ │ │ ████████████░░░░░░░░ 60% │ │ │ │ Processing step 3 of 5... │ │ │ │ │ │ │ │ [Execute Tool] [Cancel] │ │ └─────────────────┴──────────────────────────────────────┴────────────────────────┘ ``` **Features:** - **List Changed Indicator** - Shows when `notifications/tools/list_changed` received, with refresh button - Searchable/filterable tool list - **Tool Annotations** displayed: - Audience badge ([user], [assistant]) - Read-only indicator ([read-only]) - Destructive warning ([destructive]) - Long-running indicator ([long-run]) - Custom hints from server - **Autocomplete** for arguments via `completion/complete`: - Dropdown suggestions as user types - Supports enum and dynamic completion - Form generated from tool input schema - **Progress Indicator** from `notifications/progress`: - Progress bar with percentage - Step description if provided - Elapsed time display - Execute button with loading state - **Cancel button** sends `notifications/cancelled` - **Rich Result Display**: - JSON/text with syntax highlighting - Image preview for image content (base64) - Audio player for audio content (base64) - Resource links displayed as clickable references #### Resources Screen Uses an **accordion layout** for the left panel to organize Resources, Templates, and Subscriptions into collapsible sections. ``` ┌────────────────────────────────┬────────────────────────────────────────────┐ │ Resources │ Content Preview (65%) │ │ ● List updated [Refresh Now] │ │ ├────────────────────────────────┼────────────────────────────────────────────┤ │ │ │ │ [Search...] │ URI: file:///config.json │ │ │ MIME: application/json │ │ [v] Resources (12) │ ───────────────────────────── │ │ ├─────────────────────────────┐│ │ │ │ ● config.json ││ Annotations: │ │ │ [application] ││ Audience: application │ │ │ [priority: 0.9] ││ Priority: 0.9 (high) │ │ │ ││ │ │ │ ○ readme.md ││ { │ │ │ [user] ││ "name": "my-app", │ │ │ ││ "version": "1.0.0" │ │ │ ○ data.csv ││ } │ │ │ ○ schema.json ││ │ │ │ ... (8 more) ││ [Copy] [Subscribe] [Unsubscribe] │ │ └─────────────────────────────┘│ │ │ │ Last updated: 14:32:05 │ │ [>] Templates (2) │ │ │ │ │ │ [>] Subscriptions (1) │ │ │ │ │ └────────────────────────────────┴────────────────────────────────────────────┘ ``` **Expanded Templates Section:** ``` │ [v] Templates (2) │ │ ├─────────────────────────────┐│ │ │ ○ user/{id} ││ │ │ [id: ________ ] [Go] ││ │ │ ││ │ │ ○ file/{path} ││ │ │ [path: _______ ] [Go] ││ │ └─────────────────────────────┘│ ``` **Expanded Subscriptions Section:** ``` │ [v] Subscriptions (1) │ │ ├─────────────────────────────┐│ │ │ ● config.json ││ │ │ Last update: 14:32:05 ││ │ │ [Unsub] ││ │ └─────────────────────────────┘│ ``` **Accordion Behavior:** - Sections expand/collapse independently by clicking header - [v] indicates expanded section, [>] indicates collapsed - Empty sections show "(0)" count and collapse by default - If only Resources exist, that section expands by default - Search filters across all sections simultaneously **Features:** - **List Changed Indicator** - Shows when `notifications/resources/list_changed` received - **Accordion Layout** - Collapsible sections for Resources, Templates, Subscriptions - List resources with pagination within each section - **Resource Annotations** displayed: - Audience badge ([user], [application/assistant]) - Priority indicator ([high], [medium], [low]) - Resource templates with inline variable input and [Go] button - Subscribe/unsubscribe to resource updates - **Subscriptions Section** shows active subscriptions with last update time - Content viewer (JSON, text, binary preview) - Image preview for image resources - Audio player for audio resources #### Prompts Screen ``` ┌──────────────────────────────┬──────────────────────────────────────────┐ │ Prompts (2) │ Result (65%) │ │ ● List updated [Refresh Now] │ │ ├──────────────────────────────┼──────────────────────────────────────────┤ │ │ │ │ Select Prompt: │ Messages: │ │ ┌──────────────────────────┐ │ │ │ │ greeting_prompt ▼ │ │ [0] role: user │ │ └──────────────────────────┘ │ Content: │ │ │ "Hello, my name is John and I │ │ Description: │ like cats" │ │ "Generates a friendly │ │ │ greeting message" │ [Image: profile.png] │ │ │ │ │ Arguments: │ [1] role: assistant │ │ ───────────── │ "Nice to meet you, John! I see │ │ │ you're a cat lover..." │ │ name * │ │ │ ┌──────────────────────────┐ │ │ │ │ John ▼ │ │ │ │ └──────────────────────────┘ │ │ │ Suggestions: John, Jane │ │ │ │ │ │ interests │ │ │ ┌──────────────────────────┐ │ │ │ │ cats │ │ │ │ └──────────────────────────┘ │ │ │ │ │ │ [Get Prompt] │ [Copy JSON] [Copy Messages] │ └──────────────────────────────┴──────────────────────────────────────────┘ ``` **Features:** - **List Changed Indicator** - Shows when `notifications/prompts/list_changed` received - Dropdown to select from available prompts - Prompt description displayed - **Autocomplete** for arguments via `completion/complete` - Form generated from prompt arguments - Display prompt messages result with: - Role labels - Text content - Image content preview - Audio content player - Embedded resource display - Copy functionality (JSON or plain messages) #### Logging Screen ``` ┌───────────────────────┬─────────────────────────────────────────────────────┐ │ Log Controls (25%) │ Log Stream (75%) │ │ ↔ resize │ │ ├───────────────────────┼─────────────────────────────────────────────────────┤ │ │ │ │ Log Level: │ 14:32:01 [INFO] Server initialized │ │ ┌─────────────────┐ │ 14:32:02 [DEBUG] Loading tool: echo │ │ │ debug ▼ │ │ 14:32:02 [DEBUG] Loading tool: add │ │ └─────────────────┘ │ 14:32:03 [NOTICE] Configuration loaded │ │ │ 14:32:05 [WARNING] Rate limit approaching │ │ [Set Level] │ 14:32:10 [ERROR] Failed to fetch resource: 404 │ │ │ 14:32:15 [CRITICAL] Database connection lost │ │ Filter: │ 14:32:16 [ALERT] Service degraded │ │ ┌─────────────────┐ │ 14:32:20 [EMERGENCY] System failure │ │ │ │ │ │ │ └─────────────────┘ │ ───────────────────────────────────────────────── │ │ │ │ │ Show Levels: │ │ │ ☑ DEBUG │ │ │ ☑ INFO │ │ │ ☑ NOTICE │ │ │ ☑ WARNING │ │ │ ☑ ERROR │ │ │ ☑ CRITICAL │ │ │ ☑ ALERT │ │ │ ☑ EMERGENCY │ │ │ │ │ │ [Clear] [Export] │ [Auto-scroll ✓] [Copy All] │ └───────────────────────┴─────────────────────────────────────────────────────┘ ``` **Features:** - **Set Log Level** via `logging/setLevel` request - Options: debug, info, notice, warning, error, critical, alert, emergency - **Real-time Log Stream** from `notifications/message` - Filter by text search - Filter by log level checkboxes (all 8 RFC 5424 levels) - **Color-coded by severity** (8 distinct visual treatments): | Level | Color | Style | |-------|-------|-------| | DEBUG | Gray | Normal | | INFO | Blue | Normal | | NOTICE | Cyan | Normal | | WARNING | Yellow | Normal | | ERROR | Red | Normal | | CRITICAL | Red | Bold | | ALERT | Magenta | Bold | | EMERGENCY | White on Red | Background highlight | - Timestamp display - Logger name display (if provided) - Auto-scroll toggle - Export logs to file - Copy all logs to clipboard #### Tasks Screen ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ Tasks [Refresh] │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ Active Tasks (2) │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ Task: abc-123 Status: running ████████░░ 80% │ │ │ │ Method: tools/call │ │ │ │ Tool: longRunningOperation │ │ │ │ Started: 14:32:05 Elapsed: 45s │ │ │ │ Progress: Processing batch 4 of 5... │ │ │ │ [View Details] [Cancel] │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ Task: def-456 Status: waiting ░░░░░░░░░░ 0% │ │ │ │ Method: resources/read │ │ │ │ Resource: large-dataset │ │ │ │ Started: 14:33:00 Elapsed: 10s │ │ │ │ [View Details] [Cancel] │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ Completed Tasks (3) [Clear History] │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ Task: ghi-789 Status: completed ██████████ 100% │ │ │ │ Method: tools/call (processData) │ │ │ │ Completed: 14:31:30 Duration: 1m 30s │ │ │ │ [View Result] [Dismiss] │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────┘ ``` **Features:** - **Task List** via `tasks/list` request - **Real-time Status Updates** via `notifications/task/statusChanged` - **Progress Display** from `notifications/progress`: - Progress bar with percentage - Current step description - Total/current progress numbers - Task states: waiting, running, completed, failed, cancelled - **Cancel Tasks** via `tasks/cancel` - **View Results** via `tasks/result` - **View Task Details** via `tasks/get` - Task history with dismissal - Elapsed time / duration display #### History Screen A unified history of all MCP requests with replay capability. ``` ┌─────────────────────────────────────────────────────────────────────────────────────┐ │ History [Search...] [Filter ▼] [Clear All] │ ├─────────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────────────────────────────┐ │ │ │ * 14:35:22 tools/call echo [Replay] [Pin] │ │ │ │ Parameters: { "message": "Hello world" } │ │ │ │ Result: ✓ Success (45ms) │ │ │ │ ──────────────────────────────────────────────────────────────────────────── │ │ │ │ Response: { "content": [{ "type": "text", "text": "Hello world" }] } │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────────────────────┐ │ │ │ 14:34:15 resources/read file:///config.json [Replay] [Pin] │ │ │ │ Result: ✓ Success (120ms) │ │ │ │ ──────────────────────────────────────────────────────────────────────────── │ │ │ │ Content: { "name": "my-app", "version": "1.0.0" } (collapsed) [Expand] │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────────────────────┐ │ │ │ 14:33:45 prompts/get greeting_prompt [Replay] [Pin] │ │ │ │ Arguments: { "name": "John", "interests": "cats" } │ │ │ │ Result: ✓ Success (30ms) │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────────────────────┐ │ │ │ 14:32:10 tools/call query_database [Replay] [Pin] │ │ │ │ Parameters: { "table": "users", "limit": 10 } │ │ │ │ Result: ✗ Error (200ms) │ │ │ │ ──────────────────────────────────────────────────────────────────────────── │ │ │ │ Error: "Table 'users' not found" │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ │ │ │ │ Pinned Requests (2) │ │ ┌─────────────────────────────────────────────────────────────────────────────────┐ │ │ │ * "Test echo" tools/call echo 14:35:22 [Replay] [Unpin] │ │ │ * "Get config" resources/read file:///config.json 14:34:15 [Replay] [Unpin] │ │ └─────────────────────────────────────────────────────────────────────────────────┘ │ │ │ │ Showing 50 of 127 entries │ │ [Load More] │ └─────────────────────────────────────────────────────────────────────────────────────┘ ``` **Features:** - **Automatic Capture** - All MCP requests/responses logged automatically: - `tools/call` - Tool invocations - `resources/read` - Resource reads - `prompts/get` - Prompt retrievals - `sampling/createMessage` - Sampling requests/responses - `elicitation/create` - Elicitation requests/responses - **Request Details** displayed: - Timestamp - Method name - Target (tool name, resource URI, prompt name) - Parameters/arguments - Result status (success/error) - Response time - Response data (collapsible) - **Replay** - Re-execute any request with original parameters: - Opens relevant screen (Tools, Resources, Prompts) pre-filled - Option to modify parameters before replay - **Pin/Save** - Pin important requests for quick access: - Pinned requests persist across sessions - Optional custom label for pinned items - Pinned section at bottom for easy access - **Filter** by: - Method type (tools, resources, prompts, sampling, elicitation) - Status (success, error) - Time range - **Search** across method names, parameters, and responses - **Pagination** - Load more for large histories - **Clear** - Clear history (with confirmation) - **Export** - Export history as JSON for sharing/debugging **Replay Workflow:** 1. Click [Replay] on any history entry 2. Inspector navigates to the appropriate screen (Tools, Resources, Prompts) 3. Form is pre-filled with the original parameters 4. User can modify parameters or execute immediately 5. New request is added to history ### Client Feature Handlers These are modals/panels that appear when the server invokes client capabilities. #### Sampling Panel When server sends `sampling/createMessage` request: ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ Sampling Request [x] │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ The server is requesting an LLM completion. │ │ │ │ Messages: │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ [0] role: user │ │ │ │ "Analyze this data and provide insights about the trends..." │ │ │ │ │ │ │ │ [1] role: user │ │ │ │ [Image: data_chart.png - Click to preview] │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ Model Preferences: │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ Hints: ["claude-3-sonnet", "gpt-4"] │ │ │ │ Cost Priority: low (0.2) │ │ │ │ Speed Priority: medium (0.5) │ │ │ │ Intelligence Priority: high (0.8) │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ Parameters: │ │ Max Tokens: 1000 │ │ Stop Sequences: ["\n\n", "END"] │ │ Temperature: (not specified) │ │ │ │ Include Context: ☑ thisServer │ │ │ │ ───────────────────────────────────────────────────────────────────── │ │ │ │ Response (enter mock response or connect to LLM): │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ Based on the data chart, I can see several key trends: │ │ │ │ │ │ │ │ 1. Revenue has increased 25% quarter-over-quarter │ │ │ │ 2. User engagement peaks on Tuesdays... │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ Model Used: ________________ Stop Reason: [end_turn ▼] │ │ │ │ [Reject Request] [Send Response] │ └─────────────────────────────────────────────────────────────────────────┘ ``` **Features:** - Display full sampling request details: - Messages with text, image, and audio content - Model hints and preferences - Max tokens, stop sequences, temperature - Context inclusion settings - **Editable response field** for mock LLM testing - Model and stop reason fields for response - **Approve/Reject** with human-in-the-loop - Image/audio preview in messages - Option to integrate with real LLM (deferred to plugins) #### Elicitation Handler When server sends `elicitation/create` request: **Form Mode:** ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ Server Request: User Input Required [x] │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ "Please provide your database connection details to proceed." │ │ │ │ ───────────────────────────────────────────────────────────────────── │ │ │ │ Host * │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ localhost │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ Port * │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ 5432 │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ Database │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ myapp_production │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ SSL Mode │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ require ▼ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ WARNING: Only provide information you trust this server with. │ │ The server "{server_name}" is requesting this data. │ │ │ │ [Cancel] [Submit] │ └─────────────────────────────────────────────────────────────────────────┘ ``` **URL Mode:** ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ Server Request: External Action Required [x] │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ "Please complete the OAuth authorization in your browser." │ │ │ │ ───────────────────────────────────────────────────────────────────── │ │ │ │ The server is requesting you visit: │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ https://auth.example.com/oauth/authorize?client_id=abc&state=xyz │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ [Copy URL] │ │ │ │ [Open in Browser] │ │ │ │ ───────────────────────────────────────────────────────────────────── │ │ │ │ Status: Waiting for completion... ◌ (spinning) │ │ │ │ Elicitation ID: abc123-def456 │ │ │ │ WARNING: This will open an external URL. Verify the domain before proceeding. │ │ │ [Cancel] │ └─────────────────────────────────────────────────────────────────────────┘ ``` **Features:** - **Form Mode:** - Generate form from JSON Schema in request - Validate input before submission - Required field indicators - Security warning with server name - Submit returns response to server - **URL Mode:** - Display URL for user to visit - Copy URL button - Open in browser button - Waiting indicator until `notifications/elicitation/complete` received - Elicitation ID display - Domain verification warning - **Cancel** sends declined response #### Roots Configuration Accessed via Settings or Server Info panel: ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ Roots Configuration │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ Filesystem roots exposed to the connected server: │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ Name URI Actions │ │ │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ Project file:///home/user/myproject [Remove] │ │ │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ Documents file:///home/user/Documents [Remove] │ │ │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ Config file:///etc/myapp [Remove] │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ [+ Add Root] │ │ │ │ ───────────────────────────────────────────────────────────────────── │ │ │ │ Add New Root: │ │ │ │ Name: │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ Downloads │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ Path: │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ /home/user/Downloads │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ [Browse] [Add] │ │ │ │ WARNING: Roots give the server access to these directories. │ │ Only add directories you trust the server to access. │ │ │ └─────────────────────────────────────────────────────────────────────────┘ ``` **Features:** - List configured roots with name and URI - Add new roots: - Name field - Path field with browse button - Remove roots - **Sends `notifications/roots/listChanged`** when roots are modified - Responds to `roots/list` requests from server - Security warning about filesystem access #### Experimental Features Panel Accessed via Settings or dedicated nav item: ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ Experimental Features & Advanced Testing │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ WARNING: These features are non-standard and may change or be removed. │ │ │ │ Server Experimental Capabilities: │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ custom_analytics │ │ │ │ Description: Custom analytics tracking │ │ │ │ Methods: analytics/track, analytics/query │ │ │ │ [Test →] │ │ │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ streaming_v2 │ │ │ │ Description: Enhanced streaming support │ │ │ │ Methods: stream/start, stream/stop, stream/data │ │ │ │ [Test →] │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ Client Experimental Capabilities (advertised to server): │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ ☐ custom_analytics │ │ │ │ ☐ streaming_v2 │ │ │ │ ☐ Add custom capability... │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ ───────────────────────────────────────────────────────────────────── │ │ │ │ Advanced JSON-RPC Tester │ │ Send raw JSON-RPC requests to test ANY method (standard or experimental)│ │ │ │ Custom Headers (optional): │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ X-Debug-Mode | true [Remove] │ │ │ │ X-Request-ID | test-123 [Remove] │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ [+ Add Header] │ │ │ │ Request: │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ { │ │ │ │ "jsonrpc": "2.0", │ │ │ │ "id": 1, │ │ │ │ "method": "tools/call", │ │ │ │ "params": { │ │ │ │ "name": "echo", │ │ │ │ "arguments": { "message": "test" }, │ │ │ │ "_meta": { "progressToken": "abc123" } │ │ │ │ } │ │ │ │ } │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ [Load from History ▼] [Send Request] │ │ │ │ Response: │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ { │ │ │ │ "jsonrpc": "2.0", │ │ │ │ "id": 1, │ │ │ │ "result": { │ │ │ │ "content": [{ "type": "text", "text": "test" }] │ │ │ │ } │ │ │ │ } │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ [Copy] │ │ │ │ Request History: │ │ 14:32:05 - tools/call (success) 45ms │ │ 14:31:22 - resources/list (success) 12ms │ │ 14:30:01 - experimental/myMethod (error) 200ms │ │ │ └─────────────────────────────────────────────────────────────────────────┘ ``` **Features:** - Display server's experimental capabilities from initialization - Toggle client experimental capabilities to advertise - Add custom client experimental capabilities - **Advanced JSON-RPC Tester:** - Test ANY JSON-RPC method (not just experimental) - **Custom headers** for per-request header injection - JSON editor with syntax highlighting - Full control over `_meta` and `progressToken` fields - [Load from History] to replay previous requests - Response display with copy button - Request history with method, status, and duration - **Use Cases:** - Testing server behavior with invalid parameters - Debugging SDK message formatting (see full request/response) - Verifying `_meta`/`progressToken` handling - Testing experimental methods before SDK support - Comparing behavior across different servers ## Form Generation Forms are dynamically generated from JSON Schema for tool inputs, prompt arguments, and resource template variables. **Supported Field Types:** | JSON Schema Type | Form Control | |------------------|--------------| | `string` | Text input | | `string` (enum) | Select dropdown | | `string` (enum with `oneOf`) | Select dropdown with titles | | `array` (enum items with `anyOf`) | Multi-select dropdown or checkboxes | | `string` (format: uri) | URL input with validation | | `number` / `integer` | Number input | | `boolean` | Checkbox or toggle | | `array` | Dynamic list with add/remove | | `object` | Nested fieldset | **Enum Handling (Single and Multi-select):** The MCP 2025-11-25 spec supports titled enums using `oneOf`/`anyOf`: ```json // Single-select enum (oneOf) - renders as dropdown { "type": "string", "oneOf": [ { "const": "small", "title": "Small (1-10 items)" }, { "const": "medium", "title": "Medium (11-100 items)" }, { "const": "large", "title": "Large (100+ items)" } ] } // Multi-select enum (anyOf with array) - renders as multi-select or checkboxes { "type": "array", "items": { "type": "string", "anyOf": [ { "const": "read", "title": "Read access" }, { "const": "write", "title": "Write access" }, { "const": "delete", "title": "Delete access" } ] } } ``` | Pattern | Form Control | |---------|--------------| | `oneOf` with `const` values | Single-select dropdown with titles | | `anyOf` with `const` values in array items | Multi-select dropdown or checkboxes | | Legacy `enum` array | Single-select dropdown (no titles) | Note: For Shadcn, multi-select requires a third-party component (e.g., [shadcn-multi-select](https://shadcn-multi-select-component.vercel.app/)). Mantine has built-in `MultiSelect`. **Schema Features:** - `required` - Mark fields as required (*) - `default` - Pre-fill with default value - `description` - Show as helper text - `title` - Display label (used in `oneOf`/`anyOf` for enum titles) - `enum` - Render as select dropdown - `minimum` / `maximum` - Validation for numbers - `minLength` / `maxLength` - Validation for strings **Complex Schema Handling:** - `$ref` - Resolve references and render inline (when possible) - `anyOf` / `oneOf` (non-enum) - Show JSON editor as fallback - Toggle between form view and JSON editor for complex cases ## Error Handling UX ### Toast Notifications Transient errors and success messages shown as toasts: ``` ┌─────────────────────────────────────────────────────────┐ │ ✓ Connected to everything-server [×] │ └─────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────┐ │ [!] Tool execution failed: Invalid parameters [x] │ │ [View Documentation →] │ └─────────────────────────────────────────────────────────┘ ``` ### Inline Error Display Persistent errors shown inline in context (e.g., server cards): ``` ┌─────────────────────────────────────────────────────────┐ │ [!] Connection Error │ │ │ │ Failed to connect: ECONNREFUSED │ │ Retry attempt 3 of 5 │ │ │ │ [Show full error] [Troubleshooting Guide →] │ └─────────────────────────────────────────────────────────┘ ``` **Error Display Patterns:** - **Truncation** - Long errors truncated to ~100 chars with "Show more" - **Retry count** - Display retry attempts for connection errors - **Doc links** - Contextual links to troubleshooting documentation - **Expandable** - Click to show full error message/stack trace ### Connection States Clear visual feedback for connection lifecycle: | State | Visual | User Action | |-------|--------|-------------| | Disconnected | Gray status, toggle off | Click toggle to connect | | Connecting | Yellow pulsing, spinner | Wait or cancel | | Connected | Green status, toggle on | Click toggle to disconnect | | Failed | Red status, error shown | Retry or edit config | | OAuth Flow | Redirect indicator | Complete OAuth in browser | ## MCP Protocol Coverage This UX specification covers **100% of the MCP 2025-11-25 protocol specification**. ### Request Methods | Method | UX Location | |--------|-------------| | `initialize` | Connection flow (implicit) | | `ping` | Navigation bar latency display | | `tools/list` | Tools Screen | | `tools/call` | Tools Screen | | `resources/list` | Resources Screen | | `resources/templates/list` | Resources Screen (templates section) | | `resources/read` | Resources Screen | | `resources/subscribe` | Resources Screen | | `resources/unsubscribe` | Resources Screen | | `prompts/list` | Prompts Screen | | `prompts/get` | Prompts Screen | | `sampling/createMessage` | Sampling Panel | | `elicitation/create` | Elicitation Handler | | `completion/complete` | Tools/Prompts autocomplete | | `logging/setLevel` | Logging Screen | | `roots/list` | Roots Configuration | | `tasks/list` | Tasks Screen | | `tasks/get` | Tasks Screen | | `tasks/result` | Tasks Screen | | `tasks/cancel` | Tasks Screen | ### Notification Methods | Notification | UX Location | |--------------|-------------| | `notifications/initialized` | Connection flow (implicit) | | `notifications/progress` | Tools Screen progress bar, Tasks Screen | | `notifications/cancelled` | Tools Screen cancel button | | `notifications/message` | Logging Screen | | `notifications/tools/list_changed` | Tools Screen indicator | | `notifications/resources/list_changed` | Resources Screen indicator | | `notifications/prompts/list_changed` | Prompts Screen indicator | | `notifications/resources/updated` | Resources Screen subscriptions | | `notifications/roots/listChanged` | Roots Configuration | | `notifications/task/statusChanged` | Tasks Screen | | `notifications/elicitation/complete` | Elicitation Handler (URL mode) | ### Capabilities | Capability | Type | UX Location | |------------|------|-------------| | `tools` | Server | Tools Screen, Server Info | | `resources` | Server | Resources Screen, Server Info | | `prompts` | Server | Prompts Screen, Server Info | | `logging` | Server | Logging Screen, Server Info | | `completions` | Server | Forms autocomplete, Server Info | | `tasks` | Server | Tasks Screen, Server Info | | `experimental` | Server | Experimental Features Panel, Server Info | | `sampling` | Client | Sampling Panel, Server Info | | `elicitation` | Client | Elicitation Handler, Server Info | | `roots` | Client | Roots Configuration, Server Info | | `tasks` | Client | Tasks Screen, Server Info | | `experimental` | Client | Experimental Features Panel, Server Info | ### Content Types | Content Type | UX Location | |--------------|-------------| | Text | All screens (default) | | Image (base64) | Tools results, Prompts messages, Resources | | Audio (base64) | Tools results, Prompts messages, Resources | | Resource links | Tools results, embedded display | | Embedded resources | Prompts messages | ### Annotations | Annotation | UX Location | |------------|-------------| | Tool audience | Tools Screen badges | | Tool hints | Tools Screen description | | Tool readOnly | Tools Screen indicator | | Tool destructive | Tools Screen warning | | Resource audience | Resources Screen badges | | Resource priority | Resources Screen indicator |