Inspector V2 UX - Visual Reference

Brief | V1 Problems | V2 Scope | V2 Tech Stack | V2 UX | V2 Auth | V2 New Spec Impact

Overview | Features | Handlers | Screenshots | Components | Interfaces

---

This document provides visual screenshots from the Shadcn UI prototype (v2/prototype/shadcn). These complement the ASCII wireframes in the UX specification documents.

Note: The V2 implementation will use Mantine (see V2 Tech Stack). These Shadcn screenshots remain as historical reference showing how the UX spec translates to a working UI. The Mantine implementation will have the same screens and functionality with slightly different visual styling.

Table of Contents

• Server List
• Server Modals
• Feature Screens
• Client Feature Handlers

---

Server List

The home screen showing server connection cards in a responsive grid.

Add Server Dropdown

Options for adding a new server (manual, import config, import server.json).

---

Server Modals

Server Settings Modal

Per-server configuration including connection mode, headers, metadata, timeouts, and OAuth settings.

Server Info Modal

Displays server/client capabilities, protocol version, and server instructions.

---

Feature Screens

Tools Screen

Tool list with annotations (user, read-only, destructive, long-running), parameter form, and results panel.

Apps Screen

The subset of tools that are MCP Apps — tools with _meta.ui.resourceUri. Two-panel layout: list of apps on the left, input form (before launch) or embedded app iframe (after launch) on the right.

Input form state (from legacy v1 reference):

Running app state (from legacy v1 reference):

Resources Screen

Accordion layout with Resources, Templates, and Subscriptions sections.

Prompts Screen

Prompt selection, argument form with autocomplete, and message result display.

Logging Screen

Real-time log stream with all 8 RFC 5424 log levels, color-coded by severity.

Tasks Screen

Active and completed tasks with progress bars and status indicators.

History Screen

Request history with replay and pin functionality.

---

Client Feature Handlers

Sampling Panel

Handler for sampling/createMessage requests with mock response input.

Elicitation Form

Form-based handler for elicitation/create requests with JSON Schema-generated fields.

Roots Configuration

Configure filesystem roots exposed to the connected server.

---

Notes

• All screenshots are from the v2/prototype/shadcn branch (historical reference)
• The actual V2 implementation will use Mantine (v2/prototype/mantine)
• Dark theme is supported throughout the application (toggle in header)
• Screenshots may not reflect the latest implementation - refer to wireframes for authoritative UX