README.md
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:3001Copy 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 |
Tools 1
preview-markdownRenders and visualizes Markdown content using authentic GitHub styling and CSS.Try it
→Preview the following markdown content using GitHub styling: # Hello World
→Render this technical documentation snippet with GFM support: [Link](https://example.com)
→Show me how this README content looks with GitHub Flavored Markdown rendering.