Bolt.new AI and Spotify API integration: Step-by-Step Guide 2025

 

Configuring Dependencies and Environment Variables

 

• Create a file named package.json in your project’s root directory and add the following content. This ensures that the Axios library (used for making HTTP requests) is available in your project.

{
  "name": "my-bolt-spotify-project",
  "version": "1.0.0",
  "dependencies": {
    "axios": "0.27.2"
  },
  "scripts": {
    "start": "node dist/index.js"
  }
}

• Since Bolt.new AI does not offer a terminal interface, add or update the package.json file manually in your project with the above content to include the required dependency.

 

Creating a Configuration File

 

• Create a new file in your project named config.ts. This file will store your Spotify API credentials.
• Replace yourspotifyclientid and yourspotifyclientsecret with your actual Spotify Client ID and Client Secret.

export const SPOTIFYCLIENTID = "yourspotifyclient_id";
export const SPOTIFYCLIENTSECRET = "yourspotifyclient_secret";

 

Creating the Spotify API Integration Module

 

• Create a new file in your project named spotifyApi.ts. This module will contain the TypeScript functions to fetch the access token and perform API calls to Spotify.
• The code below uses Axios to request an access token using the Client Credentials Flow and provides a sample function to search tracks by a query string.

import axios from "axios";
import { SPOTIFYCLIENTID, SPOTIFYCLIENTSECRET } from "./config";

let accessToken = "";

export async function getAccessToken(): Promise<string> {
  const tokenUrl = "https://accounts.spotify.com/api/token";
  const credentials = Buffer.from(${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}).toString("base64");

  try {
    const response = await axios.post(
      tokenUrl,
      new URLSearchParams({ granttype: "clientcredentials" }),
      {
        headers: {
          "Authorization": Basic ${credentials},
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
    );
    accessToken = response.data.access_token;
    return accessToken;
  } catch (error) {
    console.error("Error fetching access token:", error);
    throw error;
  }
}

export async function searchTracks(query: string): Promise<any> {
  if (!accessToken) {
    await getAccessToken();
  }
  
  const searchUrl = https://api.spotify.com/v1/search?type=track&q=${encodeURIComponent(query)};
  
  try {
    const response = await axios.get(searchUrl, {
      headers: { "Authorization": Bearer ${accessToken} }
    });
    return response.data;
  } catch (error) {
    console.error("Error searching tracks:", error);
    throw error;
  }
}

 

Integrating Spotify API in Your Bolt.new Project

 

• Open your main project file (for example, index.ts) and insert the following code snippet at the location where you want to interact with the Spotify API.
• This sample code calls the searchTracks function to search for a track and logs the results. You can modify it to integrate with your UI or further process the data.

import { searchTracks } from "./spotifyApi";

(async () => {
  try {
    // Replace "Your Song" with the track name or search query of your choice.
    const data = await searchTracks("Your Song");
    console.log("Search Results:", data);
    // Process the received data as needed for your application.
  } catch (error) {
    console.error("An error occurred while searching:", error);
  }
})();

 

Finalizing and Testing Your Integration

 

• Ensure all files are saved in the project.
• Bolt.new AI automatically compiles and runs your TypeScript code, so once you include the files and code snippets above, your project is now set up to integrate with the Spotify API.
• Test the integration by triggering the code in your main file (for example, when the project loads or on a user action) and check the console output for the search results or any error messages.