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

A Bolt.new workspace integrates with the Getty Images API the same way any normal full‑stack project does: by calling Getty’s REST API from your server code using an API key stored in environment variables. Bolt itself does not “plug into” Getty — you build the integration in code. The workflow is: get Getty credentials, put them in Bolt environment variables, write server endpoints that call Getty’s API with proper authentication headers, and then expose those results to your UI.

 

What You Actually Do

 

You integrate Bolt.new with the Getty Images API by writing ordinary server code (Node.js inside Bolt’s server folder) that sends authenticated HTTPS requests to Getty’s REST API. Getty requires a Bearer token obtained with your API key + secret. Once you have that token, your backend can search for images, retrieve metadata, or generate URLs. In Bolt.new this means placing your Getty API credentials in environment variables, fetching an OAuth token from Getty, caching it, and using it in subsequent requests.

• Bolt.new does not have built‑in Getty support. You use normal REST calls.
• All external calls must be done in backend code (server directory), not in client browser JS.
• All credentials must be in environment variables, never hard‑coded.

 

Step-by-step integration

 

This is the standard, correct, real-world way to integrate Getty Images inside a Bolt.new app.

• Create a Getty account and API key You must apply for Getty Images API access. Once approved, you receive:
  • API Key
  • API Secret
• Set environment variables in Bolt.new In the Bolt.new workspace sidebar, open Environment Variables and add:
  GETTY_API_KEY
  GETTY_API_SECRET
• Write a token fetcher Getty uses OAuth 2.0 Client Credentials to get a Bearer token. Endpoint (real): https://api.gettyimages.com/oauth2/token
• Create a server route in Bolt.new that retrieves images using that token.

 

// server/getty.js
// This is a simple, real Node.js module for Bolt.new server-side code

import fetch from "node-fetch";

const GETTY_TOKEN_URL = "https://api.gettyimages.com/oauth2/token";
const GETTY_SEARCH_URL = "https://api.gettyimages.com/v3/search/images";

let cachedToken = null;
let tokenExpiresAt = 0;

async function getGettyToken() {
  const now = Date.now();

  // Reuse token if it's still valid
  if (cachedToken && now < tokenExpiresAt) {
    return cachedToken;
  }

  // Request a new token
  const res = await fetch(GETTY_TOKEN_URL, {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams({
      grant_type: "client_credentials",
      client_id: process.env.GETTY_API_KEY,      // from Bolt environment
      client_secret: process.env.GETTY_API_SECRET // from Bolt environment
    })
  });

  const data = await res.json();

  cachedToken = data.access_token;
  tokenExpiresAt = now + data.expires_in * 1000;

  return cachedToken;
}

export async function searchGettyImages(query) {
  const token = await getGettyToken();

  const res = await fetch(`${GETTY_SEARCH_URL}?phrase=${encodeURIComponent(query)}`, {
    headers: { Authorization: `Bearer ${token}` }
  });

  const data = await res.json();
  return data;
}

 

Expose a route your frontend can call

 

// server/routes.js
import express from "express";
import { searchGettyImages } from "./getty.js";

const router = express.Router();

router.get("/api/getty/search", async (req, res) => {
  try {
    const q = req.query.q || "";
    const results = await searchGettyImages(q);
    res.json(results);
  } catch (err) {
    res.status(500).json({ error: "Getty API error", details: err.message });
  }
});

export default router;

 

Call the route from your Bolt.new UI

 

// frontend script example
async function searchImages() {
  const q = document.getElementById("search").value;

  const res = await fetch(`/api/getty/search?q=${encodeURIComponent(q)}`);
  const data = await res.json();

  console.log("Getty results:", data);
}

 

Important details a junior dev must understand

 

• Never expose API keys to the browser. The backend must handle all Getty requests.
• Getty requires a token refresh flow. The code above handles caching so you don’t request a new token every time.
• Bolt.new behaves like a real Node server. All integrations are via standard HTTP fetch calls and environment variables.
• You must follow Getty licensing rules. The URLs you get may require specific usage rights.

 

Summary

 

You integrate Bolt.new AI with the Getty Images API simply by writing backend code that performs Getty’s OAuth token exchange, caches the token, and makes authenticated REST calls to Getty’s search endpoints. Everything lives in normal Node.js files inside Bolt’s server folder, using environment variables for credentials, and the frontend talks only to your own backend routes—not directly to Getty.