modelcontextprotocol · olaservo · Dec 19, 2025 · Dec 15, 2025 · Dec 17, 2025 · Dec 17, 2025
diff --git a/specification/README.md b/specification/README.md
@@ -1,6 +1,7 @@
 # Inspector V2 Brief 
 
-### Brief | [V1 Problems](v1_problems.md) | [V2 Scope](v2_scope.md) | [V2 Tech Stack](v2_tech_stack.md) | [V2 UX](v2_ux.md)
+### Brief | [V1 Problems](v1_problems.md) | [V2 Scope](v2_scope.md) | [V2 Tech Stack](v2_tech_stack.md)
+### UX: [Overview](v2_ux.md) | [Features](v2_ux_features.md) | [Handlers](v2_ux_handlers.md) | [Screenshots](v2_screenshots.md)
 
 ## Table of Contents
   * [Motivation and Context](#motivation-and-context)

diff --git a/specification/screenshots/shadcn-addserver-dropdown.png b/specification/screenshots/shadcn-addserver-dropdown.png
diff --git a/specification/screenshots/shadcn-clientfeatures-dropdown.png b/specification/screenshots/shadcn-clientfeatures-dropdown.png
diff --git a/specification/screenshots/shadcn-elicitation-form.png b/specification/screenshots/shadcn-elicitation-form.png
diff --git a/specification/screenshots/shadcn-history.png b/specification/screenshots/shadcn-history.png
diff --git a/specification/screenshots/shadcn-logs.png b/specification/screenshots/shadcn-logs.png
diff --git a/specification/screenshots/shadcn-polish-resources.png b/specification/screenshots/shadcn-polish-resources.png
diff --git a/specification/screenshots/shadcn-polish-tools.png b/specification/screenshots/shadcn-polish-tools.png
diff --git a/specification/screenshots/shadcn-prompts.png b/specification/screenshots/shadcn-prompts.png
diff --git a/specification/screenshots/shadcn-resources.png b/specification/screenshots/shadcn-resources.png
diff --git a/specification/screenshots/shadcn-roots-config.png b/specification/screenshots/shadcn-roots-config.png
diff --git a/specification/screenshots/shadcn-sampling-panel.png b/specification/screenshots/shadcn-sampling-panel.png
diff --git a/specification/screenshots/shadcn-serverinfo-modal.png b/specification/screenshots/shadcn-serverinfo-modal.png
diff --git a/specification/screenshots/shadcn-serverlist.png b/specification/screenshots/shadcn-serverlist.png
diff --git a/specification/screenshots/shadcn-settings-modal.png b/specification/screenshots/shadcn-settings-modal.png
diff --git a/specification/screenshots/shadcn-tasks.png b/specification/screenshots/shadcn-tasks.png
diff --git a/specification/screenshots/shadcn-tools.png b/specification/screenshots/shadcn-tools.png
diff --git a/specification/v1_problems.md b/specification/v1_problems.md
@@ -1,6 +1,7 @@
 # Inspector V1 Problems
 
-### [Brief](README.md) | V1 Problems | [V2 Scope](v2_scope.md) | [V2 Tech Stack](v2_tech_stack.md) | [V2 UX](v2_ux.md)
+### [Brief](README.md) | V1 Problems | [V2 Scope](v2_scope.md) | [V2 Tech Stack](v2_tech_stack.md)
+### UX: [Overview](v2_ux.md) | [Features](v2_ux_features.md) | [Handlers](v2_ux_handlers.md) | [Screenshots](v2_screenshots.md)
 
 ## Table of Contents
   * [Monolithic components](#monolithic-components)

diff --git a/specification/v2_scope.md b/specification/v2_scope.md
@@ -1,6 +1,7 @@
 # Inspector V2 Scope
 
-### [Brief](README.md) | [V1 Problems](v1_problems.md) | V2 Scope | [V2 Tech Stack](v2_tech_stack.md) | [V2 UX](v2_ux.md)
+### [Brief](README.md) | [V1 Problems](v1_problems.md) | V2 Scope | [V2 Tech Stack](v2_tech_stack.md)
+### UX: [Overview](v2_ux.md) | [Features](v2_ux_features.md) | [Handlers](v2_ux_handlers.md) | [Screenshots](v2_screenshots.md)
 
 ## Table of Contents
   * [Protocol Features](#protocol-features)

diff --git a/specification/v2_screenshots.md b/specification/v2_screenshots.md
@@ -0,0 +1,111 @@
+# Inspector V2 UX - Visual Reference
+
+### [Brief](README.md) | [V1 Problems](v1_problems.md) | [V2 Scope](v2_scope.md) | [V2 Tech Stack](v2_tech_stack.md)
+### UX: [Overview](v2_ux.md) | [Features](v2_ux_features.md) | [Handlers](v2_ux_handlers.md) | Screenshots
+
+---
+
+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](v2_tech_stack.md#mantine-rationale)). 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-list)
+  * [Server Modals](#server-modals)
+  * [Feature Screens](#feature-screens)
+  * [Client Feature Handlers](#client-feature-handlers)
+
+---
+
+## Server List
+
+The home screen showing server connection cards in a responsive grid.
+
+![Server List](screenshots/shadcn-serverlist.png)
+
+### Add Server Dropdown
+Options for adding a new server (manual, import config, import server.json).
+
+![Add Server Dropdown](screenshots/shadcn-addserver-dropdown.png)
+
+---
+
+## Server Modals
+
+### Server Settings Modal
+Per-server configuration including connection mode, headers, metadata, timeouts, and OAuth settings.
+
+![Server Settings Modal](screenshots/shadcn-settings-modal.png)
+
+### Server Info Modal
+Displays server/client capabilities, protocol version, and server instructions.
+
+![Server Info Modal](screenshots/shadcn-serverinfo-modal.png)
+
+---
+
+## Feature Screens
+
+### Tools Screen
+Tool list with annotations (user, read-only, destructive, long-running), parameter form, and results panel.
+
+![Tools Screen](screenshots/shadcn-tools.png)
+
+### Resources Screen
+Accordion layout with Resources, Templates, and Subscriptions sections.
+
+![Resources Screen](screenshots/shadcn-resources.png)
+
+### Prompts Screen
+Prompt selection, argument form with autocomplete, and message result display.
+
+![Prompts Screen](screenshots/shadcn-prompts.png)
+
+### Logging Screen
+Real-time log stream with all 8 RFC 5424 log levels, color-coded by severity.
+
+![Logging Screen](screenshots/shadcn-logs.png)
+
+### Tasks Screen
+Active and completed tasks with progress bars and status indicators.
+
+![Tasks Screen](screenshots/shadcn-tasks.png)
+
+### History Screen
+
+Request history with replay and pin functionality.
+
+![History Screen](screenshots/shadcn-history.png)
+
+---
+
+## Client Feature Handlers
+
+### Test Client Features Dropdown
+Menu for testing client capabilities (Sampling, Elicitation, Roots).
+
+![Client Features Dropdown](screenshots/shadcn-clientfeatures-dropdown.png)
+
+### Sampling Panel
+Handler for `sampling/createMessage` requests with mock response input.
+
+![Sampling Panel](screenshots/shadcn-sampling-panel.png)
+
+### Elicitation Form
+Form-based handler for `elicitation/create` requests with JSON Schema-generated fields.
+
+![Elicitation Form](screenshots/shadcn-elicitation-form.png)
+
+### Roots Configuration
+Configure filesystem roots exposed to the connected server.
+
+![Roots Configuration](screenshots/shadcn-roots-config.png)
+
+---
+
+## 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
diff --git a/specification/v2_tech_stack.md b/specification/v2_tech_stack.md
@@ -1,6 +1,7 @@
 # Inspector V2 Tech Stack
 
-### [Brief](README.md) | [V1 Problems](v1_problems.md) | [V2 Scope](v2_scope.md) | V2 Tech Stack | [V2 UX](v2_ux.md)
+### [Brief](README.md) | [V1 Problems](v1_problems.md) | [V2 Scope](v2_scope.md) | V2 Tech Stack
+### UX: [Overview](v2_ux.md) | [Features](v2_ux_features.md) | [Handlers](v2_ux_handlers.md) | [Screenshots](v2_screenshots.md)
 
 ## Table of Contents
   * [Web Client](#web-client)
@@ -18,9 +19,55 @@
 * React
 
 ### Components and Theme
-Let's choose a feature-rich component set with easy theming control
-* -[ ] [Mantine](https://ui.mantine.dev/)
-* -[ ] [Shadcdn](https://ui.shadcn.com/)
+* -[x] [Mantine](https://ui.mantine.dev/)
+* -[ ] [Shadcn](https://ui.shadcn.com/)
+
+#### Mantine Rationale
+
+Mantine is recommended based on evaluation of both prototype implementations (`v2/prototype/shadcn` and `v2/prototype/mantine`) and group discussion.
+
+**Notes from Prototype Comparison:**
+
+Shadcn lacks layout components, requiring extensive Tailwind class management for containers, spacing, and alignment. This adds friction and cognitive load, based on our experiences with the current Inspector. Mantine's layout components (`Flex`, `Stack`, etc.) make the code more concise and easier to understand.
+
+Although the code may be less directly customizable, we don't expect  extensive theming or branding to be a priority for Inspector as a debugging tool.
+
+See [PR #980 discussion](https://github.com/modelcontextprotocol/inspector/pull/980#issuecomment-3667102518) for example code comparison.
+
+| Requirement | Mantine | Shadcn |
+|-------------|---------|--------|
+| Layout components | Yes - Flex, Stack, Group, Grid | No - Use Tailwind divs |
+| Out-of-box experience | Yes - Comprehensive | Partial - Assemble yourself |
+| Code verbosity | Concise JSX props | Verbose Tailwind classes |
+| Styling approach | Props + theme config | Tailwind utility classes |
+| Documentation | Extensive API docs | Component examples |
+
+**Benefits:**
+
+1. **Built-in Layout Components** - Mantine provides layout primitives as JSX components:
+   - `Flex`, `Stack`, `Group`, `Grid`, `Center`, `Container`
+   - No need to manage `div` elements with Tailwind classes
+   - More declarative, readable code
+
+2. **Reduced Class Management** - Compare the same UI element:
+   ```tsx
+   // Mantine - concise
+   <Alert icon={<IconAlertTriangle />} color="yellow" title="Warning">
+     {message}
+   </Alert>
+
+   // Shadcn + Tailwind - verbose class strings
+   <div className="flex items-start gap-3 rounded-lg border border-yellow-200
+     bg-yellow-50 p-4 text-yellow-800 dark:border-yellow-900 dark:bg-yellow-950
+     dark:text-yellow-200">
+     <IconAlertTriangle className="h-5 w-5 flex-shrink-0" />
+     <div className="flex-1"><p className="font-medium">Warning</p>{message}</div>
+   </div>
+   ```
+
+3. **Better Out-of-Box Experience**:
+   - Single install provides all components
+   - Consistent API across all components
 
 ## Proxy Server
 ### Language and Runtime