index.html•49.8 kB
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Model Context Protocol (MCP) server that integrates Sitecore CMS with AI assistants like Claude and GitHub Copilot. 21 tools for querying content, managing versions, and CRUD operations.">
<meta name="keywords" content="sitecore, mcp, model-context-protocol, graphql, ai-assistant, claude, github-copilot, cms">
<meta name="author" content="Gary Wenneker">
<title>Sitecore MCP Server - AI-Powered Sitecore Integration</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
sitecore: {
red: '#EB1F1F',
dark: '#1A1A1A',
gray: '#2D2D2D',
}
}
}
}
}
</script>
<style>
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.float-animation {
animation: float 6s ease-in-out infinite;
}
@keyframes sparkle {
0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
50% { transform: scale(1.5) rotate(180deg); opacity: 0.5; }
}
.animate-sparkle {
animation: sparkle 2s ease-in-out infinite;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Custom themed scrollbars */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.5);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #ef4444 0%, #f97316 100%);
border-radius: 10px;
border: 2px solid rgba(15, 23, 42, 0.5);
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #dc2626 0%, #ea580c 100%);
}
/* Firefox scrollbar */
* {
scrollbar-width: thin;
scrollbar-color: #ef4444 rgba(15, 23, 42, 0.5);
}
/* Disable text selection */
body {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* Allow selection for code blocks */
pre, code {
user-select: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
}
/* Copy button styling */
.copy-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
opacity: 1;
transition: opacity 0.2s, transform 0.2s;
}
@media (min-width: 768px) {
.copy-button {
opacity: 0;
}
.code-container:hover .copy-button {
opacity: 1;
}
}
.copy-button:hover {
transform: scale(1.05);
background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
}
.copy-button:active {
transform: scale(0.95);
}
.copy-button.copied {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
/* Floating background sparks */
.bg-spark {
position: fixed;
pointer-events: none;
z-index: 0;
filter: blur(3px);
opacity: 0;
}
@keyframes floatSpark {
0% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 0;
}
10% {
opacity: 0.3;
}
50% {
opacity: 0.5;
}
90% {
opacity: 0.3;
}
100% {
transform: translate(var(--tx), var(--ty)) rotate(360deg) scale(1.5);
opacity: 0;
}
}
/* Scroll reveal animations */
.reveal {
opacity: 0 !important;
transform: translateY(50px) !important;
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
will-change: opacity, transform;
}
.reveal.active {
opacity: 1 !important;
transform: translateY(0) !important;
}
</style>
<script>
// Create floating background sparks
function createBackgroundSparks() {
const sparkSVG = `<svg width="40" height="40" viewBox="0 0 71.030968 68.526428" xmlns="http://www.w3.org/2000/svg">
<path d="m 35.346,0.014842 c -1.22171,0.233045 -1.5262,5.254436 -1.76475,6.334498 -1.28946,5.838075 -3.649978,11.760683 -7.835698,16.139583 -5.29517,5.53953 -12.168731,8.338673 -19.568831,9.842293 -0.97406,0.19792 -6.601506,0.545467 -6.151046,1.995227 0.34982,1.12585 3.839969,1.199129 4.828129,1.423169 4.64575,1.05329 9.31159,2.215852 13.49375,4.578532 10.54587,5.957825 14.936127,16.642955 16.404167,28.198275 2.42069,-0.18859 2.213016,-4.42532 2.680456,-6.35 1.4938,-6.15077 3.805746,-12.39114 8.442896,-16.910075 5.07903,-4.94954 11.499458,-7.368367 18.245398,-9.052677 1.21603,-0.30362 6.667774,-0.678247 6.900354,-2.083077 0.16851,-1.01783 -1.796537,-1.040634 -2.402437,-1.130164 -3.04456,-0.4499 -6.048284,-1.082999 -8.995834,-1.970939 -10.41256,-3.13676 -17.566603,-10.168852 -20.989933,-20.446814 -0.89238,-2.679205 -1.541393,-5.418678 -2.007113,-8.202083 -0.1083,-0.647223 -0.219088,-2.568029 -1.279508,-2.365748 z" fill="currentColor"/>
</svg>`;
const colors = ['#ef4444', '#f97316', '#3b82f6', '#8b5cf6', '#ec4899', '#06b6d4', '#10b981'];
const container = document.body;
setInterval(() => {
const spark = document.createElement('div');
spark.className = 'bg-spark';
spark.innerHTML = sparkSVG;
// Random position
const startX = Math.random() * window.innerWidth;
const startY = Math.random() * window.innerHeight;
spark.style.left = startX + 'px';
spark.style.top = startY + 'px';
// Random size
const size = 30 + Math.random() * 60;
spark.style.width = size + 'px';
spark.style.height = size + 'px';
// Random color
spark.style.color = colors[Math.floor(Math.random() * colors.length)];
// Random movement
const tx = (Math.random() - 0.5) * 400;
const ty = (Math.random() - 0.5) * 400;
spark.style.setProperty('--tx', tx + 'px');
spark.style.setProperty('--ty', ty + 'px');
// Random duration
const duration = 8 + Math.random() * 8;
spark.style.animation = `floatSpark ${duration}s ease-in-out forwards, pulse 2s ease-in-out infinite`;
container.appendChild(spark);
// Remove after animation
setTimeout(() => {
spark.remove();
}, duration * 1000);
}, 2000);
}
// Start creating sparks when page loads
document.addEventListener('DOMContentLoaded', createBackgroundSparks);
// Scroll reveal animations
document.addEventListener('DOMContentLoaded', () => {
const revealElements = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
// Reset transition delay after animation completes
setTimeout(() => {
entry.target.style.transitionDelay = '0s';
}, 1000);
}
});
}, {
threshold: 0.15,
rootMargin: '0px 0px -100px 0px'
});
// Add staggered transition delays to each element
revealElements.forEach((el, index) => {
el.style.transitionDelay = `${index * 0.1}s`;
observer.observe(el);
});
});
function copyToClipboard(text, button) {
navigator.clipboard.writeText(text).then(() => {
const originalText = button.textContent;
button.textContent = '✓ Copied!';
button.classList.add('copied');
setTimeout(() => {
button.textContent = originalText;
button.classList.remove('copied');
}, 2000);
}).catch(err => {
console.error('Failed to copy:', err);
});
}
</script>
</head>
<body class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 text-white">
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 glass-effect">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="relative">
<img src="sitecore-mcp.svg" alt="Sitecore MCP Logo" class="w-8 h-8">
<!-- AI Sparks -->
<svg class="absolute -top-1 -right-1 w-3 h-3 animate-pulse" viewBox="0 0 71.030968 68.526428" xmlns="http://www.w3.org/2000/svg">
<path d="m 35.345941,0.014842 c -1.22171,0.233045 -1.5262,5.254436 -1.76475,6.334498 -1.28946,5.838075 -3.649978,11.760683 -7.835698,16.139583 -5.29517,5.53953 -12.168731,8.338673 -19.568831,9.842293 -0.97406,0.19792 -6.601506,0.545467 -6.151046,1.995227 0.34982,1.12585 3.839969,1.199129 4.828129,1.423169 4.64575,1.05329 9.31159,2.215852 13.49375,4.578532 10.54587,5.957825 14.936127,16.642955 16.404167,28.198275 2.42069,-0.18859 2.213016,-4.42532 2.680456,-6.35 1.4938,-6.15077 3.805746,-12.39114 8.442896,-16.910075 5.07903,-4.94954 11.499458,-7.368367 18.245398,-9.052677 1.21603,-0.30362 6.667774,-0.678247 6.900354,-2.083077 0.16851,-1.01783 -1.796537,-1.040634 -2.402437,-1.130164 -3.04456,-0.4499 -6.048284,-1.082999 -8.995834,-1.970939 -10.41256,-3.13676 -17.566603,-10.168852 -20.989933,-20.446814 -0.89238,-2.679205 -1.541393,-5.418678 -2.007113,-8.202083 -0.1083,-0.647223 -0.219088,-2.568029 -1.279508,-2.365748 z" fill="#fcd34d"/>
</svg>
<svg class="absolute top-0 -left-1 w-2.5 h-2.5 animate-ping" style="animation-delay: 0.5s;" viewBox="0 0 71.030968 68.526428" xmlns="http://www.w3.org/2000/svg">
<path d="m 35.345941,0.014842 c -1.22171,0.233045 -1.5262,5.254436 -1.76475,6.334498 -1.28946,5.838075 -3.649978,11.760683 -7.835698,16.139583 -5.29517,5.53953 -12.168731,8.338673 -19.568831,9.842293 -0.97406,0.19792 -6.601506,0.545467 -6.151046,1.995227 0.34982,1.12585 3.839969,1.199129 4.828129,1.423169 4.64575,1.05329 9.31159,2.215852 13.49375,4.578532 10.54587,5.957825 14.936127,16.642955 16.404167,28.198275 2.42069,-0.18859 2.213016,-4.42532 2.680456,-6.35 1.4938,-6.15077 3.805746,-12.39114 8.442896,-16.910075 5.07903,-4.94954 11.499458,-7.368367 18.245398,-9.052677 1.21603,-0.30362 6.667774,-0.678247 6.900354,-2.083077 0.16851,-1.01783 -1.796537,-1.040634 -2.402437,-1.130164 -3.04456,-0.4499 -6.048284,-1.082999 -8.995834,-1.970939 -10.41256,-3.13676 -17.566603,-10.168852 -20.989933,-20.446814 -0.89238,-2.679205 -1.541393,-5.418678 -2.007113,-8.202083 -0.1083,-0.647223 -0.219088,-2.568029 -1.279508,-2.365748 z" fill="#67e8f9"/>
</svg>
<svg class="absolute -bottom-1 right-0 w-2 h-2 animate-pulse" style="animation-delay: 1s;" viewBox="0 0 71.030968 68.526428" xmlns="http://www.w3.org/2000/svg">
<path d="m 35.345941,0.014842 c -1.22171,0.233045 -1.5262,5.254436 -1.76475,6.334498 -1.28946,5.838075 -3.649978,11.760683 -7.835698,16.139583 -5.29517,5.53953 -12.168731,8.338673 -19.568831,9.842293 -0.97406,0.19792 -6.601506,0.545467 -6.151046,1.995227 0.34982,1.12585 3.839969,1.199129 4.828129,1.423169 4.64575,1.05329 9.31159,2.215852 13.49375,4.578532 10.54587,5.957825 14.936127,16.642955 16.404167,28.198275 2.42069,-0.18859 2.213016,-4.42532 2.680456,-6.35 1.4938,-6.15077 3.805746,-12.39114 8.442896,-16.910075 5.07903,-4.94954 11.499458,-7.368367 18.245398,-9.052677 1.21603,-0.30362 6.667774,-0.678247 6.900354,-2.083077 0.16851,-1.01783 -1.796537,-1.040634 -2.402437,-1.130164 -3.04456,-0.4499 -6.048284,-1.082999 -8.995834,-1.970939 -10.41256,-3.13676 -17.566603,-10.168852 -20.989933,-20.446814 -0.89238,-2.679205 -1.541393,-5.418678 -2.007113,-8.202083 -0.1083,-0.647223 -0.219088,-2.568029 -1.279508,-2.365748 z" fill="#93c5fd"/>
</svg>
</div>
<span class="text-2xl font-bold">Sitecore MCP</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#features" class="hover:text-red-400 transition">Features</a>
<a href="#tools" class="hover:text-red-400 transition">Tools</a>
<a href="#quickstart" class="hover:text-red-400 transition">Quick Start</a>
<a href="https://github.com/GaryWenneker/SitecoreMCP" target="_blank" class="hover:text-red-400 transition">GitHub</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="pt-32 pb-20 px-6">
<div class="container mx-auto text-center">
<div class="float-animation inline-block mb-8 relative">
<div class="relative">
<img src="sitecore-mcp.svg" alt="Sitecore MCP Logo" class="w-32 h-32">
<!-- AI Sparks Around Logo -->
<svg class="absolute -top-2 -right-2 w-4 h-4 animate-pulse shadow-lg" viewBox="0 0 71.030968 68.526428" xmlns="http://www.w3.org/2000/svg">
<path d="m 35.345941,0.014842 c -1.22171,0.233045 -1.5262,5.254436 -1.76475,6.334498 -1.28946,5.838075 -3.649978,11.760683 -7.835698,16.139583 -5.29517,5.53953 -12.168731,8.338673 -19.568831,9.842293 -0.97406,0.19792 -6.601506,0.545467 -6.151046,1.995227 0.34982,1.12585 3.839969,1.199129 4.828129,1.423169 4.64575,1.05329 9.31159,2.215852 13.49375,4.578532 10.54587,5.957825 14.936127,16.642955 16.404167,28.198275 2.42069,-0.18859 2.213016,-4.42532 2.680456,-6.35 1.4938,-6.15077 3.805746,-12.39114 8.442896,-16.910075 5.07903,-4.94954 11.499458,-7.368367 18.245398,-9.052677 1.21603,-0.30362 6.667774,-0.678247 6.900354,-2.083077 0.16851,-1.01783 -1.796537,-1.040634 -2.402437,-1.130164 -3.04456,-0.4499 -6.048284,-1.082999 -8.995834,-1.970939 -10.41256,-3.13676 -17.566603,-10.168852 -20.989933,-20.446814 -0.89238,-2.679205 -1.541393,-5.418678 -2.007113,-8.202083 -0.1083,-0.647223 -0.219088,-2.568029 -1.279508,-2.365748 z" fill="#fcd34d"/>
</svg>
<svg class="absolute top-2 -left-3 w-3.5 h-3.5 animate-ping" style="animation-delay: 0.3s;" viewBox="0 0 71.030968 68.526428" xmlns="http://www.w3.org/2000/svg">
<path d="m 35.345941,0.014842 c -1.22171,0.233045 -1.5262,5.254436 -1.76475,6.334498 -1.28946,5.838075 -3.649978,11.760683 -7.835698,16.139583 -5.29517,5.53953 -12.168731,8.338673 -19.568831,9.842293 -0.97406,0.19792 -6.601506,0.545467 -6.151046,1.995227 0.34982,1.12585 3.839969,1.199129 4.828129,1.423169 4.64575,1.05329 9.31159,2.215852 13.49375,4.578532 10.54587,5.957825 14.936127,16.642955 16.404167,28.198275 2.42069,-0.18859 2.213016,-4.42532 2.680456,-6.35 1.4938,-6.15077 3.805746,-12.39114 8.442896,-16.910075 5.07903,-4.94954 11.499458,-7.368367 18.245398,-9.052677 1.21603,-0.30362 6.667774,-0.678247 6.900354,-2.083077 0.16851,-1.01783 -1.796537,-1.040634 -2.402437,-1.130164 -3.04456,-0.4499 -6.048284,-1.082999 -8.995834,-1.970939 -10.41256,-3.13676 -17.566603,-10.168852 -20.989933,-20.446814 -0.89238,-2.679205 -1.541393,-5.418678 -2.007113,-8.202083 -0.1083,-0.647223 -0.219088,-2.568029 -1.279508,-2.365748 z" fill="#67e8f9"/>
</svg>
<svg class="absolute -bottom-2 -right-1 w-3 h-3 animate-pulse" style="animation-delay: 0.6s;" viewBox="0 0 71.030968 68.526428" xmlns="http://www.w3.org/2000/svg">
<path d="m 35.345941,0.014842 c -1.22171,0.233045 -1.5262,5.254436 -1.76475,6.334498 -1.28946,5.838075 -3.649978,11.760683 -7.835698,16.139583 -5.29517,5.53953 -12.168731,8.338673 -19.568831,9.842293 -0.97406,0.19792 -6.601506,0.545467 -6.151046,1.995227 0.34982,1.12585 3.839969,1.199129 4.828129,1.423169 4.64575,1.05329 9.31159,2.215852 13.49375,4.578532 10.54587,5.957825 14.936127,16.642955 16.404167,28.198275 2.42069,-0.18859 2.213016,-4.42532 2.680456,-6.35 1.4938,-6.15077 3.805746,-12.39114 8.442896,-16.910075 5.07903,-4.94954 11.499458,-7.368367 18.245398,-9.052677 1.21603,-0.30362 6.667774,-0.678247 6.900354,-2.083077 0.16851,-1.01783 -1.796537,-1.040634 -2.402437,-1.130164 -3.04456,-0.4499 -6.048284,-1.082999 -8.995834,-1.970939 -10.41256,-3.13676 -17.566603,-10.168852 -20.989933,-20.446814 -0.89238,-2.679205 -1.541393,-5.418678 -2.007113,-8.202083 -0.1083,-0.647223 -0.219088,-2.568029 -1.279508,-2.365748 z" fill="#60a5fa"/>
</svg>
<svg class="absolute -bottom-1 -left-2 w-3.5 h-3.5 animate-ping" style="animation-delay: 0.9s;" viewBox="0 0 71.030968 68.526428" xmlns="http://www.w3.org/2000/svg">
<path d="m 35.345941,0.014842 c -1.22171,0.233045 -1.5262,5.254436 -1.76475,6.334498 -1.28946,5.838075 -3.649978,11.760683 -7.835698,16.139583 -5.29517,5.53953 -12.168731,8.338673 -19.568831,9.842293 -0.97406,0.19792 -6.601506,0.545467 -6.151046,1.995227 0.34982,1.12585 3.839969,1.199129 4.828129,1.423169 4.64575,1.05329 9.31159,2.215852 13.49375,4.578532 10.54587,5.957825 14.936127,16.642955 16.404167,28.198275 2.42069,-0.18859 2.213016,-4.42532 2.680456,-6.35 1.4938,-6.15077 3.805746,-12.39114 8.442896,-16.910075 5.07903,-4.94954 11.499458,-7.368367 18.245398,-9.052677 1.21603,-0.30362 6.667774,-0.678247 6.900354,-2.083077 0.16851,-1.01783 -1.796537,-1.040634 -2.402437,-1.130164 -3.04456,-0.4499 -6.048284,-1.082999 -8.995834,-1.970939 -10.41256,-3.13676 -17.566603,-10.168852 -20.989933,-20.446814 -0.89238,-2.679205 -1.541393,-5.418678 -2.007113,-8.202083 -0.1083,-0.647223 -0.219088,-2.568029 -1.279508,-2.365748 z" fill="#c084fc"/>
</svg>
<svg class="absolute top-0 right-2 w-2.5 h-2.5 animate-pulse" style="animation-delay: 1.2s;" viewBox="0 0 71.030968 68.526428" xmlns="http://www.w3.org/2000/svg">
<path d="m 35.345941,0.014842 c -1.22171,0.233045 -1.5262,5.254436 -1.76475,6.334498 -1.28946,5.838075 -3.649978,11.760683 -7.835698,16.139583 -5.29517,5.53953 -12.168731,8.338673 -19.568831,9.842293 -0.97406,0.19792 -6.601506,0.545467 -6.151046,1.995227 0.34982,1.12585 3.839969,1.199129 4.828129,1.423169 4.64575,1.05329 9.31159,2.215852 13.49375,4.578532 10.54587,5.957825 14.936127,16.642955 16.404167,28.198275 2.42069,-0.18859 2.213016,-4.42532 2.680456,-6.35 1.4938,-6.15077 3.805746,-12.39114 8.442896,-16.910075 5.07903,-4.94954 11.499458,-7.368367 18.245398,-9.052677 1.21603,-0.30362 6.667774,-0.678247 6.900354,-2.083077 0.16851,-1.01783 -1.796537,-1.040634 -2.402437,-1.130164 -3.04456,-0.4499 -6.048284,-1.082999 -8.995834,-1.970939 -10.41256,-3.13676 -17.566603,-10.168852 -20.989933,-20.446814 -0.89238,-2.679205 -1.541393,-5.418678 -2.007113,-8.202083 -0.1083,-0.647223 -0.219088,-2.568029 -1.279508,-2.365748 z" fill="#86efac"/>
</svg>
<svg class="absolute bottom-2 left-0 w-2.5 h-2.5 animate-ping" style="animation-delay: 1.5s;" viewBox="0 0 71.030968 68.526428" xmlns="http://www.w3.org/2000/svg">
<path d="m 35.345941,0.014842 c -1.22171,0.233045 -1.5262,5.254436 -1.76475,6.334498 -1.28946,5.838075 -3.649978,11.760683 -7.835698,16.139583 -5.29517,5.53953 -12.168731,8.338673 -19.568831,9.842293 -0.97406,0.19792 -6.601506,0.545467 -6.151046,1.995227 0.34982,1.12585 3.839969,1.199129 4.828129,1.423169 4.64575,1.05329 9.31159,2.215852 13.49375,4.578532 10.54587,5.957825 14.936127,16.642955 16.404167,28.198275 2.42069,-0.18859 2.213016,-4.42532 2.680456,-6.35 1.4938,-6.15077 3.805746,-12.39114 8.442896,-16.910075 5.07903,-4.94954 11.499458,-7.368367 18.245398,-9.052677 1.21603,-0.30362 6.667774,-0.678247 6.900354,-2.083077 0.16851,-1.01783 -1.796537,-1.040634 -2.402437,-1.130164 -3.04456,-0.4499 -6.048284,-1.082999 -8.995834,-1.970939 -10.41256,-3.13676 -17.566603,-10.168852 -20.989933,-20.446814 -0.89238,-2.679205 -1.541393,-5.418678 -2.007113,-8.202083 -0.1083,-0.647223 -0.219088,-2.568029 -1.279508,-2.365748 z" fill="#f9a8d4"/>
</svg>
</div>
<!-- Glow effect -->
<div class="absolute inset-0 bg-gradient-to-r from-cyan-500/20 via-blue-500/20 to-purple-500/20 blur-xl animate-pulse"></div>
</div>
<h1 class="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-red-400 to-orange-500">
Sitecore MCP Server
</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
AI-Powered Sitecore Integration via Model Context Protocol
</p>
<p class="text-lg text-gray-400 mb-12 max-w-2xl mx-auto">
Connect your Sitecore CMS with AI assistants like Claude and GitHub Copilot.
Query content, manage versions, and perform CRUD operations using natural language.
</p>
<div class="flex flex-wrap justify-center gap-4 mb-12">
<a href="https://github.com/GaryWenneker/SitecoreMCP"
class="px-8 py-4 bg-gradient-to-r from-red-600 to-orange-600 rounded-lg font-semibold hover:shadow-2xl hover:scale-105 transition transform">
View on GitHub
</a>
<a href="#quickstart"
class="px-8 py-4 glass-effect rounded-lg font-semibold hover:bg-white/20 transition">
Get Started
</a>
</div>
<!-- Badges -->
<div class="flex flex-wrap justify-center gap-3 mb-4">
<img src="https://github.com/GaryWenneker/SitecoreMCP/actions/workflows/ci.yml/badge.svg" alt="CI">
<img src="https://img.shields.io/badge/TypeScript-5.7-blue.svg" alt="TypeScript">
<img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License">
<img src="https://img.shields.io/badge/node-%3E%3D18-brightgreen.svg" alt="Node.js">
</div>
<!-- Stats Highlight -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto mt-16">
<div class="text-center glass-effect p-6 rounded-xl hover:scale-110 transition transform reveal">
<div class="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-400 to-orange-500 mb-2">21</div>
<div class="text-sm text-gray-300 font-semibold">MCP Tools</div>
</div>
<div class="text-center glass-effect p-6 rounded-xl hover:scale-110 transition transform reveal">
<div class="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-amber-500 mb-2">100%</div>
<div class="text-sm text-gray-300 font-semibold">Test Coverage</div>
</div>
<div class="text-center glass-effect p-6 rounded-xl hover:scale-110 transition transform reveal">
<div class="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-rose-400 to-pink-500 mb-2">10+</div>
<div class="text-sm text-gray-300 font-semibold">IDE Integrations</div>
</div>
<div class="text-center glass-effect p-6 rounded-xl hover:scale-110 transition transform reveal">
<div class="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 to-teal-500 mb-2">MIT</div>
<div class="text-sm text-gray-300 font-semibold">Open Source</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 px-6">
<div class="container mx-auto">
<h2 class="text-4xl font-bold text-center mb-16">Why Sitecore MCP?</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="glass-effect p-8 rounded-2xl hover:scale-105 transition transform reveal">
<div class="w-16 h-16 bg-red-600 rounded-lg flex items-center justify-center mb-6">
<svg class="w-8 h-8" fill="white" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
</div>
<h3 class="text-2xl font-bold mb-4">21 Powerful Tools</h3>
<p class="text-gray-400">
Complete set of MCP tools for item operations, templates, version control, navigation, layouts, and CRUD operations.
</p>
</div>
<div class="glass-effect p-8 rounded-2xl hover:scale-105 transition transform reveal">
<div class="w-16 h-16 bg-orange-600 rounded-lg flex items-center justify-center mb-6">
<svg class="w-8 h-8" fill="white" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<h3 class="text-2xl font-bold mb-4">GraphQL Integration</h3>
<p class="text-gray-400">
Built on Sitecore's GraphQL API with optimized queries, pagination support, and comprehensive error handling.
</p>
</div>
<div class="glass-effect p-8 rounded-2xl hover:scale-105 transition transform reveal">
<div class="w-16 h-16 bg-rose-600 rounded-lg flex items-center justify-center mb-6">
<svg class="w-8 h-8" fill="white" viewBox="0 0 24 24">
<path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"/>
</svg>
</div>
<h3 class="text-2xl font-bold mb-4">AI Assistant Ready</h3>
<p class="text-gray-400">
Works seamlessly with Claude Desktop, GitHub Copilot, VS Code, Cursor, and other MCP-compatible AI tools.
</p>
</div>
</div>
</div>
</section>
<!-- Tools Overview -->
<section id="tools" class="py-20 px-6 bg-black/30">
<div class="container mx-auto">
<h2 class="text-4xl font-bold text-center mb-16">21 MCP Tools</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Item Operations -->
<div class="glass-effect p-6 rounded-xl reveal">
<h3 class="text-xl font-bold mb-4 text-red-400">📦 Item Operations</h3>
<ul class="space-y-4 text-sm text-gray-300">
<li><strong class="text-white text-base">sitecore_get_item</strong><br><span class="text-gray-400">Retrieve a single content item by path or GUID. Returns complete item metadata including template info, display name, language, version, and hasChildren flag. Supports multi-language queries.</span></li>
<li><strong class="text-white text-base">sitecore_get_children</strong><br><span class="text-gray-400">Fetch all direct child items of a parent item. Includes pagination support (first/after parameters) and optional recursive traversal for deep tree navigation.</span></li>
<li><strong class="text-white text-base">sitecore_get_field_value</strong><br><span class="text-gray-400">Extract the value of a specific field from an item. Lightweight query for single field retrieval without fetching entire item data.</span></li>
<li><strong class="text-white text-base">sitecore_get_item_fields</strong><br><span class="text-gray-400">Get all fields (both own and inherited) from an item's template. Returns field names and values in a structured format. Template-aware field discovery with Helix base template support.</span></li>
<li><strong class="text-white text-base">sitecore_query</strong><br><span class="text-gray-400">Execute custom Sitecore fast queries using XPath-like syntax (e.g., /sitecore/content//*[@@templatename='Page']). Supports complex filtering and template-based searches.</span></li>
<li><strong class="text-white text-base">sitecore_search</strong><br><span class="text-gray-400">Powerful search with filters (path_contains, name_contains, template_in, hasChildren, hasLayout), ordering by name/path/displayName, and faceted search capabilities.</span></li>
<li><strong class="text-white text-base">sitecore_search_paginated</strong><br><span class="text-gray-400">Search with cursor-based pagination. Returns pageInfo with hasNextPage/hasPreviousPage flags and totalCount. Use endCursor for next page fetching.</span></li>
</ul>
</div>
<!-- Template Operations -->
<div class="glass-effect p-6 rounded-xl reveal">
<h3 class="text-xl font-bold mb-4 text-orange-400">📋 Template Operations</h3>
<ul class="space-y-4 text-sm text-gray-300">
<li><strong class="text-white text-base">sitecore_get_template</strong><br><span class="text-gray-400">Retrieve complete template definition including all sections, fields, field types, and base template inheritance chain. Essential for understanding item structure in Helix architecture (Foundation/Feature/Project layers).</span></li>
<li><strong class="text-white text-base">sitecore_get_templates</strong><br><span class="text-gray-400">Fetch multiple template definitions with optional path filtering (e.g., /sitecore/templates/User Defined). Returns template hierarchies with field definitions for batch template analysis.</span></li>
</ul>
</div>
<!-- Version Control -->
<div class="glass-effect p-6 rounded-xl reveal">
<h3 class="text-xl font-bold mb-4 text-rose-400">🕐 Version Control</h3>
<ul class="space-y-4 text-sm text-gray-300">
<li><strong class="text-white text-base">sitecore_get_item_versions</strong><br><span class="text-gray-400">Retrieve complete version history for an item in a specific language. Returns all version numbers with metadata, enabling version comparison and audit trail analysis.</span></li>
<li><strong class="text-white text-base">sitecore_get_item_with_statistics</strong><br><span class="text-gray-400">Get item data enriched with Statistics inline fragment: Created/Updated timestamps, CreatedBy/UpdatedBy user names, and Revision ID. Perfect for audit logs and change tracking.</span></li>
</ul>
</div>
<!-- Navigation -->
<div class="glass-effect p-6 rounded-xl reveal">
<h3 class="text-xl font-bold mb-4 text-amber-400">🧭 Navigation</h3>
<ul class="space-y-4 text-sm text-gray-300">
<li><strong class="text-white text-base">sitecore_get_parent</strong><br><span class="text-gray-400">Navigate one level up in the content tree. Returns the immediate parent item with full metadata. Useful for breadcrumb generation and upward tree traversal.</span></li>
<li><strong class="text-white text-base">sitecore_get_ancestors</strong><br><span class="text-gray-400">Get complete ancestor path from current item to /sitecore root. Returns ordered array of all parent items, grandparents, etc. Essential for full breadcrumb trails and hierarchical context.</span></li>
</ul>
</div>
<!-- Layout & Sites -->
<div class="glass-effect p-6 rounded-xl reveal">
<h3 class="text-xl font-bold mb-4 text-pink-400">🎨 Layout & Sites</h3>
<ul class="space-y-4 text-sm text-gray-300">
<li><strong class="text-white text-base">sitecore_get_layout</strong><br><span class="text-gray-400">Retrieve complete presentation details for a route including all placeholders, renderings, datasources, and rendering parameters. Uses site name and route path for JSS/Headless scenarios.</span></li>
<li><strong class="text-white text-base">sitecore_get_sites</strong><br><span class="text-gray-400">Get Sitecore site definitions with filtering by name or current site. Returns site root paths, hostnames, language settings, and system/user site classifications.</span></li>
</ul>
</div>
<!-- Mutations -->
<div class="glass-effect p-6 rounded-xl reveal">
<h3 class="text-xl font-bold mb-4 text-emerald-400">✏️ Mutations</h3>
<ul class="space-y-4 text-sm text-gray-300">
<li><strong class="text-white text-base">sitecore_create_item</strong><br><span class="text-gray-400">Create new content items via GraphQL mutations. Specify name, template path/ID, parent path, language, and optional field values. Returns created item with GUID and full metadata.</span></li>
<li><strong class="text-white text-base">sitecore_update_item</strong><br><span class="text-gray-400">Modify existing item properties including name, field values, and version-specific changes. Supports multi-language updates with language and version parameters.</span></li>
<li><strong class="text-white text-base">sitecore_delete_item</strong><br><span class="text-gray-400">Remove items from Sitecore with deletePermanently flag. False moves to recycle bin (soft delete), true removes permanently. Requires appropriate permissions.</span></li>
</ul>
</div>
<!-- Advanced -->
<div class="glass-effect p-6 rounded-xl md:col-span-2 lg:col-span-3 reveal">
<h3 class="text-xl font-bold mb-4 text-red-400">🔬 Advanced Features</h3>
<div class="grid md:grid-cols-3 gap-6 text-sm text-gray-300">
<div><strong class="text-white text-base">sitecore_scan_schema</strong><br><span class="text-gray-400">Perform GraphQL introspection to discover all available queries, mutations, types, and fields. Analyzes schema capabilities and saves comprehensive type definitions to JSON for reference.</span></div>
<div><strong class="text-white text-base">sitecore_command</strong><br><span class="text-gray-400">Natural language interface that interprets plain English commands and executes appropriate MCP tools. Examples: "get item /sitecore/content/Home", "search for articles", "find items with template Page".</span></div>
<div><strong class="text-white text-base">sitecore_discover_item_dependencies</strong><br><span class="text-gray-400">Comprehensive discovery tool (NEW v1.6.0) that retrieves content item with complete dependency graph: template definition, inheritance chain, all fields (own + inherited), associated renderings, and GraphQL resolvers. Opt-in rendering/resolver discovery for performance.</span></div>
</div>
</div>
</div>
</div>
</section>
<!-- Quick Start -->
<section id="quickstart" class="py-20 px-6">
<div class="container mx-auto max-w-4xl">
<h2 class="text-4xl font-bold text-center mb-16">Quick Start</h2>
<div class="glass-effect p-8 rounded-2xl mb-8 reveal">
<h3 class="text-2xl font-bold mb-4">1. Install Dependencies</h3>
<div class="code-container relative bg-black/50 p-4 rounded-lg font-mono text-sm overflow-x-auto">
<button class="copy-button" onclick="copyToClipboard('npm install\nnpm run build', this)">Copy</button>
<code class="text-green-400">npm install</code><br>
<code class="text-green-400">npm run build</code>
</div>
</div>
<div class="glass-effect p-8 rounded-2xl mb-8 reveal">
<h3 class="text-2xl font-bold mb-4">2. Configure Environment</h3>
<div class="code-container relative bg-black/50 p-4 rounded-lg font-mono text-sm overflow-x-auto">
<button class="copy-button" onclick="copyToClipboard('# .env\nSITECORE_HOST=https://your-sitecore-instance.com\nSITECORE_ENDPOINT=https://your-sitecore-instance.com/sitecore/api/graph/items/master\nSITECORE_API_KEY=your-api-key-here\nSITECORE_USERNAME=sitecore\\\\admin\nSITECORE_PASSWORD=your-password', this)">Copy</button>
<code class="text-gray-400"># .env</code><br>
<code class="text-blue-400">SITECORE_HOST</code>=<span class="text-yellow-300">https://your-sitecore-instance.com</span><br>
<code class="text-blue-400">SITECORE_ENDPOINT</code>=<span class="text-yellow-300">https://your-sitecore-instance.com/sitecore/api/graph/items/master</span><br>
<code class="text-blue-400">SITECORE_API_KEY</code>=<span class="text-yellow-300">your-api-key-here</span><br>
<code class="text-blue-400">SITECORE_USERNAME</code>=<span class="text-yellow-300">sitecore\admin</span><br>
<code class="text-blue-400">SITECORE_PASSWORD</code>=<span class="text-yellow-300">your-password</span>
</div>
</div>
<div class="glass-effect p-8 rounded-2xl mb-8 reveal">
<h3 class="text-2xl font-bold mb-4">3. Run Tests</h3>
<div class="code-container relative bg-black/50 p-4 rounded-lg font-mono text-sm overflow-x-auto">
<button class="copy-button" onclick="copyToClipboard('.\\scripts\\tests\\run-tests.ps1', this)">Copy</button>
<code class="text-green-400">.\scripts\tests\run-tests.ps1</code><br>
<code class="text-gray-400"># Expected: 17/17 tests passed (100%)</code>
</div>
</div>
<div class="glass-effect p-8 rounded-2xl reveal">
<h3 class="text-2xl font-bold mb-4">4. Configure Your AI Assistant</h3>
<p class="text-gray-400 mb-4">Add to your Claude Desktop, VS Code, or Cursor configuration:</p>
<div class="code-container bg-black/50 p-6 rounded-lg overflow-x-auto relative">
<button class="copy-button" onclick='copyToClipboard(`{
"servers": {
"Sitecore": {
"command": "node",
"args": [
"C:\\\\path\\\\to\\\\SitecoreMCP\\\\dist\\\\index.js"
],
"env": {
"SITECORE_HOST": "https://your-sitecore-instance.com",
"SITECORE_ENDPOINT": "https://your-sitecore-instance.com/sitecore/api/graph/items/master",
"SITECORE_USERNAME": "your-username",
"SITECORE_PASSWORD": "your-password",
"SITECORE_API_KEY": "{YOUR-API-KEY-GUID}"
}
}
}
}`, this)'>Copy</button>
<div class="flex">
<!-- Line numbers -->
<div class="select-none pr-4 text-gray-600 font-mono text-sm leading-relaxed">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
</div>
<!-- Code with syntax highlighting and indent rainbow -->
<pre class="font-mono text-sm leading-relaxed flex-1"><code><span class="text-yellow-400">{</span>
<span class="text-sky-300" style="padding-left: 1rem;"> "</span><span class="text-blue-300">servers</span><span class="text-sky-300">":</span> <span class="text-yellow-400">{</span>
<span class="text-teal-300" style="padding-left: 2rem;"> "</span><span class="text-green-300">Sitecore</span><span class="text-teal-300">":</span> <span class="text-yellow-400">{</span>
<span class="text-indigo-300" style="padding-left: 3rem;"> "</span><span class="text-cyan-300">command</span><span class="text-indigo-300">":</span> <span class="text-orange-300">"node"</span><span class="text-gray-400">,</span>
<span class="text-indigo-300" style="padding-left: 3rem;"> "</span><span class="text-cyan-300">args</span><span class="text-indigo-300">":</span> <span class="text-yellow-400">[</span>
<span class="text-indigo-300" style="padding-left: 4rem;"> </span><span class="text-orange-300">"C:\\path\\to\\SitecoreMCP\\dist\\index.js"</span>
<span class="text-indigo-300" style="padding-left: 3rem;"> </span><span class="text-yellow-400">]</span><span class="text-gray-400">,</span>
<span class="text-indigo-300" style="padding-left: 3rem;"> "</span><span class="text-cyan-300">env</span><span class="text-indigo-300">":</span> <span class="text-yellow-400">{</span>
<span class="text-blue-300" style="padding-left: 4rem;"> "</span><span class="text-emerald-300">SITECORE_HOST</span><span class="text-blue-300">":</span> <span class="text-orange-300">"https://your-sitecore-instance.com"</span><span class="text-gray-400">,</span>
<span class="text-blue-300" style="padding-left: 4rem;"> "</span><span class="text-emerald-300">SITECORE_ENDPOINT</span><span class="text-blue-300">":</span> <span class="text-orange-300">"https://your-sitecore-instance.com/sitecore/api/graph/items/master"</span><span class="text-gray-400">,</span>
<span class="text-blue-300" style="padding-left: 4rem;"> "</span><span class="text-emerald-300">SITECORE_USERNAME</span><span class="text-blue-300">":</span> <span class="text-orange-300">"your-username"</span><span class="text-gray-400">,</span>
<span class="text-blue-300" style="padding-left: 4rem;"> "</span><span class="text-emerald-300">SITECORE_PASSWORD</span><span class="text-blue-300">":</span> <span class="text-orange-300">"your-password"</span><span class="text-gray-400">,</span>
<span class="text-blue-300" style="padding-left: 4rem;"> "</span><span class="text-emerald-300">SITECORE_API_KEY</span><span class="text-blue-300">":</span> <span class="text-orange-300">"{YOUR-API-KEY-GUID}"</span>
<span class="text-indigo-300" style="padding-left: 3rem;"> </span><span class="text-yellow-400">}</span>
<span class="text-teal-300" style="padding-left: 2rem;"> </span><span class="text-yellow-400">}</span>
<span class="text-sky-300" style="padding-left: 1rem;"> </span><span class="text-yellow-400">}</span>
<span class="text-yellow-400">}</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-20 px-6 bg-black/30">
<div class="container mx-auto">
<div class="grid md:grid-cols-4 gap-8 text-center">
<div>
<div class="text-5xl font-bold text-purple-400 mb-2">21</div>
<div class="text-gray-400">MCP Tools</div>
</div>
<div>
<div class="text-5xl font-bold text-pink-400 mb-2">100%</div>
<div class="text-gray-400">Test Coverage</div>
</div>
<div>
<div class="text-5xl font-bold text-indigo-400 mb-2">10+</div>
<div class="text-gray-400">IDE Integrations</div>
</div>
<div>
<div class="text-5xl font-bold text-blue-400 mb-2">MIT</div>
<div class="text-gray-400">Open Source</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 px-6 border-t border-white/10">
<div class="container mx-auto text-center">
<p class="text-gray-400 mb-4">
Built with ❤️ by <a href="https://gary.wenneker.org" class="text-purple-400 hover:text-purple-300" target="_blank">Gary Wenneker</a>
</p>
<div class="flex justify-center space-x-6">
<a href="https://github.com/GaryWenneker/SitecoreMCP" class="text-gray-400 hover:text-white transition">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
</a>
<a href="https://www.linkedin.com/in/garywenneker/" class="text-gray-400 hover:text-white transition">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
</div>
<p class="text-gray-500 text-sm mt-6">
© 2025 Sitecore MCP Server. Licensed under MIT.
</p>
</div>
</footer>
<script>
// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
</script>
</body>
</html>
