index_simple.html

<style>
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; padding: 0; background: #f3f4f6; }
.wrapper { max-width: 1000px; margin: 0 auto; padding: 24px; }
.card { background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); padding: 32px; }
h1 { margin: 0 0 8px 0; color: #1f2937; font-size: 28px; font-weight: 700; }
p.lead { color: #4b5563; margin: 0 0 24px 0; font-size: 16px; }
h2 { color: #1f2937; font-size: 18px; font-weight: 600; margin: 24px 0 12px; border-bottom: 2px solid #e5e7eb; padding-bottom: 8px; }
ul { margin: 8px 0 16px 20px; color: #374151; line-height: 1.6; }
li { margin-bottom: 6px; }
code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-family: monospace; color: #3b82f6; }
.note { background: #eff6ff; border-left: 4px solid #3b82f6; padding: 14px 16px; border-radius: 6px; color: #1e40af; margin: 16px 0; }
.section { margin-top: 20px; }
strong { color: #1f2937; }
</style>

<div class="wrapper">
    <div class="card">
        <h1>📈 Finnhub MCP Server</h1>
        <p class="lead">A standard MCP server providing real-time stock quotes and news via Finnhub API, using JSON-RPC over SSE protocol.</p>

        <div class="section">
            <h2>What is MCP?</h2>
            <ul>
                <li><strong>Model Context Protocol (MCP)</strong> is a standardized way to connect AI assistants with external tools and data</li>
                <li>This server implements the <strong>standard MCP protocol</strong> (JSON-RPC over Server-Sent Events)</li>
                <li>Compatible with MCP clients like Claude Desktop, Cursor IDE, and other MCP-enabled applications</li>
            </ul>
        </div>

        <div class="section">
            <h2>How to Configure MCP Client</h2>
            
            <h3 style="font-size: 16px; color: #374151; margin: 16px 0 8px;">📥 Step 1: Clone Repository</h3>
            <pre style="background: #1f2937; color: #e5e7eb; padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 13px;">git clone https://huggingface.co/spaces/JC321/MarketandStockMCP
cd MarketandStockMCP
pip install -r requirements.txt</pre>

            <h3 style="font-size: 16px; color: #374151; margin: 16px 0 8px;">🔑 Step 2: Get Finnhub API Key</h3>
            <ul>
                <li>Visit <a href="https://finnhub.io/register" target="_blank" style="color: #3b82f6;">finnhub.io/register</a> to get a free API key</li>
                <li>Free tier includes ~60 requests per minute</li>
            </ul>

            <h3 style="font-size: 16px; color: #374151; margin: 16px 0 8px;">⚙️ Step 3: Configure MCP Client</h3>
            
            <p style="margin: 12px 0; color: #4b5563;"><strong>For Claude Desktop:</strong></p>
            <p style="margin: 8px 0; color: #6b7280; font-size: 14px;">Edit configuration file:</p>
            <ul style="font-size: 14px; color: #6b7280;">
                <li>macOS: <code>~/Library/Application Support/Claude/claude_desktop_config.json</code></li>
                <li>Windows: <code>%APPDATA%\Claude\claude_desktop_config.json</code></li>
            </ul>
            
            <p style="margin: 12px 0; color: #4b5563;"><strong>Add this configuration:</strong></p>
            <pre style="background: #1f2937; color: #e5e7eb; padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 12px;">{
  "mcpServers": {
    "finnhub": {
      "command": "python",
      "args": ["C:\\path\\to\\MarketandStockMCP\\mcp_server.py"],
      "env": {
        "FINNHUB_API_KEY": "your_finnhub_api_key_here"
      }
    }
  }
}</pre>

            <p style="margin: 12px 0; color: #4b5563;"><strong>For Cursor IDE:</strong></p>
            <p style="margin: 8px 0; color: #6b7280; font-size: 14px;">Add to MCP settings with the same JSON configuration above.</p>
            
            <div class="note">
                💡 <strong>Tip:</strong> Replace <code>C:\\path\\to\\MarketandStockMCP\\mcp_server.py</code> with your actual file path. Use double backslashes (\\) on Windows.
            </div>

            <h3 style="font-size: 16px; color: #374151; margin: 16px 0 8px;">🚀 Step 4: Restart & Test</h3>
            <ul>
                <li>Restart your MCP client (Claude Desktop / Cursor)</li>
                <li>Try asking: <em>"What's the current price of Apple stock?"</em></li>
                <li>The client will automatically call <code>get_quote(symbol="AAPL")</code></li>
            </ul>
        </div>

        <div class="section">
            <h2>Available Tools</h2>
            <ul>
                <li><code>get_quote(symbol: str)</code> — Get real-time stock price, daily change, high, low, open, previous close</li>
                <li><code>get_market_news(category: str, min_id: int)</code> — Get latest market news by category (general/forex/crypto/merger)</li>
                <li><code>get_company_news(symbol: str, from_date: str, to_date: str)</code> — Get company-specific news within date range</li>
            </ul>
        </div>

        <div class="section">
            <h2>Web UI Testing</h2>
            <ul>
                <li>Use the tabs above to test tools manually through the web interface</li>
                <li><strong>Health Check</strong> - Verify API connectivity</li>
                <li><strong>Tool Tabs</strong> - Test each tool with custom parameters</li>
                <li><strong>API Key Config</strong> - Configure API key for web testing (not needed for MCP client use)</li>
            </ul>
            <div class="note">
                💡 <strong>Note:</strong> This web UI is for testing only. For production use, connect via MCP client as described above.
            </div>
        </div>

        <div class="section">
            <h2>Technical Details</h2>
            <ul>
                <li><strong>Protocol:</strong> Standard MCP (Model Context Protocol)</li>
                <li><strong>Transport:</strong> JSON-RPC over Server-Sent Events (SSE)</li>
                <li><strong>Data Source:</strong> Finnhub API (<a href="https://finnhub.io/docs/api" target="_blank" style="color: #3b82f6;">docs</a>)</li>
                <li><strong>Compatibility:</strong> All MCP-compliant clients</li>
                <li><strong>Rate Limits:</strong> ~60 requests/min (free tier)</li>
            </ul>
        </div>
    </div>
</div>

<script>
console.log('[MCP] Finnhub MCP Server - Standard Protocol (JSON-RPC over SSE)');
console.log('[MCP] For MCP client setup, see instructions above');
</script>