JC321's picture
Upload 2 files
83b398d verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEC Financial Report MCP Server</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 1000px;
margin: 30px auto;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
background: white;
border-radius: 12px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
h1 {
color: #667eea;
margin-top: 0;
}
.badge {
display: inline-block;
background: #10b981;
color: white;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
}
.config-box {
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
font-family: 'Monaco', 'Courier New', monospace;
font-size: 13px;
overflow-x: auto;
}
.tools {
margin: 30px 0;
}
.tool {
background: #f9f9f9;
margin: 10px 0;
border-radius: 8px;
border: 2px solid #e0e0e0;
overflow: hidden;
transition: all 0.3s;
}
.tool:hover {
border-color: #667eea;
}
.tool-header {
padding: 15px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(to right, #f9f9f9, #ffffff);
}
.tool-header:hover {
background: linear-gradient(to right, #f0f0f0, #f9f9f9);
}
.tool-title {
display: flex;
align-items: center;
gap: 10px;
}
.tool-title h3 {
margin: 0;
color: #333;
font-size: 16px;
}
.tool-title .desc {
color: #666;
font-size: 13px;
}
.toggle-icon {
font-size: 20px;
color: #667eea;
transition: transform 0.3s;
}
.toggle-icon.expanded {
transform: rotate(90deg);
}
.tool-body {
display: none;
padding: 20px;
background: white;
border-top: 1px solid #e0e0e0;
}
.tool-body.show {
display: block;
}
.param-group {
margin-bottom: 15px;
}
.param-group label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #333;
font-size: 14px;
}
.param-group input, .param-group select {
width: 100%;
padding: 10px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
}
.param-group input:focus, .param-group select:focus {
outline: none;
border-color: #667eea;
}
.param-hint {
font-size: 12px;
color: #999;
margin-top: 3px;
}
.example-box {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 10px;
margin: 10px 0;
font-size: 12px;
}
.example-box .example-title {
font-weight: 600;
color: #495057;
margin-bottom: 5px;
display: flex;
align-items: center;
gap: 5px;
}
.example-box .example-title::before {
content: "💡";
font-size: 14px;
}
.example-box .example-content {
font-family: 'Monaco', 'Courier New', monospace;
color: #6c757d;
background: white;
padding: 8px;
border-radius: 3px;
border-left: 3px solid #667eea;
}
.example-item {
margin: 3px 0;
}
.example-label {
color: #667eea;
font-weight: 500;
}
.api-example-box {
background: #1e1e1e;
border-radius: 4px;
padding: 12px;
margin: 10px 0;
font-family: 'Monaco', 'Courier New', monospace;
font-size: 11px;
overflow-x: auto;
}
.api-example-box .api-title {
color: #9cdcfe;
font-weight: 600;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 5px;
}
.api-example-box .api-title::before {
content: "📡";
font-size: 14px;
}
.api-example-box pre {
margin: 0;
color: #d4d4d4;
white-space: pre-wrap;
word-break: break-word;
}
.api-example-box .json-key {
color: #9cdcfe;
}
.api-example-box .json-string {
color: #ce9178;
}
.api-example-box .json-number {
color: #b5cea8;
}
.test-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 30px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: transform 0.2s, box-shadow 0.2s;
margin-top: 10px;
}
.test-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.test-btn:active {
transform: translateY(0);
}
.test-btn:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
}
.result-box {
margin-top: 15px;
padding: 15px;
background: #f5f5f5;
border-radius: 6px;
border-left: 4px solid #667eea;
font-family: 'Monaco', 'Courier New', monospace;
font-size: 12px;
max-height: 400px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-word;
display: none;
}
.result-box.show {
display: block;
}
.result-box.error {
border-left-color: #ef4444;
background: #fee;
}
.result-box.success {
border-left-color: #10b981;
background: #f0fdf4;
}
.loading {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid #ffffff;
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
margin-left: 8px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
code {
background: #e0e0e0;
padding: 2px 6px;
border-radius: 3px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<h1>SEC Financial Report MCP Server API</h1>
<p><span class="badge">MCP READY</span> Model Context Protocol Server for SEC EDGAR Financial Data</p>
<h2>Connect to this MCP Server</h2>
<p>Add the following configuration to your MCP client (e.g., Claude Desktop):</p>
<div class="config-box">
{
"mcpServers": {
"sec-financial-data": {
"url": "https://jc321-easyreportsmcpserver.hf.space/sse"
}
}
}
</div>
<p><strong>Use the URL above to connect to this MCP Server.</strong></p>
<h2>Available Tools (7) - Interactive Testing</h2>
<p style="color: #666; font-size: 14px;">Click on any tool below to expand and test it directly!</p>
<div class="tools">
<!-- Tool 1: search_company -->
<div class="tool">
<div class="tool-header" onclick="toggleTool('tool1')">
<div class="tool-title">
<span class="toggle-icon" id="icon-tool1"></span>
<div>
<h3>search_company</h3>
<div class="desc">Search for a company by name in SEC EDGAR database</div>
</div>
</div>
</div>
<div class="tool-body" id="tool1">
<div class="example-box">
<div class="example-title">Parameter Format Example</div>
<div class="example-content">
<div class="example-item"><span class="example-label">Input:</span> "Microsoft"</div>
<div class="example-item"><span class="example-label">Input:</span> "Apple Inc"</div>
<div class="example-item"><span class="example-label">Input:</span> "Tesla"</div>
</div>
</div>
<div class="api-example-box">
<div class="api-title">API Request Example</div>
<pre>{
<span class="json-key">"jsonrpc"</span>: <span class="json-string">"2.0"</span>,
<span class="json-key">"id"</span>: <span class="json-number">1</span>,
<span class="json-key">"method"</span>: <span class="json-string">"tools/call"</span>,
<span class="json-key">"params"</span>: {
<span class="json-key">"name"</span>: <span class="json-string">"search_company"</span>,
<span class="json-key">"arguments"</span>: {
<span class="json-key">"company_name"</span>: <span class="json-string">"Microsoft"</span>
}
}
}</pre>
</div>
<div class="param-group">
<label>Company Name *</label>
<input type="text" id="tool1-company_name" placeholder="e.g., Microsoft, Apple, Tesla">
<div class="param-hint">Enter the full or partial company name</div>
</div>
<button class="test-btn" onclick="testTool('search_company', 'tool1')">Run Test</button>
<div class="result-box" id="result-tool1"></div>
</div>
</div>
<!-- Tool 2: advanced_search_company -->
<div class="tool">
<div class="tool-header" onclick="toggleTool('tool2')">
<div class="tool-title">
<span class="toggle-icon" id="icon-tool2"></span>
<div>
<h3>advanced_search_company</h3>
<div class="desc">Advanced search supporting name, ticker, or CIK</div>
</div>
</div>
</div>
<div class="tool-body" id="tool2">
<div class="example-box">
<div class="example-title">Parameter Format Example</div>
<div class="example-content">
<div class="example-item"><span class="example-label">By Ticker:</span> "MSFT"</div>
<div class="example-item"><span class="example-label">By CIK:</span> "0000789019"</div>
<div class="example-item"><span class="example-label">By Name:</span> "Microsoft Corporation"</div>
</div>
</div>
<div class="api-example-box">
<div class="api-title">API Request Example</div>
<pre>{
<span class="json-key">"jsonrpc"</span>: <span class="json-string">"2.0"</span>,
<span class="json-key">"id"</span>: <span class="json-number">1</span>,
<span class="json-key">"method"</span>: <span class="json-string">"tools/call"</span>,
<span class="json-key">"params"</span>: {
<span class="json-key">"name"</span>: <span class="json-string">"advanced_search_company"</span>,
<span class="json-key">"arguments"</span>: {
<span class="json-key">"company_input"</span>: <span class="json-string">"MSFT"</span>
}
}
}</pre>
</div>
<div class="param-group">
<label>Company Name / Ticker / CIK *</label>
<input type="text" id="tool2-company_input" placeholder="e.g., MSFT, 0000789019, Microsoft">
<div class="param-hint">Enter company name, ticker symbol, or CIK code</div>
</div>
<button class="test-btn" onclick="testTool('advanced_search_company', 'tool2')">Run Test</button>
<div class="result-box" id="result-tool2"></div>
</div>
</div>
<!-- Tool 3: get_company_info -->
<div class="tool">
<div class="tool-header" onclick="toggleTool('tool3')">
<div class="tool-title">
<span class="toggle-icon" id="icon-tool3"></span>
<div>
<h3>get_company_info</h3>
<div class="desc">Get detailed company information by CIK code</div>
</div>
</div>
</div>
<div class="tool-body" id="tool3">
<div class="example-box">
<div class="example-title">Parameter Format Example</div>
<div class="example-content">
<div class="example-item"><span class="example-label">Microsoft:</span> "0000789019"</div>
<div class="example-item"><span class="example-label">Apple:</span> "0000320193"</div>
<div class="example-item"><span class="example-label">Tesla:</span> "0001318605"</div>
</div>
</div>
<div class="api-example-box">
<div class="api-title">API Request Example</div>
<pre>{
<span class="json-key">"jsonrpc"</span>: <span class="json-string">"2.0"</span>,
<span class="json-key">"id"</span>: <span class="json-number">1</span>,
<span class="json-key">"method"</span>: <span class="json-string">"tools/call"</span>,
<span class="json-key">"params"</span>: {
<span class="json-key">"name"</span>: <span class="json-string">"get_company_info"</span>,
<span class="json-key">"arguments"</span>: {
<span class="json-key">"cik"</span>: <span class="json-string">"0000789019"</span>
}
}
}</pre>
</div>
<div class="param-group">
<label>CIK Code *</label>
<input type="text" id="tool3-cik" placeholder="e.g., 0000789019">
<div class="param-hint">10-digit CIK code (use search_company to find it)</div>
</div>
<button class="test-btn" onclick="testTool('get_company_info', 'tool3')">Run Test</button>
<div class="result-box" id="result-tool3"></div>
</div>
</div>
<!-- Tool 4: get_company_filings -->
<div class="tool">
<div class="tool-header" onclick="toggleTool('tool4')">
<div class="tool-title">
<span class="toggle-icon" id="icon-tool4"></span>
<div>
<h3>get_company_filings</h3>
<div class="desc">Get list of SEC filings (10-K, 10-Q, 20-F, etc.)</div>
</div>
</div>
</div>
<div class="tool-body" id="tool4">
<div class="example-box">
<div class="example-title">Parameter Format Example</div>
<div class="example-content">
<div class="example-item"><span class="example-label">CIK:</span> "0000789019" (Microsoft)</div>
<div class="example-item"><span class="example-label">Form Types:</span> Select "10-K" and "10-Q" from dropdown</div>
<div class="example-item"><span class="example-label">Or:</span> Leave empty to get all filing types</div>
</div>
</div>
<div class="api-example-box">
<div class="api-title">API Request Example</div>
<pre>{
<span class="json-key">"jsonrpc"</span>: <span class="json-string">"2.0"</span>,
<span class="json-key">"id"</span>: <span class="json-number">1</span>,
<span class="json-key">"method"</span>: <span class="json-string">"tools/call"</span>,
<span class="json-key">"params"</span>: {
<span class="json-key">"name"</span>: <span class="json-string">"get_company_filings"</span>,
<span class="json-key">"arguments"</span>: {
<span class="json-key">"cik"</span>: <span class="json-string">"0000789019"</span>,
<span class="json-key">"form_types"</span>: [<span class="json-string">"10-K"</span>, <span class="json-string">"10-Q"</span>]
}
}
}</pre>
</div>
<div class="param-group">
<label>CIK Code *</label>
<input type="text" id="tool4-cik" placeholder="e.g., 0000789019">
</div>
<div class="param-group">
<label>Form Types (Optional)</label>
<select id="tool4-form_types" multiple style="height: 80px;">
<option value="10-K">10-K (Annual Report)</option>
<option value="10-Q">10-Q (Quarterly Report)</option>
<option value="20-F">20-F (Foreign Annual)</option>
<option value="8-K">8-K (Current Report)</option>
</select>
<div class="param-hint">Leave empty for all types, or select specific forms (Ctrl+Click for multiple)</div>
</div>
<button class="test-btn" onclick="testTool('get_company_filings', 'tool4')">Run Test</button>
<div class="result-box" id="result-tool4"></div>
</div>
</div>
<!-- Tool 5: get_latest_financial_data -->
<div class="tool">
<div class="tool-header" onclick="toggleTool('tool5')">
<div class="tool-title">
<span class="toggle-icon" id="icon-tool5"></span>
<div>
<h3>get_latest_financial_data</h3>
<div class="desc">Get the most recent financial data available</div>
</div>
</div>
</div>
<div class="tool-body" id="tool5">
<div class="example-box">
<div class="example-title">Parameter Format Example</div>
<div class="example-content">
<div class="example-item"><span class="example-label">Microsoft:</span> "0000789019"</div>
<div class="example-item"><span class="example-label">Apple:</span> "0000320193"</div>
<div class="example-item"><span class="example-label">NVIDIA:</span> "0001045810"</div>
</div>
</div>
<div class="api-example-box">
<div class="api-title">API Request Example</div>
<pre>{
<span class="json-key">"jsonrpc"</span>: <span class="json-string">"2.0"</span>,
<span class="json-key">"id"</span>: <span class="json-number">1</span>,
<span class="json-key">"method"</span>: <span class="json-string">"tools/call"</span>,
<span class="json-key">"params"</span>: {
<span class="json-key">"name"</span>: <span class="json-string">"get_latest_financial_data"</span>,
<span class="json-key">"arguments"</span>: {
<span class="json-key">"cik"</span>: <span class="json-string">"0000789019"</span>
}
}
}</pre>
</div>
<div class="param-group">
<label>CIK Code *</label>
<input type="text" id="tool5-cik" placeholder="e.g., 0000789019">
</div>
<button class="test-btn" onclick="testTool('get_latest_financial_data', 'tool5')">Run Test</button>
<div class="result-box" id="result-tool5"></div>
</div>
</div>
<!-- Tool 6: get_financial_data -->
<div class="tool">
<div class="tool-header" onclick="toggleTool('tool6')">
<div class="tool-title">
<span class="toggle-icon" id="icon-tool6"></span>
<div>
<h3>get_financial_data</h3>
<div class="desc">Get financial data for a specific period (annual or quarterly)</div>
</div>
</div>
</div>
<div class="tool-body" id="tool6">
<div class="example-box">
<div class="example-title">Parameter Format Example</div>
<div class="example-content">
<div class="example-item"><span class="example-label">Annual Data:</span> CIK="0000789019", Period="2024"</div>
<div class="example-item"><span class="example-label">Quarterly Data:</span> CIK="0000789019", Period="2024Q3"</div>
<div class="example-item"><span class="example-label">Format:</span> YYYY for annual, YYYYQX for quarterly</div>
</div>
</div>
<div class="api-example-box">
<div class="api-title">API Request Example</div>
<pre>{
<span class="json-key">"jsonrpc"</span>: <span class="json-string">"2.0"</span>,
<span class="json-key">"id"</span>: <span class="json-number">1</span>,
<span class="json-key">"method"</span>: <span class="json-string">"tools/call"</span>,
<span class="json-key">"params"</span>: {
<span class="json-key">"name"</span>: <span class="json-string">"get_financial_data"</span>,
<span class="json-key">"arguments"</span>: {
<span class="json-key">"cik"</span>: <span class="json-string">"0000789019"</span>,
<span class="json-key">"period"</span>: <span class="json-string">"2024"</span>
}
}
}</pre>
</div>
<div class="param-group">
<label>CIK Code *</label>
<input type="text" id="tool6-cik" placeholder="e.g., 0000789019">
</div>
<div class="param-group">
<label>Period *</label>
<input type="text" id="tool6-period" placeholder="e.g., 2024 or 2024Q3">
<div class="param-hint">Format: YYYY for annual (e.g., 2024) or YYYYQX for quarterly (e.g., 2024Q3)</div>
</div>
<button class="test-btn" onclick="testTool('get_financial_data', 'tool6')">Run Test</button>
<div class="result-box" id="result-tool6"></div>
</div>
</div>
<!-- Tool 7: extract_financial_metrics -->
<div class="tool">
<div class="tool-header" onclick="toggleTool('tool7')">
<div class="tool-title">
<span class="toggle-icon" id="icon-tool7"></span>
<div>
<h3>extract_financial_metrics</h3>
<div class="desc">Extract comprehensive financial metrics for multiple years</div>
</div>
</div>
</div>
<div class="tool-body" id="tool7">
<div class="example-box">
<div class="example-title">Parameter Format Example</div>
<div class="example-content">
<div class="example-item"><span class="example-label">3 Years:</span> CIK="0000789019", Years=3</div>
<div class="example-item"><span class="example-label">5 Years:</span> CIK="0000320193", Years=5</div>
<div class="example-item"><span class="example-label">Note:</span> Returns annual + quarterly data (if available)</div>
</div>
</div>
<div class="api-example-box">
<div class="api-title">API Request Example</div>
<pre>{
<span class="json-key">"jsonrpc"</span>: <span class="json-string">"2.0"</span>,
<span class="json-key">"id"</span>: <span class="json-number">1</span>,
<span class="json-key">"method"</span>: <span class="json-string">"tools/call"</span>,
<span class="json-key">"params"</span>: {
<span class="json-key">"name"</span>: <span class="json-string">"extract_financial_metrics"</span>,
<span class="json-key">"arguments"</span>: {
<span class="json-key">"cik"</span>: <span class="json-string">"0000789019"</span>,
<span class="json-key">"years"</span>: <span class="json-number">3</span>
}
}
}</pre>
</div>
<div class="param-group">
<label>CIK Code *</label>
<input type="text" id="tool7-cik" placeholder="e.g., 0000789019">
</div>
<div class="param-group">
<label>Number of Years</label>
<select id="tool7-years">
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3" selected>3 years</option>
<option value="5">5 years</option>
<option value="10">10 years</option>
</select>
<div class="param-hint">Number of recent years to extract (1-10)</div>
</div>
<button class="test-btn" onclick="testTool('extract_financial_metrics', 'tool7')">Run Test</button>
<div class="result-box" id="result-tool7"></div>
</div>
</div>
</div>
<h2>Documentation</h2>
<p>Visit <code>/tools</code> to see all available tools in JSON format.</p>
<hr style="margin: 30px 0; border: none; border-top: 1px solid #e0e0e0;">
<p style="text-align: center; color: #666; font-size: 14px;">
Powered by Model Context Protocol | SEC EDGAR Data | v2.3.1
</p>
</div>
<script>
function toggleTool(toolId) {
const body = document.getElementById(toolId);
const icon = document.getElementById('icon-' + toolId);
if (body.classList.contains('show')) {
body.classList.remove('show');
icon.classList.remove('expanded');
} else {
body.classList.add('show');
icon.classList.add('expanded');
}
}
async function testTool(toolName, toolId) {
const btn = event.target;
const resultBox = document.getElementById('result-' + toolId);
// Get parameters based on tool
let args = {};
if (toolName === 'search_company') {
const companyName = document.getElementById(toolId + '-company_name').value;
if (!companyName) {
alert('Please enter a company name');
return;
}
args = { company_name: companyName };
}
else if (toolName === 'advanced_search_company') {
const companyInput = document.getElementById(toolId + '-company_input').value;
if (!companyInput) {
alert('Please enter a company name, ticker, or CIK');
return;
}
args = { company_input: companyInput };
}
else if (toolName === 'get_company_info') {
const cik = document.getElementById(toolId + '-cik').value;
if (!cik) {
alert('Please enter a CIK code');
return;
}
args = { cik: cik };
}
else if (toolName === 'get_company_filings') {
const cik = document.getElementById(toolId + '-cik').value;
if (!cik) {
alert('Please enter a CIK code');
return;
}
const formTypesSelect = document.getElementById(toolId + '-form_types');
const selectedForms = Array.from(formTypesSelect.selectedOptions).map(opt => opt.value);
args = { cik: cik };
if (selectedForms.length > 0) {
args.form_types = selectedForms;
}
}
else if (toolName === 'get_latest_financial_data') {
const cik = document.getElementById(toolId + '-cik').value;
if (!cik) {
alert('Please enter a CIK code');
return;
}
args = { cik: cik };
}
else if (toolName === 'get_financial_data') {
const cik = document.getElementById(toolId + '-cik').value;
const period = document.getElementById(toolId + '-period').value;
if (!cik || !period) {
alert('Please enter CIK and period');
return;
}
args = { cik: cik, period: period };
}
else if (toolName === 'extract_financial_metrics') {
const cik = document.getElementById(toolId + '-cik').value;
const years = parseInt(document.getElementById(toolId + '-years').value);
if (!cik) {
alert('Please enter a CIK code');
return;
}
args = { cik: cik, years: years };
}
// Show loading state
btn.disabled = true;
btn.innerHTML = 'Running<span class="loading"></span>';
resultBox.className = 'result-box show';
resultBox.textContent = 'Loading...';
try {
const response = await fetch('/message', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
jsonrpc: '2.0',
id: Date.now(),
method: 'tools/call',
params: {
name: toolName,
arguments: args
}
})
});
const data = await response.json();
if (data.result && data.result.content && data.result.content[0]) {
const content = data.result.content[0].text;
const parsed = JSON.parse(content);
resultBox.className = 'result-box show success';
resultBox.textContent = JSON.stringify(parsed, null, 2);
} else if (data.error) {
resultBox.className = 'result-box show error';
resultBox.textContent = 'Error: ' + JSON.stringify(data.error, null, 2);
} else {
resultBox.className = 'result-box show error';
resultBox.textContent = 'Unexpected response: ' + JSON.stringify(data, null, 2);
}
} catch (error) {
resultBox.className = 'result-box show error';
resultBox.textContent = 'Error: ' + error.message;
} finally {
btn.disabled = false;
btn.innerHTML = 'Run Test';
}
}
</script>
</body>
</html>