10
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

Claude MCPアツいですね!
Claude MCPのおかげでClaude DesktopのようなLLMアプリケーションからSpotifyのようなサービスをチャットのやり取りだけで操作することが可能になります。
今回はClaude MCPを使ってClaude Desktop上からSpotify上で曲を探したり、再生したりする方法を紹介します。

Claude MCPについてざっくり

Model Context Protocolについて公式ドキュメントから引用すると

LLMアプリケーションと外部データソースやツールとのシームレスな統合を可能にするオープンプロトコルです。
AI搭載のIDEを構築する場合でも、チャットインターフェースを強化する場合でも、カスタムAIワークフローを作成する場合でも、
MCPはLLMが必要とするコンテキストに標準化された方法で接続する手段を提供します。

引用: https://modelcontextprotocol.io/introduction

つまりMCPはLLMアプリケーションと今回でいうとSpotifyのデスクトップアプリのような
ツールの統合を可能にするプロトコルです。

Claude MCPアーキテクチャ説明

Claude DesktopとSpotify MCP ServerはMCP Protocolを介して接続が維持され、
Spotifyのリソースに対してSpotify MCP ServerがSpotifyのWeb APIを介して操作を行います。
具体的にはSpotifyのWeb APIを使って曲の検索や再生、キューへの追加などを行います。
(更に言うとSpotifyのWeb APIでできる操作ならどんなことでもできるので、プレイリストの作成や削除、アーティスト情報の取得なども実装すれば可能です。)
(また他の外部データソース、例えばWikipediaなどと繋いで今再生しているアーティストに関する情報を仕入れるといったことも可能だと思います。夢が広がりますね)

spotify-mcpのセットアップ

Claude DesktopとSPotifyをMCPで接続するためにはSpotify MCP Serverをセットアップする必要があります。
私の手元の環境としてはMacbook Air(M1)を使用して検証しています。
公式ドキュメントによるとmacOSとWindowsでは動作するようです。

Spotify Developerアカウントの用意

MCP Serverを使ってSpotifyを操作するためにはSpotify Developerアカウントが必要です。
Spotify for Developersからアカウントを作成し、 Dashboardからアプリケーションを作成します。
その際以下のように設定しておきます。

  • Redirect URIs: http://localhost:8888
  • Which API/SDKs are you planning to use?: Web Playback SDKにチェックを入れておく

MCP周りの準備

  • MCP Serverの起動に必要な uv, gitをインストールしておきます。
    $ brew install uv git sqlite3
  • Claude Desktopをインストールします。
  • ターミナルなどから~/Library/Application\ Support/Claude/claude_desktop_config.jsonを開き以下のように編集します。
{
  "mcpServers": {
    "spotify": {
      "command": "uv",
      "args": [
        "--directory",
        "/path/to/spotify_mcp",
        "run",
        "spotify-mcp"
      ],
      "env": {
        "SPOTIFY_CLIENT_ID": YOUR_CLIENT_ID,
        "SPOTIFY_CLIENT_SECRET": YOUR_CLIENT_SECRET,
        "SPOTIFY_REDIRECT_URI": "http://localhost:8888"
      }
    }
  }
}

/path/to/spotify_mcpには Spotify MCP Serverのコードのパスを設定しておきましょう。
https://github.com/varunneal/spotify-mcp.git でSpotify MCP Serverのコードを公開してくれている方がいるのでこのコードをcloneしてきて使うことができます。

これでSpotify MCP Serverの設定は完了です。

利用例

設定が完了したらClaude Desktopを起動してSpotifyを操作してみましょう。

  • 利用例その1
    Claude DesktopでLLMと会話しながら曲をかけてもらってます。
    今回はナイスなファンクをリクエストしました。
    mcp_1.gif

  • 利用例その2
    聴いているうちに気分が乗ってきたので別のアーティストの曲も教えてもらいます。
    気になるアーティストがあったのでキューに入れてもらうことにしました。
    mcp_2.gif

まとめ

Claude MCPでSpotifyを操作する方法についてご紹介しました。
個人的には音楽の視聴体験に革命が起きた感じがしました。
今後はWikipediaやウェブ検索などの外部リソースと組み合わせてリッチな視聴体験を追求したいなと考えています!

10
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?