index.html•13.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Dice Rolling MCP Server</title>
<meta name="description" content="Comprehensive TypeScript-based Model Context Protocol (MCP) server for advanced dice rolling capabilities. Perfect for tabletop gaming, RPGs, and AI assistants requiring authentic random number generation.">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://dice-rolling-mcp.vercel.app/">
<meta property="og:title" content="Advanced Dice Rolling MCP Server">
<meta property="og:description" content="Comprehensive TypeScript-based Model Context Protocol (MCP) server for advanced dice rolling capabilities. Perfect for tabletop gaming, RPGs, and AI assistants requiring authentic random number generation.">
<meta property="og:image" content="https://dice-rolling-mcp.vercel.app/og-image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://dice-rolling-mcp.vercel.app/">
<meta property="twitter:title" content="Advanced Dice Rolling MCP Server">
<meta property="twitter:description" content="Comprehensive TypeScript-based Model Context Protocol (MCP) server for advanced dice rolling capabilities. Perfect for tabletop gaming, RPGs, and AI assistants requiring authentic random number generation.">
<meta property="twitter:image" content="https://dice-rolling-mcp.vercel.app/og-image.png">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 900px;
margin: 50px auto;
padding: 20px;
line-height: 1.6;
color: #333;
}
.header {
text-align: center;
margin-bottom: 40px;
}
.main-title {
font-size: 2.5rem;
margin: 0 0 10px 0;
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.emoji {
color: initial;
}
.subtitle {
font-size: 1.2rem;
color: #666;
margin: 0;
}
.section {
margin-bottom: 40px;
}
.section-title {
color: #4a5568;
border-bottom: 2px solid #e2e8f0;
padding-bottom: 8px;
}
.highlight {
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
border: 1px solid #e2e8f0;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.code-block {
background: #2d3748;
color: #e2e8f0;
padding: 15px;
border-radius: 6px;
overflow: auto;
font-size: 14px;
margin: 0;
}
code {
background: #e2e8f0;
padding: 2px 5px;
border-radius: 3px;
font-size: 13px;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.tool-card {
background: #fff;
border: 1px solid #e2e8f0;
padding: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.tool-title {
margin: 0 0 10px 0;
color: #2b6cb0;
}
.warning-box {
background: #fff3cd;
border: 1px solid #ffeaa7;
padding: 15px;
border-radius: 6px;
margin-top: 20px;
color: #856404;
}
.endpoints-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}
.endpoint-card {
padding: 15px;
border-radius: 6px;
text-align: center;
}
.endpoint-sse {
background: #f0fff4;
border: 1px solid #9ae6b4;
}
.endpoint-websocket {
background: #f0f4ff;
border: 1px solid #a3bffa;
}
.endpoint-http {
background: #fef5e7;
border: 1px solid #f6d55c;
}
.footer {
text-align: center;
padding-top: 30px;
border-top: 1px solid #e2e8f0;
color: #718096;
}
</style>
</head>
<body>
<div class="header">
<h1 class="main-title"><span class="emoji">🎲</span> <span class="gradient-text">Advanced Dice Rolling MCP Server</span></h1>
<p class="subtitle">TypeScript-based MCP server for AI assistants</p>
</div>
<div class="section">
<p style="font-size: 16px; line-height: 1.6; margin-bottom: 30px; color: #4a5568;">
A comprehensive TypeScript-based Model Context Protocol (MCP) server that provides advanced dice rolling capabilities for AI assistants. Perfect for tabletop gaming, RPGs, and any application requiring sophisticated random number generation with gaming mechanics.
</p>
<h2 class="section-title">🚀 Remote MCP Configuration</h2>
<div class="highlight">
<h3 style="margin: 0 0 15px 0; color: #2d3748;">MCP Integration URL - Compatible with Claude and ChatGPT Connectors</h3>
<p style="margin: 0 0 10px 0; font-size: 14px; color: #4a5568;">Use this endpoint for remote MCP connections:</p>
<pre class="code-block" style="margin: 10px 0;">https://dice-rolling-mcp.vercel.app/mcp</pre>
</div>
<div class="highlight">
<h3 style="margin: 0 0 15px 0; color: #2d3748;">Configure in Claude Desktop:</h3>
<pre class="code-block">{
"mcpServers": {
"dice-rolling-remote": {
"command": "npx",
"args": [
"@modelcontextprotocol/client-stdio",
"connect",
"https://dice-rolling-mcp.vercel.app/mcp"
]
}
}
}</pre>
</div>
</div>
<div class="section">
<h2 class="section-title">🛠️ Available Tools & Features</h2>
<div class="tools-grid">
<div class="tool-card">
<h3 class="tool-title">🎲 dice_roll</h3>
<p style="margin: 0 0 10px 0; font-size: 14px;">Roll dice using standard notation with full gaming support</p>
<ul style="font-size: 13px; margin: 0; padding-left: 16px;">
<li>Basic notation: <code>1d20+5</code></li>
<li>Advantage/Disadvantage: <code>2d20kh1</code></li>
<li>Exploding dice: <code>3d6!</code></li>
<li>Rerolls: <code>4d6r1</code></li>
<li>Success counting: <code>5d10>7</code></li>
</ul>
</div>
<div class="tool-card">
<h3 class="tool-title">✅ dice_validate</h3>
<p style="margin: 0 0 10px 0; font-size: 14px;">Validate and explain dice notation without rolling</p>
<ul style="font-size: 13px; margin: 0; padding-left: 16px;">
<li>Parse complex notation</li>
<li>Explain mechanics</li>
<li>Catch syntax errors</li>
<li>Educational breakdowns</li>
</ul>
</div>
</div>
<div class="warning-box">
<strong>⚠️ Important:</strong> For D&D 5e advantage, always use <code>2d20kh1</code> (NOT <code>2d20</code>).
The latter adds both dice together (2-40 range) instead of keeping the higher roll (1-20 range).
</div>
</div>
<div class="section">
<h2 class="section-title">📋 Quick Reference</h2>
<div class="highlight">
<h3 style="margin: 0 0 15px 0; color: #2d3748;">Most Common Patterns</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 15px;">
<div>
<h4 style="margin: 0 0 8px 0; color: #4a5568;">Basic Rolls</h4>
<ul style="font-size: 13px; margin: 0; padding-left: 16px;">
<li><code>1d20</code> - Single d20</li>
<li><code>3d6</code> - Three d6</li>
<li><code>1d8+3</code> - d8 plus modifier</li>
</ul>
</div>
<div>
<h4 style="margin: 0 0 8px 0; color: #4a5568;">D&D 5e Essential</h4>
<ul style="font-size: 13px; margin: 0; padding-left: 16px;">
<li><code>2d20kh1</code> - <strong>Advantage</strong> (NOT 2d20)</li>
<li><code>2d20kl1</code> - <strong>Disadvantage</strong></li>
<li><code>4d6kh3</code> - Stat generation</li>
</ul>
</div>
<div>
<h4 style="margin: 0 0 8px 0; color: #4a5568;">Special Mechanics</h4>
<ul style="font-size: 13px; margin: 0; padding-left: 16px;">
<li><code>3d6!</code> - Exploding 6s</li>
<li><code>4d6r1</code> - Reroll 1s</li>
<li><code>5d10>7</code> - Count 7+ as successes</li>
</ul>
</div>
</div>
</div>
</div>
<div class="section">
<h2 class="section-title">📖 Complete Dice Notation Guide</h2>
<div class="highlight">
<h3 style="margin: 0 0 15px 0; color: #2d3748;">Advantage and Disadvantage</h3>
<div style="background: #fff3cd; border: 1px solid #ffeaa7; padding: 12px; border-radius: 4px; margin: 10px 0; color: #856404;">
<strong>⚠️ IMPORTANT</strong>: For D&D 5e advantage/disadvantage, use these formats:
<ul style="margin: 8px 0 0 0; padding-left: 20px;">
<li><code>2d20kh1</code> - <strong>Advantage</strong> (roll 2d20, keep highest 1)</li>
<li><code>2d20kl1</code> - <strong>Disadvantage</strong> (roll 2d20, keep lowest 1)</li>
</ul>
<p style="margin: 8px 0 0 0;">❌ <strong>Wrong</strong>: <code>2d20</code> (adds both dice = 2-40 range)<br>
✅ <strong>Correct</strong>: <code>2d20kh1</code> (keeps higher die = 1-20 range)</p>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px;">
<div>
<h4 style="margin: 0 0 8px 0; color: #4a5568;">Keep and Drop Mechanics</h4>
<ul style="font-size: 13px; margin: 0; padding-left: 16px;">
<li><code>4d6kh3</code> - Keep highest 3 of 4d6</li>
<li><code>4d6kl3</code> - Keep lowest 3 of 4d6</li>
<li><code>4d6dh1</code> - Drop highest 1 (= kl3)</li>
<li><code>4d6dl1</code> - Drop lowest 1 (= kh3)</li>
</ul>
</div>
<div>
<h4 style="margin: 0 0 8px 0; color: #4a5568;">Special Dice</h4>
<ul style="font-size: 13px; margin: 0; padding-left: 16px;">
<li><code>4dF</code> - Fudge dice (-1, 0, +1)</li>
<li><code>1d%</code> - Percentile die (1-100)</li>
<li><code>1d2</code> - Coin flip</li>
</ul>
</div>
<div>
<h4 style="margin: 0 0 8px 0; color: #4a5568;">Gaming Examples</h4>
<ul style="font-size: 13px; margin: 0; padding-left: 16px;">
<li><code>2d20kh1+7</code> - Advantage attack +7</li>
<li><code>8d6</code> - Fireball damage</li>
<li><code>1d20+1d4+3</code> - Check with guidance</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<p style="margin: 0 0 10px 0;">
🔗 <a href="https://github.com/jimmcq/dice-rolling-mcp" style="color: #3182ce; text-decoration: none; font-weight: 500;">View on GitHub</a> • ⭐ Star this project if you find it useful!
</p>
<p style="margin: 0 0 10px 0; font-size: 14px;">
Built with ❤️ for tabletop gaming communities
</p>
<p style="margin: 0; font-size: 14px; color: #718096;">
Created by <a href="https://www.linkedin.com/in/jimmcquillan/" style="color: #3182ce; text-decoration: none;">Jim McQuillan</a>
</p>
</div>
</body>
</html>
