feat: add example gallery with auto-generated screenshots #253
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…amples - Add generate-grid-screenshots.spec.ts Playwright test to capture screenshots - Add npm run generate:screenshots command (Docker-based for Santa compatibility) - Add sharp dependency for image resizing with centered-fill mode - Generate grid-cell.png for 14 example servers (only React for basic-server-* series) The screenshots are 300x300 PNG images cropped with centered fill mode, suitable for use in a grid layout showcasing the examples.
Add a 3-column visual grid showcasing 14 example MCP Apps with: - Thumbnail screenshots (300x300 grid-cell.png) - Clickable links to example directories - Hover tooltips with brief descriptions Organized by visual impact: 3D/WebGL examples first, then visualizations, charts, monitoring, and starter templates.
@modelcontextprotocol/ext-apps
@modelcontextprotocol/server-basic-react
@modelcontextprotocol/server-basic-vanillajs
@modelcontextprotocol/server-budget-allocator
@modelcontextprotocol/server-cohort-heatmap
@modelcontextprotocol/server-customer-segmentation
@modelcontextprotocol/server-scenario-modeler
@modelcontextprotocol/server-system-monitor
@modelcontextprotocol/server-threejs
@modelcontextprotocol/server-wiki-explorer
commit: |
Change from fit: 'cover' (crops) to fit: 'contain' (letterbox) so the full app content is visible without cropping.
- Constrain viewport to 500px width for consistent rendering - Wait 5 seconds for full app load (tiles, animations, data) - Screenshot just the inner iframe (no extra whitespace) - Save both screenshot.png (full-size) and grid-cell.png (300x300 thumbnail) - Use contain mode to preserve aspect ratio
No letterboxing - crops to fill 300x300, aligned to top so headers and important content are always visible.
- Remove integration-server from gallery (it's for E2E testing only) - Add 30s extra wait for Map and Video servers to load fully - Improve Three.js default scene: isometric rotation + better lighting - Update README: Starter Templates row with links to all framework variants (React, Vue, Svelte, Preact, Solid, Vanilla JS) - Regenerate all screenshots with updated settings
- Fix uneven column widths by using minimal separator - Move Starter Templates to separate 2-cell table with description - Add screenshot.png to top of each example README (13 examples) - Shorten tooltips for cleaner table
- Merged ochafik/post-fixes which reverts sandbox from srcdoc to document.write
(CesiumJS doesn't work with srcdoc iframes)
- Fixed map-server name in screenshot test ('Map Server' not 'CesiumJS Map Server')
- Simplified screenshot generation script (removed complex debugging code)
- Increased map-server wait time to 45s for reliable tile loading
- Regenerated all 13 screenshots
Remove the simple \ line from READMEs that already had nicer HTML table screenshots. Keep it only for examples that didn't have existing screenshots.
- Move screenshot gallery from top of README to Examples section - Remove redundant list of basic examples (now shown visually in gallery) - Clean up duplicate run instructions
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Add a visual gallery to the README showcasing all example MCP Apps, with automated screenshot generation.
Changes
Screenshot generation script (
tests/e2e/generate-grid-screenshots.spec.ts)npm run generate:screenshots(Docker-based)README gallery
14 grid-cell.png files in example directories
basic-server-reactfrom the basic-server-* series (others are nearly identical)-serverexamples includedScreenshot
The gallery appears at the top of the README, making it easy to browse available examples visually.
Usage
To regenerate screenshots after making changes to examples: