index.html•32.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP-EDA | AI-Powered Electronic Design Automation</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #4f46e5;
--secondary-color: #06b6d4;
--accent-color: #f59e0b;
--bg-dark: #0f172a;
--bg-darker: #020617;
--text-light: #f8fafc;
--text-gray: #94a3b8;
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-darker);
color: var(--text-light);
overflow-x: hidden;
}
/* Animated Background */
.bg-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(45deg, #0f172a, #1e293b, #0f172a);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}
.bg-animation::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(79, 70, 229, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.3) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(245, 158, 11, 0.2) 0%, transparent 50%);
animation: float 20s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
33% { transform: translateY(-20px) rotate(1deg); }
66% { transform: translateY(-10px) rotate(-1deg); }
}
/* Header */
header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
backdrop-filter: blur(20px);
background: rgba(15, 23, 42, 0.8);
border-bottom: 1px solid var(--glass-border);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: var(--text-gray);
text-decoration: none;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: var(--text-light);
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 6rem 2rem 2rem;
}
.hero-content {
max-width: 800px;
animation: fadeInUp 1s ease-out;
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.25rem;
color: var(--text-gray);
margin-bottom: 2rem;
line-height: 1.6;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.btn {
padding: 0.75rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
transform: translateY(0);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(79, 70, 229, 0.4);
}
.btn-secondary {
background: var(--glass-bg);
color: var(--text-light);
border: 1px solid var(--glass-border);
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* Demo Video - Back to Embedded */
.demo-video {
margin: 3rem 0;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.video-container {
position: relative;
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 1.5rem;
overflow: hidden;
}
.video-container video {
width: 100%;
height: auto;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
display: block;
position: relative;
z-index: 10;
}
/* Custom Video Poster/Cover */
.video-poster {
position: absolute;
top: 1.5rem;
left: 1.5rem;
right: 1.5rem;
bottom: calc(1.5rem + 60px); /* Account for video info below */
background: linear-gradient(135deg,
rgba(79, 70, 229, 0.9) 0%,
rgba(6, 182, 212, 0.8) 50%,
rgba(245, 158, 11, 0.7) 100%);
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
transition: all 0.4s ease;
backdrop-filter: blur(10px);
z-index: 15;
}
.video-poster::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="circuit" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.2)"/><path d="M0,10 L20,10 M10,0 L10,20" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23circuit)"/></svg>');
opacity: 0.3;
}
.video-poster:hover {
transform: scale(1.02);
box-shadow: 0 25px 50px rgba(79, 70, 229, 0.4);
}
.poster-content {
position: relative;
z-index: 2;
padding: 2rem;
}
.poster-icon {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.video-poster:hover .poster-icon {
transform: scale(1.1);
background: rgba(255, 255, 255, 0.25);
}
.play-icon {
font-size: 36px;
color: white;
margin-left: 4px; /* Slight offset for play button centering */
}
.poster-title {
font-size: 1.8rem;
font-weight: 700;
color: white;
margin-bottom: 0.75rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.poster-subtitle {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
margin-bottom: 1.5rem;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
.poster-features {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.poster-tag {
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 0.4rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.poster-cta {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
animation: posterPulse 2s infinite;
}
@keyframes posterPulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
/* Hide poster when video is played */
.video-container video:not([poster]) + .video-poster {
display: none;
}
.video-container.playing .video-poster {
display: none;
}
.video-info {
margin-top: 1rem;
text-align: center;
padding: 1rem;
}
.video-title {
font-weight: 600;
font-size: 1.1rem;
color: var(--text-light);
margin-bottom: 0.25rem;
}
.video-subtitle {
font-size: 0.9rem;
color: var(--text-gray);
}
/* Stats */
.stats {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
.stat-item {
text-align: center;
padding: 1rem;
}
.stat-number {
font-size: 2rem;
font-weight: 700;
color: var(--accent-color);
}
.stat-label {
color: var(--text-gray);
font-size: 0.9rem;
}
/* Features Section */
.features {
padding: 6rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
background: linear-gradient(135deg, var(--text-light), var(--text-gray));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 2rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
transform: translateX(-100%);
transition: transform 0.5s ease;
}
.feature-card:hover::before {
transform: translateX(0);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.feature-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.feature-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-light);
}
.feature-description {
color: var(--text-gray);
line-height: 1.6;
}
/* Architecture Section */
.architecture {
padding: 6rem 2rem;
background: rgba(79, 70, 229, 0.05);
}
.architecture-content {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.workflow-diagram {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 3rem;
margin: 3rem 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
}
.workflow-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
min-width: 200px;
}
.step-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.step-title {
font-weight: 600;
margin-bottom: 0.5rem;
}
.step-description {
color: var(--text-gray);
font-size: 0.9rem;
}
.workflow-arrow {
font-size: 1.5rem;
color: var(--accent-color);
}
/* Installation Section */
.installation {
padding: 6rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.code-block {
background: rgba(0, 0, 0, 0.5);
border: 1px solid var(--glass-border);
border-radius: 15px;
padding: 2rem;
margin: 2rem 0;
position: relative;
overflow-x: auto;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--glass-border);
}
.code-title {
color: var(--text-gray);
font-size: 0.9rem;
}
.copy-btn {
background: var(--primary-color);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.3s ease;
}
.copy-btn:hover {
background: var(--secondary-color);
}
pre {
color: var(--text-light);
font-family: 'Monaco', 'Courier New', monospace;
line-height: 1.5;
white-space: pre-wrap;
}
/* Footer */
footer {
background: var(--bg-darker);
border-top: 1px solid var(--glass-border);
padding: 3rem 2rem 2rem;
text-align: center;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
}
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.footer-links a {
color: var(--text-gray);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(--primary-color);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.8s ease-out forwards;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.workflow-diagram {
flex-direction: column;
}
.workflow-arrow {
transform: rotate(90deg);
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
}
/* Section padding to account for fixed header */
section {
scroll-margin-top: 80px;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
</style>
</head>
<body>
<div class="bg-animation"></div>
<header>
<nav>
<div class="logo">
<i class="fas fa-microchip"></i>
<span>MCP-EDA</span>
</div>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#architecture">Architecture</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="https://github.com/NellyW8/mcp-EDA">GitHub</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<div class="hero-content">
<h1>AI-Powered Electronic Design Automation</h1>
<p class="hero-subtitle">
A comprehensive Model Context Protocol (MCP) server that integrates EDA tools with AI assistants.
Synthesize Verilog, run simulations, execute ASIC flows, and analyze waveforms through natural language.
</p>
<div class="cta-buttons">
<a href="https://github.com/NellyW8/mcp-EDA" class="btn btn-primary">
<i class="fab fa-github"></i>
Get Started
</a>
</div>
<div class="demo-video">
<div class="video-container" id="videoContainer">
<video controls preload="auto" width="100%" style="max-width: 100%;" id="demoVideo">
<source src="https://github.com/user-attachments/assets/65d8027e-7366-49b5-8f11-0430c1d1d3d6" type="video/mp4">
Your browser does not support the video tag.
<p>
<a href="https://github.com/user-attachments/assets/65d8027e-7366-49b5-8f11-0430c1d1d3d6" target="_blank" rel="noopener">
View Demo Video
</a>
</p>
</video>
<!-- Fancy Video Cover -->
<div class="video-poster" id="videoPoster" onclick="playVideo()">
<div class="poster-content">
<div class="poster-icon">
<i class="fas fa-play play-icon"></i>
</div>
<h3 class="poster-title">🚀 MCP-EDA Demo</h3>
<p class="poster-subtitle">
Watch AI-powered Verilog synthesis, simulation, and complete ASIC design workflows in action
</p>
<div class="poster-features">
<span class="poster-tag">⚡ Live Synthesis</span>
<span class="poster-tag">🔬 Simulation</span>
<span class="poster-tag">🏭 ASIC Flow</span>
</div>
<div class="poster-cta">Click to play demonstration →</div>
</div>
</div>
<div class="video-info">
<div class="video-title">MCP-EDA Server Demonstration</div>
<div class="video-subtitle">Verilog synthesis, simulation, and ASIC design flow</div>
</div>
</div>
</div>
<div class="stats">
<div class="stat-item">
<div class="stat-number">5+</div>
<div class="stat-label">EDA Tools</div>
</div>
<div class="stat-item">
<div class="stat-number">RTL→GDSII</div>
<div class="stat-label">Complete Flow</div>
</div>
<div class="stat-item">
<div class="stat-number">AI Native</div>
<div class="stat-label">Integration</div>
</div>
</div>
</div>
</section>
<section id="features" class="features">
<h2 class="section-title">Powerful EDA Integration</h2>
<div class="features-grid">
<div class="feature-card fade-in-up">
<i class="fas fa-code feature-icon"></i>
<h3 class="feature-title">Verilog Synthesis</h3>
<p class="feature-description">
Synthesize Verilog designs using Yosys for various FPGA targets including generic, ice40, and Xilinx platforms.
</p>
</div>
<div class="feature-card fade-in-up">
<i class="fas fa-play-circle feature-icon"></i>
<h3 class="feature-title">Design Simulation</h3>
<p class="feature-description">
Run comprehensive simulations using Icarus Verilog with automated testbench execution and result analysis.
</p>
</div>
<div class="feature-card fade-in-up">
<i class="fas fa-chart-line feature-icon"></i>
<h3 class="feature-title">Waveform Analysis</h3>
<p class="feature-description">
Launch GTKWave for VCD file visualization and detailed signal analysis with integrated viewer support.
</p>
</div>
<div class="feature-card fade-in-up">
<i class="fas fa-microchip feature-icon"></i>
<h3 class="feature-title">ASIC Design Flow</h3>
<p class="feature-description">
Complete RTL-to-GDSII flow using OpenLane with Docker integration for professional ASIC development.
</p>
</div>
<div class="feature-card fade-in-up">
<i class="fas fa-eye feature-icon"></i>
<h3 class="feature-title">Layout Viewing</h3>
<p class="feature-description">
Open and inspect GDSII files in KLayout for detailed physical design analysis and verification.
</p>
</div>
<div class="feature-card fade-in-up">
<i class="fas fa-file-chart-bar feature-icon"></i>
<h3 class="feature-title">Report Analysis</h3>
<p class="feature-description">
Analyze OpenLane reports for PPA metrics, timing analysis, and comprehensive design quality assessment.
</p>
</div>
</div>
</section>
<section id="architecture" class="architecture">
<div class="architecture-content">
<h2 class="section-title">How It Works</h2>
<p class="hero-subtitle">Seamless integration between AI assistants and professional EDA tools</p>
<div class="workflow-diagram">
<div class="workflow-step">
<div class="step-icon">
<i class="fas fa-robot"></i>
</div>
<h4 class="step-title">AI Query</h4>
<p class="step-description">Natural language requests to Claude or Cursor</p>
</div>
<div class="workflow-arrow">
<i class="fas fa-arrow-right"></i>
</div>
<div class="workflow-step">
<div class="step-icon">
<i class="fas fa-server"></i>
</div>
<h4 class="step-title">MCP Server</h4>
<p class="step-description">Protocol translation and tool orchestration</p>
</div>
<div class="workflow-arrow">
<i class="fas fa-arrow-right"></i>
</div>
<div class="workflow-step">
<div class="step-icon">
<i class="fas fa-tools"></i>
</div>
<h4 class="step-title">EDA Tools</h4>
<p class="step-description">Yosys, Icarus, OpenLane, GTKWave execution</p>
</div>
<div class="workflow-arrow">
<i class="fas fa-arrow-right"></i>
</div>
<div class="workflow-step">
<div class="step-icon">
<i class="fas fa-chart-bar"></i>
</div>
<h4 class="step-title">Results</h4>
<p class="step-description">Analysis, reports, and visual feedback</p>
</div>
</div>
</div>
</section>
<section id="installation" class="installation">
<h2 class="section-title">Quick Installation</h2>
<div class="code-block">
<div class="code-header">
<span class="code-title">Clone and Setup</span>
<button class="copy-btn" onclick="copyToClipboard('setup-code')">
<i class="fas fa-copy"></i> Copy
</button>
</div>
<pre id="setup-code"># Clone the repository
git clone https://github.com/NellyW8/mcp-EDA
cd mcp-EDA
# Install dependencies
npm install
# Build the project
npm run build</pre>
</div>
<div class="code-block">
<div class="code-header">
<span class="code-title">Configure Claude Desktop</span>
<button class="copy-btn" onclick="copyToClipboard('config-code')">
<i class="fas fa-copy"></i> Copy
</button>
</div>
<pre id="config-code">{
"mcpServers": {
"eda-mcp": {
"command": "node",
"args": ["/absolute/path/to/your/eda-mcp-server/build/index.js"],
"env": {
"PATH": "/usr/local/bin:/opt/homebrew/bin:/usr/bin:/bin",
"HOME": "/your/home/directory"
}
}
}
}</pre>
</div>
<div style="text-align: center; margin-top: 3rem;">
<a href="https://github.com/NellyW8/mcp-EDA#installation" class="btn btn-primary">
<i class="fas fa-book"></i>
Full Installation Guide
</a>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<div class="footer-links">
<a href="https://github.com/NellyW8/mcp-EDA">
<i class="fab fa-github"></i> GitHub
</a>
<a href="https://github.com/NellyW8/mcp-EDA/issues">
<i class="fas fa-bug"></i> Issues
</a>
<a href="https://github.com/NellyW8/mcp-EDA/wiki">
<i class="fas fa-book"></i> Documentation
</a>
<a href="https://modelcontextprotocol.io">
<i class="fas fa-link"></i> MCP Protocol
</a>
</div>
<p style="color: var(--text-gray); margin-top: 2rem;">
© 2025 MCP-EDA. Empowering AI-driven hardware design workflows.
</p>
</div>
</footer>
<script>
// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Fade in animation on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in-up');
}
});
}, observerOptions);
document.querySelectorAll('.feature-card').forEach(card => {
observer.observe(card);
});
// Video poster functionality
function playVideo() {
const video = document.getElementById('demoVideo');
const poster = document.getElementById('videoPoster');
const container = document.getElementById('videoContainer');
poster.style.opacity = '0';
poster.style.transform = 'scale(0.95)';
setTimeout(() => {
poster.style.display = 'none';
container.classList.add('playing');
video.play();
}, 300);
}
// Copy to clipboard function
function copyToClipboard(elementId) {
const element = document.getElementById(elementId);
const text = element.textContent;
navigator.clipboard.writeText(text).then(() => {
const button = event.target.closest('.copy-btn');
const original = button.innerHTML;
button.innerHTML = '<i class="fas fa-check"></i> Copied!';
button.style.background = '#10b981';
setTimeout(() => {
button.innerHTML = original;
button.style.background = '';
}, 2000);
});
}
// Open video function
function openVideo() {
window.open('https://github.com/NellyW8/mcp-EDA/blob/main/MCP_demo2.mp4', '_blank');
}
// Parallax effect for background
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const background = document.querySelector('.bg-animation');
background.style.transform = `translateY(${scrolled * 0.5}px)`;
});
</script>
</body>
</html>