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

 

Getting Your Shutterstock API Credentials

 

• Sign up for a Shutterstock developer account at Shutterstock Developers and create a new app to obtain your API Key and API Secret.
• Keep your API credentials handy as you will need them in your code to authenticate requests.

 

Creating a New File for Shutterstock Integration

 

• In your Bolt.new project, create a new TypeScript file named shutterstock.ts.
• This file will encapsulate all the functions required to interact with the Shutterstock API.
• Copy and paste the following code snippet into shutterstock.ts:

/ Replace 'YOURSHUTTERSTOCKAPIKEY' and 'YOURSHUTTERSTOCKAPISECRET' with your actual credentials /
const APIKEY = 'YOURSHUTTERSTOCKAPIKEY';
const APISECRET = 'YOURSHUTTERSTOCKAPISECRET';

/**
- Function to search for images using the Shutterstock API.
- @param query - The search term.
- @returns Promise resolving to the JSON response.
 */
export async function searchShutterstockImages(query: string): Promise {
  const endpoint = https://api.shutterstock.com/v2/images/search?query=${encodeURIComponent(query)};

  // Create a Basic authentication header
  const credentials = btoa(${API_KEY}:${API_SECRET});
  const headers = {
    'Authorization': 'Basic ' + credentials,
    'Content-Type': 'application/json'
  };

  const response = await fetch(endpoint, { headers });
  if (!response.ok) {
    throw new Error('Shutterstock API request failed with status ' + response.status);
  }
  return await response.json();
}

/**
- Example usage:
- (async () => {
-   try {
-     const results = await searchShutterstockImages('nature');
-     console.log(results);
-   } catch (error) {
-     console.error(error);
-   }
- })();
 */

 

Integrating the Shutterstock Code into Your Bolt.new AI Project

 

• Locate the main file (for example, index.ts or your primary TypeScript file) where you want to use Shutterstock API functionality.
• Import the searchShutterstockImages function by adding the following import statement at the top of the file:

import { searchShutterstockImages } from './shutterstock';

• Integrate the function call at the appropriate place in your code. For example, if you want to search for images based on user input, do something similar to the following:

async function handleImageSearch(query: string) {
  try {
    const results = await searchShutterstockImages(query);
    console.log('Search results:', results);
    // Process and display the results in your Bolt.new AI project UI as required.
  } catch (error) {
    console.error('Error fetching images from Shutterstock:', error);
  }
}

// Example trigger for the function, for demonstration:
handleImageSearch('landscape');

 

Handling Dependencies Without a Terminal

 

• Bolt.new AI projects do not provide direct terminal access. If you need any external dependencies, add them as CDN links or use direct import statements if they are available as modules.
• For this integration, the native fetch API is used, which is supported in modern environments. If you experience compatibility issues, consider adding a polyfill by including its script in your project’s HTML file.
• No additional installation commands are needed since all dependencies are included directly in the code.

 

Testing Your Shutterstock Integration

 

• Save all your changes in Bolt.new.
• Run your project using the Run button in the Bolt.new interface.
• Open the browser console to ensure the handleImageSearch function logs the Shutterstock API search results.
• If any errors occur, verify that your API credentials are correct and that the API endpoint is reachable.