Spotify MCP AI App

This project is a full-stack AI-powered Spotify agent using the Model Context Protocol (MCP). It consists of two main parts:

• mcp_server/: MCP server exposing Spotify tools and prompts
• react_app/: Next.js frontend with chat UI for interacting with the agent

Note:
This project uses a Spotify API key that is restricted to development use. Only explicitly added users can make API calls with this key.
If you want to use the app, please provide your Spotify account so it can be added to the allowed users list.

Prerequisites

• Node.js 18+
• A valid Spotify API access token (see below)

Setup

1. Clone the repository

git clone <your-repo-url>
cd <your-repo-folder>

2. Install dependencies

cd mcp_server
npm install
cd ../react_app
npm install

3. Configure environment variables

MCP Server

• Copy .env.example to .env in mcp_server/

React App

• Copy .env.local.example to .env.local in react_app/
• Fill it with your various tokens

4. Run the MCP server

cd mcp_server
npm run dev

5. Run the React frontend

cd react_app
npm run dev

The React app will be available at http://localhost:3000

Interacting with Your Agent

Open the chat UI and try these sample prompts:

Get your Spotify profile

Show my Spotify profile

Get your liked tracks

List my liked tracks

Create a playlist

Create a new playlist called "Road Trip Vibes"

Add tracks to a playlist

Add these tracks to my playlist spotify:playlist:37i9dQZF1DXcBWIGoYBM5M: "Track 1" "Track 2"

Get song recommendations

Click the GET SONG RECOMMENDATIONS button in the chat UI to request personalized song suggestions. This button gets a prebuilt prompt from the MCP server. You can then ask the chatbot to add some of those songs a new playlist on your account :

Create a new playlist on my account with the following songs : 2, 5, 9

Advanced

• The MCP server exposes tools and prompts for agent use.
• The React app uses @ai-sdk/react and MCP client to stream responses from the agent.