index.html•15.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spotify MCP - Connect Claude with Spotify</title>
<meta name="description" content="MCP server connecting Claude AI with Spotify for intelligent music control, playlist management, and discovery.">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--spotify-green: #1DB954;
--spotify-black: #191414;
--spotify-white: #FFFFFF;
--spotify-gray: #535353;
--spotify-light-gray: #B3B3B3;
--spotify-dark-gray: #282828;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, var(--spotify-black) 0%, #2a1a1f 100%);
color: var(--spotify-white);
line-height: 1.6;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 60px 20px 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo {
display: inline-flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.logo svg {
width: 60px;
height: 60px;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 900;
margin-bottom: 15px;
background: linear-gradient(135deg, var(--spotify-green), #1ed760);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle {
font-size: clamp(1rem, 2.5vw, 1.3rem);
color: var(--spotify-light-gray);
max-width: 700px;
margin: 0 auto 30px;
}
.badges {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
}
.badge {
display: inline-block;
padding: 8px 16px;
background: var(--spotify-dark-gray);
border-radius: 20px;
font-size: 0.9rem;
color: var(--spotify-light-gray);
text-decoration: none;
transition: all 0.2s;
}
.badge:hover {
background: var(--spotify-gray);
transform: translateY(-2px);
}
.cta-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
margin-top: 30px;
}
.btn {
display: inline-block;
padding: 14px 32px;
border-radius: 30px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
transition: all 0.3s;
border: 2px solid transparent;
}
.btn-primary {
background: var(--spotify-green);
color: var(--spotify-black);
}
.btn-primary:hover {
background: #1ed760;
transform: scale(1.05);
}
.btn-secondary {
background: transparent;
color: var(--spotify-white);
border-color: var(--spotify-white);
}
.btn-secondary:hover {
background: var(--spotify-white);
color: var(--spotify-black);
}
section {
padding: 60px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
h2 {
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 800;
margin-bottom: 30px;
text-align: center;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}
.feature-card {
background: var(--spotify-dark-gray);
padding: 30px;
border-radius: 12px;
transition: all 0.3s;
border: 1px solid rgba(29, 185, 84, 0.2);
}
.feature-card:hover {
transform: translateY(-5px);
border-color: var(--spotify-green);
box-shadow: 0 10px 30px rgba(29, 185, 84, 0.2);
}
.feature-icon {
font-size: 2.5rem;
margin-bottom: 15px;
}
.feature-card h3 {
font-size: 1.4rem;
margin-bottom: 12px;
color: var(--spotify-green);
}
.feature-card p {
color: var(--spotify-light-gray);
line-height: 1.7;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 40px;
}
.tool-card {
background: rgba(40, 40, 40, 0.6);
padding: 20px;
border-radius: 8px;
border-left: 3px solid var(--spotify-green);
}
.tool-card h4 {
font-size: 1.1rem;
margin-bottom: 8px;
color: var(--spotify-green);
font-weight: 700;
}
.tool-card p {
color: var(--spotify-light-gray);
font-size: 0.95rem;
}
.code-block {
background: var(--spotify-black);
border: 1px solid var(--spotify-gray);
border-radius: 8px;
padding: 20px;
margin: 20px 0;
overflow-x: auto;
}
.code-block pre {
font-family: 'Monaco', 'Consolas', monospace;
font-size: 0.9rem;
line-height: 1.5;
color: var(--spotify-green);
}
footer {
text-align: center;
padding: 40px 20px;
color: var(--spotify-light-gray);
}
footer a {
color: var(--spotify-green);
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
.attribution {
margin-top: 20px;
padding: 20px;
background: rgba(40, 40, 40, 0.5);
border-radius: 8px;
}
@media (max-width: 768px) {
header {
padding: 40px 20px 30px;
}
section {
padding: 40px 20px;
}
.feature-grid,
.tools-grid {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
}
.btn {
width: 100%;
text-align: center;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<svg viewBox="0 0 24 24" fill="currentColor" style="color: #1DB954;">
<path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/>
</svg>
</div>
<h1>Spotify MCP</h1>
<p class="subtitle">
Connect Claude AI with Spotify for intelligent music control, playlist management, and discovery
</p>
<div class="badges">
<a href="https://github.com/jamiew/spotify-mcp" class="badge" target="_blank">
<span>⭐ View on GitHub</span>
</a>
</div>
<div class="cta-buttons">
<a href="https://github.com/jamiew/spotify-mcp#installation" class="btn btn-primary" target="_blank">
Get Started
</a>
<a href="https://github.com/jamiew/spotify-mcp#usage-examples" class="btn btn-secondary" target="_blank">
View Examples
</a>
</div>
</header>
<section id="features">
<h2>Key Features</h2>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">🎵</div>
<h3>Playback Control</h3>
<p>Complete control over your Spotify playback. Play, pause, skip tracks, and manage your queue seamlessly through Claude.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<h3>Smart Search</h3>
<p>Find tracks, albums, artists, and playlists with intelligent pagination support for exploring deep into Spotify's catalog.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📋</div>
<h3>Playlist Management</h3>
<p>Create, modify, and manage playlists with smart batch operations. Handle playlists with 1000+ tracks efficiently.</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>Optimized API Usage</h3>
<p>Intelligent batching reduces API calls by 60-80%. Add or remove up to 100 tracks in single operations.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎯</div>
<h3>Type-Safe Design</h3>
<p>Built with FastMCP framework featuring full Pydantic validation and MyPy compliance for reliability.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Real-time State</h3>
<p>Access live user profile and playback status. Get detailed track and artist information on demand.</p>
</div>
</div>
</section>
<section id="tools">
<h2>13 Powerful Tools</h2>
<div class="tools-grid">
<div class="tool-card">
<h4>playback_control</h4>
<p>Control playback - get state, start, pause, skip tracks</p>
</div>
<div class="tool-card">
<h4>search_tracks</h4>
<p>Search for tracks, albums, artists, or playlists with pagination</p>
</div>
<div class="tool-card">
<h4>add_to_queue</h4>
<p>Add tracks to your playback queue</p>
</div>
<div class="tool-card">
<h4>get_queue</h4>
<p>View your current playback queue</p>
</div>
<div class="tool-card">
<h4>get_track_info</h4>
<p>Get detailed metadata for any track</p>
</div>
<div class="tool-card">
<h4>get_artist_info</h4>
<p>Get artist details and top tracks</p>
</div>
<div class="tool-card">
<h4>create_playlist</h4>
<p>Create new playlists with custom settings</p>
</div>
<div class="tool-card">
<h4>get_playlist_info</h4>
<p>Get playlist metadata and details</p>
</div>
<div class="tool-card">
<h4>get_playlist_tracks</h4>
<p>Retrieve tracks from playlists with full pagination (handles 10k+ tracks)</p>
</div>
<div class="tool-card">
<h4>get_user_playlists</h4>
<p>List all user playlists with pagination</p>
</div>
<div class="tool-card">
<h4>add_tracks_to_playlist</h4>
<p>Batch add up to 100 tracks at once</p>
</div>
<div class="tool-card">
<h4>remove_tracks_from_playlist</h4>
<p>Batch remove tracks from playlists</p>
</div>
<div class="tool-card">
<h4>modify_playlist_details</h4>
<p>Update playlist name, description, and privacy</p>
</div>
</div>
</section>
<section id="installation">
<h2>Installation</h2>
<div class="code-block">
<pre>git clone https://github.com/jamiew/spotify-mcp.git
cd spotify-mcp
uv sync</pre>
</div>
<p style="text-align: center; color: var(--spotify-light-gray); margin-top: 20px;">
Requires: Spotify Premium account, <code>uv</code> >= 0.54
</p>
<div style="text-align: center; margin-top: 30px;">
<a href="https://github.com/jamiew/spotify-mcp#installation" class="btn btn-primary" target="_blank">
Full Installation Guide
</a>
</div>
</section>
<section id="examples">
<h2>Usage Examples</h2>
<div class="feature-grid">
<div class="feature-card">
<h3>"Create a chill study playlist"</h3>
<p>Claude will search for appropriate tracks, create a new playlist, and batch add songs in one smooth workflow.</p>
</div>
<div class="feature-card">
<h3>"Show me my Liked Songs"</h3>
<p>Efficiently handles large playlists with pagination support, even for collections with thousands of tracks.</p>
</div>
<div class="feature-card">
<h3>"Find similar artists to Radiohead"</h3>
<p>Uses search and artist info tools to discover related artists and add their top tracks to your queue.</p>
</div>
</div>
</section>
<footer>
<div class="attribution">
<p><strong>Created by <a href="https://github.com/jamiew" target="_blank">@jamiew</a></strong></p>
<p style="margin-top: 10px;">
Forked from <a href="https://github.com/varunneal/spotify-mcp" target="_blank">varunneal/spotify-mcp</a> with enhanced playlist features and API optimizations
</p>
</div>
<p style="margin-top: 30px;">
Built with <a href="https://github.com/jlowin/fastmcp" target="_blank">FastMCP</a> •
Powered by <a href="https://developer.spotify.com/" target="_blank">Spotify Web API</a>
</p>
<p style="margin-top: 20px; font-size: 0.9rem;">
© 2025 Spotify MCP •
<a href="https://github.com/jamiew/spotify-mcp/blob/main/LICENSE" target="_blank">MIT License</a>
</p>
</footer>
</div>
</body>
</html>