New example MCP App: DICOM Viewer

[ThalesMMS]

Adds a new example simple MCP App for viewing DICOM medical images, with server-side parsing/conversion and a React-based interactive viewer.

Motivation and Context

Medical imaging (DICOM) is a common use case that demonstrates the MCP Apps SDK's ability to provide complex real-time UI interactions. This example shows how to build a prototype MCP App with image processing capabilities.

How Has This Been Tested?

• Tested locally with Claude Desktop using sample DICOM files (single X-Ray series, located in ./dicom folder. Also tested single CT series.
• E2E test with golden screenshot comparison.
• npm test, npm run test:e2e -- --grep "DICOM"

Breaking Changes

None.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update

Checklist

• I have read the MCP Documentation
• My code follows the repository's style guidelines
• New and existing tests pass locally
• I have added appropriate error handling
• I have added or updated documentation as needed

Additional context

• Server-side DICOM parsing with dicom-parser and PNG conversion with sharp
• React client with slice navigation, zoom/pan, and window/level adjustment
• Supports multi-slice series with automatic sorting by instance number
• Includes setup instructions for Claude Desktop

[Copilot]

Pull request overview

This PR adds a new DICOM Viewer MCP App example that demonstrates server-side medical image processing with interactive client-side viewing capabilities. The implementation includes DICOM file parsing, windowing/leveling, and on-demand slice loading via MCP tools.

Changes:

• Adds complete DICOM Viewer MCP App with React-based client and Node.js server
• Integrates with e2e test suite with golden screenshot comparison
• Implements on-demand slice loading to handle large medical imaging series efficiently

Reviewed changes

Copilot reviewed 14 out of 19 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
tests/e2e/servers.spec.ts	Adds DICOM viewer to the test server list for e2e testing
examples/dicom-viewer-mcp-app/vite.config.ts	Standard Vite configuration for React app bundling
examples/dicom-viewer-mcp-app/tsconfig.server.json	TypeScript configuration for server-side code compilation
examples/dicom-viewer-mcp-app/tsconfig.json	TypeScript configuration for client-side React code
examples/dicom-viewer-mcp-app/src/vite-env.d.ts	Vite type definitions reference
examples/dicom-viewer-mcp-app/src/mcp-app.tsx	React client implementing DICOM viewer UI with zoom, pan, and slice navigation
examples/dicom-viewer-mcp-app/src/mcp-app.module.css	Styles for the DICOM viewer interface
examples/dicom-viewer-mcp-app/src/global.css	Global CSS reset and base styles
examples/dicom-viewer-mcp-app/server.ts	MCP server with DICOM parsing and JPEG conversion using dicom-parser and sharp
examples/dicom-viewer-mcp-app/package.json	Dependencies and build scripts for the DICOM viewer server
examples/dicom-viewer-mcp-app/mcp-app.html	HTML template for the viewer app
examples/dicom-viewer-mcp-app/main.ts	Entry point supporting stdio and HTTP transports
examples/dicom-viewer-mcp-app/README.md	Documentation with features, installation, and usage instructions
examples/dicom-viewer-mcp-app/LICENSE	MIT license for the DICOM viewer example
examples/dicom-viewer-mcp-app/.gitignore	Ignores build artifacts and local files
.gitignore	Excludes the dicom folder containing test images from version control

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[localden]

Thank you for your contribution @ThalesMMS. You're using a medical image example in one of your screenshots. Can you please provide some context on the source of the image and any permission you've obtained to redistribute it? Given the sensitive nature of medical content, I want to make sure that we're only merging examples that have gone through proper vetting.

[ThalesMMS]

Thank you for your contribution @ThalesMMS. You're using a medical image example in one of your screenshots. Can you please provide some context on the source of the image and any permission you've obtained to redistribute it? Given the sensitive nature of medical content, I want to make sure that we're only merging examples that have gone through proper vetting.

You're welcome!!

About the two X-Ray dcm files (included in commits), which are properly anonymized (through both RSNA anonymizer https://github.com/RSNA/Anonymizer + manual anonymization of additional metadata I did myself): I have authorization of redistribution which I can provide privately over NDA to any reviewer or comitee.

About the CT screenshot, it's better to change it to a screenshot of the X-Ray, because although it is properly anonymized and from a public library, I have just checked that in theory I do not have authorization of redistribution. Wait for a commit...

[ThalesMMS]

I just changed the screenshot. If you prefer, I can also squash the commits in this PR to remove the previous screenshot from the git history, and/or remove the screenshot and the two sample DICOM files altogether (and squash) if you want.

I've also shared additional context about the X-Ray images privately via LinkedIn.