# How to Integrate Bolt.new with DeepAI

- Tool: Bolt.new
- Difficulty: Intermediate
- Time required: 15 minutes
- Last updated: April 2026

## TL;DR

To use DeepAI with Bolt.new, prompt Bolt to create an API route that calls DeepAI's REST endpoints via HTTP POST with your API key in an api-key header. DeepAI requires no SDK — just fetch calls with multipart/form-data for image operations and JSON for text endpoints. Store your key in .env as DEEPAI_API_KEY. All outbound API calls work in Bolt's WebContainer during development — no deployment required to test image generation and style transfer.

## Add Quick AI Features to Your Bolt.new App with DeepAI's Simple REST API

DeepAI offers one of the most approachable AI APIs available — there is no SDK to install, no complex authentication flow, and no elaborate request structure. Every endpoint accepts a POST request with an api-key header and a body containing either image data or text parameters. The response always includes an output_url pointing to the generated image or an output field with the text result. This simplicity makes DeepAI an excellent choice for quickly adding AI capabilities to Bolt.new apps without the learning curve of larger AI platforms.

DeepAI's feature set covers three main categories. Image generation: the text-to-image endpoint converts text descriptions into images, and you can choose from different artistic styles. Image manipulation: the neural style transfer endpoint applies the artistic style of one image to the content of another, and the background remover extracts subjects from backgrounds. Text analysis: the text summarization endpoint condenses long articles into brief summaries, and the sentiment analysis endpoint classifies text as positive, negative, or neutral. Each feature is its own endpoint, making it easy to add exactly the capabilities your app needs without a large dependency.

For Bolt.new developers, DeepAI is particularly practical because all operations are outbound API calls — your API route sends a request to DeepAI's servers and receives a response. There are no incoming webhooks or callbacks to configure. The complete integration works in Bolt's WebContainer during development, and the same code works identically after deploying to Netlify or Vercel. The WebContainer limitation (inability to receive incoming connections) does not apply here since DeepAI never POSTs back to your server.

## Before you start

- A DeepAI account at deepai.org (free tier includes limited monthly requests, no credit card required)
- Your DeepAI API key from deepai.org/dashboard after signing up
- A Bolt.new project with React and either Vite (default) or Next.js
- No SDK installation required — DeepAI uses standard HTTP fetch calls
- Optional: Supabase for storing generated images or summaries if you want to cache results

## Step-by-step guide

### 1. Get Your DeepAI API Key

Getting a DeepAI API key is one of the fastest API onboarding processes available. Navigate to deepai.org and click Sign Up. You can register with an email address or sign in with Google. After signup, you are immediately taken to your dashboard at deepai.org/dashboard where your API key is displayed prominently at the top of the page. The API key is a UUID-formatted string that looks like d1b38b3f-0a34-4d88-a50b-xxxxxxxx. Copy it immediately — you will add it to your .env file in the next step. DeepAI's free tier includes a certain number of API calls per month (the exact limit is shown on your dashboard) without requiring payment information. Paid plans are available for higher volumes. Unlike OpenAI or Anthropic, DeepAI does not charge based on tokens or compute units — they have flat per-call pricing for paid plans. One important consideration: DeepAI returns the AI-generated images as output_url values hosted on DeepAI's CDN. These URLs are typically valid for 24-48 hours. If you want to permanently store generated images, download them from the output_url and upload to Supabase Storage or another cloud storage within that window. After the URL expires, the image is no longer accessible from DeepAI's servers. Plan your storage strategy before building image generation features.

**Expected result:** You have your DeepAI API key copied from deepai.org/dashboard, ready to add to your .env file.

### 2. Add API Key to .env

Add your DeepAI API key to the .env file in your Bolt project root. DeepAI uses a single API key for all endpoints — there is no distinction between public and private keys. This key must stay server-side. In Vite projects, environment variables are only exposed to browser code if they have the VITE_ prefix. Do not use VITE_DEEPAI_API_KEY — this would expose your API key in the browser's JavaScript bundle where any visitor could extract it and use it against your quota. Instead, use DEEPAI_API_KEY (no prefix), which is only accessible in server-side code (API routes, server components). The downside of a server-side-only variable in a Vite project is that you cannot call DeepAI directly from browser JavaScript — you must route all DeepAI calls through a server-side API route. This is actually the correct architecture: your API key is protected, and you control which prompts and images users can submit to DeepAI. In a Next.js project, API routes in app/api/ run server-side and can access process.env.DEEPAI_API_KEY without the NEXT_PUBLIC_ prefix. In a Vite project deployed to Netlify or Vercel, serverless functions can also access server-side environment variables. Prompt Bolt to set up the environment variable and create a base utility function that sets the api-key header for all DeepAI requests.

```
// lib/deepai.ts
const DEEPAI_BASE_URL = 'https://api.deepai.org/api';

export async function callDeepAI(endpoint: string, formData: FormData) {
  const response = await fetch(`${DEEPAI_BASE_URL}/${endpoint}`, {
    method: 'POST',
    headers: {
      'api-key': process.env.DEEPAI_API_KEY!,
    },
    body: formData,
  });

  if (!response.ok) {
    const errorText = await response.text();
    throw new Error(`DeepAI error ${response.status}: ${errorText}`);
  }

  return response.json();
}

export async function callDeepAIText(endpoint: string, text: string) {
  const formData = new FormData();
  formData.append('text', text);
  return callDeepAI(endpoint, formData);
}

export async function callDeepAIImage(endpoint: string, imageBuffer: Buffer, filename: string) {
  const formData = new FormData();
  const blob = new Blob([imageBuffer]);
  formData.append('image', blob, filename);
  return callDeepAI(endpoint, formData);
}
```

**Expected result:** DEEPAI_API_KEY is in .env and lib/deepai.ts provides typed utility functions for text, image, and form-based DeepAI calls.

### 3. Build an Image Generation API Route

DeepAI's text-to-image endpoint is at https://api.deepai.org/api/text2img. You POST a form with a text field containing the image description. The response JSON contains an output_url pointing to the generated image hosted on DeepAI's CDN. Generation typically takes 5-15 seconds depending on DeepAI's load. For an interactive generator in your Bolt app, the user submits a prompt from the React frontend, the request goes to your API route, which calls DeepAI and returns the output_url, and the frontend displays the image from that URL. DeepAI also offers style-specific generators as separate endpoints: text2img (general), cute-animal-generator, abstract-painting-generator, old-style-generator, and renaissance-painting-generator. Each has the same request format — just change the endpoint URL. This makes it easy to offer a style dropdown in your UI that maps to different DeepAI endpoints. One important UI consideration: since generation takes up to 15 seconds, always show a loading indicator. A skeleton placeholder the size of the expected image, with a spinner and a message like 'Generating your image...' prevents users from clicking Submit multiple times thinking the first request failed. Disable the submit button while a request is in progress and re-enable it on success or error.

```
// app/api/deepai/generate/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { callDeepAI } from '@/lib/deepai';

const STYLE_ENDPOINTS: Record<string, string> = {
  general: 'text2img',
  cute: 'cute-animal-generator',
  abstract: 'abstract-painting-generator',
  'old-style': 'old-style-generator',
  renaissance: 'renaissance-painting-generator',
};

export async function POST(request: NextRequest) {
  const { prompt, style = 'general' } = await request.json();

  if (!prompt || prompt.trim().length === 0) {
    return NextResponse.json({ error: 'Prompt is required' }, { status: 400 });
  }

  const endpoint = STYLE_ENDPOINTS[style] || 'text2img';

  try {
    const formData = new FormData();
    formData.append('text', prompt.trim());

    const result = await callDeepAI(endpoint, formData);

    if (!result.output_url) {
      return NextResponse.json({ error: 'No image generated' }, { status: 500 });
    }

    return NextResponse.json({ imageUrl: result.output_url });
  } catch (error) {
    const message = error instanceof Error ? error.message : 'Generation failed';
    return NextResponse.json({ error: message }, { status: 500 });
  }
}
```

**Expected result:** Submitting a prompt on the /generate page calls DeepAI and displays the generated image within 5-15 seconds. The image URL loads correctly from DeepAI's CDN.

### 4. Add Style Transfer with Image Uploads

DeepAI's neural-style endpoint applies the artistic style of one image (the style image) to the content of another (the content image). This requires sending two images as multipart/form-data — one as the 'content' field and one as the 'style' field. In a Bolt React app, this means building a UI with two file upload inputs. When the user selects files and submits, the frontend sends both images to your API route as a multipart form POST. The API route reads the files from the request, creates a new FormData, and forwards both images to DeepAI's neural-style endpoint. Handling file uploads in Next.js API routes requires reading the request body carefully. The easiest approach in Next.js App Router is to use request.formData() which parses the incoming multipart body. You then get the File objects from the FormData, read them as ArrayBuffers, and append them to a new FormData for the DeepAI request. DeepAI accepts standard image formats: JPEG, PNG, and WebP. The style transfer process typically takes 10-30 seconds depending on image complexity. Like text-to-image, the response contains an output_url with the style-transferred image. This feature works in Bolt's WebContainer during development — the file uploads are browser-to-server (within the WebContainer) and the API call to DeepAI is outbound, both of which work without any special configuration.

```
// app/api/deepai/style-transfer/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { callDeepAI } from '@/lib/deepai';

export async function POST(request: NextRequest) {
  const incomingForm = await request.formData();
  const contentImage = incomingForm.get('contentImage') as File;
  const styleImage = incomingForm.get('styleImage') as File;

  if (!contentImage || !styleImage) {
    return NextResponse.json(
      { error: 'Both contentImage and styleImage are required' },
      { status: 400 }
    );
  }

  try {
    const deepAIForm = new FormData();
    deepAIForm.append('content', contentImage, contentImage.name);
    deepAIForm.append('style', styleImage, styleImage.name);

    const result = await callDeepAI('neural-style', deepAIForm);

    if (!result.output_url) {
      return NextResponse.json({ error: 'Style transfer failed' }, { status: 500 });
    }

    return NextResponse.json({ imageUrl: result.output_url });
  } catch (error) {
    const message = error instanceof Error ? error.message : 'Style transfer failed';
    return NextResponse.json({ error: message }, { status: 500 });
  }
}
```

**Expected result:** Uploading a content image and a style image on the /style-transfer page generates a new image that combines both. The style-transferred image appears in the result section within 15-30 seconds.

### 5. Add Text Summarization

DeepAI's summarization endpoint is the simplest API call in their catalog — POST a FormData with a single text field and receive a JSON response with an output field containing the summary text. Unlike the image endpoints, the text summarization response returns immediately and the output is a string, not a URL. The endpoint is https://api.deepai.org/api/summarization. This makes summarization easy to add to any content-heavy page in your Bolt app: fetch an article from Supabase, extract the body text, call the summarization endpoint, and display the result. For production use, cache summaries in Supabase alongside the source content — regenerating on every page load wastes API calls and slows the page. Store the summary text in a summary column in your Supabase articles table and only call DeepAI if the summary column is null. This pattern works well with ISR pages: on the first request, generate the summary and save it; subsequent requests serve the cached version. DeepAI also offers a text-generator endpoint for completing or extending text, a sentiment-analysis endpoint (returns positive/negative/neutral with a confidence score), and a language-detector endpoint (identifies which language a text is written in). All text endpoints use the same simple text form field pattern and return immediate JSON responses. All of these work in Bolt's WebContainer during development since they are outbound API calls.

```
// app/api/deepai/summarize/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { callDeepAIText } from '@/lib/deepai';

export async function POST(request: NextRequest) {
  const { text } = await request.json();

  if (!text || text.trim().length < 100) {
    return NextResponse.json(
      { error: 'Text must be at least 100 characters to summarize' },
      { status: 400 }
    );
  }

  // Truncate very long texts to avoid API limits
  const truncatedText = text.length > 10000 ? text.substring(0, 10000) : text;

  try {
    const result = await callDeepAIText('summarization', truncatedText);

    if (!result.output) {
      return NextResponse.json({ error: 'Summarization returned no output' }, { status: 500 });
    }

    return NextResponse.json({ summary: result.output });
  } catch (error) {
    const message = error instanceof Error ? error.message : 'Summarization failed';
    return NextResponse.json({ error: message }, { status: 500 });
  }
}
```

**Expected result:** Clicking 'Summarize Article' on an article page calls DeepAI and displays a 2-3 sentence AI summary in a highlighted box. The summary is cached in Supabase for subsequent page loads.

## Best practices

- Never call DeepAI directly from browser-side JavaScript — always proxy through a server-side API route to protect your API key from extraction
- Cache AI-generated content (summaries, images) in Supabase — each API call consumes your monthly quota and image generation can take 10-15 seconds
- Download and re-host DeepAI image output_url results to your own storage immediately if users need permanent access — DeepAI image URLs expire after approximately 24-48 hours
- Validate and sanitize text inputs before sending to DeepAI — enforce minimum/maximum lengths to avoid unexpected API behavior
- Add loading states for all DeepAI image operations — generation takes 5-30 seconds and users need feedback to know the request is processing
- Implement rate limiting on your API routes if DeepAI features are publicly accessible — without limits, users could exhaust your monthly quota quickly
- Use separate API routes for each DeepAI feature rather than a single generic proxy route — this makes it easier to add feature-specific validation, caching, and error handling

## Use cases

### AI Image Generator Tool

Build a text-to-image generator where users type a description and your app generates an image using DeepAI's text2img endpoint. Show the generated image inline and let users download it or save it to their account. Great for creative tools, content creation apps, and product visualization.

Prompt example:

```
Add an AI image generator to my app at /generate. Create a form with a text prompt input and a Style dropdown (fantasy, surreal, steampunk, baroque). On submit, POST to /api/deepai/generate which calls DeepAI's text2img endpoint with the prompt and style using my DEEPAI_API_KEY from .env. Display the returned output_url as an image below the form. Add a Download button and a loading skeleton while the image is generating. Handle errors by showing the error message below the form.
```

### Artistic Style Transfer Feature

Let users upload a content image and a style image, then generate a new image that has the content of the first image rendered in the artistic style of the second. This works as a creative filter tool — users can make their photos look like famous painting styles or match a brand's visual identity.

Prompt example:

```
Build a style transfer tool at /style-transfer. Create two file upload inputs: one for the 'content image' (the photo to transform) and one for the 'style image' (the artistic style to apply). On submit, POST both images as multipart/form-data to /api/deepai/style-transfer which calls DeepAI's neural-style endpoint. Display the original images side by side and show the style-transferred result below. Add a loading message 'Applying style... this takes about 15 seconds'. Use my DEEPAI_API_KEY from .env.
```

### Auto-Summary for Long-Form Content

Add a one-click 'Summarize' button to any page displaying long articles, reports, or documentation. The button sends the text to DeepAI's summarization endpoint and displays a concise 2-3 sentence summary. Useful for content portals, research tools, and news aggregators.

Prompt example:

```
Add an AI summarization feature to my article pages. For each article displayed, add a 'TL;DR' button below the title. Clicking it POSTs the article body text to /api/deepai/summarize which calls DeepAI's summarization endpoint with the text in the content field. Display the returned summary in a highlighted quote block below the article title. Show a loading spinner while summarizing. Store the summary in Supabase linked to the article ID so it only needs to be generated once.
```

## Troubleshooting

### 'Incorrect API key' error from DeepAI even though the key looks correct

Cause: The api-key header name is incorrect (wrong case or wrong format), the API key was copied with extra whitespace, or the DEEPAI_API_KEY environment variable is not accessible in the API route.

Solution: Verify the header name is exactly 'api-key' (lowercase, hyphenated) — not 'Authorization', not 'x-api-key', and not 'API-Key'. Trim whitespace from the key value before using it. In Next.js, confirm the variable is named DEEPAI_API_KEY (no NEXT_PUBLIC_ prefix) and is accessed via process.env.DEEPAI_API_KEY in an API route, not in browser-side code.

```
// Correct header format
fetch('https://api.deepai.org/api/text2img', {
  method: 'POST',
  headers: { 'api-key': process.env.DEEPAI_API_KEY!.trim() },
  body: formData,
});
```

### Image generation API route returns a CORS error in the browser

Cause: The DeepAI API is being called directly from browser-side React code (useEffect, event handler) instead of through a server-side API route.

Solution: All DeepAI calls must go through your server-side API route, not from browser-side JavaScript. Move the fetch call to your /api/deepai/generate route and call that route from your React component. The server-side route is not subject to browser CORS restrictions.

### Style transfer returns an output_url but the image does not load in the browser

Cause: The output_url has expired (DeepAI images expire after ~24-48 hours), or the image was generated but is still being processed on DeepAI's CDN.

Solution: For recently generated images, wait 5-10 seconds and refresh — DeepAI CDN propagation can be delayed. For expired URLs, regenerate the image. To prevent expiry issues in production, download the image from output_url immediately after generation and store it in Supabase Storage using the anon key's storage upload endpoint, then store the Supabase Storage URL in your database instead of the DeepAI URL.

## Frequently asked questions

### Is DeepAI free to use with Bolt.new?

DeepAI offers a free tier with a limited number of API calls per month — the exact number is visible on your deepai.org/dashboard after signup. No credit card is required for the free tier. Paid plans are available for higher monthly volumes with flat per-call pricing. For building and testing a Bolt.new integration, the free tier is sufficient.

### Why do I need a server-side API route instead of calling DeepAI directly from React?

Calling DeepAI from browser-side JavaScript would expose your API key in the browser's network requests, where any user could extract it using browser developer tools and use it against your quota. Routing all DeepAI calls through a server-side Next.js API route keeps your API key in process.env on the server, where it is never sent to the browser.

### How long does DeepAI image generation take?

Text-to-image generation typically takes 5-15 seconds depending on DeepAI's current server load. Style transfer takes 10-30 seconds. Background removal is faster at 3-8 seconds. Always show a loading indicator to prevent users from thinking the request failed and submitting multiple times. Consider adding a progress message after 10 seconds like 'Still generating, almost done...' to reduce user anxiety.

### Can I use DeepAI in Bolt's WebContainer preview during development?

Yes, completely. DeepAI integration is all outbound API calls from your server-side route to DeepAI's servers — no incoming webhooks or callbacks. The WebContainer supports outbound HTTP requests, so you can test image generation, style transfer, and text summarization during development without deploying. The same code works identically after deploying to Netlify or Vercel.

### How do I permanently store DeepAI-generated images?

DeepAI returns an output_url pointing to an image on their CDN that expires after approximately 24-48 hours. To keep images permanently, immediately fetch the image bytes from the output_url in your API route and upload them to Supabase Storage using the service role key. Store the Supabase Storage public URL in your database instead of the DeepAI URL. This way your images survive DeepAI's CDN expiry.

---

Source: https://www.rapidevelopers.com/bolt-ai-integrations/deepai
© RapidDev — https://www.rapidevelopers.com/bolt-ai-integrations/deepai