Shared code architecture#1027
Shared code architecture#1027BobDickinson wants to merge 110 commits intomodelcontextprotocol:v1.5/mainfrom
Conversation
|
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. |
|
I merged main and resolved conflicts. All projects build and all tests pass, CI tests pass. Should be ready to review/test. |
|
@claude /review |
|
I'll analyze this and get back to you. |
|
Per the suggestion from @olaservo - I think the idea of moving this code to a v1.5 branch makes sense. It will make it easier for people to review, test, and collaborate on the code. If we do that, I'd want to make a couple of changes on my branch first.
It may or may not also make sense to resolve any major issues from the pending Claude review before we do this. Anyway, if the branch plan is agreed, let me know and I'll make the above changes to my local branch and let you know when it's ready to be merged to this repo. After the branch is created and populated, we can close this PR. cc: @cliffhall |
|
@cliffhall - The Claude review failed. I'm not sure why it fails on this PR and not others. There are some open issues that may be relevant: anthropics/claude-code-action#223, which may be a duplicate of anthropics/claude-code-action#46. |
Agreed.
The proposed changes sound good.
I think Claude may just be having difficulty with all the commits that went into it. Could be a single squash commit would make it easier.
I think that's good. We can treat 1.5 not as a deviation from what we have now but a whole new entity that's a stepping stone toward 2.0. We can review it and test the heck out of it against all the things and get confidence in it that way. I added a |
…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.
…pes, terminology, and usage.
…truth (all UX now reflects InspectorClient state directly for prompts, resources, tools, messages, and stdio transport log events).
…ill not actually sharing yet)
… 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.
…ectorClient in the web app.
…ectorClient in the web app (rest of the changes).
…e, updated CLI argument parsing to support a dev flag, and implemented a new API endpoint for fetching initial configuration. Removed HTML injection for config and updated the web app to fetch config from the new endpoint. Enhanced documentation to reflect these changes.
…eeded), also tweaked styling the code display page, added copy button.
…es 18), downgraded Ink to v5, reworked TUI around new back-level deps, reverted accidental /client changes.
…es 18), downgraded Ink to v5, reworked TUI around new back-level deps, reverted accidental /client changes.
…rget (consolidated vitest across shared, cli, tui, web). Fixed some flaky tests. Add basic vitest implementation for TUI (no real tests yet). Fixed some test gaps between client and web (all but MCP Apps now covered).
…, all relevant tests ported from client and pass, all 19 MCP Apps test servers verified in dev and prod.
f266d0c to
895ad65
Compare
|
I added MCP Apps support (to bring this PR up to date with main), and I did the proposed refactor (renamed I’ve rebased this onto v1.5/main and retargeted the PR to the v1.5/main branch. It should be ready to merge. |
…lient to use AppRendererClient proxy, updating related components and tests. Adjusted .gitignore to include new build paths and removed unnecessary client references. Updated package dependencies and fixed minor documentation typos. Fixed some TUI bugs based on backleveling Ink and React versions.
… Updated tool call UI to include a "Run as task" checkbox, reflecting server capabilities and tool support. Enhanced tests to cover new task TTL and callTool as task with TTL.
…lient Client Task nomenclature in preparation for implementing Receiver Task support. Implemented remote logger for web app (was previously violating type constraints and using InspectorClient private logger).

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
mcp-inspectas a first-class workspacemcp-inspector --tuiflag2. Shared Package (
@modelcontextprotocol/inspector-shared)InspectorClient- a comprehensive wrapper around the MCP SDKClientthat manages:EventTarget(cross-platform compatible)3. CLI Migration
InspectorClientfrom shared packageInspectorClientmethodscli/src/client/directory, etc)4. Shared React Code
useInspectorClienthook for reactive state managementEventTargetevents and provides reactive React stateArchitecture
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 conversionshared/test/- Test fixtures and harness serversBoth CLI and TUI now use the same
InspectorClientimplementation, ensuring consistent behavior and eliminating code duplication (both apps are now thin UX-only implementations).Next Steps
Phase 4: TUI Feature Gap Implementation (Planned)
InspectorClientInspectorClientfor v2 web client integrationInspectorClientwill be very close to ready for full v2 web client supportPhase 5: v2 Web Client Integration (Planned)
InspectorClientwith the v2 web client once Phase 4 is complete and v2 web client is readyInspectorClientand other shared code as required to support v2 while maintaining CLI and TUI compatabilityDocumentation
See
docs/shared-code-architecture.md(included in this PR) for:InspectorClientcapabilities and APITesting
This is a draft PR for review. Feedback welcome on the architecture and integration approach.