<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGR MCP Server - Local Demo</title>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
</script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #f8f9fa;
}
.notebook-container {
background: white;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #3498db, #2ecc71);
color: white;
padding: 40px;
text-align: center;
}
.header h1 {
margin: 0;
font-size: 2.5rem;
}
.header p {
margin: 10px 0 0 0;
opacity: 0.9;
font-size: 1.1rem;
}
.content {
padding: 40px;
}
.cell {
margin: 30px 0;
padding: 20px;
border-left: 4px solid #3498db;
background: #f8f9fa;
border-radius: 0 8px 8px 0;
}
.demo-section {
background: white;
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 25px;
margin: 20px 0;
}
.demo-controls {
display: flex;
gap: 15px;
margin: 20px 0;
flex-wrap: wrap;
}
.demo-button {
background: #3498db;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
transition: background 0.3s;
}
.demo-button:hover {
background: #2980b9;
}
.demo-button:disabled {
background: #bdc3c7;
cursor: not-allowed;
}
.demo-output {
background: #2c3e50;
color: #2ecc71;
padding: 20px;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
margin: 15px 0;
white-space: pre-wrap;
min-height: 100px;
max-height: 400px;
overflow-y: auto;
}
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 8px;
}
.status-connected {
background: #2ecc71;
}
.status-disconnected {
background: #e74c3c;
}
.status-loading {
background: #f39c12;
animation: pulse 1s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 20px 0;
}
.tool-card {
background: #e8f5e8;
padding: 20px;
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: transform 0.2s;
}
.tool-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.tool-card.active {
background: #d4edda;
border: 2px solid #2ecc71;
}
.code-input {
width: 100%;
padding: 15px;
border: 2px solid #e9ecef;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 1rem;
margin: 10px 0;
resize: vertical;
min-height: 100px;
}
.code-input:focus {
outline: none;
border-color: #3498db;
}
.stats-row {
display: flex;
justify-content: space-around;
margin: 30px 0;
text-align: center;
}
.stat {
padding: 20px;
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
color: #2ecc71;
display: block;
}
.stat-label {
color: #7f8c8d;
font-size: 1rem;
}
</style>
</head>
<body>
<div class="notebook-container">
<div class="header">
<h1>🧬 AGR MCP Server - Live Demo</h1>
<p>Interactive demonstration with Claude Code integration</p>
<div id="connection-status">
<span class="status-indicator status-disconnected"></span>
<span>Checking connection...</span>
</div>
</div>
<div class="content">
<!-- Server Status -->
<div class="cell">
<h2>🔗 Server Connection Status</h2>
<div class="demo-section">
<div class="demo-controls">
<button class="demo-button" onclick="checkServerStatus()">Check Server Status</button>
<button class="demo-button" onclick="testBasicQuery()">Test Basic Query</button>
<button class="demo-button" onclick="getCacheStats()">Get Cache Stats</button>
</div>
<div id="status-output" class="demo-output">Ready to test server connection...</div>
</div>
</div>
<!-- Available Tools -->
<div class="cell">
<h2>🛠️ Available MCP Tools</h2>
<div class="stats-row">
<div class="stat">
<span class="stat-number" id="tool-count">12</span>
<span class="stat-label">MCP Tools</span>
</div>
<div class="stat">
<span class="stat-number" id="species-count">6+</span>
<span class="stat-label">Model Organisms</span>
</div>
<div class="stat">
<span class="stat-number" id="cache-hit-rate">--</span>
<span class="stat-label">Cache Hit Rate</span>
</div>
</div>
<div class="tools-grid" id="tools-grid">
<!-- Tools will be populated dynamically -->
</div>
</div>
<!-- Live Query Interface -->
<div class="cell">
<h2>🔍 Live Query Interface</h2>
<div class="demo-section">
<h3>Natural Language Queries</h3>
<textarea
class="code-input"
id="query-input"
placeholder="Enter your genomics query here...
Examples:
- find PTEN gene
- search for BRCA1 genes in human
- get information about HGNC:1100
- insulin OR glucose in mouse">find PTEN gene</textarea>
<div class="demo-controls">
<button class="demo-button" onclick="executeQuery()">Execute Query</button>
<button class="demo-button" onclick="clearOutput()">Clear Output</button>
<select id="query-type" style="padding: 12px; border-radius: 6px; border: 2px solid #e9ecef;">
<option value="search_genes">Search Genes</option>
<option value="get_gene_info">Get Gene Info</option>
<option value="complex_search">Complex Search</option>
<option value="get_gene_diseases">Gene Diseases</option>
<option value="blast_sequence">BLAST Sequence</option>
</select>
</div>
<div id="query-output" class="demo-output">Query output will appear here...</div>
</div>
</div>
<!-- Performance Monitoring -->
<div class="cell">
<h2>📊 Performance Monitoring</h2>
<div class="demo-section">
<div class="demo-controls">
<button class="demo-button" onclick="monitorPerformance()">Start Monitoring</button>
<button class="demo-button" onclick="stopMonitoring()">Stop Monitoring</button>
<button class="demo-button" onclick="clearCache()">Clear Cache</button>
</div>
<div id="performance-output" class="demo-output">Performance data will appear here...</div>
</div>
</div>
<!-- Example Queries -->
<div class="cell">
<h2>📝 Example Queries</h2>
<div class="demo-section">
<h3>Try these pre-built queries:</h3>
<div class="demo-controls">
<button class="demo-button" onclick="runExample('pten')">PTEN Gene Search</button>
<button class="demo-button" onclick="runExample('brca1-human')">BRCA1 in Human</button>
<button class="demo-button" onclick="runExample('complex-boolean')">Complex Boolean Query</button>
<button class="demo-button" onclick="runExample('gene-info')">Gene Information</button>
<button class="demo-button" onclick="runExample('species-list')">Species List</button>
</div>
<div id="example-output" class="demo-output">Example query results will appear here...</div>
</div>
</div>
</div>
</div>
<script>
// Global state
let serverConnected = false;
let monitoringInterval = null;
// Initialize the demo
document.addEventListener('DOMContentLoaded', function() {
initializeDemo();
populateToolsGrid();
});
function initializeDemo() {
updateConnectionStatus('Initializing demo...', 'loading');
// Simulate checking for Claude Code connection
setTimeout(() => {
// In a real implementation, this would check for the actual MCP server
checkServerStatus();
}, 1000);
}
function updateConnectionStatus(message, status = 'disconnected') {
const statusElement = document.getElementById('connection-status');
const indicator = statusElement.querySelector('.status-indicator');
const text = statusElement.querySelector('span:last-child');
indicator.className = `status-indicator status-${status}`;
text.textContent = message;
}
function populateToolsGrid() {
const tools = [
{ name: "search_genes", desc: "Gene search across species", icon: "🔍" },
{ name: "get_gene_info", desc: "Detailed gene information", icon: "📋" },
{ name: "get_gene_diseases", desc: "Disease associations", icon: "🏥" },
{ name: "search_diseases", desc: "Disease search", icon: "🔬" },
{ name: "get_gene_expression", desc: "Expression data", icon: "📊" },
{ name: "find_orthologs", desc: "Cross-species homologs", icon: "🧬" },
{ name: "blast_sequence", desc: "BLAST search", icon: "🎯" },
{ name: "complex_search", desc: "Natural language queries", icon: "🧠" },
{ name: "faceted_search", desc: "Multi-filter search", icon: "🔍" },
{ name: "get_species_list", desc: "Supported organisms", icon: "🐛" },
{ name: "get_cache_stats", desc: "Performance monitoring", icon: "📈" },
{ name: "clear_cache", desc: "Cache management", icon: "🗑️" }
];
const grid = document.getElementById('tools-grid');
grid.innerHTML = '';
tools.forEach(tool => {
const card = document.createElement('div');
card.className = 'tool-card';
card.innerHTML = `
<div style="font-size: 2rem; margin-bottom: 10px;">${tool.icon}</div>
<strong style="color: #2c3e50; display: block; margin-bottom: 8px;">${tool.name}</strong>
<div style="color: #666; font-size: 0.9rem;">${tool.desc}</div>
`;
card.onclick = () => selectTool(tool.name);
grid.appendChild(card);
});
}
function selectTool(toolName) {
// Update query type selector
document.getElementById('query-type').value = toolName;
// Highlight selected tool
document.querySelectorAll('.tool-card').forEach(card => {
card.classList.remove('active');
});
event.target.closest('.tool-card').classList.add('active');
// Update query input with example
const examples = {
'search_genes': 'find PTEN gene',
'get_gene_info': 'HGNC:1100',
'complex_search': 'breast cancer genes in human AND DNA repair NOT p53',
'get_gene_diseases': 'HGNC:1100',
'blast_sequence': 'ATCGATCGATCGATCG'
};
if (examples[toolName]) {
document.getElementById('query-input').value = examples[toolName];
}
}
function checkServerStatus() {
updateConnectionStatus('Checking server connection...', 'loading');
const output = document.getElementById('status-output');
// Simulate checking server status
// In a real implementation, this would make an actual request to the MCP server
setTimeout(() => {
const mockStatus = {
connected: true,
version: '3.0.0',
uptime: '2h 15m',
tools: 12
};
if (mockStatus.connected) {
serverConnected = true;
updateConnectionStatus('Connected to AGR MCP Server', 'connected');
output.textContent = `✅ Server Status: Online
Version: ${mockStatus.version}
Uptime: ${mockStatus.uptime}
Available Tools: ${mockStatus.tools}
Server Type: Enhanced AGR MCP Server
Ready to process genomics queries!`;
} else {
serverConnected = false;
updateConnectionStatus('Server not available', 'disconnected');
output.textContent = `❌ Server Status: Offline
Please ensure:
1. Claude Desktop is running
2. AGR MCP server is configured
3. Server is properly installed
Check the installation guide for setup instructions.`;
}
}, 1500);
}
function testBasicQuery() {
const output = document.getElementById('status-output');
output.textContent = 'Testing basic query...';
// Simulate a basic query test
setTimeout(() => {
output.textContent = `🧪 Basic Query Test: PASSED
Query: "get_species_list"
Response Time: 0.85s
Result: 6 model organisms returned
Cache: MISS (first request)
✅ Server is responding correctly to MCP requests.`;
}, 1000);
}
function getCacheStats() {
const output = document.getElementById('status-output');
output.textContent = 'Retrieving cache statistics...';
setTimeout(() => {
const stats = {
cached_items: 45,
cache_hits: 127,
cache_misses: 18,
hit_rate: Math.round((127 / (127 + 18)) * 100)
};
document.getElementById('cache-hit-rate').textContent = `${stats.hit_rate}%`;
output.textContent = `📊 Cache Statistics:
Cached Items: ${stats.cached_items}
Cache Hits: ${stats.cache_hits}
Cache Misses: ${stats.cache_misses}
Hit Rate: ${stats.hit_rate}%
Memory Usage: ~15MB
Average Response Time: 0.4s
Cache is performing efficiently!`;
}, 800);
}
function executeQuery() {
const query = document.getElementById('query-input').value.trim();
const queryType = document.getElementById('query-type').value;
const output = document.getElementById('query-output');
if (!query) {
output.textContent = '❌ Please enter a query first.';
return;
}
output.textContent = `🔍 Executing ${queryType} query...
Query: "${query}"
Processing request...`;
// Simulate query execution
setTimeout(() => {
const mockResults = generateMockResult(queryType, query);
output.textContent = mockResults;
}, 1200);
}
function generateMockResult(queryType, query) {
switch (queryType) {
case 'search_genes':
return `🧬 Gene Search Results:
Query: "${query}"
Found: 61 genes across species
1. PTEN (Homo sapiens) - HGNC:9588
phosphatase and tensin homolog
2. Pten (Mus musculus) - MGI:109583
phosphatase and tensin homolog
3. Pten (Drosophila melanogaster) - FB:FBgn0026379
Phosphatase and tensin homolog
... and 58 more results
Response Time: 1.2s
Cache Status: MISS`;
case 'get_gene_info':
return `📋 Gene Information:
Gene ID: ${query}
Symbol: PTEN
Name: phosphatase and tensin homolog
Species: Homo sapiens
Location: Chromosome 10 (87,862,638-87,971,930)
Function: Tumor suppressor that negatively regulates
the AKT/PKB signaling pathway
Disease Associations: 53 diseases including:
- Cerebral cavernous malformation
- Intrahepatic cholangiocarcinoma
- Ovarian serous carcinoma
Cross-references: UniProt, NCBI, Ensembl
Response Time: 0.8s
Cache Status: HIT`;
case 'complex_search':
return `🧠 Complex Search Results:
Query: "${query}"
Parsed: Boolean query with species filter
Results: 1,739 genes found
- Species filter: ✅ Applied (human)
- Boolean logic: ✅ Processed
- Disease context: ✅ Recognized
Top results:
1. XRCC3 - DNA crosslink repair 1C
2. XRCC1 - X-ray repair cross complementing 1
3. RAD50 - RAD50 double strand break repair protein
Aggregations:
- Cancer genes: 539
- DNA repair genes: 1,205
- Tumor suppressors: 89
Response Time: 1.8s`;
default:
return `✅ Query executed successfully!
Query Type: ${queryType}
Query: "${query}"
Status: Completed
Response Time: 1.1s
Results would appear here based on the specific query type.`;
}
}
function runExample(exampleType) {
const output = document.getElementById('example-output');
const examples = {
'pten': {
query: 'find PTEN gene',
result: `🧬 PTEN Gene Search Results:
Found 61 genes across species:
1. PTEN (Homo sapiens) - HGNC:9588
phosphatase and tensin homolog
Diseases: cerebral cavernous malformation, cancers
2. Pten (Mus musculus) - MGI:109583
phosphatase and tensin homolog
3. Pten (Drosophila melanogaster) - FB:FBgn0026379
Phosphatase and tensin homolog
... and 58 more results
Performance: 1.2s response time`
},
'brca1-human': {
query: 'BRCA1 in human',
result: `🔍 BRCA1 Human Genes:
Found 29 human-specific BRCA1-related genes:
1. BRCA1 (Homo sapiens) - HGNC:1100
BRCA1 DNA repair associated
Location: Chromosome 17
2. BRCA1P1 (Homo sapiens) - HGNC:1101
BRCA1 pseudogene 1
3. BRCA1NBR2 (Homo sapiens) - HGNC:1102
BRCA1 neighbor 2
Species filter: ✅ Applied successfully
Disease associations: Breast and ovarian cancers`
},
'complex-boolean': {
query: 'breast cancer genes in human AND DNA repair NOT p53',
result: `🧠 Complex Boolean Query Results:
Query: "breast cancer genes in human AND DNA repair NOT p53"
Parsed operators: AND, NOT
Species filter: human
Found 6,021 genes matching criteria:
Top results:
- XRCC3: DNA crosslink repair 1C
- XRCC1: X-ray repair cross complementing 1
- RAD50: RAD50 double strand break repair
- ERCC1: ERCC excision repair 1
Excluded: TP53 and related genes
Boolean logic: ✅ Successfully processed`
},
'gene-info': {
query: 'HGNC:1100',
result: `📋 Detailed Gene Information:
Gene ID: HGNC:1100
Symbol: BRCA1
Name: BRCA1 DNA repair associated
Species: Homo sapiens
Location: Chromosome 17 (43,044,295-43,170,327)
Strand: Minus
Function: 190 kD nuclear phosphoprotein that plays
a role in maintaining genomic stability
Disease Associations (40 total):
- Breast-ovarian cancer, familial, susceptibility to, 1
- Fanconi anemia, complementation group S
- Pancreatic cancer, susceptibility to, 4
Cross-references: UniProt, NCBI, Ensembl, OMIM`
},
'species-list': {
query: 'get_species_list',
result: `🐛 Supported Model Organisms:
1. Homo sapiens (Human)
- Genes: 20,000+
- Database: HGNC
2. Mus musculus (Mouse)
- Genes: 22,000+
- Database: MGI
3. Danio rerio (Zebrafish)
- Genes: 25,000+
- Database: ZFIN
4. Drosophila melanogaster (Fruit fly)
- Genes: 14,000+
- Database: FlyBase
5. Caenorhabditis elegans (Worm)
- Genes: 20,000+
- Database: WormBase
6. Saccharomyces cerevisiae (Yeast)
- Genes: 6,000+
- Database: SGD
Total: 6 model organisms supported`
}
};
const example = examples[exampleType];
if (example) {
output.textContent = `Executing example: "${example.query}"...\n\n`;
setTimeout(() => {
output.textContent = example.result;
}, 800);
}
}
function monitorPerformance() {
const output = document.getElementById('performance-output');
output.textContent = 'Starting performance monitoring...\n\n';
monitoringInterval = setInterval(() => {
const timestamp = new Date().toLocaleTimeString();
const metrics = {
requests: Math.floor(Math.random() * 10) + 1,
avgResponse: (Math.random() * 2 + 0.5).toFixed(2),
cacheHits: Math.floor(Math.random() * 8),
memory: (Math.random() * 5 + 15).toFixed(1)
};
output.textContent += `[${timestamp}] Requests: ${metrics.requests}, Avg Response: ${metrics.avgResponse}s, Cache Hits: ${metrics.cacheHits}, Memory: ${metrics.memory}MB\n`;
output.scrollTop = output.scrollHeight;
}, 2000);
}
function stopMonitoring() {
if (monitoringInterval) {
clearInterval(monitoringInterval);
monitoringInterval = null;
const output = document.getElementById('performance-output');
output.textContent += '\nPerformance monitoring stopped.\n';
}
}
function clearOutput() {
document.getElementById('query-output').textContent = 'Query output cleared. Ready for new queries...';
}
function clearCache() {
const output = document.getElementById('performance-output');
output.textContent = 'Clearing cache...\n\n';
setTimeout(() => {
output.textContent += 'Cache cleared successfully.\nCache statistics reset.\nNext queries will be slower until cache rebuilds.\n';
}, 1000);
}
</script>
</body>
</html>
