Skip to content

feat(playground): deploy playground to GitHub Pages with extension detection#12

Merged
naji247 merged 1 commit intomainfrom
feat/playground-gh-pages
Mar 5, 2026
Merged

feat(playground): deploy playground to GitHub Pages with extension detection#12
naji247 merged 1 commit intomainfrom
feat/playground-gh-pages

Conversation

@naji247
Copy link
Member

@naji247 naji247 commented Mar 5, 2026

Summary

This PR makes the playground publicly accessible and adds Chrome extension awareness to improve the onboarding experience.

GitHub Pages deployment

  • New deploy-playground.yml workflow builds the playground and deploys it to GitHub Pages on every push to main
  • The playground is served at https://mcpcat.github.io/webmcp-react/playground/ — Vite's base is conditionally set via a GITHUB_PAGES env var so local dev remains unaffected
  • The workflow uses actions/upload-pages-artifact and actions/deploy-pages with proper permissions and concurrency settings

Chrome extension detection

  • New ExtensionBanner component that probes for the WebMCP Bridge extension using the existing window.postMessage protocol (WEBMCP_REQUEST_TOOLSWEBMCP_TOOLS_UPDATED)
  • Three states: checking (hidden, during the 2s detection window), connected (green banner), and not detected (amber banner with a Chrome Web Store install link)
  • The amber banner is dismissible; the green banner is always visible when connected
  • The Chrome Web Store URL is a placeholder (TODO comment) until the extension is published

Housekeeping

  • Added noEmit: true to the playground's tsconfig.json so tsc -b only type-checks without emitting .js artifacts alongside source
  • Added .gitignore patterns for src/**/*.js and examples/*/src/**/*.js to catch any stray tsc output
  • Added a Playground section to the README with a link to the live demo

Test plan

  • Run pnpm dev:playground and verify the playground loads at http://localhost:5173/
  • Without the Chrome extension installed: after ~2s, an amber banner appears with a link to install the extension
  • With the Chrome extension loaded and active on the tab: a green "WebMCP Bridge extension connected" banner appears
  • Click the dismiss button (×) on the amber banner and confirm it disappears
  • Run GITHUB_PAGES=true pnpm --filter webmcp-react-playground build and inspect dist/index.html to confirm asset paths reference /webmcp-react/playground/
  • Verify CI passes on the PR
  • After merge, confirm the playground is live at https://mcpcat.github.io/webmcp-react/playground/

- Configure Vite base path for GitHub Pages subpath deployment
- Add GitHub Actions workflow to build and deploy playground on push to main
- Add ExtensionBanner component that detects Chrome extension via postMessage
- Show green banner when extension is connected, amber banner with install link when not
- Add playground link to README
- Add noEmit to playground tsconfig and ignore tsc artifacts in .gitignore
@naji247 naji247 changed the title feat(playground): deploy to GitHub Pages with extension detection feat(playground): deploy playground to GitHub Pages with extension detection Mar 5, 2026
@naji247 naji247 requested a review from kashishhora March 5, 2026 20:38
@naji247 naji247 merged commit a36dadb into main Mar 5, 2026
3 checks passed
@naji247 naji247 deleted the feat/playground-gh-pages branch March 5, 2026 20:43
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