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

To integrate Bolt.new with the Shutterstock API, you don’t connect “Bolt” itself to Shutterstock. Instead, you write standard backend code inside Bolt.new’s sandbox that calls the Shutterstock REST API using HTTPS with an OAuth 2.0 access token. In practice, you create a small backend route (Node.js/Express is typical in bolt.new), store your Shutterstock API credentials in environment variables, call Shutterstock’s image or video search endpoints, and return results to your UI. This is a normal API integration — bolt.new is simply the environment where you write and test the code.

 

What You Actually Do (the real process)

 

You treat Shutterstock like any other external REST API. Shutterstock exposes a real, documented OAuth 2.0 + HTTPS API. Bolt.new can send requests to it as long as you include the correct authorization header. Your “integration” is simply writing backend code within Bolt.new that fetches data from Shutterstock and exposes it to your frontend.

• You put Shutterstock credentials in Bolt.new’s .env panel.
• You write a backend route such as /api/search-images in Node.js.
• You call Shutterstock’s API using fetch or axios with the required headers.
• Your UI calls your backend route, not Shutterstock directly (safer, hides keys).

 

Setup Steps (real, safe, correct)

 

Here is the exact flow a junior dev can follow:

• Create a FREE or PAID Shutterstock developer account at developer.shutterstock.com and create an application to get a Client ID and Client Secret.
• Inside Bolt.new, open the Environment Variables panel and add:
  SHUTTERSTOCK_CLIENT_ID=your\_id
  SHUTTERSTOCK_CLIENT_SECRET=your\_secret
• Decide which auth flow you want:
  Client Credentials Flow is simplest. It gives you a server-side OAuth 2.0 token via POST /v2/oauth/access\_token.
• Build a backend endpoint that:
  • fetches an OAuth token from Shutterstock
  • calls the image search API
  • returns results to your frontend

 

Working Backend Example (Node.js Express, valid Shutterstock API calls)

 

This is the minimal working code you can drop into a Bolt.new backend file like server.js or inside your existing API router. This follows Shutterstock’s REAL documented endpoints.

 

import express from "express"
import fetch from "node-fetch"

const app = express()

// Backend route the frontend will call
app.get("/api/search-images", async (req, res) => {
  try {
    const query = req.query.q || "nature" // example search term

    // 1. Get an OAuth access token from Shutterstock
    const tokenResponse = await fetch("https://api.shutterstock.com/v2/oauth/access_token", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      body: 
        `client_id=${process.env.SHUTTERSTOCK_CLIENT_ID}` +
        `&client_secret=${process.env.SHUTTERSTOCK_CLIENT_SECRET}` +
        `&grant_type=client_credentials`
    })

    const tokenData = await tokenResponse.json()

    // 2. Call Shutterstock Image Search
    const searchResponse = await fetch(
      `https://api.shutterstock.com/v2/images/search?query=${encodeURIComponent(query)}`,
      {
        method: "GET",
        headers: {
          Authorization: `Bearer ${tokenData.access_token}`
        }
      }
    )

    const searchResults = await searchResponse.json()

    res.json(searchResults)

  } catch (err) {
    console.error(err)
    res.status(500).json({ error: "Shutterstock API error" })
  }
})

export default app

 

Frontend Use (React/Vue/Svelte inside Bolt.new)

 

Your frontend simply calls the backend route above:

 

// Example inside a React component
const fetchImages = async () => {
  const res = await fetch(`/api/search-images?q=cats`)
  const data = await res.json()
  console.log(data)
}

 

Important Notes (real constraints)

 

• DO NOT hardcode Shutterstock secrets in frontend code. Authentication must stay server-side.
• Shutterstock rate-limits heavily on free tiers — your sandbox may hit limits quickly.
• Client Credentials Flow gives you access for search + metadata, but NOT for licensing or downloading full‑resolution images. Those require user-auth flows and paid apps.
• Bolt.new cannot magically store long-term secrets — they stay in your .env, which is fine for prototyping.
• When deploying outside Bolt, move secrets to your production environment variables (e.g., Vercel, Render, Docker ENV).

 

Summary

 

Integration is simple: you create environment variables in Bolt.new, build a backend endpoint that obtains an OAuth token from Shutterstock, call their REST API, and pass results to your UI. Bolt.new doesn’t do anything “special”; it just runs your Node.js code that integrates with Shutterstock’s official API. This is production‑real, standards‑based, and works exactly like any external API integration.