How to Integrate Bolt.new with DeepAI

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.

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.

1// lib/deepai.ts
2const DEEPAI_BASE_URL = 'https://api.deepai.org/api';
3
4export async function callDeepAI(endpoint: string, formData: FormData) {
5  const response = await fetch(`${DEEPAI_BASE_URL}/${endpoint}`, {
6    method: 'POST',
7    headers: {
8      'api-key': process.env.DEEPAI_API_KEY!,
9    },
10    body: formData,
11  });
12
13  if (!response.ok) {
14    const errorText = await response.text();
15    throw new Error(`DeepAI error ${response.status}: ${errorText}`);
16  }
17
18  return response.json();
19}
20
21export async function callDeepAIText(endpoint: string, text: string) {
22  const formData = new FormData();
23  formData.append('text', text);
24  return callDeepAI(endpoint, formData);
25}
26
27export async function callDeepAIImage(endpoint: string, imageBuffer: Buffer, filename: string) {
28  const formData = new FormData();
29  const blob = new Blob([imageBuffer]);
30  formData.append('image', blob, filename);
31  return callDeepAI(endpoint, formData);
32}

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.

1// app/api/deepai/generate/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { callDeepAI } from '@/lib/deepai';
4
5const STYLE_ENDPOINTS: Record<string, string> = {
6  general: 'text2img',
7  cute: 'cute-animal-generator',
8  abstract: 'abstract-painting-generator',
9  'old-style': 'old-style-generator',
10  renaissance: 'renaissance-painting-generator',
11};
12
13export async function POST(request: NextRequest) {
14  const { prompt, style = 'general' } = await request.json();
15
16  if (!prompt || prompt.trim().length === 0) {
17    return NextResponse.json({ error: 'Prompt is required' }, { status: 400 });
18  }
19
20  const endpoint = STYLE_ENDPOINTS[style] || 'text2img';
21
22  try {
23    const formData = new FormData();
24    formData.append('text', prompt.trim());
25
26    const result = await callDeepAI(endpoint, formData);
27
28    if (!result.output_url) {
29      return NextResponse.json({ error: 'No image generated' }, { status: 500 });
30    }
31
32    return NextResponse.json({ imageUrl: result.output_url });
33  } catch (error) {
34    const message = error instanceof Error ? error.message : 'Generation failed';
35    return NextResponse.json({ error: message }, { status: 500 });
36  }
37}

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.

1// app/api/deepai/style-transfer/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { callDeepAI } from '@/lib/deepai';
4
5export async function POST(request: NextRequest) {
6  const incomingForm = await request.formData();
7  const contentImage = incomingForm.get('contentImage') as File;
8  const styleImage = incomingForm.get('styleImage') as File;
9
10  if (!contentImage || !styleImage) {
11    return NextResponse.json(
12      { error: 'Both contentImage and styleImage are required' },
13      { status: 400 }
14    );
15  }
16
17  try {
18    const deepAIForm = new FormData();
19    deepAIForm.append('content', contentImage, contentImage.name);
20    deepAIForm.append('style', styleImage, styleImage.name);
21
22    const result = await callDeepAI('neural-style', deepAIForm);
23
24    if (!result.output_url) {
25      return NextResponse.json({ error: 'Style transfer failed' }, { status: 500 });
26    }
27
28    return NextResponse.json({ imageUrl: result.output_url });
29  } catch (error) {
30    const message = error instanceof Error ? error.message : 'Style transfer failed';
31    return NextResponse.json({ error: message }, { status: 500 });
32  }
33}

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.

1// app/api/deepai/summarize/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { callDeepAIText } from '@/lib/deepai';
4
5export async function POST(request: NextRequest) {
6  const { text } = await request.json();
7
8  if (!text || text.trim().length < 100) {
9    return NextResponse.json(
10      { error: 'Text must be at least 100 characters to summarize' },
11      { status: 400 }
12    );
13  }
14
15  // Truncate very long texts to avoid API limits
16  const truncatedText = text.length > 10000 ? text.substring(0, 10000) : text;
17
18  try {
19    const result = await callDeepAIText('summarization', truncatedText);
20
21    if (!result.output) {
22      return NextResponse.json({ error: 'Summarization returned no output' }, { status: 500 });
23    }
24
25    return NextResponse.json({ summary: result.output });
26  } catch (error) {
27    const message = error instanceof Error ? error.message : 'Summarization failed';
28    return NextResponse.json({ error: message }, { status: 500 });
29  }
30}