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

 

Step 1: Add the Required Dependency for HTTP Requests

 

Since Bolt.new AI does not offer a terminal, you must manually add any external dependency to your project’s package configuration. Open the file package.json (or create one if it doesn’t exist) and add the following dependency to include the node-fetch library. This library allows your TypeScript code to make HTTP requests and thus call DeepAI’s API.

{
  "name": "your-bolt-new-ai-project",
  "version": "1.0.0",
  "dependencies": {
    "node-fetch": "2.6.1"
  },
  "devDependencies": {
    "typescript": "^4.0.0"
  },
  "scripts": {
    "start": "ts-node index.ts"
  }
}

Make sure you save the file. Bolt.new AI will automatically resolve these dependencies using the package.json entries.

 

Step 2: Create a New TypeScript File for DeepAI Integration

 

In your project’s file tree, create a new file named deepaiIntegration.ts. This file will contain the code to communicate with DeepAI’s API. Paste the code below into it.

import fetch from 'node-fetch';

// Replace 'YOURDEEPAIAPI_KEY' with your actual DeepAI API key.
// It is recommended to store sensitive keys in environment variables.
const DEEPAIAPIKEY = process.env.DEEPAIAPIKEY || 'YOURDEEPAIAPI_KEY';

/**
- Calls DeepAI's text-to-image API with a provided prompt.
- @param prompt - The text prompt to send to DeepAI.
- @returns The API response as a JSON object.
 */
export async function generateImageFromText(prompt: string): Promise {
  const apiUrl = 'https://api.deepai.org/api/text2img';

  const response = await fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Api-Key': DEEPAIAPIKEY,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
      text: prompt
    })
  });

  if (!response.ok) {
    throw new Error('DeepAI API request failed with status ' + response.status);
  }

  return await response.json();
}

This code defines a function generateImageFromText that sends a text prompt to DeepAI’s API and returns the resulting JSON, which will typically include a URL to the generated image. Replace YOURDEEPAIAPI_KEY with your actual API key or set it up as an environment variable.

 

Step 3: Integrate the DeepAI Function in Your Project’s Main Code

 

Next, update your project’s main TypeScript file (commonly named index.ts or similar) to import and use the DeepAI integration function. Open index.ts and add the following code snippet where you want to call the API—this might be in response to a user action or during some part of your application’s workflow.

import { generateImageFromText } from './deepaiIntegration';

// Example usage: call DeepAI API when a specific event occurs
async function runDeepAIIntegration() {
  const prompt = 'A futuristic cityscape at sunset';
  try {
    const result = await generateImageFromText(prompt);
    console.log('DeepAI API result:', result);
    // You can now process result, e.g., display the image URL in your application.
  } catch (error) {
    console.error('Error calling DeepAI API:', error);
  }
}

// For testing purposes, call the function immediately.
// In a real-world scenario, you might trigger this based on some user interaction.
runDeepAIIntegration();

This snippet shows how to import the DeepAI function and integrate it into your project. The function runDeepAIIntegration sends a sample text prompt and logs the response.

 

Step 4: Setting Up API Key Security

 

Since your API key is sensitive, it is best not to hardcode it into your files. Instead, store it as an environment variable. If Bolt.new AI supports setting secrets or environment variables via its web interface, add a key called DEEPAIAPIKEY with your API key as its value. The code in deepaiIntegration.ts will automatically use this environment variable.

If you cannot set environment variables directly, ensure that you replace 'YOURDEEPAIAPI_KEY' in the code above with your actual key—though be cautious as this may expose your key.

 

Step 5: Testing the Integration

 

After adding the code snippets to your project, save all files. Then, use the Run button in the Bolt.new AI interface to execute your project. Open the console in the interface to see the log output of the DeepAI API response. If everything is configured correctly, the console should print the JSON returned by DeepAI, including image URL details.

 

By following these steps, you have successfully integrated DeepAI into your Bolt.new AI project using TypeScript.