v0 and Shutterstock API integration: Step-by-Step Guide 2025

 

Setting Up Shutterstock API Credentials

 

• Create a new file named shutterstockConfig.ts in your project's source directory (where your other TypeScript files are located).
• This file will store the API credentials and configuration needed for authenticating with the Shutterstock API. Replace the placeholder strings with your actual Shutterstock client ID and client secret.
• Add the following code snippet to shutterstockConfig.ts:

• export const SHUTTERSTOCK_CONFIG = {
    CLIENTID: 'YOURCLIENTIDHERE',
    CLIENTSECRET: 'YOURCLIENTSECRETHERE',
    TOKENURL: 'https://api.shutterstock.com/v2/oauth/accesstoken',
    APIBASEURL: 'https://api.shutterstock.com/v2'
  };
  

 

Creating the Shutterstock API Helper

 

• Create a new file named shutterstockApi.ts in the same source directory.
• This file will contain the TypeScript functions to obtain an access token and make API calls such as searching for images.
• Add the following code snippet to shutterstockApi.ts:

• import { SHUTTERSTOCK_CONFIG } from './shutterstockConfig';
  
  interface AccessTokenResponse {
    access_token: string;
    token_type: string;
    expires_in: number;
    scope: string;
  }
  let cachedToken: string | null = null;
  let tokenExpiry: number = 0;
  /**
  
  Fetches a new access token from Shutterstock API using client credentials.
  
   */
  export async function getAccessToken(): Promise<string> {
    const now = Date.now();
    if (cachedToken && now < tokenExpiry) {
      return cachedToken;
    }
    const credentials = btoa(${SHUTTERSTOCK_CONFIG.CLIENT_ID}:${SHUTTERSTOCK_CONFIG.CLIENT_SECRET});
    const params = new URLSearchParams();
    params.append('granttype', 'clientcredentials');
    try {
      const response = await fetch(SHUTTERSTOCKCONFIG.TOKENURL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Authorization': Basic ${credentials}
        },
        body: params.toString()
      });
  if (!response.ok) {
    throw new Error(Token request failed: ${response.status} ${response.statusText});
  }
  
  const data: AccessTokenResponse = await response.json();
  cachedToken = data.access_token;
  tokenExpiry = now + (data.expires_in * 1000) - 60000; // Refresh 1 minute before expiry
  return cachedToken;
  
    } catch (error) {
      console.error('Error fetching access token:', error);
      throw error;
    }
  }
  /**
  
  Searches Shutterstock images using a query string.
  
   */
  export async function searchImages(query: string): Promise<any> {
    const token = await getAccessToken();
    const searchUrl = ${SHUTTERSTOCK_CONFIG.API_BASE_URL}/images/search?query=${encodeURIComponent(query)};
    try {
      const response = await fetch(searchUrl, {
        headers: {
          'Authorization': Bearer ${token}
        }
      });
  if (!response.ok) {
    throw new Error(Search request failed: ${response.status} ${response.statusText});
  }
  
  const data = await response.json();
  return data;
  
    } catch (error) {
      console.error('Error searching images:', error);
      throw error;
    }
  }
  

  
  

 

Integrating API Calls in the v0 Project

 

• In your main project file (for example, index.ts or another file where you handle API interactions), import the functions from shutterstockApi.ts.
• Add the following code snippet where you want to execute a search. This example demonstrates how to call the searchImages function and handle the result:

• import { searchImages } from './shutterstockApi';
  
  async function performImageSearch() {
    try {
      const query = 'nature'; // Replace with desired search term
      const searchResults = await searchImages(query);
      console.log('Search Results:', searchResults);
      // Implement further logic to display or process the searchResults as needed
    } catch (error) {
      console.error('Error during image search:', error);
    }
  }
  // Invoke the search function (you can call this from an event handler or when your application starts)
  performImageSearch();
  

  
  

 

Installing Dependencies Without a Terminal

 

• Since your v0 project does not have a terminal, you can include any necessary dependencies via CDN or by embedding them directly in your project files.
• In our provided code, the built-in fetch API is used, which is supported in most modern browsers and environments without installing extra libraries.
• If your project environment requires a polyfill for fetch, add the following script tag in your HTML file within the <head> section:

• <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.6.2/fetch.min.js"></script>
  

 

Testing Your Integration

 

• Save all the files and reload your v0 project.
• Open the browser console to verify that the API call is working and that you are receiving image results from Shutterstock.
• If you encounter any errors, ensure that your client ID and client secret in shutterstockConfig.ts are correct and that your project environment supports modern JavaScript features such as async/await.