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

 

Creating a New File for Pixabay API Integration

 

• Create a new file in your Bolt.new project and name it pixabayApi.ts. This file will contain the TypeScript code for calling the Pixabay API.

 

Implementing the Pixabay API Code

 

• In pixabayApi.ts, add the following code snippet. This code declares your API key and base URL, and defines an asynchronous function searchImages that calls the Pixabay API. Replace YOURPIXABAYAPI_KEY with your actual Pixabay API key.

const APIKEY: string = "YOURPIXABAYAPIKEY"; // Replace with your actual API key
const BASE_URL: string = "https://pixabay.com/api/";

export async function searchImages(query: string): Promise {
  const url: string = ${BASE_URL}?key=${API_KEY}&q=${encodeURIComponent(query)}&image_type=photo;
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error("Failed to fetch images from Pixabay API");
  }
  const data = await response.json();
  return data;
}

 

Importing and Using the Pixabay API Function

 

• In your main project file (for example, index.ts), import the searchImages function from pixabayApi.ts and use it to fetch images based on a query. Insert the following code snippet into your main file.

import { searchImages } from "./pixabayApi";

async function displayImages(): Promise {
  try {
    const result = await searchImages("cats"); // Replace "cats" with a desired search term
    console.log("Images:", result.hits);
  } catch (error) {
    console.error("Error fetching images:", error);
  }
}

// Call the function as part of your application initialization
displayImages();

 

Handling User Input for API Requests

 

• If your project includes a user interface, you can integrate a search function that calls the Pixabay API when a user types a query or clicks a button. Create or open your UI file (for example, app.ts) and insert the following code snippet.

// Example function to handle a user's search input
async function onSearchInput(query: string): Promise {
  try {
    const result = await searchImages(query);
    // Update your UI with the fetched image results (result.hits)
    console.log("Search results:", result.hits);
  } catch (error) {
    console.error("Search error:", error);
  }
}

// Example: attach the search function to a button click event
const searchButton = document.getElementById("searchBtn");
searchButton?.addEventListener("click", () => {
  const queryInput = (document.getElementById("searchInput") as HTMLInputElement).value;
  onSearchInput(queryInput);
});

 

Managing Dependencies Without a Terminal

 

• Since Bolt.new AI doesn’t have a terminal for installing dependencies, ensure that your environment supports the native fetch API. If your environment requires a polyfill, include it manually in your code. For example, if you need node-fetch, add the following comment and import statement at the top of your file, and ensure the polyfill code is loaded.

/*
  If your environment does not support the global fetch API, you can include a polyfill.
  For example, use node-fetch by adding the following lines at the top of your file:

  import fetch from "node-fetch";
  (Make sure to include the polyfill code within your project as Bolt.new AI doesn't have a terminal)
*/

 

Configuring Your API Key Securely

 

• For better security, consider storing your API key in a separate configuration file rather than hardcoding it. Create a file called config.ts and add the following code snippet. Then update pixabayApi.ts to import the API key from config.ts.

// In config.ts
export const PIXABAYAPIKEY: string = process.env.PIXABAYAPIKEY || "YOURPIXABAYAPI_KEY";

// In pixabayApi.ts, replace the API_KEY declaration with:
import { PIXABAYAPIKEY } from "./config";
const APIKEY: string = PIXABAYAPI_KEY;