Web Interface Guide

The MCP Client Tester web interface provides a comprehensive, user-friendly way to monitor MCP protocol interactions, manage test sessions, and analyze client behavior. This guide covers all interface features and workflows.

Dashboard Overview

The main dashboard provides a real-time overview of your MCP testing environment:

Key Metrics Panel

Active Sessions

Current number of connected MCP clients
Session status indicators (Active, Connecting, Error, Completed)
Quick access to session details

Protocol Statistics

Total messages processed in the last hour/day
Request/response success rates
Average response times
Error frequency by type

Client Registry

Unique clients detected
Most commonly used client types
Recent client connections

System Health

Service status indicators
Resource usage metrics
Database connection status
Worker queue health

Recent Activity Feed

Real-time stream of MCP protocol activity:

Latest tool calls and their results
Resource access requests
Client connections/disconnections
Error events and warnings
Performance alerts

Session Management

Creating a New Session

Navigate to Sessions

Click the “Sessions” tab in the main navigation or the “New Session” button on the dashboard.
Configure Session Settings

Basic Configuration:
- Session Name: Descriptive name for identification
- Transport Protocol: Choose from STDIO, HTTP, SSE, or HTTP-streaming
- Description: Optional details about the test purpose
Advanced Configuration:
- Timeout Settings: Connection and request timeout values
- Logging Level: DEBUG, INFO, WARN, or ERROR
- Enable Progress Tracking: Monitor long-running operations
- Auto-detect Client: Automatically identify client capabilities
- Detailed Metrics: Collect performance and timing data
Create Session

Click “Create Session” to generate a new test session with unique connection details.

Connection Information

The interface displays connection details specific to your chosen transport:

STDIO Transport:

# Command to use in MCP client configuration
docker compose exec backend python -m app.mcp.stdio_server --session-id sess_123

HTTP Transport:

# Endpoint URL for HTTP clients
https://api.mcp-tester.local/mcp/session/sess_123

SSE Transport:

# Server-Sent Events endpoint
https://api.mcp-tester.local/mcp/sse/session/sess_123

Session Details View

Click on any session to view detailed information:

Session Information Panel

Session ID, name, and creation time
Current status and duration
Transport protocol and configuration
Connection endpoint details

Client Information Panel (populated after client connects)

Detected client type and version
User agent string and identification details
Supported capabilities matrix
Connection timing and performance metrics

Protocol Activity Panel

Real-time message log with timestamps
Request/response pairs with timing information
Error events and debugging information
Tool usage statistics and patterns

Protocol Monitoring

Real-time Message Viewer

The protocol monitoring interface shows all MCP messages in real-time:

Message Display Features:

Syntax Highlighting: JSON messages with color-coded syntax
Message Types: Visual indicators for requests, responses, and notifications
Timestamps: Precise timing for each message
Direction Indicators: Clear arrows showing message flow
Expandable Content: Click to expand/collapse message details

Message Filtering:

By Type: Show only requests, responses, or notifications
By Method: Filter to specific MCP methods (tools/list, resources/read, etc.)
By Time Range: Focus on specific time periods
By Status: Show only successful messages or errors
By Client: In multi-client sessions, filter by specific client

Example Message Display:

14:32:15.123REQUEST

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "search_database",
    "arguments": {
      "query": "user preferences",
      "limit": 10
    }
  }
}

14:32:15.187RESPONSE64ms

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "content": [
      {
        "type": "text",
        "text": "Found 3 matching user preference records..."
      }
    ]
  }
}

Performance Analytics

Response Time Charts

Real-time line charts showing response time trends
Histogram views for response time distribution
Percentile analysis (p50, p95, p99)
Comparison across different time periods

Throughput Monitoring

Messages per second over time
Request/response ratios
Peak load identification
Capacity planning insights

Error Analysis

Error rate trends
Error type categorization
Most frequent error messages
Error correlation with performance

Tool Testing Interface

Interactive Tool Explorer

Tool Discovery

Automatic tool discovery when clients connect
Visual tool registry with descriptions
Parameter schema visualization
Usage examples and templates

Tool Execution

Select Tool: Choose from the discovered tool list
Configure Parameters: Interactive form based on tool schema
Execute: Send tool call and monitor response
Analyze Results: View response data with formatting options

Parameter Validation

Real-time parameter validation
Schema-based input assistance
Error highlighting for invalid inputs
Auto-completion for known values

Example Tool Interface:

Tool: search_database
Description: Search for records in the database

Parameters:
┌─────────────────────────────────────────────┐
│ query* (string)                             │
│ ┌─────────────────────────────────────────┐ │
│ │ user preferences                        │ │
│ └─────────────────────────────────────────┘ │
│                                             │
│ limit (integer, default: 10)               │
│ ┌─────────────────────────────────────────┐ │
│ │ 10                                      │ │
│ └─────────────────────────────────────────┘ │
│                                             │
│ [ Execute Tool ]                            │
└─────────────────────────────────────────────┘

Tool Testing Scenarios

Batch Testing

Execute multiple tool calls with different parameters
Compare results across parameter variations
Stress testing with rapid successive calls
Concurrent execution testing

Error Scenario Testing

Invalid parameter testing
Missing required parameter testing
Permission denied scenario testing
Timeout condition testing

Resource Management

Resource Explorer

Resource Discovery

Automatic resource listing from connected clients
URI pattern analysis and categorization
Resource type identification (file, http, custom)
Access permission validation

Resource Browser

Hierarchical resource navigation
Search and filter capabilities
Resource metadata display
Preview functionality for common formats

Resource Testing

Interactive resource reading
Content format validation
Error handling testing
Performance measurement

Content Viewer

Multi-format Support

Text Files: Syntax highlighting for code files
JSON/XML: Formatted display with collapsible sections
Images: Inline image preview
Binary Files: Hexadecimal viewer
Large Files: Streaming display with pagination

Content Analysis

File size and encoding information
MIME type detection and validation
Character encoding analysis
Content structure analysis for structured data

Client Analysis

Client Detection Dashboard

Automatic Detection The interface automatically analyzes connecting clients and displays:

Client Identification: Name, version, user agent
Capability Matrix: Supported MCP features grid
Transport Preferences: Preferred and supported transports
Performance Profile: Typical response times and behavior patterns

Capability Matrix Visualization

Feature	Support Status	Version	Notes
Tools	✓ Full Support	1.0	All tool operations supported
Resources	✓ Full Support	1.0	URI patterns and subscriptions
Prompts	△ Partial Support	0.9	Basic templates only
Sampling	✗ Not Supported	-	Client doesn’t support server sampling

Client Comparison

Multi-client Analysis

Side-by-side capability comparison
Performance benchmarking across clients
Feature support variation analysis
Compatibility recommendations

Historical Data

Client usage patterns over time
Performance trend analysis
Feature adoption tracking
Version compatibility matrices

Data Export & Reporting

Session Data Export

Export Options:

JSON: Complete session data with all messages
CSV: Tabular data for spreadsheet analysis
HAR: HTTP Archive format for network analysis tools
JUnit XML: Test results for CI/CD integration

Export Configuration:

Time Range: Specify start and end times
Data Types: Choose messages, metrics, client info, or all
Compression: Optional gzip compression for large datasets
Filtering: Apply filters before export

Report Generation

Automated Reports

Session summary reports
Performance analysis reports
Client compatibility reports
Test execution reports

Custom Reports

Configurable report templates
Multiple output formats (PDF, HTML, JSON)
Scheduled report generation
Email delivery options

Settings & Configuration

Interface Preferences

Display Options

Theme: Light/dark mode toggle
Message Density: Compact or detailed message view
Auto-refresh: Automatic data refresh intervals
Pagination: Number of items per page
Timezone: Display timezone preferences

Notification Settings

Error Alerts: Browser notifications for errors
Performance Warnings: Alerts for slow responses
Connection Events: Notifications for client connections
Custom Alerts: User-defined alert conditions

Session Defaults

Default Configuration

Transport Protocol: Default selection for new sessions
Timeout Values: Standard timeout configurations
Logging Levels: Default logging verbosity
Auto-features: Enable auto-detection and metrics by default

Template Management

Session Templates: Save session configurations as templates
Quick Start: Pre-configured sessions for common use cases
Import/Export: Share session templates between environments

Mobile & Responsive Design

Mobile Interface

The web interface is fully responsive and optimized for mobile devices:

Mobile-specific Features

Touch-friendly Controls: Large buttons and touch targets
Swipe Navigation: Swipe between tabs and sections
Collapsible Panels: Expandable sections to save space
Simplified Views: Essential information prioritized

Tablet Optimization

Split-screen Views: Show multiple panels simultaneously
Landscape Mode: Optimized layouts for landscape orientation
Touch Scrolling: Smooth scrolling for large datasets

Accessibility Features

Keyboard Navigation

Full keyboard accessibility
Tab navigation through all interactive elements
Keyboard shortcuts for common actions
Focus indicators for current elements

Screen Reader Support

ARIA labels and descriptions
Semantic HTML structure
Alternative text for visual elements
Status announcements for dynamic content

Visual Accessibility

High contrast mode support
Customizable font sizes
Color-blind friendly color schemes
Reduced motion options

Performance Optimization

Large Dataset Handling

Pagination

Automatic pagination for large message logs
Configurable page sizes (50, 100, 500, 1000 items)
Efficient scrolling with virtual rendering
Smart loading for improved performance

Data Compression

Client-side compression for large messages
Efficient JSON formatting
Incremental loading for historical data
Caching for frequently accessed data

Real-time Updates

WebSocket Optimization

Efficient message queuing
Selective updates based on active views
Automatic reconnection handling
Bandwidth-conscious update frequency

Ready to start monitoring? Begin with Creating Your First Session or explore the API Reference for programmatic access to all these features.