<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, shrink-to-fit=no">
<title>Desktop Commander MCP - Terminal Commands and File Editing for Claude</title>
<!-- SEO Meta Tags -->
<meta name="msvalidate.01" content="4D4A791B96EDF5431C0EA2DE6B59FB62" />
<meta name="description" content="Desktop Commander MCP is an open-source tool that enables terminal command execution and file editing directly through Claude Desktop app. Enhance your AI workflow with Claude.">
<meta name="keywords" content="Claude AI, Desktop Commander, terminal commands, file editing, Claude Desktop app, AI assistant, command execution, MCP, productivity tool">
<meta name="author" content="Desktop Commander MCP Team">
<meta name="robots" content="index, follow">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://desktopcommander.app/">
<meta property="og:title" content="Desktop Commander MCP - Terminal Commands and File Editing for Claude AI">
<meta property="og:description" content="Execute terminal commands and edit files directly through Claude AI. Enhance your productivity with this open-source tool for Claude Desktop app.">
<meta property="og:image" content="https://desktopcommander.app/logo.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://desktopcommander.app/">
<meta property="twitter:title" content="Desktop Commander MCP - Terminal Commands and File Editing for Claude AI">
<meta property="twitter:description" content="Execute terminal commands and edit files directly through Claude AI. Enhance your productivity with this open-source tool for Claude Desktop app.">
<meta property="twitter:image" content="https://desktopcommander.app/logo.png">
<!-- Canonical URL -->
<link rel="canonical" href="https://desktopcommander.app/">
<!-- Favicons - Using Only Existing Files -->
<!-- Standard Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Android/Web App Icons -->
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="android-chrome-512x512.png">
<!-- Theme Color -->
<meta name="theme-color" content="#171717">
<!-- Web App Manifest -->
<link rel="manifest" href="site.webmanifest">
<!-- Original Logo Reference (keeping for backward compatibility) -->
<link rel="icon" href="logo.png" type="image/png">
<!-- DNS preconnect for external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://i3.ytimg.com">
<link rel="preconnect" href="https://analyticsindiamag.com">
<link rel="preconnect" href="https://miro.medium.com">
<link rel="preconnect" href="https://img.shields.io">
<link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://eu.i.posthog.com">
<!-- PostHog Analytics - Load early for optimal tracking -->
<script>
!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init Re Ms Fs Pe Rs Cs capture Ve calculateEventProperties Ds register register_once register_for_session unregister unregister_for_session zs getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Ls As createPersonProfile Ns Is Us opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing is_capturing clear_opt_in_out_capturing Os debug I js getPageViewId captureTraceFeedback captureTraceMetric".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
posthog.init('phc_SmlF1mKK199Blt4hUNL6V19IWydNNJ9o7Qbym2Y4zQa', {
api_host: 'https://eu.i.posthog.com',
defaults: '2025-05-24',
person_profiles: 'identified_only',
// Enhanced settings for better tracking
capture_pageview: true,
capture_pageleave: true,
disable_session_recording: false,
// Session recording and heatmaps
session_recording: {
recordCrossOriginIframes: true,
recordCanvas: true,
recordHeaders: true,
recordBody: true
},
// Autocapture settings for detailed interaction tracking
autocapture: {
dom_event_allowlist: ['click', 'change', 'submit'],
url_allowlist: ['desktopcommander.app'],
element_allowlist: ['a', 'button', 'form', 'input', 'select', 'textarea']
},
// Feature flags for A/B testing
bootstrap: {
featureFlags: {}
},
// Only load in production (desktopcommander.app)
loaded: function(posthog) {
if (window.location.hostname !== 'desktopcommander.app' &&
window.location.hostname !== 'www.desktopcommander.app') {
posthog.opt_out_capturing();
console.log('🚫 PostHog opted out - not on production domain');
} else {
console.log('✅ PostHog active on production domain');
// Set up user identification based on unique browser fingerprint
var userId = 'dc_user_' + posthog.get_distinct_id();
// Register super properties that will be sent with all events
posthog.register({
app_name: 'Desktop Commander',
app_version: '0.2.9',
site_section: 'landing_page',
user_type: 'anonymous'
});
// Capture initial session data
window.DCPostHogSession = {
session_start: Date.now(),
user_id: userId,
session_id: posthog.get_session_id(),
initial_referrer: document.referrer,
initial_utm: window.DCAnalytics ? window.DCAnalytics.getUTMParams() : null
};
}
}
});
// Global Analytics utilities (available before DOM ready)
window.DCAnalytics = {
// Extract UTM parameters for campaign tracking
getUTMParams: function() {
const urlParams = new URLSearchParams(window.location.search);
return {
utm_source: urlParams.get('utm_source'),
utm_medium: urlParams.get('utm_medium'),
utm_campaign: urlParams.get('utm_campaign'),
utm_term: urlParams.get('utm_term'),
utm_content: urlParams.get('utm_content')
};
},
// Get device and browser information
getDeviceInfo: function() {
return {
screen_width: screen.width,
screen_height: screen.height,
viewport_width: window.innerWidth,
viewport_height: window.innerHeight,
device_pixel_ratio: window.devicePixelRatio || 1,
user_agent: navigator.userAgent,
language: navigator.language,
platform: navigator.platform,
is_mobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
connection_type: navigator.connection ? navigator.connection.effectiveType : 'unknown'
};
}
};
</script>
<!-- Google Fonts - Poppins and Roboto with font-display swap -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&family=Roboto:wght@200;300&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<noscript>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&family=Roboto:wght@200;300&display=swap" rel="stylesheet">
</noscript>
<!-- Structured Data / JSON-LD -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Desktop Commander MCP",
"operatingSystem": "Windows, macOS, Linux",
"applicationCategory": "DeveloperApplication",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"description": "Desktop Commander MCP is an open-source tool that enables terminal command execution and file editing directly through the Claude Desktop app.",
"downloadUrl": "https://github.com/wonderwhy-er/DesktopCommanderMCP",
"softwareVersion": "1.0.0",
"author": {
"@type": "Organization",
"name": "Desktop Commander MCP Team",
"url": "https://github.com/wonderwhy-er"
}
}
</script>
<!-- Web Components Loader - Dynamically loads all sponsorship components -->
<script src="components/component-loader.js" defer></script>
<!-- Analytics Tracking - Button and interaction tracking -->
<script src="js/analytics-tracking.js" defer></script>
<!-- Enhanced Google Analytics with faster loading for event tracking -->
<script>
// Load Google Analytics immediately for better event tracking
document.addEventListener('DOMContentLoaded', function() {
// Reduced delay for faster analytics initialization
setTimeout(function() {
var analyticsScript = document.createElement('script');
analyticsScript.async = true;
analyticsScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-HXL4Y3Y62N';
document.head.appendChild(analyticsScript);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-HXL4Y3Y62N', {
// Enhanced measurement for better tracking
enhanced_measurement: true,
// Track outbound clicks automatically
track_outbound_links: true,
// Track file downloads
track_downloads: true,
// Track scroll depth
track_scroll: true
});
// Make gtag available globally for our custom tracking
window.gtag = gtag;
// Track Docker Gateway campaign arrivals
const urlParams = new URLSearchParams(window.location.search);
const utmSource = urlParams.get('utm_source');
const utmMedium = urlParams.get('utm_medium');
const utmCampaign = urlParams.get('utm_campaign');
// If this is a Docker Gateway referral, send specific event
if (utmSource === 'docker_gateway' && utmMedium === 'in_app_message' && utmCampaign === 'docker_to_native') {
gtag('event', 'docker_gateway_arrival', {
'event_category': 'Docker_Gateway_Campaign',
'event_label': 'user_arrived_from_docker_message',
'custom_map': {
'source': utmSource,
'medium': utmMedium,
'campaign': utmCampaign
}
});
console.log('📊 Docker Gateway Campaign Arrival Tracked');
}
}, 1000); // Reduced from 3000ms to 1000ms for faster initialization
});
</script>
<!-- Preload critical resources -->
<link rel="preload" href="optimized_images/logo.webp" as="image">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&family=Roboto:wght@200;300&display=swap" as="style">
<!-- Preload critical fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Critical CSS -->
<link rel="stylesheet" href="css/critical.css">
<!-- Defer non-critical CSS -->
<link rel="stylesheet" href="css/media.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="css/installation.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="css/usage.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="css/community.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="css/testimonials.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="css/faq.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="css/footer.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="css/responsive.css" media="print" onload="this.media='all'">
<!-- Fallback for browsers that don't support JS -->
<noscript>
<link rel="stylesheet" href="css/main.css">
</noscript>
<!-- Inline critical CSS for initial render -->
<style>
/* Basic styles for initial render */
:root {
--text-color-high-contrast: #f8f9fa;
--section-text-color: #121212;
--primary-color: #0A0A0A;
--light-text: #ffffff;
--accent-color: #0078D7;
--super-black: #0A0A0A;
}
/* Set body with no margin to prevent shifts */
body {
margin: 0;
padding: 0;
font-family: 'Poppins', 'Roboto', Helvetica, Arial, sans-serif;
overflow-x: hidden;
width: 100%;
max-width: 100vw;
font-weight: 300;
}
/* Critical container dimensions that prevent layout shifts */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
overflow-x: hidden;
}
/* Set fixed header height to prevent jumps */
header {
background: #000000;
color: #ffffff;
padding: 20px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
height: 80px;
box-sizing: border-box;
overflow: visible;
}
.header-cta-btn {
background-color: #0078D7;
color: white;
padding: 8px 15px;
border-radius: 5px;
text-decoration: none;
font-weight: 300;
white-space: nowrap;
font-size: 14px;
}
.header-cta-btn:hover {
color: white;
background-color: #0056a0;
}
.header-consultation-btn {
background-color: #ff6b35;
color: white;
padding: 8px 15px;
border-radius: 5px;
text-decoration: none;
font-weight: 500;
margin-right: 10px;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.5px;
}
.header-consultation-btn:hover {
color: white;
background-color: #e55a2b;
transform: translateY(-1px);
}
/* Constrain header layout */
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
height: 40px;
overflow: visible;
}
/* Set hero section height and margin to accommodate video size */
.hero {
background: #000000;
min-height: 90vh;
margin-top: 0; /* Removed margin as promotion bar handles spacing */
padding: 40px 0 60px 0;
display: flex;
align-items: center;
box-sizing: border-box;
}
.hero-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
gap: 30px; /* Add some space between elements */
}
/* Improved hero container for better video fit */
.hero-image-container {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
min-height: 600px; /* Taller to accommodate video */
padding-top: 80px;
position: relative;
z-index: 1;
}
/* Enhanced video styling to ensure proper fit */
.hero-header-video {
width: 960px; /* Default width for desktop */
height: auto; /* Maintain aspect ratio */
max-width: 100%; /* Ensure responsiveness */
border-radius: 12px;
display: block; /* Proper display behavior */
object-fit: cover; /* Ensure video covers container */
}
.video-glow-wrapper {
position: relative;
display: inline-block;
border-radius: 12px;
overflow: hidden;
max-width: 100%;
}
.video-glow-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12px;
z-index: -1;
}
/* Constrain content area dimensions */
.hero-content {
flex: 1;
max-width: 650px;
}
/* Set font sizes explicitly */
.hero p {
font-size: 1.1rem;
margin-bottom: 25px;
line-height: 1.5;
}
/* Button styling */
.primary-btn, .secondary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 300;
padding: 12px 24px;
color: white;
text-decoration: none;
border-radius: 10px;
}
.primary-btn {
background-color: #0078D7;
border: none;
box-shadow: 0 4px 6px rgba(0, 120, 215, 0.25);
font-weight: 300;
}
.primary-btn:hover {
background-color: #0056a0;
box-shadow: 0 6px 12px rgba(0, 120, 215, 0.35);
}
.secondary-btn {
background-color: transparent;
border: 2px solid #ffffff;
font-weight: 300;
}
.contact-btn:hover {
background-color: #0056a0 !important;
}
/* Consultation Button Styles */
.consultation-btn {
background-color: #ff6b35 !important; /* Distinctive orange color */
border: none !important;
color: white !important;
font-weight: 500 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}
.consultation-btn:hover {
background-color: #e55a2b !important;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}
/* Promotion Bar Styles */
.promotion-bar {
background-color: #0078D7;
padding: 8px 0;
color: white;
text-align: center;
margin-top: 80px; /* Same as header height */
}
.promotion-content {
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 1024px) {
.header-cta-btn {
padding: 6px 12px;
font-size: 13px;
}
}
@media (max-width: 768px) {
.header-cta-btn {
display: none;
}
.promotion-bar {
margin-top: 60px;
}
#command-counter {
font-size: 1.2rem;
}
.command-counter-number {
font-size: 1.2rem;
}
.counter-label {
font-size: 0.9rem;
}
.hero-wrapper {
flex-direction: column;
}
.hero-image-container {
margin-top: 30px;
justify-content: center;
}
.hero-header-video {
width: 100%;
max-width: 90%;
height: auto;
max-height: 80vh; /* Limit height on mobile */
}
.video-glow-wrapper {
width: 100%;
text-align: center;
margin: 0 auto;
}
.hero-image-container {
min-height: auto;
justify-content: center;
padding: 40px 0;
}
.hero-image-container {
height: auto;
justify-content: center;
}
.hero-image-container {
height: auto;
padding: 30px 0;
}
}
/* Improve contrast for section text */
.section-title p, .feature-card p, .how-it-works p,
.community p, .faq p, .tab-btn { color: #000000; font-weight: 400; }
/* Improve contrast for buttons and links */
.tab-btn.active, .tab-btn:hover { color: #0056b3; font-weight: 400; }
/* Additional contrast improvements */
.feature-card h3, .community-card h3, .accordion-header span { color: #000000; font-weight: 400; }
.accordion-body p, .accordion-body li { color: #000000; font-weight: 400; }
.discord-community-container p { color: #000000; font-weight: 400; }
.footer-column p { color: #ffffff; font-weight: 400; }
.download-card h3 { color: #ffffff; font-weight: 400; }
.download-card p { color: #ffffff; font-weight: 400; }
/* Segments Section Styles */
.segments-section {
background-color: #f8f9fa;
padding: 80px 0;
}
.segments-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}
.segment-card {
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
padding: 30px 25px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.segment-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.segment-icon {
margin-bottom: 20px;
color: #0078D7;
}
.segment-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #171717;
font-weight: 300;
}
.segment-card p {
margin-bottom: 20px;
color: #555;
font-weight: 300;
}
.segment-jobs {
margin-bottom: 20px;
}
.segment-jobs ul {
list-style: none;
padding-left: 0;
}
.segment-jobs li {
position: relative;
padding-left: 25px;
margin-bottom: 8px;
color: #444;
}
.segment-jobs li:before {
content: "→";
position: absolute;
left: 0;
color: #0078D7;
}
.segment-link {
display: inline-block;
padding: 8px 20px;
background-color: transparent;
border: 1px solid #0078D7;
color: #0078D7;
font-weight: 300;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
margin-top: auto;
}
.segment-card {
display: flex;
flex-direction: column;
height: 100%;
}
.segment-card .segment-jobs {
flex-grow: 0;
}
.segment-card .segment-link {
margin-top: auto;
}
.segment-link:hover {
background-color: #0078D7;
color: #ffffff;
}
.segments-cta {
text-align: center;
margin-top: 50px;
}
@media (max-width: 768px) {
.segments-grid {
grid-template-columns: 1fr;
}
}
/* Pre-set dimensions for nav menu to prevent shifts */
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
margin-left: 30px;
position: relative;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: 300;
display: flex;
align-items: center;
}
/* Dropdown styles */
.dropdown-toggle svg {
margin-left: 5px;
transition: transform 0.3s ease;
}
.dropdown:hover .dropdown-toggle svg {
transform: rotate(180deg);
}
nav .dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: var(--super-black);
min-width: 180px;
border-radius: 5px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
padding: 10px 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 100;
display: block;
margin-top: 5px;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu li {
margin: 0 !important;
width: 100%;
padding: 0;
}
.dropdown-menu li a {
padding: 8px 15px;
display: block;
color: white;
font-weight: 300;
transition: all 0.2s ease;
white-space: nowrap;
}
.dropdown-menu li a:hover {
background: rgba(255, 255, 255, 0.1);
padding-left: 20px;
}
.dropdown-menu li a::after {
display: none;
}
/* Mobile dropdown styles will be addressed in responsive CSS */
@media (max-width: 768px) {
.dropdown-menu {
position: static;
background: transparent;
box-shadow: none;
display: none;
opacity: 1;
visibility: visible;
transform: none;
transition: none;
padding: 0 0 0 20px;
width: 100%;
}
.dropdown-menu li {
margin: 10px 0 !important;
}
.dropdown-menu li a {
padding: 5px 0;
}
.dropdown-menu li a:hover {
background: transparent;
padding-left: 5px;
}
.dropdown.active .dropdown-menu {
display: block;
}
}
/* Badge sizing */
.badges {
margin-bottom: 25px;
}
.badge-row {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.badges img {
height: 20px;
}
/* Typing effect styles */
.dynamic-title-container {
width: 100%;
text-align: left;
}
.dynamic-title {
margin-top: 0;
text-align: left;
font-weight: 300;
}
.typed-text {
display: inline;
}
.cursor {
display: inline-block;
width: 3px;
background-color: #ffffff;
margin-left: 2px;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Copy button styles - only for installation section */
#installation .pre-container {
position: relative;
margin-top: 10px;
margin-bottom: 10px;
}
#installation .copy-button {
position: absolute;
top: 5px;
right: 5px;
background-color: rgba(0, 0, 0, 0.1);
color: #666;
border: none;
border-radius: 3px;
padding: 4px 8px;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;
transition: all 0.2s ease;
z-index: 10;
}
#installation .copy-button:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.2);
}
#installation .copy-button.copied {
background-color: #2ecc71;
color: white;
opacity: 1;
}
/* Style adjustments for pre elements inside the container */
#installation .pre-container > pre {
padding-top: 30px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.discord-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
border-radius: 6px;
background-color: #0078D7;
color: white;
text-decoration: none;
font-weight: 300;
}
.discord-btn:hover {
background-color: #0056a0;
color: white;
}
.featured-btn {
background-color: #0078D7;
border-color: #0078D7;
color: #ffffff;
}
.featured-btn:hover {
color: #ffffff;
background-color: #0056a0;
border-color: #0056a0;
}
</style>
<!-- Additional CSS for mobile/desktop menu separation and title display -->
<style>
/* Desktop/Mobile Menu Styles */
.mobile-nav {
display: none; /* Hidden by default */
}
/* Title display controls */
.mobile-title {
display: none; /* Hidden on desktop */
}
.desktop-title {
display: block; /* Shown on desktop */
}
/* Media queries for responsive menu */
@media (max-width: 768px) {
.desktop-nav {
display: none; /* Hide desktop nav on mobile */
}
.mobile-nav {
display: none; /* Hidden until toggled */
}
/* Mobile menu button styling */
.mobile-menu-btn {
display: block;
cursor: pointer;
color: white;
}
/* Switch title display on mobile */
.desktop-title {
display: none;
}
.mobile-title {
display: block;
text-align: center;
margin-top: 40px;
}
.mobile-title .dynamic-title {
text-align: center;
margin-top: 0;
padding-top: 30px;
font-size: 2.2rem;
line-height: 1.4;
}
.hero-content {
width: 100%;
text-align: center;
padding: 0 15px;
margin-top: 30px;
}
.hero-content .badges,
.hero-content .badge-row {
justify-content: center;
}
.hero-content .hero-btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.hero-content .hero-btns .btn {
flex: 1;
min-width: 140px;
text-align: center;
}
/* Mobile menu when active */
.mobile-nav.active {
display: block;
position: fixed;
top: 80px;
left: 0;
width: 100%;
background: #0A0A0A;
padding: 20px 0;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
/* Style mobile nav links */
.mobile-nav ul li a {
display: block;
padding: 12px 20px;
color: white;
}
}
.mobile-nav ul {
flex-direction: column;
align-items: center;
padding: 0;
margin: 0;
}
.mobile-nav ul li {
margin: 12px 0;
width: 100%;
text-align: center;
}
.mobile-nav ul li a {
display: block;
padding: 8px 0;
color: var(--light-text);
text-decoration: none;
font-weight: 500;
width: 100%;
}
.mobile-nav ul li a:hover {
color: var(--secondary-color);
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container header-container">
<a href="#" class="logo">
<img src="optimized_images/logo.webp" alt="DesktopCommander Logo" width="35" height="35" fetchpriority="high" />
<span style="margin-left: 5px;">DesktopCommander</span>
</a>
<div class="header-right">
<!-- Desktop Navigation -->
<nav class="desktop-nav" aria-label="Main Navigation">
<ul>
<li><a href="https://library.desktopcommander.app" target="_blank" rel="noopener">Prompts</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">Resources <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></a>
<ul class="dropdown-menu" role="menu">
<li><a href="https://discord.gg/kQ27sNnZr7" target="_blank" rel="noopener" role="menuitem">Join Discord</a></li>
<li><a href="https://github.com/wonderwhy-er/DesktopCommanderMCP" target="_blank" rel="noopener" role="menuitem">GITHUB</a></li>
<li><a href="#media" role="menuitem">Media</a></li>
<li><a href="#faq" role="menuitem">FAQ</a></li>
</ul>
</li>
<li><a href="#sponsors">
<svg xmlns="http://www.w3.org/2000/svg" style="margin-right:8px" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
Sponsor
</a></li>
</ul>
</nav>
<!-- Mobile Navigation (no dropdowns) -->
<nav class="mobile-nav" aria-label="Mobile Navigation">
<ul>
<li><a href="https://library.desktopcommander.app" target="_blank" rel="noopener">Prompts</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="https://discord.gg/kQ27sNnZr7" target="_blank" rel="noopener">Join Discord</a></li>
<li><a href="#sponsors">
Sponsor
</a></li>
<li><a href="https://github.com/wonderwhy-er/DesktopCommanderMCP" target="_blank" rel="noopener">GITHUB</a></li>
<li><a href="#media">Media</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
<a href="#installation" class="header-cta-btn" data-track="install-header">Install Desktop Commander</a>
<div class="mobile-menu-btn" role="button" aria-expanded="false" aria-label="Toggle mobile menu" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" aria-hidden="true"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</div>
</div>
</div>
</header>
<!-- Promotion Counter Bar
<div class="promotion-bar">
<div class="container">
<div class="promotion-content">
<div class="counter-wrapper">
<span class="counter-label" >More than <span class="command-counter-number">4000</span> users trust DesktopCommander. More than </span>
<span id="command-counter">1,000,000</span>
<span class="counter-label">commands executed</span>
</div>
</div>
</div>
</div> -->
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-wrapper">
<div class="hero-content">
<!-- Desktop title with typing effect -->
<div class="dynamic-title-container desktop-title">
<h1 class="dynamic-title">Your personal<br />AI <span class="typed-text">Full Stack Engineer</span><span class="cursor"> </span><br />with Claude Desktop</h1>
</div>
<!-- Mobile title with static text -->
<div class="dynamic-title-container mobile-title">
<h1 class="dynamic-title">Your personal<br />AI Full Stack Engineer<br />with Claude Desktop</h1>
</div>
<p style="color: #f0f0f0; font-weight: 300;">Work with code and text, run processes, and automate tasks using Claude Desktop's subscription model - no per-token API charges.</p>
<div class="badges">
<div class="badge-row">
<a href="https://www.npmjs.com/package/@wonderwhy-er/desktop-commander" target="_blank">
<img src="https://img.shields.io/npm/dw/@wonderwhy-er/desktop-commander" alt="npm downloads">
</a>
<a href="https://github.com/wonderwhy-er/DesktopCommanderMCP" target="_blank">
<img src="https://img.shields.io/github/stars/wonderwhy-er/DesktopCommanderMCP?style=flat" alt="GitHub stars">
</a>
<a href="https://smithery.ai/server/@wonderwhy-er/desktop-commander" target="_blank">
<img src="https://smithery.ai/badge/@wonderwhy-er/desktop-commander" alt="smithery badge">
</a>
</div>
</div>
<div class="hero-btns">
<a href="https://go.desktopcommander.app/free-call" target="_blank" class="btn primary-btn consultation-btn" data-track="consultation-hero">
FREE CONSULTATION
</a>
<a href="#installation" class="btn primary-btn blue_btn" data-track="install-hero">
INSTALL
</a>
<a href="https://discord.gg/kQ27sNnZr7" target="_blank" class="btn secondary-btn contact-btn" style="background-color: transparent; border: 2px solid #ffffff; color: #ffffff;" data-track="discord-hero">
JOIN DISCORD
</a>
</div>
</div>
<div class="hero-image-container">
<div class="video-glow-wrapper">
<video autoplay loop muted playsinline class="hero-header-video" width="960" height="540" poster="optimized_images/header.webp">
<source data-src="cropped_video.mp4" type="video/mp4" media="(min-width: 768px)">
<source data-src="vertical_video_mobile.mp4" type="video/mp4" media="(max-width: 767px)">
Your browser does not support the video tag.
</video>
<script>
// Load video after other critical content
window.addEventListener('load', function() {
setTimeout(function() {
const video = document.querySelector('.hero-header-video');
const sources = video.querySelectorAll('source');
sources.forEach(function(source) {
source.src = source.dataset.src;
});
video.load();
}, 1000);
});
</script>
</div>
</div>
</div>
</div>
</section>
<!-- Platform Benefits Section -->
<section class="platform-benefits-section">
<div class="container">
<h2>All of your AI development tools in one place</h2>
<p class="section-subtitle">No need to buy separate tools for coding, file access, terminal commands, DevOps, and automation. Desktop Commander puts it all in one chat.</p>
<div class="explore-button">
<a href="#cases" class="btn">Explore use cases</a>
</div>
<div class="benefits-grid">
<div class="benefit-card">
<div class="benefit-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
</div>
<h3>Local file storage and processing</h3>
<p>All your files remain safely on your local machine. Only the necessary data is sent to Claude's LLM for processing and analysis.</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
</div>
<h3>Subscription-based usage</h3>
<p>Use your Claude Desktop subscription instead of paying per API token. Daily usage limits depend on your plan tier (Pro: 45 messages/5hrs, Max: higher limits). Much more cost-effective than API pricing for regular development work.</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</div>
<h3>Smart file system integration</h3>
<p>Claude understands your project structure with intelligent file search and can make precise surgical changes to your codebase. Now supports reading from file end with negative offsets.</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
</div>
<h3>Interactive code execution</h3>
<p>Execute Python, Node.js, R code in memory for instant data analysis. Connect to SSH, databases, and maintain persistent sessions for complex workflows.</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"></path><line x1="22" y1="10" x2="2" y2="10"></line></svg>
</div>
<h3>Cross-platform compatibility</h3>
<p>Works seamlessly across Windows, macOS, and Linux with native support for each operating system's capabilities.</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</div>
<h3>Customizable configuration</h3>
<p>Tailor security settings, file access permissions, and command execution rules to match your specific requirements and comfort level.</p>
</div>
</div>
</div>
</section>
<!-- User Segments Section -->
<section class="segments-section" id="cases">
<div class="container">
<div class="section-title">
<h2>USE CASES</h2>
<p style="color: #121212; font-weight: 300;">See how Desktop Commander serves different professionals with their specific needs</p>
</div>
<div class="segments-grid">
<!-- Software Engineer Segment -->
<div class="segment-card" id="cases-software">
<div class="segment-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6"></path><path d="M8 6l-6 6 6 6"></path></svg>
</div>
<h3>AI Software Engineer</h3>
<p>Build products faster without coding skills.</p>
<div class="segment-jobs">
<ul>
<li>Create and update big projects</li>
<li>Code review</li>
<li>Knows your codebase</li>
<li>Code security audit</li>
<li>Add test coverage</li>
<li>Improve SEO</li>
</ul>
</div>
<!-- <a href="segments/user-segments.html#technical-professionals" class="segment-link">Learn More</a> -->
</div>
<!-- DevOps Segment -->
<div class="segment-card" id="cases-devops">
<div class="segment-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
</div>
<h3>AI DevOps</h3>
<p>Streamline environment setup, server configuration, and deployment processes.</p>
<div class="segment-jobs">
<ul>
<li>Configure local environments</li>
<li>Configure Ansible/Terraform</li>
<li>Install and configure Dockerfiles</li>
<li>Explore remote server logs</li>
<li>Configure remote servers with SSH</li>
</ul>
</div>
<!-- <a href="segments/user-segments.html#devops-professionals" class="segment-link">Learn More</a> -->
</div>
<!-- Data Analyst Segment -->
<div class="segment-card" id="cases-data">
<div class="segment-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"></path><path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"></path></svg>
</div>
<h3>AI Data Analyst</h3>
<p>Analyze CSV files, databases, and datasets instantly with Python and R.</p>
<div class="segment-jobs">
<ul>
<li>Instant CSV/Excel analysis</li>
<li>Database queries with persistent connections</li>
<li>Statistical analysis with R</li>
<li>Data visualization</li>
<li>Report generation</li>
</ul>
</div>
<!-- <a href="segments/user-segments.html#data-professionals" class="segment-link">Learn More</a> -->
</div>
<!-- Tech Writer Segment -->
<div class="segment-card" id="cases-writer">
<div class="segment-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</div>
<h3>AI Technical Writer</h3>
<p>Maintain consistent documentation and streamline content creation processes.</p>
<div class="segment-jobs">
<ul>
<li>Create and update project documentation</li>
<li>Generate release notes</li>
<li>Review and optimize content SEO</li>
<li>Keep project documentation up to date</li>
<li>Create UML and flow diagram from the code</li>
</ul>
</div>
<!-- <a href="segments/user-segments.html#technical-writers" class="segment-link">Learn More</a> -->
</div>
<!-- UX/UI Segment -->
<div class="segment-card" id="cases-uxui">
<div class="segment-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</div>
<h3>AI UX/UI Designer</h3>
<p>Manage design assets and streamline the implementation of designs into code.</p>
<div class="segment-jobs">
<ul>
<li>Convert Figma files to product</li>
<li>Create clickable prototype faster</li>
<li>Resize and update images</li>
<li>Process design files faster, smarter, and at scale</li>
</ul>
</div>
<!-- <a href="segments/user-segments.html#ux-ui-professionals" class="segment-link">Learn More</a> -->
</div>
<!-- assistant -->
<div class="segment-card" id="cases-assistant">
<div class="segment-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
</div>
<h3>AI Assistant</h3>
<p>Organize files and automate document processing.</p>
<div class="segment-jobs">
<ul>
<li>Organize files on your computer</li>
<li>Organize your knowledge in obsidian</li>
<li>Review and summarize documents </li>
<li>Check documents for errors</li>
</ul>
</div>
<!-- <a href="segments/user-segments.html#ux-ui-professionals" class="segment-link">Learn More</a> -->
</div>
</div>
</div>
</section>
<!-- Installation Section -->
<section class="how-it-works" id="installation">
<div class="container">
<div class="section-title">
<h2>Installation</h2>
<p style="color: #121212; font-weight: 300;">Getting started with Desktop Commander MCP is quick and easy</p>
<p style="color: #121212; font-weight: 300;">There are multiple options for installing DesktopCommanderMCP</p>
</div>
<style>
.tabs {
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
border-bottom: 2px solid #eee;
}
.tab-btn {
padding: 12px 24px;
margin: 0 4px;
background: transparent;
border: none;
cursor: pointer;
font-weight: 300;
color: #121212;
position: relative;
transition: all 0.3s ease;
min-width: 44px;
min-height: 44px;
}
.tab-btn:hover {
color: var(--primary-color);
}
.tab-btn.active {
color: var(--primary-color);
}
.tab-btn.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: #0078D7;
}
.tab-content {
display: none;
padding: 20px 0;
}
.tab-content.active {
display: block;
}
</style>
<div class="tabs">
<button class="tab-btn active" onclick="openTab(event, 'npx')" style="color: #0056b3;">NPX Install</button>
<button class="tab-btn" onclick="openTab(event, 'bash')" style="color: #121212; font-weight: 300;">Bash Install (macOS)</button>
<button class="tab-btn" onclick="openTab(event, 'smithery')" style="color: #121212; font-weight: 300;">Smithery Install</button>
<button class="tab-btn" onclick="openTab(event, 'manual')" style="color: #121212; font-weight: 300;">Manual Configuration</button>
<button class="tab-btn" onclick="openTab(event, 'local')" style="color: #121212; font-weight: 300;">Local Installation</button>
<button class="tab-btn" onclick="openTab(event, 'docker')" style="color: #121212; font-weight: 300;">🐳 Docker Install</button>
</div>
<div id="smithery" class="tab-content">
<div class="step">
<div class="step-content">
<h3>Smithery Install</h3>
<p>Install via the Smithery web interface:</p>
<ol style="color: #121212; margin: 15px 0; padding-left: 20px;">
<li><strong>Visit the Smithery page:</strong> <a href="https://smithery.ai/server/@wonderwhy-er/desktop-commander" target="_blank" style="color: #0078D7;">https://smithery.ai/server/@wonderwhy-er/desktop-commander</a></li>
<li><strong>Login to Smithery</strong> if you haven't already</li>
<li><strong>Select your client</strong> (Claude Desktop) on the right side</li>
<li><strong>Install with the provided key</strong> that appears after selecting your client</li>
<li><strong>Restart Claude Desktop</strong></li>
</ol>
<p>✅ <strong>Auto-Updates:</strong> Automatically updates when you restart Claude</p>
<p>🔄 <strong>Manual Update:</strong> Visit the Smithery page and reinstall</p>
</div>
</div>
</div>
<div id="npx" class="tab-content active">
<div class="step">
<div class="step-content">
<h3>NPX Install</h3>
<p>Install using npx directly:</p>
<pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">npx @wonderwhy-er/desktop-commander@latest setup</pre>
<p>For macOS users, you can also use this bash script:</p>
<pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">curl -fsSL https://raw.githubusercontent.com/wonderwhy-er/DesktopCommanderMCP/refs/heads/main/install.sh | bash</pre>
<p>✅ <strong>Auto-Updates:</strong> Automatically updates when you restart Claude</p>
<p>🔄 <strong>Manual Update:</strong> Run this command in terminal: <code style="background: #f4f4f4; padding: 2px 6px; border-radius: 3px;">npx @wonderwhy-er/desktop-commander@latest setup</code></p>
<p>🗑️ <strong>Uninstall:</strong> Run this command in terminal: <pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">npx @wonderwhy-er/desktop-commander@latest remove</pre></p>
</div>
</div>
</div>
<div id="bash" class="tab-content">
<div class="step">
<div class="step-content">
<h3>Bash Install (macOS)</h3>
<p>For macOS users, use our automated bash installer which will:</p>
<ul style="margin-bottom: 15px; padding-left: 20px;">
<li>Check your Node.js version and install it if needed</li>
<li>Set up Desktop Commander automatically</li>
<li>Configure all necessary dependencies</li>
</ul>
<pre
style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">curl -fsSL https://raw.githubusercontent.com/wonderwhy-er/DesktopCommanderMCP/refs/heads/main/install.sh | bash</pre>
<p style="margin-top: 10px; font-style: italic;">This is the simplest installation method for macOS users.
</p><br />
<p>✅ <strong>Auto-Updates:</strong> Automatically updates when you restart Claude</p>
<p>🔄 <strong>Manual Update:</strong> Run this command in terminal: <code style="background: #f4f4f4; padding: 2px 6px; border-radius: 3px;">npx @wonderwhy-er/desktop-commander@latest setup</code></p>
<p>🗑️ <strong>Uninstall:</strong> Run this command in terminal: <pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">npx @wonderwhy-er/desktop-commander@latest remove</pre></p>
</div>
</div>
</div>
<div id="manual" class="tab-content">
<div class="step">
<div class="step-content">
<h3>Manual Configuration</h3>
<p>Add this to your claude_desktop_config.json:</p>
<pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">
{
"mcpServers": {
"desktop-commander": {
"command": "npx",
"args": [
"-y",
"@wonderwhy-er/desktop-commander@latest"
]
}
}
}</pre>
<br />
<p>✅ <strong>Auto-Updates:</strong> Automatically updates when you restart Claude</p>
<p>🔄 <strong>Manual Update:</strong> Run this command in terminal: <code style="background: #f4f4f4; padding: 2px 6px; border-radius: 3px;">npx @wonderwhy-er/desktop-commander@latest setup</code></p>
<p>🗑️ <strong>Uninstall:</strong> Run this command in terminal: <pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">npx @wonderwhy-er/desktop-commander@latest remove</pre> or remove the "desktop-commander" entry from your claude_desktop_config.json file</p>
</div>
</div>
</div>
<div id="local" class="tab-content">
<div class="step">
<div class="step-content">
<h3>Local Installation</h3>
<p>Clone and build locally:</p>
<pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">git clone https://github.com/wonderwhy-er/DesktopCommanderMCP
cd DesktopCommanderMCP
npm run setup</pre>
<br />
<p>✅ <strong>Auto-Updates:</strong> Automatically updates when you restart Claude</p>
<p>🔄 <strong>Manual Update:</strong> Run this command in terminal: <code style="background: #f4f4f4; padding: 2px 6px; border-radius: 3px;">npx @wonderwhy-er/desktop-commander@latest setup</code></p>
<p>🗑️ <strong>Uninstall:</strong> Run this command in terminal: <pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">npx @wonderwhy-er/desktop-commander@latest remove</pre> or remove the cloned directory and remove MCP server entry from Claude config</p>
</div>
</div>
</div>
<div id="docker" class="tab-content">
<div class="step" id="docker-install">
<div class="step-content">
<h3>🐳 Docker Installation</h3>
<p><strong>Perfect for complete isolation and no Node.js required!</strong></p>
<p>Desktop Commander runs in a sandboxed Docker container with persistent development environment.</p>
<h4>Prerequisites</h4>
<ul style="margin-bottom: 15px; padding-left: 20px;">
<li><a href="https://www.docker.com/products/docker-desktop/" target="_blank">Docker Desktop</a> installed <strong>and running</strong></li>
<li>Claude Desktop app installed</li>
</ul>
<h4>Automated Installation (Recommended)</h4>
<div style="margin-bottom: 20px;">
<strong>macOS/Linux:</strong>
<pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">bash <(curl -fsSL https://raw.githubusercontent.com/wonderwhy-er/DesktopCommanderMCP/refs/heads/main/install-docker.sh)</pre>
</div>
<div style="margin-bottom: 20px;">
<strong>Windows PowerShell:</strong>
<pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">iex ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/wonderwhy-er/DesktopCommanderMCP/refs/heads/main/install-docker.ps1'))</pre>
</div>
<div style="background: #e8f4f8; padding: 15px; border-radius: 8px; margin: 15px 0;">
<h4 style="margin-top: 0; color: #0078D7;">How Docker Persistence Works</h4>
<p>Desktop Commander creates a persistent work environment that remembers everything between sessions:</p>
<ul style="margin-bottom: 0; padding-left: 20px;">
<li><strong>Your development tools:</strong> Any software you install stays installed</li>
<li><strong>Your configurations:</strong> Git settings, SSH keys, shell preferences preserved</li>
<li><strong>Your work files:</strong> Projects and files in workspace persist across restarts</li>
<li><strong>Package caches:</strong> Downloaded packages cached for faster installs</li>
</ul>
</div>
<h4>Manual Docker Configuration</h4>
<p>If you prefer manual setup, add this to your claude_desktop_config.json:</p>
<strong>Basic setup (no file access):</strong>
<pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">{
"mcpServers": {
"desktop-commander-docker": {
"command": "docker",
"args": [
"run", "-i", "--rm",
"mcp/desktop-commander:latest"
]
}
}
}</pre>
<strong>With folder mounting:</strong>
<pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">{
"mcpServers": {
"desktop-commander-docker": {
"command": "docker",
"args": [
"run", "-i", "--rm",
"-v", "dc-system:/usr",
"-v", "dc-home:/root",
"-v", "dc-workspace:/workspace",
"-v", "dc-packages:/var",
"-v", "/Users/username/Projects:/home/Projects",
"mcp/desktop-commander:latest"
]
}
}
}</pre>
<h4>Docker Benefits</h4>
<ul style="margin-bottom: 15px; padding-left: 20px;">
<li><strong>✅ Complete Isolation:</strong> Runs in sandboxed environment</li>
<li><strong>✅ No Node.js Required:</strong> Everything included in container</li>
<li><strong>✅ Cross-Platform:</strong> Same experience on all operating systems</li>
<li><strong>✅ Persistent Environment:</strong> Your tools and files survive restarts</li>
</ul>
<h4>Management Commands</h4>
<strong>macOS/Linux:</strong>
<pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;"># Check status
bash <(curl -fsSL https://raw.githubusercontent.com/wonderwhy-er/DesktopCommanderMCP/refs/heads/main/install-docker.sh) --status
# Reset persistent data
bash <(curl -fsSL https://raw.githubusercontent.com/wonderwhy-er/DesktopCommanderMCP/refs/heads/main/install-docker.sh) --reset</pre>
<strong>Windows PowerShell:</strong>
<pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;"># Check status
$script = (New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/wonderwhy-er/DesktopCommanderMCP/refs/heads/main/install-docker.ps1'); & ([ScriptBlock]::Create("$script")) -Status
# Reset data
$script = (New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/wonderwhy-er/DesktopCommanderMCP/refs/heads/main/install-docker.ps1'); & ([ScriptBlock]::Create("$script")) -Reset</pre>
<br />
<p>✅ <strong>Auto-Updates:</strong> <code>latest</code> tag automatically gets newer versions</p>
<p>🔄 <strong>Manual Update:</strong> <code>docker pull mcp/desktop-commander:latest</code> then restart Claude</p>
<p>🗑️ <strong>Uninstall:</strong> Remove Docker configuration from Claude config and optionally run reset command to clear persistent data</p>
</div>
</div>
</div>
<div style="text-align: left; background: #f8f8f8; padding: 12px; overflow-x: auto; border-radius: 5px; margin-top: 15px; margin-bottom: 15px; border: 1px solid #ccc; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
<p style="margin-top: 0; color: #171717;">To install DesktopCommanderMCP you need to have Node.js v18.18.0+ and Claude Desktop installed on your system (except Docker installation which doesn't require Node.js but Docker):</p>
<p><strong>Download Node.js:</strong> <a href="https://nodejs.org/en/download" target="_blank">https://nodejs.org/en/download</a></p>
<p style="margin-bottom: 0;"><strong>Download Claude Desktop:</strong> <a href="https://claude.ai/download" target="_blank">https://claude.ai/download</a></p>
</div>
<br />
<p style="margin-top: 10px; font-style: italic;">Remember to restart Claude after installation.</p>
<div style="background: #e8f4f8; padding: 20px; border-radius: 8px; margin: 20px 0; border-left: 4px solid var(--primary-color);">
<p style="margin: 0; color: #121212;"><strong>🚀 What's next?</strong> New to Desktop Commander? Simply ask Claude: <code style="background: #fff; padding: 2px 6px; border-radius: 4px; color: #333;">"What can I do with Desktop Commander?"</code> and you'll get guided tutorials and examples to discover what's possible!</p>
</div>
<br />
<div>
<h2>How to remove Desktop Commander</h2>
<p>Run this command in terminal: <pre style="background: #f4f4f4; padding: 10px; overflow-x: auto; border-radius: 5px; margin-top: 10px; white-space: pre-wrap; word-break: break-word;">npx @wonderwhy-er/desktop-commander@latest remove</pre> or remove the cloned directory and remove MCP server entry from Claude config</p>
</div>
</div>
</section>
<!-- Trusted by Developers Section -->
<section class="trusted-by-developers-section">
<div class="container">
<div class="section-title">
<h2>Trusted by Developers</h2>
<p>Join thousands of developers who have transformed their Claude experience with Desktop Commander.</p>
</div>
<div class="metrics-container">
<div class="metric-card">
<h3 class="metric-value">26K+</h3>
<p class="metric-label">Weekly Downloads</p>
</div>
<div class="metric-card">
<h3 class="metric-value">9/10</h3>
<p class="metric-label">User Rating</p>
</div>
<div class="metric-card">
<h3 class="metric-value">1800+</h3>
<p class="metric-label">GitHub Stars</p>
</div>
</div>
<div class="trusted-by-cta">
<a href="#installation" class="btn" data-track="install-trusted-section">Install</a>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials-section" id="testimonials">
<div class="container">
<div class="section-title">
<h2>User Testimonials</h2>
<p>See what developers are saying about Desktop Commander MCP</p>
</div>
<div class="responsive-testimonial-image">
<img src="optimized_images/testimonials.webp" class="desktop-testimonial" alt="Desktop Commander MCP User Testimonials" width="1200" height="675" loading="lazy" />
<img src="optimized_images/testimonials_1080.webp" class="mobile-testimonial" alt="Desktop Commander MCP User Testimonials" width="900" height="506" loading="lazy" />
</div>
<style>
.responsive-testimonial-image {
max-width: 1200px;
margin: 0 auto 30px;
overflow-x: hidden;
text-align: center;
}
.desktop-testimonial {
display: block;
width: 100%;
max-width: 1200px;
height: auto;
}
.mobile-testimonial {
display: none;
width: 900px;
min-width: 900px;
height: auto;
margin: 0 auto;
}
@media (max-width: 1200px) {
.responsive-testimonial-image {
max-width: 100%;
}
}
@media (max-width: 900px) {
.responsive-testimonial-image {
max-width: 100%;
overflow-x: hidden;
}
}
@media (max-width: 768px) {
.desktop-testimonial {
display: none;
}
.mobile-testimonial {
display: block;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.responsive-testimonial-image {
position: relative;
overflow: hidden;
}
}
</style>
</div>
</section>
<!-- Community Section -->
<section class="community" id="community">
<div class="container">
<div class="section-title">
<h2>Join Our Community</h2>
<p style="color: #121212; font-weight: 300;">Connect with other users and contributors to share ideas, get help, and contribute to the project.</p>
</div>
<div class="community-links">
<div class="community-card">
<div class="community-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
</div>
<h3>GitHub</h3>
<p>Star the repository, report issues, and contribute code.</p>
<a href="https://github.com/wonderwhy-er/DesktopCommanderMCP" class="btn" target="_blank">GitHub Repo</a>
</div>
<div class="community-card">
<div class="community-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09-.01-.02-.04-.03-.07-.03-1.5.26-2.93.71-4.27 1.33-.01 0-.02.01-.03.02-2.72 4.07-3.47 8.03-3.1 11.95 0 .02.01.04.03.05 1.8 1.32 3.53 2.12 5.24 2.65.03.01.06 0 .07-.02.4-.55.76-1.13 1.07-1.74.02-.04 0-.08-.04-.09-.57-.22-1.11-.48-1.64-.78-.04-.02-.04-.08-.01-.11.11-.08.22-.17.33-.25.02-.02.05-.02.07-.01 3.44 1.57 7.15 1.57 10.55 0 .02-.01.05-.01.07.01.11.09.22.17.33.26.04.03.04.09-.01.11-.52.31-1.07.56-1.64.78-.04.01-.05.06-.04.09.32.61.68 1.19 1.07 1.74.03.02.06.03.09.02 1.72-.53 3.45-1.33 5.25-2.65.02-.01.03-.03.03-.05.44-4.53-.73-8.46-3.1-11.95-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.83 2.12-1.89 2.12z"></path></svg>
</div>
<h3>Discord</h3>
<p>Join our Discord server to chat with the community in real-time.</p>
<a href="https://discord.gg/kQ27sNnZr7" class="btn" target="_blank">Join Discord</a>
</div>
<div class="community-card">
<div class="community-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
</div>
<h3>Video Tutorial</h3>
<p>Watch tutorial and demo videos on YouTube.<br /><br /></p>
<a href="https://www.youtube.com/watch?v=ly3bed99Dy8" class="btn" target="_blank">Watch Now</a>
</div>
</div>
</div>
</section>
<!-- Media Section -->
<section class="media-section" id="media">
<div class="container">
<div class="section-title">
<h2>Media & Coverage</h2>
<p>Learn more about Desktop Commander MCP from articles, videos and community</p>
</div>
<div class="media-cards">
<a href="https://analyticsindiamag.com/ai-features/this-developer-ditched-windsurf-cursor-using-claude-with-mcps/" class="media-card-link" target="_blank">
<div class="media-card">
<div class="media-image">
<img src="https://analyticsindiamag.com/wp-content/uploads/2025/03/developer-ditched-cursor-windsurf-1300x731.jpg.webp" alt="Analytics India Magazine Article" class="media-thumbnail" style="max-width: 100%; height: auto;" width="1300" height="731" loading="lazy">
</div>
<div class="media-content">
<h3>Featured Article</h3>
<p>Analytics India Magazine covers how Desktop Commander MCP is changing the AI coding landscape</p>
<div class="media-link">
<span>Read Article</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
</div>
</div>
</div>
</a>
<a href="https://www.youtube.com/watch?v=ly3bed99Dy8" class="media-card-link" target="_blank">
<div class="media-card">
<div class="media-image">
<img src="https://i3.ytimg.com/vi/ly3bed99Dy8/maxresdefault.jpg" alt="YouTube Tutorial Thumbnail" class="media-thumbnail" style="max-width: 100%; height: auto;" width="1280" height="720" loading="lazy">
<div class="play-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="none"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
</div>
</div>
<div class="media-content">
<h3>Video Tutorial</h3>
<p>Watch Desktop Commander MCP in action with this detailed walkthrough and demonstration</p>
<div class="media-link">
<span>Watch Video</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
</div>
</div>
</div>
</a>
<a href="https://medium.com/@wonderwhy-er/claude-with-mcps-replaced-cursor-windsurf-how-did-that-happen-c1d1e2795e96" class="media-card-link" target="_blank">
<div class="media-card">
<div class="media-image">
<img src="https://miro.medium.com/v2/resize:fit:786/format:webp/1*RRZ4SJ_ceHnrVZpuaAxGig.png" alt="Medium Blog Post" class="media-thumbnail" style="max-width: 100%; height: auto;" width="786" height="442" loading="lazy">
</div>
<div class="media-content">
<h3>Medium Blog Post</h3>
<p>Discover how Claude with MCPs replaced traditional coding assistants like Cursor and Windsurf</p>
<div class="media-link">
<span>Read Blog</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
</div>
</div>
</div>
</a>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="faq" id="faq">
<div class="container">
<div class="section-title">
<h2>Frequently Asked Questions</h2>
<p style="color: #121212; font-weight: 300;">Find answers to common questions about Desktop Commander MCP</p>
</div>
<!-- Add structured data to improve SEO -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is Claude Desktop Commander?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Claude Desktop Commander is an MCP (Model Context Protocol) tool that allows Claude Desktop to access and control your computer's file system and terminal. It enables Claude to explore, read, and write files, execute commands, and manage processes - expanding Claude's capabilities beyond just conversation."
}
},
{
"@type": "Question",
"name": "How is this different from Cursor/Windsurf?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Unlike IDE-focused tools, Claude Desktop Commander provides a solution-centric approach that works with your entire OS, not just within a coding environment. Claude reads files in full rather than chunking them, can work across multiple projects simultaneously, and executes changes in one go rather than requiring constant review."
}
},
{
"@type": "Question",
"name": "Do I need to pay for API credits?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. This tool works with Claude Desktop's standard Pro subscription ($20/month), not with API calls, so you won't incur additional costs beyond the subscription fee."
}
},
{
"@type": "Question",
"name": "Does Desktop Commander automatically update?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, when installed through npx or Smithery, Desktop Commander automatically updates to the latest version when you restart Claude. No manual update process is needed."
}
}
]
}
</script>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header" role="button" aria-expanded="false" aria-controls="accordion-content-1" tabindex="0" id="accordion-header-1">
<span>What is Claude Desktop Commander?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body" id="accordion-content-1" role="region" aria-labelledby="accordion-header-1">
<div class="accordion-body-inner">
<p>Claude Desktop Commander is an MCP (Model Context Protocol) tool that allows Claude Desktop to access and control your computer's file system and terminal. It enables Claude to explore, read, and write files, execute commands, and manage processes - expanding Claude's capabilities beyond just conversation to become a comprehensive assistant that can work with your entire operating system.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>How does it differ from coding tools like Cursor or Windsurf?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p>Unlike tools like Cursor or Windsurf which are primarily designed as coding IDEs, Claude Desktop Commander works with Claude to provide a more flexible, solution-centric approach. Key differences include:</p>
<ul>
<li>Claude reads full files during exploration, ensuring it captures the complete structure</li>
<li>Coding tools like Windsurf & Cursor chunk and index files, sometimes missing key relationships</li>
<li>Claude generates and displays diagrams directly in chat</li>
<li>Claude Desktop Commander allows you to work across your entire system, not just within coding environments</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>How much does it cost to use Claude Desktop Commander?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p>Claude Commander is free and open source for personal use. <strong>For companies with annual revenue more than 1M USD and more than 10 people, we are charging $20 per license. To use DesktopCommander, you also need a Claude Pro, which costs $20 or / Claude Max subscription for $100 per month.</strong></p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>Is usage really "unlimited"?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p>Desktop Commander uses Claude Desktop's subscription model, which has usage limits that reset 2-3 times per day based on your plan tier. It's "unlimited" in that you don't pay per token like with API access, but you do have message limits. For most development work, Claude Pro's 45 messages per 5-hour window is quite generous - equivalent to 1,800+ messages per month.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>Why is the fileWriteLineLimit set to 50 by default? What is the maximum value?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p><strong>AIs are wasteful with tokens:</strong> Instead of doing two small edits in a file, AIs may decide to rewrite the whole thing. We're trying to force AIs to do things in smaller changes as it saves time and tokens.</p>
<p><strong>Claude UX message limits:</strong> There are limits within one message and hitting "Continue" does not really work. We're trying to make AI work in smaller chunks so when you hit that limit, multiple chunks have succeeded and that work is not lost - it just needs to restart from the last chunk.</p>
<p><strong>Maximum value:</strong> You can set it to thousands if you want - there's no technical restriction.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>Which operating systems does it support?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p>Claude Desktop Commander works with Windows, macOS, and Linux. Work is ongoing to improve Windows support, WSL integration, and enhance compatibility with various Linux distributions.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>Can I use Desktop Commander in any MCP client outside of Claude?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p>Yes, you can install Desktop Commander on other MCP clients like Cursor, Windsurf, DeepChat, or any client with MCP support. You can use any model available for that client.</p>
<p><strong>Important caveats:</strong> Desktop Commander may work unexpectedly on other clients due to differences in system prompts and conflicts with their built-in tools. It's primarily designed and tested with Claude Desktop.</p>
<p>If you try other clients, test carefully with non-critical projects first and consider sharing your experience to help improve compatibility.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>Is it safe to give Claude access to my file system?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p>Claude Desktop Commander operates within a configurable security framework:</p>
<ul>
<li>File access can be restricted to specific directories you designate</li>
<li>Command blocking allows you to prevent execution of sensitive commands</li>
<li>Claude only performs actions your user account has permission to execute</li>
<li>No data is sent to external servers beyond what you share in Claude conversations</li>
</ul>
<div class="warning">
<p>You can customize security settings by asking Claude about configuration options. Always review actions Claude proposes before approval, especially when working with important files or system configurations.</p>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>Is it suitable for large codebases?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p>Yes, users have reported success with very large codebases (one user mentioned 44k files with 11 million code lines). The tool can work across multiple projects and services simultaneously, making it suitable for complex development environments.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>Does Desktop Commander automatically update?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p>Yes, when installed through npx or Smithery, Desktop Commander automatically updates to the latest version when you restart Claude. No manual update process is needed.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>I'm having trouble installing or using the tool. Where can I get help?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p>Join our <a href="https://discord.gg/kQ27sNnZr7">Discord server</a> for community support, check the <a href="https://github.com/wonderwhy-er/DesktopCommanderMCP/issues">GitHub issues</a> for known problems, or review our <a href="https://github.com/wonderwhy-er/DesktopCommanderMCP/blob/main/FAQ.md">comprehensive FAQ</a> for troubleshooting tips. If you encounter a new issue, please consider <a href="https://github.com/wonderwhy-er/DesktopCommanderMCP/issues/new">opening a GitHub issue</a> with details about your problem.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>How does this compare to VSCode extensions like Cline?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p>Tools like Cline are great options that integrate directly with VSCode. The main differences are:</p>
<ul>
<li>Claude Desktop Commander works across your entire system, not just within the editor</li>
<li>It can handle automation, terminal commands, and long-running processes</li>
<li>It has a fixed cost with Claude Pro subscription rather than potential API charges</li>
<li>It provides a more flexible approach not tied to a specific editor</li>
</ul>
<p>Many users employ both, using the right tool for different tasks.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>How does Desktop Commander collect feedback and usage data?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p>Desktop Commander has three separate data collection systems:</p>
<ul>
<li><strong>Personal Usage Analytics (Local Only, Always Active):</strong> Collects usage statistics stored locally on your machine only. Use the <code>get_usage_stats</code> tool to view your personal usage patterns. This data never leaves your computer without actions from your side.</li>
<li><strong>Anonymous Telemetry (External, Opt-Out Available):</strong> Sends anonymous usage data to analytics services to help improve the tool. No personal information is collected. Can be disabled by asking: "Disable telemetry in Desktop Commander Config".</li>
<li><strong>Feedback System (User Controlled):</strong> Use the <code>give_feedback_to_desktop_commander</code> tool to provide feedback. Opens a browser-based form where you can edit or remove any pre-filled information. Completely optional.</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>How do I stop seeing feedback prompts?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p>If you don't want to see periodic feedback requests, you can disable them.</p>
<ul>
<li>Ask in chat: "Set in Desktop Commander Config feedbackGiven to true"</li>
</ul>
<p>This will stop Desktop Commander from showing feedback prompts while keeping all other functionality intact.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<span>Does Desktop Commander work in Docker containers?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="accordion-body">
<div class="accordion-body-inner">
<p>Yes! Desktop Commander can be run in Docker containers for complete isolation from your host system, providing zero risk to your computer. This is perfect for testing, development, or when you want complete sandboxing.</p>
<p><strong>Installation:</strong></p>
<ol>
<li>Install Docker for Windows/Mac from <a href="https://www.docker.com/products/docker-desktop/" target="_blank">docker.com</a></li>
<li>Visit: <a href="https://hub.docker.com/mcp/server/desktop-commander/manual" target="_blank">https://hub.docker.com/mcp/server/desktop-commander/manual</a></li>
<li>Use the provided terminal command or click "Standalone" to get the config JSON</li>
</ol>
<p><strong>Benefits:</strong> Complete isolation, no risk to your files, consistent environment, and easy cleanup.</p>
</div>
</div>
</div>
</div>
<!-- More prominent link to full FAQ -->
<div class="github-faq-container">
<a href="https://github.com/wonderwhy-er/DesktopCommanderMCP/blob/main/FAQ.md" target="_blank" class="github-faq-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book-open"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
View our comprehensive FAQ document on GitHub for more detailed answers
</a>
</div>
<!-- Feedback mechanism -->
<div class="feedback-container">
<h3>Didn't find what you were looking for?</h3>
<p>Help us improve our FAQ by suggesting new questions or improvements.</p>
<div class="question-form">
<form action="https://github.com/wonderwhy-er/DesktopCommanderMCP/issues/new" method="get" target="_blank">
<input type="hidden" name="template" value="faq_suggestion.md">
<input type="hidden" name="title" value="FAQ Suggestion">
<textarea name="body" placeholder="Suggest a question you'd like to see answered..."></textarea>
<button type="submit" class="btn">Submit Suggestion</button>
</form>
</div>
</div>
<!-- Discord Community Link -->
<div class="discord-community-container">
<h3>Need help or have questions?</h3>
<p>Join our Discord community for real-time support, discussions, and updates.</p>
<a href="https://discord.gg/kQ27sNnZr7" target="_blank" class="featured-btn discord-btn" >
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="white" stroke="none" aria-hidden="true"><path d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09-.01-.02-.04-.03-.07-.03-1.5.26-2.93.71-4.27 1.33-.01 0-.02.01-.03.02-2.72 4.07-3.47 8.03-3.1 11.95 0 .02.01.04.03.05 1.8 1.32 3.53 2.12 5.24 2.65.03.01.06 0 .07-.02.4-.55.76-1.13 1.07-1.74.02-.04 0-.08-.04-.09-.57-.22-1.11-.48-1.64-.78-.04-.02-.04-.08-.01-.11.11-.08.22-.17.33-.25.02-.02.05-.02.07-.01 3.44 1.57 7.15 1.57 10.55 0 .02-.01.05-.01.07.01.11.09.22.17.33.26.04.03.04.09-.01.11-.52.31-1.07.56-1.64.78-.04.01-.05.06-.04.09.32.61.68 1.19 1.07 1.74.03.02.06.03.09.02 1.72-.53 3.45-1.33 5.25-2.65.02-.01.03-.03.03-.05.44-4.53-.73-8.46-3.1-11.95-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.83 2.12-1.89 2.12z"/></svg>
Join our Discord Server
</a>
</div>
</div>
</section>
<style>
footer {
color: #ffffff;
padding: 50px 0 20px;
}
footer a {
color: #ffffff;
opacity: 0.8;
transition: opacity 0.3s;
}
footer a:hover {
opacity: 1;
color: #0078D7;
}
</style>
<!-- Styles for Trusted by Developers Section -->
<style>
/* Platform Benefits Section Styles */
.platform-benefits-section {
background-color: #ffffff;
padding: 100px 0 70px;
margin-top: 80px;
}
.platform-benefits-section h2 {
font-size: 2.4rem;
font-weight: 300;
color: #171717;
text-align: center;
margin-bottom: 20px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.section-subtitle {
text-align: center;
font-size: 1.2rem;
color: #555;
max-width: 800px;
margin: 0 auto 30px;
font-weight: 300;
}
.explore-button {
text-align: center;
margin-bottom: 60px;
}
.explore-button .btn {
background-color: #0078D7;
color: white;
padding: 12px 30px;
border-radius: 6px;
text-decoration: none;
font-weight: 300;
display: inline-block;
}
.explore-button .btn:hover {
color: white;
background-color: #0056a0;
}
.blue_btn {
background-color: #0078D7;
color: white;
border-radius: 6px;
text-decoration: none;
font-weight: 300;
transition: all 0.3s ease;
}
.blue_btn:hover {
color: white;
background-color: #0056a0;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
margin-top: 20px;
}
.benefit-card {
padding: 25px;
border-radius: 10px;
background-color: #f8f9fa;
transition: all 0.3s ease;
}
.benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.benefit-icon {
color: #0078D7;
margin-bottom: 15px;
}
.benefit-card h3 {
font-size: 1.3rem;
margin-bottom: 12px;
color: #171717;
font-weight: 300;
}
.benefit-card p {
color: #555;
font-weight: 300;
line-height: 1.5;
}
@media (max-width: 768px) {
.platform-benefits-section {
padding: 80px 0 50px;
margin-top: 60px;
}
.platform-benefits-section h2 {
font-size: 2rem;
padding: 0 15px;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.benefit-card {
padding: 20px;
}
}
.trusted-by-developers-section {
background-color: #f8f9fa;
padding: 80px 0;
text-align: center;
}
.metrics-container {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 50px;
flex-wrap: wrap;
}
.metric-card {
padding: 20px;
min-width: 200px;
}
.metric-value {
font-size: 3.5rem;
font-weight: 300;
color: #0078D7;
margin-bottom: 10px;
}
.metric-label {
font-size: 1.2rem;
color: #555;
font-weight: 300;
}
.trusted-by-cta {
margin-top: 60px;
}
.trusted-by-cta .btn {
background-color: #0078D7;
color: white;
padding: 12px 30px;
border-radius: 6px;
text-decoration: none;
font-weight: 300;
transition: all 0.3s ease;
display: inline-block;
}
.trusted-by-cta .btn:hover {
background-color: #0056a0;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.metrics-container {
gap: 30px;
}
.metric-value {
font-size: 2.8rem;
}
}
</style>
<!-- CTA Banner Section -->
<section class="cta-banner">
<div class="container">
<h2 class="cta-heading">Skip coding.<br />Let AI build your product.</h2>
<a href="#installation" class="cta-button">Install DesktopCommander now</a>
</div>
</section>
<!-- Footer -->
<footer style="background-color: var(--super-black);">
<div class="container">
<div class="footer-content">
<div class="footer-column">
<div class="footer-logo">
<img src="optimized_images/logo.webp" alt="Logo" width="30" height="30">
<h3>Desktop Commander</h3>
</div>
<p>Build products faster without coding skills.</p>
<br />
<div class="social-links">
<a href="https://github.com/wonderwhy-er/DesktopCommanderMCP" target="_blank" rel="noopener" aria-label="GitHub Repository">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github" aria-hidden="true"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
</a>
<a href="https://discord.gg/kQ27sNnZr7" target="_blank" rel="noopener" aria-label="Discord Server">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true"><path d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09-.01-.02-.04-.03-.07-.03-1.5.26-2.93.71-4.27 1.33-.01 0-.02.01-.03.02-2.72 4.07-3.47 8.03-3.1 11.95 0 .02.01.04.03.05 1.8 1.32 3.53 2.12 5.24 2.65.03.01.06 0 .07-.02.4-.55.76-1.13 1.07-1.74.02-.04 0-.08-.04-.09-.57-.22-1.11-.48-1.64-.78-.04-.02-.04-.08-.01-.11.11-.08.22-.17.33-.25.02-.02.05-.02.07-.01 3.44 1.57 7.15 1.57 10.55 0 .02-.01.05-.01.07.01.11.09.22.17.33.26.04.03.04.09-.01.11-.52.31-1.07.56-1.64.78-.04.01-.05.06-.04.09.32.61.68 1.19 1.07 1.74.03.02.06.03.09.02 1.72-.53 3.45-1.33 5.25-2.65.02-.01.03-.03.03-.05.44-4.53-.73-8.46-3.1-11.95-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.83 2.12-1.89 2.12z"/></svg>
</a>
<a href="https://www.npmjs.com/package/@wonderwhy-er/desktop-commander" target="_blank" rel="noopener" aria-label="NPM Package">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package" aria-hidden="true"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</a>
<a href="https://bsky.app/profile/dcommandermcp.bsky.social" target="_blank" rel="noopener" aria-label="Bluesky Profile">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
</a>
<a href="https://x.com/DCommander_MCP" target="_blank" rel="noopener" aria-label="X (Twitter) Profile">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
</a>
</div>
</div>
<div class="footer-column">
<h3>Use Cases</h3>
<ul>
<li><a href="#cases-software">AI Software Engineer</a></li>
<li><a href="#cases-devops">AI DevOps</a></li>
<li><a href="#cases-data">AI Data Analyst</a></li>
<li><a href="#cases-writer">AI Technical Writer</a></li>
<li><a href="#cases-uxui">AI UX/UI Designer</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Resources</h3>
<ul>
<li><a href="https://go.desktopcommander.app/free-call">Free consultation</a></li>
<li><a href="https://github.com/wonderwhy-er/DesktopCommanderMCP" target="_blank">GitHub Repository</a></li>
<li><a href="https://github.com/wonderwhy-er/DesktopCommanderMCP/wiki" target="_blank">Documentation</a></li>
<li><a href="https://github.com/wonderwhy-er/DesktopCommanderMCP/issues" target="_blank">Issue Tracker</a></li>
<li><a href="https://github.com/wonderwhy-er/DesktopCommanderMCP/releases" target="_blank">Release Notes</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#media">Media</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2025 Desktop Commander MCP. Open-source software under MIT license.</p>
</div>
</div>
</footer>
<style>
.cta-banner {
background-color: #0078D7;
padding: 80px 0;
text-align: center;
margin-top: 0;
}
.cta-heading {
font-size: 3rem;
color: white;
margin-bottom: 30px;
font-weight: 300;
line-height: 1.2;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.cta-button {
display: inline-block;
background-color: white;
color: #0078D7;
font-size: 1.2rem;
padding: 16px 36px;
border-radius: 8px;
text-decoration: none;
font-weight: 300;
transition: all 0.3s ease;
}
.cta-button:hover {
color: #0078D7;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.cta-heading {
font-size: 2rem;
padding: 0 20px;
}
}
</style>
<!-- Preload script to handle resource loading -->
<script src="js/preload.js" async></script>
<!-- Handle WebSocket connections for back/forward cache -->
<script src="js/websocket-handler.js" async></script>
<!-- Accessibility improvements -->
<script src="js/accessibility.js" defer></script>
<!-- Main JavaScript functionality -->
<script src="js/main.js" defer></script>
<!-- JavaScript for command counter and typing effect -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Command counter implementation
const commandCounter = document.getElementById('command-counter');
// Only run typing effect on desktop devices (screen width > 768px)
if (window.innerWidth > 768) {
// Typing effect implementation - desktop only
const typedTextSpan = document.querySelector('.desktop-title .typed-text');
const cursor = document.querySelector('.desktop-title .cursor');
if (typedTextSpan && cursor) {
const roles = ["Full Stack Engineer", "DevOps", "Tech Writer", "QA Engineer", "UX/UI Designer", "Assistant"];
let roleIndex = 0;
// Set initial role to be "Full Stack Engineer"
typedTextSpan.textContent = roles[0];
let charIndex = roles[0].length;
let isDeleting = false;
let typingDelay = 60; // Delay between each character typing
let deletingDelay = 40; // Delay between each character deletion
let newTextDelay = 1000; // Delay before typing new role - increased to show the first role longer
function type() {
const currentRole = roles[roleIndex];
if (isDeleting) {
// Deleting text
typedTextSpan.textContent = currentRole.substring(0, charIndex - 1);
charIndex--;
typingDelay = deletingDelay;
} else {
// Typing text
typedTextSpan.textContent = currentRole.substring(0, charIndex + 1);
charIndex++;
typingDelay = 100;
}
// Logic for transitioning between typing and deleting
if (!isDeleting && charIndex === currentRole.length) {
// Finished typing current text
isDeleting = true;
typingDelay = newTextDelay;
} else if (isDeleting && charIndex === 0) {
// Finished deleting current text
isDeleting = false;
roleIndex = (roleIndex + 1) % roles.length;
}
setTimeout(type, typingDelay);
}
// Start the typing effect after a delay
// We've already pre-filled the first role, so now we start the animation cycle
setTimeout(() => {
isDeleting = true;
setTimeout(type, newTextDelay);
}, 50);
}
}
// Also handle resize events to disable/enable typing effect
window.addEventListener('resize', function() {
// If switching from mobile to desktop, reload the page to initialize the typing effect
if (window.innerWidth > 768 && !document.querySelector('.desktop-title').style.display) {
location.reload();
}
});
});
</script>
</body>
</html>
