How to Integrate Retool with Spotify

Navigate to the Spotify Developer Dashboard at developer.spotify.com/dashboard and log in with your Spotify account. Click the Create App button. Fill in the required fields: App Name (e.g., 'Retool Music Analytics'), App Description (briefly describe the internal tool use case), and Website (your company website or Retool instance URL). In the Redirect URIs field, add a placeholder URI — for client credentials flow you do not need a real redirect URI, but the form requires at least one. Use https://localhost for now or your Retool instance URL if you plan to implement user OAuth later. Check the 'Web API' checkbox in the API/SDKs section. Accept the Developer Terms of Service and click Save. After the app is created, you land on the app's settings page. Click the View Client Secret button to reveal the client secret. Copy both the Client ID (displayed on the page) and the Client Secret to a secure location immediately. The client secret is shown only once and will be masked afterwards — if you lose it, you must regenerate it. In Retool, go to Settings (gear icon in the left sidebar) → Configuration Variables. Create two new Secret variables: SPOTIFY_CLIENT_ID with the Client ID value, and SPOTIFY_CLIENT_SECRET with the Client Secret value. Toggle both to Secret so they are restricted to resource configurations and never exposed to the browser.

Spotify's API requires a Bearer access token in every request. These tokens expire after 3600 seconds (1 hour) and must be refreshed. Start by creating a REST API Resource for the Spotify Accounts Service: navigate to Resources tab → Add Resource → REST API. Name it 'Spotify Auth', set Base URL to https://accounts.spotify.com. Add a header: Content-Type = application/x-www-form-urlencoded. Click Save. Now create a second REST API Resource named 'Spotify API'. Base URL = https://api.spotify.com/v1. In the Headers section, add Authorization = Bearer {{ getSpotifyToken.data.access_token }} — this dynamically injects the token obtained by a query named getSpotifyToken (which you will create in your apps). Click Save. Open or create a Retool app. In the Code panel, create a query named getSpotifyToken. Resource = Spotify Auth, method = POST, path = /api/token. Set Body Type to x-www-form-urlencoded and add parameters: grant_type = client_credentials, client_id = {{ retoolContext.configVars.SPOTIFY_CLIENT_ID }}, client_secret = {{ retoolContext.configVars.SPOTIFY_CLIENT_SECRET }}. Set Trigger to run automatically on page load. Set a cache duration of 3500 seconds so the token is reused within apps without redundant requests. This query returns { access_token: '...', token_type: 'Bearer', expires_in: 3600 }. The access_token is referenced in the Spotify API resource's Authorization header, automatically included in all subsequent API queries.

1{
2  "method": "POST",
3  "path": "/api/token",
4  "body": {
5    "grant_type": "client_credentials",
6    "client_id": "{{ retoolContext.configVars.SPOTIFY_CLIENT_ID }}",
7    "client_secret": "{{ retoolContext.configVars.SPOTIFY_CLIENT_SECRET }}"
8  },
9  "bodyType": "x-www-form-urlencoded"
10}

With authentication working, create the data queries. In the Code panel, create a query named searchTracks. Resource = Spotify API, method = GET, path = /search. Add URL parameters: q = {{ searchInput.value }}, type = track, limit = 20, market = US. Set Trigger to run automatically when searchInput.value changes (and debounce by 400ms to avoid excessive API calls on each keystroke). This query powers a real-time track search feature. Create a second query named getAudioFeatures. Resource = Spotify API, method = GET, path = /audio-features. Add URL parameter: ids = {{ searchResultsTable.selectedRows.map(r => r.id).join(',') }}. This retrieves audio analysis data for all selected rows in the search results table simultaneously. The endpoint accepts up to 100 comma-separated track IDs. Set Trigger to run automatically when searchResultsTable.selectedRows changes. Create a third query named getArtistTopTracks. Resource = Spotify API, method = GET, path = /artists/{{ artistIdInput.value }}/top-tracks. Add parameter: market = US. This retrieves the top 10 tracks for any artist ID entered in a Text Input component. Create a fourth query named getPlaylist. Resource = Spotify API, method = GET, path = /playlists/{{ playlistIdInput.value }}. This retrieves full playlist metadata including all track listings with their audio features summary.

1// JavaScript transformer to extract and format track data from search results
2// Attach to searchTracks query (Advanced → Transform data)
3const results = data;
4if (!results || !results.tracks || !results.tracks.items) return [];
5
6return results.tracks.items.map(track => ({
7  id: track.id,
8  uri: track.uri,
9  title: track.name,
10  artist: track.artists.map(a => a.name).join(', '),
11  album: track.album.name,
12  releaseDate: track.album.release_date,
13  popularity: track.popularity,
14  durationMs: track.duration_ms,
15  duration: Math.floor(track.duration_ms / 60000) + ':' +
16    String(Math.floor((track.duration_ms % 60000) / 1000)).padStart(2, '0'),
17  previewUrl: track.preview_url || '',
18  spotifyUrl: track.external_urls.spotify
19}));

Assemble the dashboard layout. At the top of the canvas, drag two Text Input components: one for track search labeled 'Search Tracks' and one for Artist ID labeled 'Artist Spotify ID'. Below these, add a Tab component to organize two views: Search Results and Artist Top Tracks. In the Search Results tab, drag a Table component. Set Data source to {{ searchTracks.data }} (with the formatSearchResults transformer applied). Show columns: title, artist, album, releaseDate, popularity (displayed as a progress bar using a column renderer), and duration. Enable multi-row selection so users can select multiple tracks for audio feature analysis. Add an 'Open in Spotify' link column using the spotifyUrl field. Drag a second Table below for Audio Features. Set Data source to {{ getAudioFeatures.data.audio_features }}. Show columns: energy, danceability, valence, tempo, acousticness, instrumentalness, speechiness. Format values as percentages (0.0-1.0 → 0%-100%) using a query transformer, except tempo which is already in BPM. Drag a Chart component alongside the Audio Features table. Set type to Radar (if available in your Retool version) or Bar. Map the chart to show energy, danceability, valence, acousticness, and instrumentalness for the selected tracks side-by-side, enabling visual comparison of multiple tracks' sonic profiles. In the Artist Top Tracks tab, add a similar Table bound to getArtistTopTracks.data. For music labels managing large rosters and needing cross-artist analytics, RapidDev's team can help architect comprehensive Retool dashboards.

1// Transformer to format audio features for display
2// Attach to getAudioFeatures query
3const features = data;
4if (!features || !features.audio_features) return [];
5
6return features.audio_features
7  .filter(f => f !== null)
8  .map(f => ({
9    id: f.id,
10    energy: `${(f.energy * 100).toFixed(0)}%`,
11    danceability: `${(f.danceability * 100).toFixed(0)}%`,
12    valence: `${(f.valence * 100).toFixed(0)}%`,
13    acousticness: `${(f.acousticness * 100).toFixed(0)}%`,
14    instrumentalness: `${(f.instrumentalness * 100).toFixed(0)}%`,
15    speechiness: `${(f.speechiness * 100).toFixed(0)}%`,
16    liveness: `${(f.liveness * 100).toFixed(0)}%`,
17    tempo: `${f.tempo.toFixed(0)} BPM`,
18    key: ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'][f.key] || 'Unknown',
19    mode: f.mode === 1 ? 'Major' : 'Minor',
20    loudness: `${f.loudness.toFixed(1)} dB`
21  }));

Extend the dashboard with playlist management capabilities. Create a query named getUserPlaylists. Resource = Spotify API, method = GET, path = /me/playlists. Note: this endpoint requires a user access token (authorization code flow), not the client credentials token. For dashboards managing a specific service account, pre-authenticate that account and store its refresh token as a Configuration Variable, then use it to obtain user access tokens. Create a query named addTracksToPlaylist. Resource = Spotify API, method = POST, path = /playlists/{{ playlistIdInput.value }}/tracks. Set Body Type to JSON. Body: { 'uris': {{ searchResultsTable.selectedRows.map(r => r.uri) }}, 'position': 0 }. Set Trigger to Manual. This adds selected tracks to a target playlist. Wire this to a Button labeled 'Add to Playlist' with a confirmation dialog. Create a query named getRecommendations. Resource = Spotify API, method = GET, path = /recommendations. Add URL parameters using the audio feature values from selected tracks as seeds: seed_tracks = {{ searchResultsTable.selectedRow.id }}, target_energy = {{ audioFeaturesTable.selectedRow.energy }}, target_danceability = {{ audioFeaturesTable.selectedRow.danceability }}, limit = 20. This queries Spotify's recommendation engine for similar tracks, enabling playlist building from a starting track. Display getRecommendations.data.tracks in a third Table with the same format transformer as the search results. Add an 'Add Recommendations to Playlist' button that triggers addTracksToPlaylist with the recommended track URIs. This creates a full playlist curation workflow entirely within Retool.

1{
2  "uris": {{ JSON.stringify(searchResultsTable.selectedRows.map(row => row.uri)) }},
3  "position": 0
4}