GitHub Style Markdown Preview MCP App
GitHub Flavored Markdown (GFM) preview as an MCP App.
Docs: https://modelcontextprotocol.io/docs/extensions/apps
Usage
npm run build # Build UI and server
npm run serve # Start server on http://localhost:3001/mcp
npm run dev # Build & serve with watch mode
Connect to Claude
-
Start the tunnel:
npx cloudflared tunnel --url http://localhost:3001 -
Copy the generated URL (e.g.,
https://random-name.trycloudflare.com) -
In Claude web, go to Settings > Connectors > Add custom connector
-
Enter the URL with
/mcppath:https://<your-url>.trycloudflare.com/mcp
Packages
Dependencies
| Package | Description |
|---|---|
@modelcontextprotocol/ext-apps | MCP Apps SDK (server + client) |
@modelcontextprotocol/sdk | MCP SDK core |
react, react-dom | React UI framework |
react-markdown | Markdown renderer for React |
remark-gfm | GitHub Flavored Markdown plugin |
github-markdown-css | GitHub style CSS |
express, cors | HTTP server |
zod | Schema validation |
Dev Dependencies
| Package | Description |
|---|---|
vite | Build tool |
vite-plugin-singlefile | Bundle into single HTML |
@vitejs/plugin-react | Vite React plugin |
esbuild | Server bundler |
concurrently | Run multiple commands |
cross-env | Cross-platform env vars |
tsx | TypeScript execution |
typescript | TypeScript compiler |
Files
| File | Description |
|---|---|
main.ts | Entry point (HTTP/stdio transport) |
server.ts | MCP server with preview-markdown tool |
mcp-app.html | UI entry point |
src/mcp-app.tsx | React app using useApp hook |
src/markdown.tsx | Markdown component with GFM support |
src/global.css | GitHub markdown styling |
vite.config.ts | Vite bundler config |
tsconfig.json | TypeScript config |
tsconfig.server.json | Server build config |