Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@GitHub Style Markdown Preview MCP Apppreview this markdown content with GitHub styling"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
GitHub Style Markdown Preview MCP App
GitHub Flavored Markdown (GFM) preview as an MCP App.
Docs: https://modelcontextprotocol.io/docs/extensions/apps
Usage
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 |
| MCP Apps SDK (server + client) |
| MCP SDK core |
| React UI framework |
| Markdown renderer for React |
| GitHub Flavored Markdown plugin |
| GitHub style CSS |
| HTTP server |
| Schema validation |
Dev Dependencies
Package | Description |
| Build tool |
| Bundle into single HTML |
| Vite React plugin |
| Server bundler |
| Run multiple commands |
| Cross-platform env vars |
| TypeScript execution |
| TypeScript compiler |
Files
File | Description |
| Entry point (HTTP/stdio transport) |
| MCP server with |
| UI entry point |
| React app using |
| Markdown component with GFM support |
| GitHub markdown styling |
| Vite bundler config |
| TypeScript config |
| Server build config |