Inspector Tool Analysis

Overview

The MCP Inspector is a minimal React application specifically designed for debugging and testing MCP (Model Context Protocol) servers. It provides a clean interface for connecting to MCP servers and interacting with their tools, resources, and prompts in real-time.

Application Architecture

Project Structure

  • React 19 with TypeScript
  • Vite for build tooling
  • Tailwind CSS for styling
  • React Router for basic navigation
  • use-mcp library integration
  • Cloudflare Pages deployment ready

Dependencies Analysis (package.json)

Minimal Dependencies (Lines 14-20)

  • Core: React 19, React DOM, React Router
  • Styling: Tailwind CSS with Vite plugin
  • Icons: Lucide React for consistent iconography
  • MCP: Local use-mcp library link

Development Focus

  • No AI SDK dependencies (unlike chat-ui)
  • No database dependencies (purely for inspection)
  • Minimal surface area for testing MCP connections
  • Fast build and deployment with Cloudflare tooling

Application Components

App.tsx - Application Structure

Purpose: Simple router setup focusing on MCP functionality

Route Configuration (Lines 8-14):

  • /oauth/callback: MCP OAuth callback handler
  • /: Main inspector interface with embedded MCP servers component

Design Philosophy:

  • Single-purpose: Dedicated to MCP server inspection
  • Clean Layout: Centered design with clear branding
  • External Links: Links to GitHub repository for context

components/OAuthCallback.tsx - Authentication Handler

Purpose: Minimal OAuth callback implementation

Implementation (Lines 4-17):

  • Line 6: Uses onMcpAuthorization() from use-mcp library
  • Simple UI: Basic loading state with auto-close messaging
  • Consistent Styling: Matches main application design

components/McpServers.tsx - Main Inspector Interface

Connection Management Architecture (Lines 6-40)

McpConnection Component:

  • Hook Wrapper: Encapsulates useMcp hook usage
  • Transport Selection: Supports auto, HTTP, and SSE transport types
  • Debug Mode: Always enabled for inspection purposes
  • Manual Authentication: No auto-popup for controlled testing

Configuration Options (Lines 16-22):

  • Debug Logging: Always enabled for inspection
  • Auto-retry: Disabled for manual control
  • Popup Configuration: Smaller window for auth flows
  • Transport Type: User-selectable transport method

State Management (Lines 42-83)

Connection State (Lines 51-69):

  • URL Persistence: Server URL stored in sessionStorage
  • Transport Persistence: Selected transport type preserved
  • Connection Data: Complete MCP connection state and API
  • UI State: Expansion states for tools, resources, prompts

Tool Execution State (Lines 70-79):

  • Form Data: Dynamic forms for tool parameters
  • Execution Logs: Per-tool execution history
  • Resource Contents: Cached resource data
  • Prompt Results: Stored prompt execution results

Status Management (Lines 144-165)

Visual Status Indicators:

  • Discovering: Blue badge during server discovery
  • Authenticating: Purple badge during OAuth flow
  • Connecting: Yellow badge during connection establishment
  • Loading: Orange badge during tool/resource loading
  • Ready: Green badge when fully connected
  • Failed: Red badge on connection errors

Tool Inspection Interface (Lines 385-490)

Tool Discovery:

  • Real-time Updates: Tools appear as server provides them
  • Schema Parsing: Automatic form generation from tool schemas
  • Parameter Validation: Required field indicators and validation

Tool Execution (Lines 224-240):

  • Dynamic Forms: Generated based on tool input schemas
  • Type Support: String, number, integer, boolean inputs
  • Execution Logging: Per-tool execution history
  • Error Handling: Clear error display and logging

Form Field Rendering (Lines 268-309):

  1. Number/Integer Fields: Type-specific validation and step control
  2. Boolean Fields: Checkbox inputs with proper state management
  3. String Fields: Text inputs with placeholder and description
  4. Required Field Indicators: Visual marking of required parameters

Resource Inspection Interface (Lines 492-590)

Resource Types:

  1. Direct Resources (Lines 503-571): Static resources with fixed URIs
  2. Resource Templates (Lines 574-587): Dynamic resources with URI templates

Resource Interaction:

  • Content Reading: On-demand resource content loading
  • MIME Type Display: Shows resource content types
  • Error Handling: Graceful failure with error messages
  • Content Preview: Text content display with formatting

Prompt Inspection Interface (Lines 592-702)

Prompt Features:

  • Argument Management: Dynamic forms for prompt parameters
  • Required Arguments: Visual indicators and validation
  • Message Display: Formatted prompt message output
  • Error Handling: Clear error display for failed prompts

Debug Interface (Lines 704-742)

Debug Logging:

  • Real-time Log: Auto-scrolling debug output
  • Log Levels: Color-coded by severity (debug, info, warn, error)
  • Storage Management: Clear authentication data button
  • Connection Reset: Full connection and storage cleanup

Key Features

1. Transport Type Selection

Options (Lines 336-349):

  • Auto: HTTP with SSE fallback (default behavior)
  • HTTP: HTTP-only transport for testing
  • SSE: Server-Sent Events only transport

Use Cases:

  • Auto: General purpose testing
  • HTTP: Testing REST-like MCP implementations
  • SSE: Testing streaming MCP implementations

2. Real-time Tool Testing

Capabilities:

  • Dynamic Form Generation: Based on tool JSON schemas
  • Parameter Validation: Type checking and required field validation
  • Execution Logging: Per-tool execution history
  • Error Debugging: Detailed error messages and stack traces

3. Resource Exploration

Features:

  • Content Preview: Direct resource content reading
  • Template Support: URI template parameter expansion
  • MIME Type Detection: Content type identification
  • Error Recovery: Graceful handling of read failures

4. Prompt Testing

Functionality:

  • Argument Handling: Dynamic parameter forms
  • Message Output: Formatted prompt results
  • Template Expansion: Argument substitution testing
  • Validation: Required argument checking

5. Authentication Flow Testing

OAuth Support:

  • Manual Trigger: User-controlled authentication
  • Popup Handling: Blocked popup detection and manual fallback
  • Token Management: Storage clearing and session reset
  • Debug Visibility: Full authentication flow logging

Development and Testing Workflow

1. Server Connection Testing

  1. Enter MCP server URL
  2. Select transport type (auto/http/sse)
  3. Click Connect
  4. Monitor debug log for connection process
  5. Handle authentication if required

2. Tool Testing

  1. View discovered tools in expanded interface
  2. Fill in required parameters using generated forms
  3. Execute tools and view results
  4. Check execution logs for detailed output
  5. Clear logs and retry with different parameters

3. Resource Testing

  1. Browse available resources and templates
  2. Read resource contents on demand
  3. Verify MIME types and content formats
  4. Test error handling with invalid URIs

4. Prompt Testing

  1. Explore available prompts with arguments
  2. Fill required argument forms
  3. Execute prompts and view message output
  4. Test template expansion with different arguments

Deployment and Production

Build Configuration

  • Vite: Fast development and production builds
  • TypeScript: Type safety for MCP integration
  • Cloudflare Pages: Static site deployment
  • Minimal Bundle: Focused feature set for fast loading

Environment Support

  • Development: Hot reload with vite --port=5001
  • Production: Optimized build with tsc -b && vite build
  • Deployment: Direct Cloudflare Pages deployment with Wrangler

Comparison with Chat-UI

Similarities

  • use-mcp Integration: Both use the same MCP library
  • OAuth Handling: Identical authentication flow support
  • React Architecture: Similar component patterns and hooks

Key Differences

Inspector Tool Focus

  • Debugging First: Designed for MCP server development and testing
  • No AI Integration: Pure MCP protocol interaction
  • Manual Control: User-driven testing vs. automatic AI tool usage
  • Detailed Logging: Comprehensive debug output for troubleshooting

Chat-UI Focus

  • User Experience: Designed for end-user chat interactions
  • AI Integration: Multiple LLM providers with tool integration
  • Automatic Flow: AI-driven tool usage within conversations
  • Conversation Management: Persistent chat history and state

Use Cases

1. MCP Server Development

  • Tool Testing: Verify tool schemas and execution
  • Resource Validation: Test resource discovery and content
  • Prompt Development: Validate prompt templates and arguments
  • Authentication Testing: Debug OAuth flows and token handling

2. Integration Testing

  • Transport Testing: Verify HTTP vs SSE transport behavior
  • Error Handling: Test error conditions and recovery
  • Performance Testing: Monitor connection and execution timing
  • Compatibility Testing: Verify MCP protocol compliance

3. Documentation and Demos

  • Live Examples: Real-time demonstration of MCP capabilities
  • Educational Tool: Understanding MCP protocol interactions
  • Reference Implementation: Example of use-mcp integration
  • Troubleshooting Guide: Debug common integration issues

The Inspector tool serves as both a development aid for MCP server creators and a reference implementation for developers integrating the use-mcp library, providing a comprehensive testing environment for all aspects of the Model Context Protocol.