Spaces:

JC321
/

EasyReportDataMCP

Runtime error

App Files Files Community

JC321 commited on Nov 28, 2025

Commit

47c4f0e

verified ·

1 Parent(s): 7fca351

Upload 3 files

Browse files

Files changed (3) hide show

app.py +14 -594
templates/index.html +453 -0
templates/test.html +135 -0

app.py CHANGED Viewed

@@ -3,8 +3,9 @@ Simple FastAPI web interface for MCP Server usage guide
 Integrated with MCP server directly
 """
 from fastapi import FastAPI, Request
-from fastapi.responses import HTMLResponse, JSONResponse, Response
 from fastapi.middleware.cors import CORSMiddleware
 import uvicorn
 import json
@@ -249,605 +250,24 @@ async def mcp_http_endpoint(request: Request):
             status_code=500
         )
-HTML_CONTENT = """
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SEC Financial Data MCP Server</title>
-    <style>
-        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: #f5f5f5; }
-        .container { background: white; border-radius: 8px; padding: 30px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
-        h1 { color: #2563eb; border-bottom: 3px solid #2563eb; padding-bottom: 10px; }
-        h2 { color: #1e40af; margin-top: 30px; }
-        h3 { color: #1e3a8a; }
-        .endpoint { background: #e0e7ff; padding: 15px; border-radius: 5px; margin: 15px 0; font-family: monospace; }
-        .tool { background: #f0f9ff; border-left: 4px solid #2563eb; padding: 15px; margin: 10px 0; border-radius: 4px; }
-        .tool-header { display: flex; align-items: center; cursor: pointer; user-select: none; }
-        .tool-header:hover { background: #e0f2fe; margin: -5px -10px; padding: 5px 10px; border-radius: 4px; }
-        .tool-toggle { font-size: 14px; margin-right: 10px; transition: transform 0.3s; display: inline-block; }
-        .tool-toggle.expanded { transform: rotate(90deg); }
-        .tool-name { font-weight: bold; color: #1e40af; font-size: 18px; flex: 1; }
-        .tool-content { display: none; margin-top: 15px; padding-top: 15px; border-top: 1px solid #e0e7ff; }
-        .tool-content.expanded { display: block; }
-        .test-panel { background: #f8fafc; padding: 15px; border-radius: 5px; margin-top: 15px; border: 1px solid #e2e8f0; }
-        .test-input { width: 100%; padding: 8px; margin: 5px 0; border: 1px solid #cbd5e1; border-radius: 4px; font-family: monospace; font-size: 13px; }
-        .test-button { background: #2563eb; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; margin-top: 10px; }
-        .test-button:hover { background: #1e40af; }
-        .test-button:disabled { background: #94a3b8; cursor: not-allowed; }
-        .test-result { background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-wrap: break-word; font-family: monospace; font-size: 12px; max-height: 400px; overflow-y: auto; }
-        .test-status { padding: 8px 12px; border-radius: 4px; margin-top: 10px; font-size: 14px; }
-        .status-loading { background: #dbeafe; color: #1e40af; }
-        .status-success { background: #dcfce7; color: #166534; }
-        .status-error { background: #fee2e2; color: #991b1b; }
-        .code { background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 5px; overflow-x: auto; margin: 10px 0; }
-        .code pre { margin: 0; }
-        .badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: bold; }
-        .badge-success { background: #dcfce7; color: #166534; }
-        .badge-info { background: #dbeafe; color: #1e40af; }
-        .feature { display: inline-block; margin: 5px; padding: 8px 15px; background: #e0e7ff; border-radius: 5px; }
-        table { width: 100%; border-collapse: collapse; margin: 15px 0; }
-        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #e5e7eb; }
-        th { background: #f3f4f6; font-weight: 600; }
-        .status { position: fixed; top: 20px; right: 20px; background: #22c55e; color: white; padding: 10px 20px; border-radius: 20px; z-index: 1000; }
-    </style>
-</head>
-<body>
-    <div class="status">🟢 Server Running</div>
-    <div class="container">
-        <h1>📊 SEC Financial Data MCP Server</h1>
-        <p style="font-size: 18px; color: #64748b;">Access real-time SEC EDGAR financial data via Model Context Protocol</p>
-        <h2>🔗 MCP Endpoint</h2>
-        <div class="endpoint">
-            https://jc321-easyreportsmcpserver.hf.space/mcp
-        </div>
-        <p><span class="badge badge-info">Protocol: MCP 2024-11-05</span> <span class="badge badge-info">Transport: HTTP</span></p>
-        <p style="text-align: center; margin: 20px 0;">
-            <a href="/test" style="display: inline-block; padding: 12px 24px; background: #2563eb; color: white; text-decoration: none; border-radius: 6px; font-weight: bold;">🧪 Test MCP Server Live</a>
-        </p>
-        <h2>🛠️ Available Tools (7)</h2>
-        <div class="tool">
-            <div class="tool-header" onclick="toggleTool('tool1')">
-                <span class="tool-toggle" id="toggle-tool1">▶</span>
-                <div class="tool-name">1. search_company</div>
-            </div>
-            <div class="tool-content" id="content-tool1">
-                <p>Search for a company by name</p>
-                <strong>Parameters:</strong>
-                <ul>
-                    <li><code>company_name</code> (string): Company name (e.g., "Tesla", "Apple")</li>
-                </ul>
-                <strong>Example:</strong>
-                <div class="code"><pre>{
-  "company_name": "Tesla"
-}</pre></div>
-                <strong>Returns:</strong> Company CIK, name, tickers, SIC code
-                <div class="test-panel">
-                    <strong>🧪 Test this tool:</strong>
-                    <input type="text" id="input-tool1-company_name" class="test-input" placeholder="Company name (e.g., Tesla)" value="Tesla">
-                    <button class="test-button" onclick="testTool1()">Run Test</button>
-                    <div id="status-tool1"></div>
-                    <div id="result-tool1"></div>
-                </div>
-            </div>
-        </div>
-        <div class="tool">
-            <div class="tool-header" onclick="toggleTool('tool2')">
-                <span class="tool-toggle" id="toggle-tool2">▶</span>
-                <div class="tool-name">2. get_company_info</div>
-            </div>
-            <div class="tool-content" id="content-tool2">
-                <p>Get detailed company information</p>
-                <strong>Parameters:</strong>
-                <ul>
-                    <li><code>cik</code> (string): Company CIK code (10-digit format)</li>
-                </ul>
-                <strong>Example:</strong>
-                <div class="code"><pre>{
-  "cik": "0001318605"
-}</pre></div>
-                <div class="test-panel">
-                    <strong>🧪 Test this tool:</strong>
-                    <input type="text" id="input-tool2-cik" class="test-input" placeholder="CIK (e.g., 0001318605)" value="0001318605">
-                    <button class="test-button" onclick="testTool2()">Run Test</button>
-                    <div id="status-tool2"></div>
-                    <div id="result-tool2"></div>
-                </div>
-            </div>
-        </div>
-        <div class="tool">
-            <div class="tool-header" onclick="toggleTool('tool3')">
-                <span class="tool-toggle" id="toggle-tool3">▶</span>
-                <div class="tool-name">3. get_company_filings</div>
-            </div>
-            <div class="tool-content" id="content-tool3">
-                <p>Get list of SEC filings (10-K, 10-Q, etc.)</p>
-                <strong>Parameters:</strong>
-                <ul>
-                    <li><code>cik</code> (string): Company CIK code</li>
-                    <li><code>form_types</code> (array, optional): Filter by form types</li>
-                </ul>
-                <strong>Example:</strong>
-                <div class="code"><pre>{
-  "cik": "0001318605",
-  "form_types": ["10-K", "10-Q"]
-}</pre></div>
-                <div class="test-panel">
-                    <strong>🧪 Test this tool:</strong>
-                    <input type="text" id="input-tool3-cik" class="test-input" placeholder="CIK" value="0001318605">
-                    <input type="text" id="input-tool3-form_types" class="test-input" placeholder="Form types (JSON array, e.g., [\"10-K\",\"10-Q\"])" value='["10-K","10-Q"]'>
-                    <button class="test-button" onclick="testTool3()">Run Test</button>
-                    <div id="status-tool3"></div>
-                    <div id="result-tool3"></div>
-                </div>
-            </div>
-        </div>
-        <div class="tool">
-            <div class="tool-header" onclick="toggleTool('tool4')">
-                <span class="tool-toggle" id="toggle-tool4">▶</span>
-                <div class="tool-name">4. get_financial_data</div>
-            </div>
-            <div class="tool-content" id="content-tool4">
-                <p>Get financial data for a specific period</p>
-                <strong>Parameters:</strong>
-                <ul>
-                    <li><code>cik</code> (string): Company CIK code</li>
-                    <li><code>period</code> (string): Period format "YYYY" or "YYYYQX"</li>
-                </ul>
-                <strong>Examples:</strong>
-                <div class="code"><pre>// Annual data
-{
-  "cik": "0001318605",
-  "period": "2024"
-}
-// Quarterly data
-{
-  "cik": "0001318605",
-  "period": "2024Q3"
-}</pre></div>
-                <div class="test-panel">
-                    <strong>🧪 Test this tool:</strong>
-                    <input type="text" id="input-tool4-cik" class="test-input" placeholder="CIK" value="0001318605">
-                    <input type="text" id="input-tool4-period" class="test-input" placeholder="Period (e.g., 2024 or 2024Q3)" value="2024">
-                    <button class="test-button" onclick="testTool4()">Run Test</button>
-                    <div id="status-tool4"></div>
-                    <div id="result-tool4"></div>
-                </div>
-            </div>
-        </div>
-        <div class="tool">
-            <div class="tool-header" onclick="toggleTool('tool5')">
-                <span class="tool-toggle" id="toggle-tool5">▶</span>
-                <div class="tool-name">5. extract_financial_metrics ⭐</div>
-            </div>
-            <div class="tool-content" id="content-tool5">
-                <p>Extract comprehensive financial metrics for multiple years (annual + quarterly)</p>
-                <strong>Parameters:</strong>
-                <ul>
-                    <li><code>cik</code> (string): Company CIK code</li>
-                    <li><code>years</code> (integer): Number of years (1-10, default: 3)</li>
-                </ul>
-                <strong>Example:</strong>
-                <div class="code"><pre>{
-  "cik": "0001318605",
-  "years": 3
-}</pre></div>
-                <strong>Returns:</strong> Multi-year data sorted newest first (FY → Q4 → Q3 → Q2 → Q1)
-                <div class="test-panel">
-                    <strong>🧪 Test this tool:</strong>
-                    <input type="text" id="input-tool5-cik" class="test-input" placeholder="CIK" value="0001318605">
-                    <input type="number" id="input-tool5-years" class="test-input" placeholder="Years (1-10)" value="3" min="1" max="10">
-                    <button class="test-button" onclick="testTool5()">Run Test</button>
-                    <div id="status-tool5"></div>
-                    <div id="result-tool5"></div>
-                </div>
-            </div>
-        </div>
-        <div class="tool">
-            <div class="tool-header" onclick="toggleTool('tool6')">
-                <span class="tool-toggle" id="toggle-tool6">▶</span>
-                <div class="tool-name">6. get_latest_financial_data</div>
-            </div>
-            <div class="tool-content" id="content-tool6">
-                <p>Get the most recent financial data available</p>
-                <strong>Parameters:</strong>
-                <ul>
-                    <li><code>cik</code> (string): Company CIK code</li>
-                </ul>
-                <strong>Example:</strong>
-                <div class="code"><pre>{
-  "cik": "0001318605"
-}</pre></div>
-                <div class="test-panel">
-                    <strong>🧪 Test this tool:</strong>
-                    <input type="text" id="input-tool6-cik" class="test-input" placeholder="CIK" value="0001318605">
-                    <button class="test-button" onclick="testTool6()">Run Test</button>
-                    <div id="status-tool6"></div>
-                    <div id="result-tool6"></div>
-                </div>
-            </div>
-        </div>
-        <div class="tool">
-            <div class="tool-header" onclick="toggleTool('tool7')">
-                <span class="tool-toggle" id="toggle-tool7">▶</span>
-                <div class="tool-name">7. advanced_search_company</div>
-            </div>
-            <div class="tool-content" id="content-tool7">
-                <p>Advanced search supporting both company name and CIK code</p>
-                <strong>Parameters:</strong>
-                <ul>
-                    <li><code>company_input</code> (string): Company name, ticker, or CIK</li>
-                </ul>
-                <strong>Examples:</strong>
-                <div class="code"><pre>// By company name
-{
-  "company_input": "Tesla"
-}
-// By CIK
-{
-  "company_input": "0001318605"
-}</pre></div>
-                <div class="test-panel">
-                    <strong>🧪 Test this tool:</strong>
-                    <input type="text" id="input-tool7-company_input" class="test-input" placeholder="Company name or CIK" value="Tesla">
-                    <button class="test-button" onclick="testTool7()">Run Test</button>
-                    <div id="status-tool7"></div>
-                    <div id="result-tool7"></div>
-                </div>
-            </div>
-        </div>
-        <h2>📝 How to Use</h2>
-        <h3>Option 1: Claude Desktop (Recommended)</h3>
-        <p>Add to your <code>claude_desktop_config.json</code>:</p>
-        <div class="code"><pre>{
-  "mcpServers": {
-    "sec-financial-data": {
-      "url": "https://jc321-easyreportsmcpserver.hf.space/mcp",
-      "transport": "http"
-    }
-  }
-}</pre></div>
-        <p><strong>Then ask Claude:</strong></p>
-        <ul>
-            <li>"Search for Tesla's financial information"</li>
-            <li>"Get Apple's latest financial data"</li>
-            <li>"Show me Microsoft's revenue trends for the last 3 years"</li>
-        </ul>
-        <h3>Option 2: Direct API Call</h3>
-        <p><strong>List Available Tools:</strong></p>
-        <div class="code"><pre>curl -X POST https://jc321-easyreportsmcpserver.hf.space/mcp \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "jsonrpc": "2.0",
-    "method": "tools/list",
-    "id": 1
-  }'</pre></div>
-        <p><strong>Search Company (Tesla):</strong></p>
-        <div class="code"><pre>curl -X POST https://jc321-easyreportsmcpserver.hf.space/mcp \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "jsonrpc": "2.0",
-    "method": "tools/call",
-    "params": {
-      "name": "search_company",
-      "arguments": {"company_name": "Tesla"}
-    },
-    "id": 2
-  }'</pre></div>
-        <p><strong>Get 3-Year Financial Trends:</strong></p>
-        <div class="code"><pre>curl -X POST https://jc321-easyreportsmcpserver.hf.space/mcp \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "jsonrpc": "2.0",
-    "method": "tools/call",
-    "params": {
-      "name": "extract_financial_metrics",
-      "arguments": {"cik": "0001318605", "years": 3}
-    },
-    "id": 3
-  }'</pre></div>
-        <h2>🔑 Key Features</h2>
-        <div class="feature">✅ Pure JSON responses</div>
-        <div class="feature">✅ Chronological ordering</div>
-        <div class="feature">✅ Comprehensive metrics</div>
-        <div class="feature">✅ Real-time SEC EDGAR data</div>
-        <div class="feature">✅ 7 powerful tools</div>
-        <h2>📊 Response Example</h2>
-        <div class="code"><pre>{
-  "jsonrpc": "2.0",
-  "id": 2,
-  "result": {
-    "content": [{
-      "type": "text",
-      "text": "{\\"cik\\":\\"0001318605\\",\\"name\\":\\"TESLA, INC.\\",\\"tickers\\":[\\"TSLA\\"]}"
-    }]
-  }
-}</pre></div>
-        <h2>ℹ️ About</h2>
-        <table>
-            <tr><th>Version</th><td>1.0.0 (FastMCP)</td></tr>
-            <tr><th>Protocol</th><td>Model Context Protocol (MCP) 2024-11-05</td></tr>
-            <tr><th>Transport</th><td>HTTP (Stateless)</td></tr>
-            <tr><th>Data Source</th><td>SEC EDGAR Database</td></tr>
-            <tr><th>Framework</th><td>Anthropic FastMCP SDK</td></tr>
-            <tr><th>Maintained by</th><td>Juntao Peng (jtyxabc@gmail.com)</td></tr>
-        </table>
-        <p style="text-align: center; color: #64748b; margin-top: 40px;">
-            <strong>Status:</strong> <span class="badge badge-success">Online</span> |
-            <strong>Uptime:</strong> Always-On
-        </p>
-    </div>
-    <script>
-        // Toggle tool content
-        function toggleTool(toolId) {
-            const content = document.getElementById('content-' + toolId);
-            const toggle = document.getElementById('toggle-' + toolId);
-            if (content.classList.contains('expanded')) {
-                content.classList.remove('expanded');
-                toggle.classList.remove('expanded');
-            } else {
-                content.classList.add('expanded');
-                toggle.classList.add('expanded');
-            }
-        }
-        // Common function to call MCP API
-        async function callMCP(toolName, arguments, statusId, resultId) {
-            const statusDiv = document.getElementById(statusId);
-            const resultDiv = document.getElementById(resultId);
-            const button = event.target;
-            statusDiv.innerHTML = '<div class="test-status status-loading">⏳ Sending request...</div>';
-            resultDiv.innerHTML = '';
-            button.disabled = true;
-            try {
-                const response = await fetch('/mcp', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        jsonrpc: '2.0',
-                        method: 'tools/call',
-                        params: {
-                            name: toolName,
-                            arguments: arguments
-                        },
-                        id: Date.now()
-                    })
-                });
-                const data = await response.json();
-                statusDiv.innerHTML = '<div class="test-status status-success">✅ Success!</div>';
-                resultDiv.innerHTML = '<div class="test-result">' + JSON.stringify(data, null, 2) + '</div>';
-            } catch (error) {
-                statusDiv.innerHTML = '<div class="test-status status-error">❌ Error: ' + error.message + '</div>';
-                resultDiv.innerHTML = '<div class="test-result">' + JSON.stringify({error: error.toString()}, null, 2) + '</div>';
-            } finally {
-                button.disabled = false;
-            }
-        }
-        // Tool-specific test functions
-        function testTool1() {
-            const companyName = document.getElementById('input-tool1-company_name').value;
-            callMCP('search_company', { company_name: companyName }, 'status-tool1', 'result-tool1');
-        }
-        function testTool2() {
-            const cik = document.getElementById('input-tool2-cik').value;
-            callMCP('get_company_info', { cik: cik }, 'status-tool2', 'result-tool2');
-        }
-        function testTool3() {
-            const cik = document.getElementById('input-tool3-cik').value;
-            const formTypesStr = document.getElementById('input-tool3-form_types').value;
-            try {
-                const formTypes = formTypesStr ? JSON.parse(formTypesStr) : null;
-                callMCP('get_company_filings', { cik: cik, form_types: formTypes }, 'status-tool3', 'result-tool3');
-            } catch (e) {
-                document.getElementById('status-tool3').innerHTML = '<div class="test-status status-error">❌ Invalid JSON for form_types</div>';
-            }
-        }
-        function testTool4() {
-            const cik = document.getElementById('input-tool4-cik').value;
-            const period = document.getElementById('input-tool4-period').value;
-            callMCP('get_financial_data', { cik: cik, period: period }, 'status-tool4', 'result-tool4');
-        }
-        function testTool5() {
-            const cik = document.getElementById('input-tool5-cik').value;
-            const years = parseInt(document.getElementById('input-tool5-years').value);
-            callMCP('extract_financial_metrics', { cik: cik, years: years }, 'status-tool5', 'result-tool5');
-        }
-        function testTool6() {
-            const cik = document.getElementById('input-tool6-cik').value;
-            callMCP('get_latest_financial_data', { cik: cik }, 'status-tool6', 'result-tool6');
-        }
-        function testTool7() {
-            const companyInput = document.getElementById('input-tool7-company_input').value;
-            callMCP('advanced_search_company', { company_input: companyInput }, 'status-tool7', 'result-tool7');
-        }
-    </script>
-</body>
-</html>
-"""
 @app.get("/", response_class=HTMLResponse)
 async def root():
-    return HTML_CONTENT
 @app.get("/test", response_class=HTMLResponse)
 async def test_page():
-    return """
-<!DOCTYPE html>
-<html>
-<head>
-    <title>MCP Server Test</title>
-    <style>
-        body { font-family: monospace; padding: 20px; max-width: 1000px; margin: 0 auto; }
-        button { padding: 10px 20px; margin: 5px; cursor: pointer; background: #2563eb; color: white; border: none; border-radius: 5px; }
-        button:hover { background: #1e40af; }
-        .result { background: #1e293b; color: #e2e8f0; padding: 15px; margin: 10px 0; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }
-        .status { padding: 10px; margin: 10px 0; border-radius: 5px; }
-        .success { background: #dcfce7; color: #166534; }
-        .error { background: #fee2e2; color: #991b1b; }
-    </style>
-</head>
-<body>
-    <h1>🧪 MCP Server Live Test</h1>
-    <p>Test the MCP server at: <code>https://jc321-easyreportsmcpserver.hf.space/mcp</code></p>
-    <div>
-        <button onclick="testToolsList()">📋 Test: List Tools</button>
-        <button onclick="testSearchCompany()">🔍 Test: Search Tesla</button>
-        <button onclick="testFinancialMetrics()">📊 Test: Get Financial Metrics</button>
-    </div>
-    <div id="status"></div>
-    <div id="result"></div>
-    <script>
-        const endpoint = '/mcp';  // Use relative path for same-origin requests
-        function showStatus(msg, isError) {
-            document.getElementById('status').innerHTML =
-                `<div class="status ${isError ? 'error' : 'success'}">${msg}</div>`;
-        }
-        function showResult(data) {
-            document.getElementById('result').innerHTML =
-                `<div class="result">${JSON.stringify(data, null, 2)}</div>`;
-        }
-        async function testToolsList() {
-            showStatus('⏳ Sending request to list tools...');
-            try {
-                const response = await fetch(endpoint, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        jsonrpc: '2.0',
-                        method: 'tools/list',
-                        id: 1
-                    })
-                });
-                const text = await response.text();
-                showStatus('✅ Response received!', false);
-                // Try to parse as JSON or show raw text
-                try {
-                    const json = JSON.parse(text);
-                    showResult(json);
-                } catch {
-                    showResult({ raw_response: text });
-                }
-            } catch (error) {
-                showStatus('❌ Error: ' + error.message, true);
-                showResult({ error: error.toString() });
-            }
-        }
-        async function testSearchCompany() {
-            showStatus('⏳ Searching for Tesla...');
-            try {
-                const response = await fetch(endpoint, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        jsonrpc: '2.0',
-                        method: 'tools/call',
-                        params: {
-                            name: 'search_company',
-                            arguments: { company_name: 'Tesla' }
-                        },
-                        id: 2
-                    })
-                });
-                const text = await response.text();
-                showStatus('✅ Response received!', false);
-                try {
-                    const json = JSON.parse(text);
-                    showResult(json);
-                } catch {
-                    showResult({ raw_response: text });
-                }
-            } catch (error) {
-                showStatus('❌ Error: ' + error.message, true);
-                showResult({ error: error.toString() });
-            }
-        }
-        async function testFinancialMetrics() {
-            showStatus('⏳ Getting Tesla financial metrics (3 years)...');
-            try {
-                const response = await fetch(endpoint, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        jsonrpc: '2.0',
-                        method: 'tools/call',
-                        params: {
-                            name: 'extract_financial_metrics',
-                            arguments: { cik: '0001318605', years: 3 }
-                        },
-                        id: 3
-                    })
-                });
-                const text = await response.text();
-                showStatus('✅ Response received!', false);
-                try {
-                    const json = JSON.parse(text);
-                    showResult(json);
-                } catch {
-                    showResult({ raw_response: text });
-                }
-            } catch (error) {
-                showStatus('❌ Error: ' + error.message, true);
-                showResult({ error: error.toString() });
-            }
-        }
-    </script>
-</body>
-</html>
-    """
 if __name__ == "__main__":
     uvicorn.run(app, host="0.0.0.0", port=7860)

 Integrated with MCP server directly
 """
 from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse, JSONResponse, Response, FileResponse
 from fastapi.middleware.cors import CORSMiddleware
+from pathlib import Path
 import uvicorn
 import json
             status_code=500
         )
+# Get the template directory path
+TEMPLATES_DIR = Path(__file__).parent / "templates"
 @app.get("/", response_class=HTMLResponse)
 async def root():
+    """Serve the main index page"""
+    index_path = TEMPLATES_DIR / "index.html"
+    if index_path.exists():
+        return FileResponse(index_path)
+    return HTMLResponse("<h1>Error: Template not found</h1>", status_code=404)
 @app.get("/test", response_class=HTMLResponse)
 async def test_page():
+    """Serve the test page"""
+    test_path = TEMPLATES_DIR / "test.html"
+    if test_path.exists():
+        return FileResponse(test_path)
+    return HTMLResponse("<h1>Error: Test page not found</h1>", status_code=404)
 if __name__ == "__main__":
     uvicorn.run(app, host="0.0.0.0", port=7860)

templates/index.html ADDED Viewed

	@@ -0,0 +1,453 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SEC Financial Data MCP Server</title>
+    <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: #f5f5f5; }
+        .container { background: white; border-radius: 8px; padding: 30px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        h1 { color: #2563eb; border-bottom: 3px solid #2563eb; padding-bottom: 10px; }
+        h2 { color: #1e40af; margin-top: 30px; }
+        h3 { color: #1e3a8a; }
+        .endpoint { background: #e0e7ff; padding: 15px; border-radius: 5px; margin: 15px 0; font-family: monospace; }
+        .tool { background: #f0f9ff; border-left: 4px solid #2563eb; padding: 15px; margin: 10px 0; border-radius: 4px; }
+        .tool-header { display: flex; align-items: center; cursor: pointer; user-select: none; }
+        .tool-header:hover { background: #e0f2fe; margin: -5px -10px; padding: 5px 10px; border-radius: 4px; }
+        .tool-toggle { font-size: 14px; margin-right: 10px; transition: transform 0.3s; display: inline-block; }
+        .tool-toggle.expanded { transform: rotate(90deg); }
+        .tool-name { font-weight: bold; color: #1e40af; font-size: 18px; flex: 1; }
+        .tool-content { display: none; margin-top: 15px; padding-top: 15px; border-top: 1px solid #e0e7ff; }
+        .tool-content.expanded { display: block; }
+        .test-panel { background: #f8fafc; padding: 15px; border-radius: 5px; margin-top: 15px; border: 1px solid #e2e8f0; }
+        .test-input { width: 100%; padding: 8px; margin: 5px 0; border: 1px solid #cbd5e1; border-radius: 4px; font-family: monospace; font-size: 13px; }
+        .test-button { background: #2563eb; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; margin-top: 10px; }
+        .test-button:hover { background: #1e40af; }
+        .test-button:disabled { background: #94a3b8; cursor: not-allowed; }
+        .test-result { background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-wrap: break-word; font-family: monospace; font-size: 12px; max-height: 400px; overflow-y: auto; }
+        .test-status { padding: 8px 12px; border-radius: 4px; margin-top: 10px; font-size: 14px; }
+        .status-loading { background: #dbeafe; color: #1e40af; }
+        .status-success { background: #dcfce7; color: #166534; }
+        .status-error { background: #fee2e2; color: #991b1b; }
+        .code { background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 5px; overflow-x: auto; margin: 10px 0; }
+        .code pre { margin: 0; }
+        .badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: bold; }
+        .badge-success { background: #dcfce7; color: #166534; }
+        .badge-info { background: #dbeafe; color: #1e40af; }
+        .feature { display: inline-block; margin: 5px; padding: 8px 15px; background: #e0e7ff; border-radius: 5px; }
+        table { width: 100%; border-collapse: collapse; margin: 15px 0; }
+        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #e5e7eb; }
+        th { background: #f3f4f6; font-weight: 600; }
+        .status { position: fixed; top: 20px; right: 20px; background: #22c55e; color: white; padding: 10px 20px; border-radius: 20px; z-index: 1000; }
+    </style>
+</head>
+<body>
+    <div class="status">🟢 Server Running</div>
+    <div class="container">
+        <h1>📊 SEC Financial Data MCP Server</h1>
+        <p style="font-size: 18px; color: #64748b;">Access real-time SEC EDGAR financial data via Model Context Protocol</p>
+        <h2>🔗 MCP Endpoint</h2>
+        <div class="endpoint">
+            https://jc321-easyreportsmcpserver.hf.space/mcp
+        </div>
+        <p><span class="badge badge-info">Protocol: MCP 2024-11-05</span> <span class="badge badge-info">Transport: HTTP</span></p>
+        <p style="text-align: center; margin: 20px 0;">
+            <a href="/test" style="display: inline-block; padding: 12px 24px; background: #2563eb; color: white; text-decoration: none; border-radius: 6px; font-weight: bold;">🧪 Test MCP Server Live</a>
+        </p>
+        <h2>🛠️ Available Tools (7)</h2>
+        <div class="tool">
+            <div class="tool-header" onclick="toggleTool('tool1')">
+                <span class="tool-toggle" id="toggle-tool1">▶</span>
+                <div class="tool-name">1. search_company</div>
+            </div>
+            <div class="tool-content" id="content-tool1">
+                <p>Search for a company by name</p>
+                <strong>Parameters:</strong>
+                <ul>
+                    <li><code>company_name</code> (string): Company name (e.g., "Tesla", "Apple")</li>
+                </ul>
+                <strong>Example:</strong>
+                <div class="code"><pre>{
+  "company_name": "Tesla"
+}</pre></div>
+                <strong>Returns:</strong> Company CIK, name, tickers, SIC code
+                <div class="test-panel">
+                    <strong>🧪 Test this tool:</strong>
+                    <input type="text" id="input-tool1-company_name" class="test-input" placeholder="Company name (e.g., Tesla)" value="Tesla">
+                    <button class="test-button" onclick="testTool1()">Run Test</button>
+                    <div id="status-tool1"></div>
+                    <div id="result-tool1"></div>
+                </div>
+            </div>
+        </div>
+        <div class="tool">
+            <div class="tool-header" onclick="toggleTool('tool2')">
+                <span class="tool-toggle" id="toggle-tool2">▶</span>
+                <div class="tool-name">2. get_company_info</div>
+            </div>
+            <div class="tool-content" id="content-tool2">
+                <p>Get detailed company information</p>
+                <strong>Parameters:</strong>
+                <ul>
+                    <li><code>cik</code> (string): Company CIK code (10-digit format)</li>
+                </ul>
+                <strong>Example:</strong>
+                <div class="code"><pre>{
+  "cik": "0001318605"
+}</pre></div>
+                <div class="test-panel">
+                    <strong>🧪 Test this tool:</strong>
+                    <input type="text" id="input-tool2-cik" class="test-input" placeholder="CIK (e.g., 0001318605)" value="0001318605">
+                    <button class="test-button" onclick="testTool2()">Run Test</button>
+                    <div id="status-tool2"></div>
+                    <div id="result-tool2"></div>
+                </div>
+            </div>
+        </div>
+        <div class="tool">
+            <div class="tool-header" onclick="toggleTool('tool3')">
+                <span class="tool-toggle" id="toggle-tool3">▶</span>
+                <div class="tool-name">3. get_company_filings</div>
+            </div>
+            <div class="tool-content" id="content-tool3">
+                <p>Get list of SEC filings (10-K, 10-Q, etc.)</p>
+                <strong>Parameters:</strong>
+                <ul>
+                    <li><code>cik</code> (string): Company CIK code</li>
+                    <li><code>form_types</code> (array, optional): Filter by form types</li>
+                </ul>
+                <strong>Example:</strong>
+                <div class="code"><pre>{
+  "cik": "0001318605",
+  "form_types": ["10-K", "10-Q"]
+}</pre></div>
+                <div class="test-panel">
+                    <strong>🧪 Test this tool:</strong>
+                    <input type="text" id="input-tool3-cik" class="test-input" placeholder="CIK" value="0001318605">
+                    <input type="text" id="input-tool3-form_types" class="test-input" placeholder="Form types (JSON array, e.g., [\"10-K\",\"10-Q\"])" value='["10-K","10-Q"]'>
+                    <button class="test-button" onclick="testTool3()">Run Test</button>
+                    <div id="status-tool3"></div>
+                    <div id="result-tool3"></div>
+                </div>
+            </div>
+        </div>
+        <div class="tool">
+            <div class="tool-header" onclick="toggleTool('tool4')">
+                <span class="tool-toggle" id="toggle-tool4">▶</span>
+                <div class="tool-name">4. get_financial_data</div>
+            </div>
+            <div class="tool-content" id="content-tool4">
+                <p>Get financial data for a specific period</p>
+                <strong>Parameters:</strong>
+                <ul>
+                    <li><code>cik</code> (string): Company CIK code</li>
+                    <li><code>period</code> (string): Period format "YYYY" or "YYYYQX"</li>
+                </ul>
+                <strong>Examples:</strong>
+                <div class="code"><pre>// Annual data
+{
+  "cik": "0001318605",
+  "period": "2024"
+}
+// Quarterly data
+{
+  "cik": "0001318605",
+  "period": "2024Q3"
+}</pre></div>
+                <div class="test-panel">
+                    <strong>🧪 Test this tool:</strong>
+                    <input type="text" id="input-tool4-cik" class="test-input" placeholder="CIK" value="0001318605">
+                    <input type="text" id="input-tool4-period" class="test-input" placeholder="Period (e.g., 2024 or 2024Q3)" value="2024">
+                    <button class="test-button" onclick="testTool4()">Run Test</button>
+                    <div id="status-tool4"></div>
+                    <div id="result-tool4"></div>
+                </div>
+            </div>
+        </div>
+        <div class="tool">
+            <div class="tool-header" onclick="toggleTool('tool5')">
+                <span class="tool-toggle" id="toggle-tool5">▶</span>
+                <div class="tool-name">5. extract_financial_metrics ⭐</div>
+            </div>
+            <div class="tool-content" id="content-tool5">
+                <p>Extract comprehensive financial metrics for multiple years (annual + quarterly)</p>
+                <strong>Parameters:</strong>
+                <ul>
+                    <li><code>cik</code> (string): Company CIK code</li>
+                    <li><code>years</code> (integer): Number of years (1-10, default: 3)</li>
+                </ul>
+                <strong>Example:</strong>
+                <div class="code"><pre>{
+  "cik": "0001318605",
+  "years": 3
+}</pre></div>
+                <strong>Returns:</strong> Multi-year data sorted newest first (FY → Q4 → Q3 → Q2 → Q1)
+                <div class="test-panel">
+                    <strong>🧪 Test this tool:</strong>
+                    <input type="text" id="input-tool5-cik" class="test-input" placeholder="CIK" value="0001318605">
+                    <input type="number" id="input-tool5-years" class="test-input" placeholder="Years (1-10)" value="3" min="1" max="10">
+                    <button class="test-button" onclick="testTool5()">Run Test</button>
+                    <div id="status-tool5"></div>
+                    <div id="result-tool5"></div>
+                </div>
+            </div>
+        </div>
+        <div class="tool">
+            <div class="tool-header" onclick="toggleTool('tool6')">
+                <span class="tool-toggle" id="toggle-tool6">▶</span>
+                <div class="tool-name">6. get_latest_financial_data</div>
+            </div>
+            <div class="tool-content" id="content-tool6">
+                <p>Get the most recent financial data available</p>
+                <strong>Parameters:</strong>
+                <ul>
+                    <li><code>cik</code> (string): Company CIK code</li>
+                </ul>
+                <strong>Example:</strong>
+                <div class="code"><pre>{
+  "cik": "0001318605"
+}</pre></div>
+                <div class="test-panel">
+                    <strong>🧪 Test this tool:</strong>
+                    <input type="text" id="input-tool6-cik" class="test-input" placeholder="CIK" value="0001318605">
+                    <button class="test-button" onclick="testTool6()">Run Test</button>
+                    <div id="status-tool6"></div>
+                    <div id="result-tool6"></div>
+                </div>
+            </div>
+        </div>
+        <div class="tool">
+            <div class="tool-header" onclick="toggleTool('tool7')">
+                <span class="tool-toggle" id="toggle-tool7">▶</span>
+                <div class="tool-name">7. advanced_search_company</div>
+            </div>
+            <div class="tool-content" id="content-tool7">
+                <p>Advanced search supporting both company name and CIK code</p>
+                <strong>Parameters:</strong>
+                <ul>
+                    <li><code>company_input</code> (string): Company name, ticker, or CIK</li>
+                </ul>
+                <strong>Examples:</strong>
+                <div class="code"><pre>// By company name
+{
+  "company_input": "Tesla"
+}
+// By CIK
+{
+  "company_input": "0001318605"
+}</pre></div>
+                <div class="test-panel">
+                    <strong>🧪 Test this tool:</strong>
+                    <input type="text" id="input-tool7-company_input" class="test-input" placeholder="Company name or CIK" value="Tesla">
+                    <button class="test-button" onclick="testTool7()">Run Test</button>
+                    <div id="status-tool7"></div>
+                    <div id="result-tool7"></div>
+                </div>
+            </div>
+        </div>
+        <h2>📝 How to Use</h2>
+        <h3>Option 1: Claude Desktop (Recommended)</h3>
+        <p>Add to your <code>claude_desktop_config.json</code>:</p>
+        <div class="code"><pre>{
+  "mcpServers": {
+    "sec-financial-data": {
+      "url": "https://jc321-easyreportsmcpserver.hf.space/mcp",
+      "transport": "http"
+    }
+  }
+}</pre></div>
+        <p><strong>Then ask Claude:</strong></p>
+        <ul>
+            <li>"Search for Tesla's financial information"</li>
+            <li>"Get Apple's latest financial data"</li>
+            <li>"Show me Microsoft's revenue trends for the last 3 years"</li>
+        </ul>
+        <h3>Option 2: Direct API Call</h3>
+        <p><strong>List Available Tools:</strong></p>
+        <div class="code"><pre>curl -X POST https://jc321-easyreportsmcpserver.hf.space/mcp \
+  -H "Content-Type: application/json" \
+  -d '{
+    "jsonrpc": "2.0",
+    "method": "tools/list",
+    "id": 1
+  }'</pre></div>
+        <p><strong>Search Company (Tesla):</strong></p>
+        <div class="code"><pre>curl -X POST https://jc321-easyreportsmcpserver.hf.space/mcp \
+  -H "Content-Type: application/json" \
+  -d '{
+    "jsonrpc": "2.0",
+    "method": "tools/call",
+    "params": {
+      "name": "search_company",
+      "arguments": {"company_name": "Tesla"}
+    },
+    "id": 2
+  }'</pre></div>
+        <p><strong>Get 3-Year Financial Trends:</strong></p>
+        <div class="code"><pre>curl -X POST https://jc321-easyreportsmcpserver.hf.space/mcp \
+  -H "Content-Type: application/json" \
+  -d '{
+    "jsonrpc": "2.0",
+    "method": "tools/call",
+    "params": {
+      "name": "extract_financial_metrics",
+      "arguments": {"cik": "0001318605", "years": 3}
+    },
+    "id": 3
+  }'</pre></div>
+        <h2>🔑 Key Features</h2>
+        <div class="feature">✅ Pure JSON responses</div>
+        <div class="feature">✅ Chronological ordering</div>
+        <div class="feature">✅ Comprehensive metrics</div>
+        <div class="feature">✅ Real-time SEC EDGAR data</div>
+        <div class="feature">✅ 7 powerful tools</div>
+        <h2>📊 Response Example</h2>
+        <div class="code"><pre>{
+  "jsonrpc": "2.0",
+  "id": 2,
+  "result": {
+    "content": [{
+      "type": "text",
+      "text": "{\"cik\":\"0001318605\",\"name\":\"TESLA, INC.\",\"tickers\":[\"TSLA\"]}"
+    }]
+  }
+}</pre></div>
+        <h2>ℹ️ About</h2>
+        <table>
+            <tr><th>Version</th><td>1.0.0 (FastMCP)</td></tr>
+            <tr><th>Protocol</th><td>Model Context Protocol (MCP) 2024-11-05</td></tr>
+            <tr><th>Transport</th><td>HTTP (Stateless)</td></tr>
+            <tr><th>Data Source</th><td>SEC EDGAR Database</td></tr>
+            <tr><th>Framework</th><td>Anthropic FastMCP SDK</td></tr>
+            <tr><th>Maintained by</th><td>Juntao Peng (jtyxabc@gmail.com)</td></tr>
+        </table>
+        <p style="text-align: center; color: #64748b; margin-top: 40px;">
+            <strong>Status:</strong> <span class="badge badge-success">Online</span> |
+            <strong>Uptime:</strong> Always-On
+        </p>
+    </div>
+    <script>
+        // Toggle tool content
+        function toggleTool(toolId) {
+            const content = document.getElementById('content-' + toolId);
+            const toggle = document.getElementById('toggle-' + toolId);
+            if (content.classList.contains('expanded')) {
+                content.classList.remove('expanded');
+                toggle.classList.remove('expanded');
+            } else {
+                content.classList.add('expanded');
+                toggle.classList.add('expanded');
+            }
+        }
+        // Common function to call MCP API
+        async function callMCP(toolName, arguments, statusId, resultId) {
+            const statusDiv = document.getElementById(statusId);
+            const resultDiv = document.getElementById(resultId);
+            const button = event.target;
+            statusDiv.innerHTML = '<div class="test-status status-loading">⏳ Sending request...</div>';
+            resultDiv.innerHTML = '';
+            button.disabled = true;
+            try {
+                const response = await fetch('/mcp', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        jsonrpc: '2.0',
+                        method: 'tools/call',
+                        params: {
+                            name: toolName,
+                            arguments: arguments
+                        },
+                        id: Date.now()
+                    })
+                });
+                const data = await response.json();
+                statusDiv.innerHTML = '<div class="test-status status-success">✅ Success!</div>';
+                resultDiv.innerHTML = '<div class="test-result">' + JSON.stringify(data, null, 2) + '</div>';
+            } catch (error) {
+                statusDiv.innerHTML = '<div class="test-status status-error">❌ Error: ' + error.message + '</div>';
+                resultDiv.innerHTML = '<div class="test-result">' + JSON.stringify({error: error.toString()}, null, 2) + '</div>';
+            } finally {
+                button.disabled = false;
+            }
+        }
+        // Tool-specific test functions
+        function testTool1() {
+            const companyName = document.getElementById('input-tool1-company_name').value;
+            callMCP('search_company', { company_name: companyName }, 'status-tool1', 'result-tool1');
+        }
+        function testTool2() {
+            const cik = document.getElementById('input-tool2-cik').value;
+            callMCP('get_company_info', { cik: cik }, 'status-tool2', 'result-tool2');
+        }
+        function testTool3() {
+            const cik = document.getElementById('input-tool3-cik').value;
+            const formTypesStr = document.getElementById('input-tool3-form_types').value;
+            try {
+                const formTypes = formTypesStr ? JSON.parse(formTypesStr) : null;
+                callMCP('get_company_filings', { cik: cik, form_types: formTypes }, 'status-tool3', 'result-tool3');
+            } catch (e) {
+                document.getElementById('status-tool3').innerHTML = '<div class="test-status status-error">❌ Invalid JSON for form_types</div>';
+            }
+        }
+        function testTool4() {
+            const cik = document.getElementById('input-tool4-cik').value;
+            const period = document.getElementById('input-tool4-period').value;
+            callMCP('get_financial_data', { cik: cik, period: period }, 'status-tool4', 'result-tool4');
+        }
+        function testTool5() {
+            const cik = document.getElementById('input-tool5-cik').value;
+            const years = parseInt(document.getElementById('input-tool5-years').value);
+            callMCP('extract_financial_metrics', { cik: cik, years: years }, 'status-tool5', 'result-tool5');
+        }
+        function testTool6() {
+            const cik = document.getElementById('input-tool6-cik').value;
+            callMCP('get_latest_financial_data', { cik: cik }, 'status-tool6', 'result-tool6');
+        }
+        function testTool7() {
+            const companyInput = document.getElementById('input-tool7-company_input').value;
+            callMCP('advanced_search_company', { company_input: companyInput }, 'status-tool7', 'result-tool7');
+        }
+    </script>
+</body>
+</html>

templates/test.html ADDED Viewed

	@@ -0,0 +1,135 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>MCP Server Test</title>
+    <style>
+        body { font-family: monospace; padding: 20px; max-width: 1000px; margin: 0 auto; }
+        button { padding: 10px 20px; margin: 5px; cursor: pointer; background: #2563eb; color: white; border: none; border-radius: 5px; }
+        button:hover { background: #1e40af; }
+        .result { background: #1e293b; color: #e2e8f0; padding: 15px; margin: 10px 0; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }
+        .status { padding: 10px; margin: 10px 0; border-radius: 5px; }
+        .success { background: #dcfce7; color: #166534; }
+        .error { background: #fee2e2; color: #991b1b; }
+    </style>
+</head>
+<body>
+    <h1>🧪 MCP Server Live Test</h1>
+    <p>Test the MCP server at: <code>https://jc321-easyreportsmcpserver.hf.space/mcp</code></p>
+    <div>
+        <button onclick="testToolsList()">📋 Test: List Tools</button>
+        <button onclick="testSearchCompany()">🔍 Test: Search Tesla</button>
+        <button onclick="testFinancialMetrics()">📊 Test: Get Financial Metrics</button>
+    </div>
+    <div id="status"></div>
+    <div id="result"></div>
+    <script>
+        const endpoint = '/mcp';  // Use relative path for same-origin requests
+        function showStatus(msg, isError) {
+            document.getElementById('status').innerHTML =
+                `<div class="status ${isError ? 'error' : 'success'}">${msg}</div>`;
+        }
+        function showResult(data) {
+            document.getElementById('result').innerHTML =
+                `<div class="result">${JSON.stringify(data, null, 2)}</div>`;
+        }
+        async function testToolsList() {
+            showStatus('⏳ Sending request to list tools...');
+            try {
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        jsonrpc: '2.0',
+                        method: 'tools/list',
+                        id: 1
+                    })
+                });
+                const text = await response.text();
+                showStatus('✅ Response received!', false);
+                // Try to parse as JSON or show raw text
+                try {
+                    const json = JSON.parse(text);
+                    showResult(json);
+                } catch {
+                    showResult({ raw_response: text });
+                }
+            } catch (error) {
+                showStatus('❌ Error: ' + error.message, true);
+                showResult({ error: error.toString() });
+            }
+        }
+        async function testSearchCompany() {
+            showStatus('⏳ Searching for Tesla...');
+            try {
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        jsonrpc: '2.0',
+                        method: 'tools/call',
+                        params: {
+                            name: 'search_company',
+                            arguments: { company_name: 'Tesla' }
+                        },
+                        id: 2
+                    })
+                });
+                const text = await response.text();
+                showStatus('✅ Response received!', false);
+                try {
+                    const json = JSON.parse(text);
+                    showResult(json);
+                } catch {
+                    showResult({ raw_response: text });
+                }
+            } catch (error) {
+                showStatus('❌ Error: ' + error.message, true);
+                showResult({ error: error.toString() });
+            }
+        }
+        async function testFinancialMetrics() {
+            showStatus('⏳ Getting Tesla financial metrics (3 years)...');
+            try {
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        jsonrpc: '2.0',
+                        method: 'tools/call',
+                        params: {
+                            name: 'extract_financial_metrics',
+                            arguments: { cik: '0001318605', years: 3 }
+                        },
+                        id: 3
+                    })
+                });
+                const text = await response.text();
+                showStatus('✅ Response received!', false);
+                try {
+                    const json = JSON.parse(text);
+                    showResult(json);
+                } catch {
+                    showResult({ raw_response: text });
+                }
+            } catch (error) {
+                showStatus('❌ Error: ' + error.message, true);
+                showResult({ error: error.toString() });
+            }
+        }
+    </script>
+</body>
+</html>