<!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 - Enhanced JavaScript Implementation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
background: #f8f9fa;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.slide {
background: white;
margin: 40px 0;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
page-break-after: always;
}
.title-slide {
background: linear-gradient(135deg, #3498db, #2ecc71);
color: white;
text-align: center;
padding: 80px 40px;
}
.title-slide h1 {
font-size: 3rem;
margin-bottom: 20px;
}
.title-slide h2 {
font-size: 1.5rem;
margin-bottom: 30px;
opacity: 0.9;
}
h1 {
font-size: 2.5rem;
color: #2c3e50;
margin-bottom: 30px;
border-bottom: 3px solid #3498db;
padding-bottom: 10px;
}
h2 {
font-size: 2rem;
color: #34495e;
margin-bottom: 25px;
}
h3 {
font-size: 1.5rem;
color: #2c3e50;
margin-bottom: 20px;
}
.highlight {
background: #fff3cd;
padding: 20px;
border-radius: 8px;
border-left: 5px solid #ffc107;
margin: 20px 0;
font-weight: 500;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin: 30px 0;
}
.card {
background: #f8f9fa;
padding: 25px;
border-radius: 8px;
border-left: 4px solid #2ecc71;
}
.card h4 {
color: #2c3e50;
margin-bottom: 15px;
font-size: 1.2rem;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
}
.tool {
background: #e8f5e8;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.tool strong {
display: block;
color: #27ae60;
margin-bottom: 10px;
font-size: 1.1rem;
}
.code {
background: #2c3e50;
color: #ecf0f1;
padding: 25px;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 0.95rem;
margin: 20px 0;
overflow-x: auto;
white-space: pre;
}
.stats {
display: flex;
justify-content: space-around;
margin: 40px 0;
text-align: center;
}
.stat {
padding: 20px;
}
.stat-number {
font-size: 3rem;
font-weight: bold;
color: #2ecc71;
display: block;
}
.stat-label {
color: #7f8c8d;
font-size: 1.1rem;
}
ul {
margin: 20px 0;
padding-left: 30px;
}
li {
margin: 10px 0;
font-size: 1.1rem;
}
.demo-output {
background: #2c3e50;
color: #2ecc71;
padding: 25px;
border-radius: 8px;
font-family: 'Courier New', monospace;
margin: 20px 0;
white-space: pre-line;
}
.navigation {
position: fixed;
top: 20px;
right: 20px;
background: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
z-index: 1000;
}
.navigation a {
display: block;
color: #3498db;
text-decoration: none;
margin: 5px 0;
font-size: 0.9rem;
}
.navigation a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
.slide {
padding: 20px;
margin: 20px 0;
}
.title-slide h1 {
font-size: 2rem;
}
.navigation {
display: none;
}
}
@media print {
body {
background: white;
}
.navigation {
display: none;
}
.slide {
box-shadow: none;
border: 1px solid #ddd;
}
}
</style>
</head>
<body>
<div class="navigation">
<strong>Navigation</strong>
<a href="#title">Title</a>
<a href="#what-is">What is it?</a>
<a href="#tools">Tools</a>
<a href="#architecture">Architecture</a>
<a href="#features">Features</a>
<a href="#installation">Installation</a>
<a href="#demo">Demo</a>
<a href="#cli">CLI</a>
<a href="#usage">Usage</a>
<a href="#status">Status</a>
</div>
<div class="container">
<!-- Title Slide -->
<div id="title" class="slide title-slide">
<h1>🧬 AGR MCP Server</h1>
<h2>Enhanced JavaScript Implementation</h2>
<p style="font-size: 1.2rem; margin-top: 30px;">
Alliance of Genome Resources<br>
Model Context Protocol Server
</p>
<p style="font-style: italic; margin-top: 20px;">
Genomics data access for AI assistants and research tools
</p>
</div>
<!-- What is it? -->
<div id="what-is" class="slide">
<h1>What is the AGR MCP Server?</h1>
<div class="highlight">
<strong>A bridge between AI assistants (like Claude) and genomics databases</strong>
</div>
<ul>
<li><strong>Purpose:</strong> Programmatic access to Alliance of Genome Resources data</li>
<li><strong>Protocol:</strong> Model Context Protocol (MCP) by Anthropic</li>
<li><strong>Language:</strong> JavaScript/Node.js implementation</li>
<li><strong>Target:</strong> Researchers, bioinformaticians, AI tools</li>
</ul>
<div style="background: #e3f2fd; padding: 25px; border-radius: 8px; text-align: center; margin: 30px 0; font-size: 1.2rem;">
<strong>Claude ↔ MCP Server ↔ AGR APIs ↔ Genomics Databases</strong>
</div>
</div>
<!-- Available Tools -->
<div id="tools" class="slide">
<h1>Available Genomics Tools</h1>
<div class="stats">
<div class="stat">
<span class="stat-number">12</span>
<span class="stat-label">MCP Tools</span>
</div>
<div class="stat">
<span class="stat-number">6</span>
<span class="stat-label">Model Organisms</span>
</div>
<div class="stat">
<span class="stat-number">3</span>
<span class="stat-label">Server Variants</span>
</div>
</div>
<div class="tools-grid">
<div class="tool">
<strong>search_genes</strong>
Gene search across species
</div>
<div class="tool">
<strong>get_gene_info</strong>
Detailed gene information
</div>
<div class="tool">
<strong>get_gene_diseases</strong>
Disease associations
</div>
<div class="tool">
<strong>search_diseases</strong>
Disease search
</div>
<div class="tool">
<strong>get_gene_expression</strong>
Expression data
</div>
<div class="tool">
<strong>find_orthologs</strong>
Cross-species homologs
</div>
<div class="tool">
<strong>blast_sequence</strong>
BLAST search
</div>
<div class="tool">
<strong>complex_search</strong>
Natural language queries
</div>
<div class="tool">
<strong>faceted_search</strong>
Multi-filter search
</div>
<div class="tool">
<strong>get_species_list</strong>
Supported organisms
</div>
<div class="tool">
<strong>get_cache_stats</strong>
Performance monitoring
</div>
<div class="tool">
<strong>clear_cache</strong>
Cache management
</div>
</div>
</div>
<!-- Architecture -->
<div id="architecture" class="slide">
<h1>System Architecture</h1>
<div class="grid">
<div class="card">
<h4>🏗️ Core Server</h4>
<ul>
<li>Node.js with async I/O</li>
<li>Axios HTTP client</li>
<li>MCP protocol compliance</li>
</ul>
</div>
<div class="card">
<h4>💾 Caching Layer</h4>
<ul>
<li>NodeCache with TTL</li>
<li>5-10 minute cache times</li>
<li>Automatic cleanup</li>
</ul>
</div>
<div class="card">
<h4>🛡️ Error Handling</h4>
<ul>
<li>Exponential backoff retry</li>
<li>Rate limiting (100 req/min)</li>
<li>Input validation</li>
</ul>
</div>
<div class="card">
<h4>📊 Monitoring</h4>
<ul>
<li>Cache hit/miss tracking</li>
<li>Response time monitoring</li>
<li>Structured logging (Pino)</li>
</ul>
</div>
</div>
<div style="background: #e3f2fd; padding: 25px; border-radius: 8px; text-align: center; margin: 30px 0;">
<strong>Three Server Variants:</strong><br>
Enhanced (full features) • Simple (basic tools) • Natural Language (conversational)
</div>
</div>
<!-- Advanced Features -->
<div id="features" class="slide">
<h1>Advanced Query Features</h1>
<h2>🧠 Natural Language Processing</h2>
<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0;">
<strong>Boolean Operators:</strong> AND, OR, NOT<br>
<strong>Species Filters:</strong> "in human", "in mouse", "in zebrafish"<br>
<strong>Process Detection:</strong> Automatic biological process recognition
</div>
<h2>📝 Query Examples</h2>
<div class="code">• "breast cancer genes in human AND DNA repair NOT p53"
• "insulin OR glucose in mouse"
• "BRCA1 in human"
• "apoptosis genes NOT p53 in zebrafish"</div>
<h2>🔍 Cross-Entity Search</h2>
<div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
Search genes, diseases, phenotypes, and alleles simultaneously with intelligent relationship discovery
</div>
</div>
<!-- Installation -->
<div id="installation" class="slide">
<h1>Installation & Setup</h1>
<h2>Option 1: npm Package (Recommended)</h2>
<div class="code"># Install globally
npm install -g agr-mcp-server-enhanced
# Available commands
agr-mcp-server # Main MCP server
agr-mcp-natural # Natural language server
alliance # CLI interface
agr-chat # Interactive chat</div>
<h2>Option 2: From Source</h2>
<div class="code"># Clone and setup
git clone https://github.com/nuin/agr-mcp-server-js.git
cd agr-mcp-server-js
npm run setup</div>
<h2>Claude Desktop Integration</h2>
<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0;">
<strong>Configuration file location:</strong><br>
• macOS: <code>~/Library/Application Support/Claude/claude_desktop_config.json</code><br>
• Windows: <code>%APPDATA%/Claude/claude_desktop_config.json</code>
</div>
<div class="code">{
"mcpServers": {
"agr-genomics": {
"command": "agr-mcp-server",
"env": {
"LOG_LEVEL": "info"
}
}
}
}</div>
<div class="highlight">
<strong>After setup:</strong> Restart Claude Desktop completely, then you can ask genomics questions in natural language
</div>
</div>
<!-- Demo -->
<div id="demo" class="slide">
<h1>Live Demo Results</h1>
<h2>🧬 PTEN Gene Search</h2>
<div class="demo-output">Query: "find PTEN gene"
🧬 Found 61 genes:
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</div>
<h2>🔬 Complex Boolean Query</h2>
<div class="demo-output">Query: "PTEN tumor suppressor genes in human"
Results: 1,739 human genes with aggregations:
• Species filtering: ✅ Working
• Boolean parsing: ✅ Functional
• Disease categories: 539 cancer genes
• Process filtering: 1,139 response genes</div>
</div>
<!-- CLI -->
<div id="cli" class="slide">
<h1>Command Line Interface</h1>
<h2>🚀 Performance Flags</h2>
<div class="code">alliance "find PTEN gene" --fast # Quick results
alliance "find PTEN gene" --detailed # Full information
alliance "find PTEN gene" --limit=5 # Limit results
alliance "find PTEN gene" --simple # Use basic server</div>
<h2>⚡ Speed Improvements</h2>
<div class="grid">
<div class="card">
<h4>Before Optimization</h4>
<ul>
<li>Timeout after 2+ minutes</li>
<li>Fetched all 61 results</li>
<li>Slow JSON-RPC communication</li>
</ul>
</div>
<div class="card">
<h4>After Optimization</h4>
<ul>
<li>10-second timeout limit</li>
<li>Configurable result limits</li>
<li>Improved server selection</li>
</ul>
</div>
</div>
</div>
<!-- Usage -->
<div id="usage" class="slide">
<h1>Practical Research Applications</h1>
<div class="grid">
<div class="card">
<h4>🔬 Gene Research</h4>
<ul>
<li>Cross-species gene searches</li>
<li>Disease association lookup</li>
<li>Ortholog identification</li>
</ul>
</div>
<div class="card">
<h4>🧬 Sequence Analysis</h4>
<ul>
<li>BLAST searches</li>
<li>Expression data queries</li>
<li>Phenotype associations</li>
</ul>
</div>
<div class="card">
<h4>💬 Natural Language</h4>
<ul>
<li>Ask questions in plain English</li>
<li>Boolean logic support</li>
<li>Species-specific filtering</li>
</ul>
</div>
<div class="card">
<h4>🔧 Integration</h4>
<ul>
<li>Claude Desktop ready</li>
<li>CLI tools available</li>
<li>Programmatic access</li>
</ul>
</div>
</div>
</div>
<!-- Status -->
<div id="status" class="slide">
<h1>Current Status & Next Steps</h1>
<h2>✅ What's Working</h2>
<ul>
<li>All 12 MCP tools functional</li>
<li>Claude Desktop integration active</li>
<li>Natural language queries working</li>
<li>CLI interface with performance flags</li>
<li>Comprehensive caching and monitoring</li>
</ul>
<h2>🚧 Areas for Improvement</h2>
<ul>
<li>CLI timeout optimization (completed)</li>
<li>Better error messages for failed queries</li>
<li>Documentation for complex query syntax</li>
<li>Integration with JBrowse genome browser</li>
</ul>
<div class="highlight">
<strong>Ready for:</strong> Research use, testing, feedback from genomics community
</div>
</div>
<!-- Questions -->
<div class="slide" style="background: linear-gradient(135deg, #3498db, #2ecc71); color: white; text-align: center;">
<h1 style="color: white; border-bottom: none;">Questions & Discussion</h1>
<div style="margin-top: 50px; font-size: 1.3rem;">
<p><strong>Repository:</strong> agr-mcp-server-js</p>
<p><strong>npm Package:</strong> agr-mcp-server-enhanced</p>
<p><strong>Installation:</strong> npm install -g agr-mcp-server-enhanced</p>
</div>
<div style="margin-top: 40px; font-style: italic;">
<p>Ready for testing and feedback from the genomics research community</p>
</div>
</div>
</div>
<script>
// Simple navigation
document.querySelectorAll('.navigation a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
target.scrollIntoView({ behavior: 'smooth' });
});
});
</script>
</body>
</html>
