Skip to content

Conversation

@BobDickinson
Copy link
Contributor

@BobDickinson BobDickinson commented Jan 20, 2026

This draft PR introduces a shared code architecture that enables code reuse across the MCP Inspector's CLI, TUI, and web client interfaces. This addresses the feature drift and maintenance burden caused by the CLI and web client maintaining separate implementations, with immediate code sharing across the CLI and TUI, and planned support for the web client (v2).

What's Included

1. TUI Integration

  • Integrated the TUI from mcp-inspect as a first-class workspace
  • TUI is accessible via mcp-inspector --tui flag
  • Currently experimental; feature gaps include OAuth, completions, elicitation, and sampling

2. Shared Package (@modelcontextprotocol/inspector-shared)

  • Created internal workspace package for shared MCP client code
  • Includes InspectorClient - a comprehensive wrapper around the MCP SDK Client that manages:
    • Client and transport lifecycle
    • Message tracking and stderr logging
    • Server data management (tools, resources, prompts)
    • Event-driven updates via EventTarget (cross-platform compatible)
    • High-level MCP method wrappers with automatic parameter conversion

3. CLI Migration

  • Migrated CLI to use InspectorClient from shared package
  • Consolidated CLI helper functions into InspectorClient methods
  • Removed duplicate code (CLI transport implementation, cli/src/client/ directory, etc)
  • All CLI tests passing

4. Shared React Code

  • useInspectorClient hook for reactive state management
  • Works in both TUI and v2 web client (future)
  • Subscribes to EventTarget events and provides reactive React state

Architecture

The shared package includes:

  • shared/mcp/ - MCP client/server interaction (InspectorClient, transport creation, config loading)
  • shared/react/ - Shared React code (hooks, components, etc.)
  • shared/json/ - JSON utilities for parameter conversion
  • shared/test/ - Test fixtures and harness servers

Both CLI and TUI now use the same InspectorClient implementation, ensuring consistent behavior and eliminating code duplication (both apps are now thin UX-only implementations).

Next Steps

Phase 4: TUI Feature Gap Implementation (Planned)

  • Address TUI feature gaps (OAuth, completions, elicitation, sampling) by extending InspectorClient
  • This dual-purpose approach: brings TUI to feature parity while preparing InspectorClient for v2 web client integration
  • When complete, InspectorClient will be very close to ready for full v2 web client support

Phase 5: v2 Web Client Integration (Planned)

  • Integrate InspectorClient with the v2 web client once Phase 4 is complete and v2 web client is ready
  • Update InspectorClient and other shared code as required to support v2 while maintaining CLI and TUI compatability

Documentation

See docs/shared-code-architecture.md (included in this PR) for:

  • Complete architecture overview
  • InspectorClient capabilities and API
  • Integration history and current usage patterns
  • Detailed web client integration plan

Testing

  • All CLI tests passing
  • TUI tested with test harness servers
  • TypeScript Project References ensure correct build ordering
  • CI workflow updated to build shared package first

This is a draft PR for review. Feedback welcome on the architecture and integration approach.

… version, fixed problem with undetected failures (isError: true payloads).
…stry), all tests actually validate what they say they test.
… up process termination (possible leak on Windows), beefed up http server cleanup (close all connections), removed unused hasValidJsonOutput, reduced CLI timeout to give it breathing room with vitest timeout.
…truth (all UX now reflects InspectorClient state directly for prompts, resources, tools, messages, and stdio transport log events).
… utilize shared MCP functionality. Enhanced build scripts to include shared, upgraded React and TypeScript dependencies across all workspaces, and implemented Project References for improved type resolution and build order.
…ng direct Client usage. Removed transport-related code and updated logging level handling. Enhanced environment configuration management. Cleaned up unused imports and streamlined argument parsing.
…rations, consolidating client logic and removing deprecated client utility files. Updated argument parsing and logging configurations, ensuring consistent behavior across CLI and TUI. Enhanced documentation to reflect changes in architecture and functionality.
…r, enabling cross-platform event handling for both browser and Node.js. Update related documentation and React hook to utilize new event system, ensuring compatibility and improved state management across TUI and web clients.
…. The shared package is now built before the CLI, ensuring proper dependencies are in place. This change enhances the build process and maintains consistency across the project.
@BobDickinson
Copy link
Contributor Author

Another element that I probably should have implemented in this PR is that we can now build a comprehensive test suite around the shared InspectorClient that will provide very good coverage of the functional elements of the Inspector, so that all we really need to test in the TUI or web client is the UX part.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant