How to Integrate DeepAI with V0

Getting started with DeepAI is simple — the API key is available immediately after signing up with no approval process. Go to deepai.org and click Sign Up. You can sign up with an email address or a Google account. After signing in, navigate to your profile dashboard by clicking your username or profile icon. On the dashboard page, you will see your API Key displayed. Copy this key — it starts with a string of alphanumeric characters and is the only credential you need for all DeepAI endpoints. DeepAI's free tier includes a limited number of API calls per month, which is more than enough for development and testing. If you are building a production app with significant traffic, review the pricing page for paid plan details. DeepAI's API key is a simple Bearer token — every API request must include it in the api-key header. Unlike OAuth-based APIs, there is no token refresh or expiration to manage. Keep the key private by storing it only in environment variables, not in your code.

Use V0 to generate the front-end components for your DeepAI-powered feature. The interface depends on which DeepAI API you are using. For text-to-image generation, you need a text input, a submit button, and an image display area. For text summarization, you need a text area and a results panel. For style transfer, you need two image upload inputs. When prompting V0, describe the exact input parameters and the API endpoint path. For image generation, the input is a single text prompt string. For text processing, the input is a text string. For style transfer or other image APIs, the inputs are image files or image URLs. Ask V0 to handle the asynchronous nature of API calls: include a loading state (spinner or skeleton) while the API call is in progress, since DeepAI's image generation can take 5-15 seconds. Also include an error state for failed API calls and a default placeholder state before the user has generated anything. For image display, ask V0 to generate an img tag that shows the URL returned by your API route. DeepAI's image generation endpoint returns an object with an output_url field — this is the URL of the generated image hosted on DeepAI's CDN.

Create the Next.js API route that proxies requests from your V0 components to DeepAI's API. The route reads your API key from environment variables and formats the request correctly for DeepAI's multipart form data API. DeepAI uses multipart/form-data (not JSON) for most of its endpoints. This is because many endpoints accept image files as binary data. Even for text-only endpoints like text2img, DeepAI still expects form data. In Node.js, you construct this using the FormData web API and append your text or file inputs as fields. The API key is passed in the api-key request header — not as a Bearer token, but directly as the header value. The base URL for all DeepAI APIs is https://api.deepai.org/api/ followed by the endpoint name (e.g., text2img for image generation, summarization for text summarization, neural-style for style transfer). DeepAI's response is a JSON object. For image generation, the response includes an output_url field with the generated image URL. For text endpoints, the response includes an output field with the processed text. Always check that the response status is OK and that the expected field exists before returning to the client. For different DeepAI endpoints, you can create separate API routes (app/api/deepai/generate-image/route.ts, app/api/deepai/summarize/route.ts) or a single generic route that accepts an endpoint parameter. The separate route approach is cleaner and easier to maintain for a V0 project.

1// app/api/deepai/generate-image/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function POST(request: NextRequest) {
5  try {
6    const { text } = await request.json();
7
8    if (!text || text.trim().length === 0) {
9      return NextResponse.json(
10        { error: 'text prompt is required' },
11        { status: 400 }
12      );
13    }
14
15    const formData = new FormData();
16    formData.append('text', text);
17
18    const response = await fetch('https://api.deepai.org/api/text2img', {
19      method: 'POST',
20      headers: {
21        'api-key': process.env.DEEPAI_API_KEY!,
22      },
23      body: formData,
24    });
25
26    if (!response.ok) {
27      const error = await response.text();
28      return NextResponse.json(
29        { error: `DeepAI error: ${error}` },
30        { status: response.status }
31      );
32    }
33
34    const data = await response.json();
35
36    if (!data.output_url) {
37      return NextResponse.json(
38        { error: 'No image generated' },
39        { status: 500 }
40      );
41    }
42
43    return NextResponse.json({ imageUrl: data.output_url });
44  } catch (error) {
45    console.error('DeepAI error:', error);
46    return NextResponse.json(
47      { error: 'Internal server error' },
48      { status: 500 }
49    );
50  }
51}

Your DeepAI API route reads one environment variable: DEEPAI_API_KEY. Add it in Vercel Dashboard → Settings → Environment Variables. Set the key name to DEEPAI_API_KEY and the value to your API key from the DeepAI dashboard. Set the environment scope to Production, Preview, and Development so it works across all your deployment contexts. Do not add the NEXT_PUBLIC_ prefix. The API key must remain server-side only — if it were exposed in the browser bundle, anyone visiting your site could extract it and use your DeepAI quota. For local development, add DEEPAI_API_KEY to your .env.local file in the project root. Next.js automatically loads .env.local variables during local development. Never commit .env.local to Git — V0-generated projects include it in .gitignore by default. After adding the variable, trigger a redeployment by pushing any commit to GitHub. Then test the full flow: submit a prompt in your V0 UI, confirm the API route calls DeepAI, and verify the generated image appears. DeepAI's free tier processes requests quickly, typically within 5-15 seconds for image generation.