Skip to content

v2_screenshots.md

Latest commit

 

History

History
118 lines (69 loc) · 3.79 KB

v2_screenshots.md

File metadata and controls

118 lines (69 loc) · 3.79 KB

Inspector V2 UX - Visual Reference

Brief | V1 Problems | V2 Scope | V2 Tech Stack | V2 UX

Overview | Features | Handlers | Screenshots | Components

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

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

Server List

Add Server Dropdown

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

Add Server Dropdown

Server Modals

Server Settings Modal

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

Server Settings Modal

Server Info Modal

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

Server Info Modal

Feature Screens

Tools Screen

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

Tools Screen

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):

Apps Screen — Input Form

Running app state (from legacy v1 reference):

Apps Screen — Running App

Resources Screen

Accordion layout with Resources, Templates, and Subscriptions sections.

Resources Screen

Prompts Screen

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

Prompts Screen

Logging Screen

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

Logging Screen

Tasks Screen

Active and completed tasks with progress bars and status indicators.

Tasks Screen

History Screen

Request history with replay and pin functionality.

History Screen

Client Feature Handlers

Sampling Panel

Handler for sampling/createMessage requests with mock response input.

Sampling Panel

Elicitation Form

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

Elicitation Form

Roots Configuration

Configure filesystem roots exposed to the connected server.

Roots Configuration

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