"""Demo UI for Murder Mystery MCP Server.
This Gradio app demonstrates the MCP server capabilities.
The actual MCP server runs via `python server.py` for use with Claude Desktop, Cursor, etc.
"""
import gradio as gr
DEMO_HTML = """
<div style="font-family: system-ui, -apple-system, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px;">
<h1 style="color: #6366f1;">🕵️ Murder Mystery MCP Server</h1>
<div style="background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); color: white; padding: 24px; border-radius: 12px; margin: 20px 0;">
<h2 style="margin-top: 0;">🎉 MCP 1st Birthday Hackathon - Track 1: Building MCP</h2>
<p>This is a <strong>Model Context Protocol (MCP) server</strong> that exposes a complete murder mystery game engine as composable tools.</p>
</div>
<h2>🚀 How to Use</h2>
<h3>With Claude Desktop</h3>
<p>Add to <code>~/Library/Application Support/Claude/claude_desktop_config.json</code>:</p>
<pre style="background: #1e1b4b; color: #a5b4fc; padding: 16px; border-radius: 8px; overflow-x: auto;">
{
"mcpServers": {
"murder-mystery": {
"command": "python",
"args": ["server.py"],
"cwd": "/path/to/murder-mystery-mcp",
"env": {
"OPENAI_API_KEY": "your-key"
}
}
}
}</pre>
<p>Then chat with Claude:</p>
<ul>
<li><em>"Start a new murder mystery game"</em></li>
<li><em>"Talk to the butler about his alibi"</em></li>
<li><em>"Search the library for clues"</em></li>
<li><em>"I accuse Lady Ashworth!"</em></li>
</ul>
<h2>🛠️ MCP Tools</h2>
<table style="width: 100%; border-collapse: collapse; margin: 16px 0;">
<tr style="background: #6366f1; color: white;">
<th style="padding: 12px; text-align: left;">Tool</th>
<th style="padding: 12px; text-align: left;">Description</th>
</tr>
<tr style="background: #f8fafc;"><td style="padding: 12px;"><code>start_game</code></td><td style="padding: 12px;">Generate a new procedural mystery</td></tr>
<tr><td style="padding: 12px;"><code>interrogate_suspect</code></td><td style="padding: 12px;">Question suspects (with memory + emotions)</td></tr>
<tr style="background: #f8fafc;"><td style="padding: 12px;"><code>search_location</code></td><td style="padding: 12px;">Find clues at locations</td></tr>
<tr><td style="padding: 12px;"><code>make_accusation</code></td><td style="padding: 12px;">Accuse the murderer (3 tries!)</td></tr>
<tr style="background: #f8fafc;"><td style="padding: 12px;"><code>search_memory</code></td><td style="padding: 12px;">RAG search past conversations</td></tr>
<tr><td style="padding: 12px;"><code>find_contradictions</code></td><td style="padding: 12px;">Detect lies in testimony</td></tr>
</table>
<h2>📚 MCP Resources</h2>
<table style="width: 100%; border-collapse: collapse; margin: 16px 0;">
<tr style="background: #6366f1; color: white;">
<th style="padding: 12px; text-align: left;">URI</th>
<th style="padding: 12px; text-align: left;">Description</th>
</tr>
<tr style="background: #f8fafc;"><td style="padding: 12px;"><code>mystery://state</code></td><td style="padding: 12px;">Current game state</td></tr>
<tr><td style="padding: 12px;"><code>mystery://suspects</code></td><td style="padding: 12px;">Suspect list with public info</td></tr>
<tr style="background: #f8fafc;"><td style="padding: 12px;"><code>mystery://clues</code></td><td style="padding: 12px;">Discovered clues</td></tr>
<tr><td style="padding: 12px;"><code>mystery://timeline</code></td><td style="padding: 12px;">Investigation timeline</td></tr>
</table>
<h2>🔗 Related</h2>
<p>
<a href="https://huggingface.co/spaces/Boopster/murder-mystery" style="color: #6366f1; text-decoration: none; font-weight: bold;">
🎮 Play the full game with Gradio UI →
</a>
</p>
<div style="background: #fef3c7; border-left: 4px solid #f59e0b; padding: 16px; margin: 20px 0; border-radius: 0 8px 8px 0;">
<strong>⚠️ Note:</strong> This Space displays documentation. To actually use the MCP server,
clone the repo and run it locally with Claude Desktop or Cursor.
</div>
</div>
"""
with gr.Blocks(title="Murder Mystery MCP Server", theme=gr.themes.Soft()) as demo:
gr.HTML(DEMO_HTML)
if __name__ == "__main__":
demo.launch()
