"5 AI APIs Every Frontend Dev Should Know in 2026"

🤖 Need text generation / chat?     → OpenAI GPT or Anthropic Claude
👁️ Need to analyze images?          → Google Gemini Vision or OpenAI Vision  
🔍 Need current internet data?      → Perplexity API
🗣️ Need text to speech?             → ElevenLabs API
🎨 Need to generate images?         → Stability AI or DALL-E

Using ChatGPT for image generation when you need quality? 
Wrong tool. Using Stability AI for a chatbot? Also wrong. 😬

Right tool + right job = impressive projects 🎯

// app/api/gpt/route.js

import OpenAI from 'openai'
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })

export async function POST(req) {
  const { prompt, systemPrompt } = await req.json()

  const response = await openai.chat.completions.create({
    model: 'gpt-4o-mini',      // cheap + fast + still great 💰
    // model: 'gpt-4o',        // expensive + best quality
    messages: [
      {
        role: 'system',
        content: systemPrompt || 'You are a helpful assistant.'
      },
      {
        role: 'user',
        content: prompt
      }
    ],
    max_tokens: 1000,
    temperature: 0.7           // 0 = factual, 1 = creative 🎚️
  })

  return Response.json({
    result: response.choices[0].message.content
  })
}

// JSON mode — AI ALWAYS returns valid JSON ✅
const response = await openai.chat.completions.create({
  model: 'gpt-4o-mini',
  response_format: { type: 'json_object' }, // ← the magic line ✨
  messages: [{
    role: 'user',
    content: `Analyze this resume and return JSON with:
    {
      "score": number (0-100),
      "strengths": string[],
      "weaknesses": string[],
      "missingSkills": string[],
      "verdict": "strong" | "average" | "weak"
    }

    Resume: ${resumeText}`
  }]
})

// Parse safely — JSON mode guarantees valid JSON 🔒
const analysis = JSON.parse(response.choices[0].message.content)
console.log(analysis.score) // 78
console.log(analysis.verdict) // "average"

// Send an image URL + question — GPT describes/analyzes it 🖼️
const response = await openai.chat.completions.create({
  model: 'gpt-4o',  // vision needs gpt-4o, not mini
  messages: [{
    role: 'user',
    content: [
      {
        type: 'image_url',
        image_url: { url: imageUrl }
      },
      {
        type: 'text',
        text: 'What UI improvements would you suggest for this app screenshot?'
      }
    ]
  }]
})

// npm install @anthropic-ai/sdk
import Anthropic from '@anthropic-ai/sdk'

const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY
})

export async function POST(req) {
  const { userMessage, documentText } = await req.json()

  const response = await anthropic.messages.create({
    model: 'claude-sonnet-4-6',  // best balance of speed + quality ⚡
    max_tokens: 1024,
    system: `You are an expert document analyzer. 
             Be thorough, specific, and actionable in your feedback.`,
    messages: [
      {
        role: 'user',
        // Claude handles LONG context amazingly well 📄
        content: `Here's the document:\n\n${documentText}

        Now answer this: ${userMessage}`
      }
    ]
  })

  return Response.json({
    result: response.content[0].text
  })
}

// Claude can handle up to 200,000 tokens of context 🤯
// That's roughly 150,000 words — an entire novel!

// Perfect for: 
// - Analyzing entire codebases
// - Summarizing long research papers  
// - Processing full legal documents
// - Understanding complete project specs

const response = await anthropic.messages.create({
  model: 'claude-sonnet-4-6',
  max_tokens: 2000,
  messages: [{
    role: 'user',
    content: `Here is an entire React codebase:\n\n${entireCodebase}

    Find all the performance issues, security vulnerabilities, 
    and suggest architectural improvements.`
    // GPT would struggle here. Claude handles it smoothly. 🎯
  }]
})

// npm install @google/generative-ai
import { GoogleGenerativeAI } from '@google/generative-ai'

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY)
// Get free key at: aistudio.google.com — no credit card 🆓

export async function POST(req) {
  const { prompt } = await req.json()

  // gemini-1.5-flash — fastest + free tier 🚀
  const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' })

  const result = await model.generateContent(prompt)
  const response = await result.response
  const text = response.text()

  return Response.json({ result: text })
}

// Analyze image + text together — completely free on free tier! 🤯
export async function POST(req) {
  const formData = await req.formData()
  const imageFile = formData.get('image')
  const question = formData.get('question')

  // Convert image to base64
  const imageBytes = await imageFile.arrayBuffer()
  const base64Image = Buffer.from(imageBytes).toString('base64')

  const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' })

  const result = await model.generateContent([
    {
      inlineData: {
        data: base64Image,
        mimeType: imageFile.type
      }
    },
    question  // Ask anything about the image 🎯
  ])

  return Response.json({ result: result.response.text() })
}

// No SDK needed — simple fetch call! 🎉
export async function POST(req) {
  const { text, voiceId } = await req.json()

  const response = await fetch(
    `https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`,
    {
      method: 'POST',
      headers: {
        'xi-api-key': process.env.ELEVENLABS_API_KEY,
        'Content-Type': 'application/json',
        'Accept': 'audio/mpeg'
      },
      body: JSON.stringify({
        text: text,
        model_id: 'eleven_monolingual_v1',
        voice_settings: {
          stability: 0.5,        // 0 = variable, 1 = stable 🎚️
          similarity_boost: 0.75  // how close to original voice
        }
      })
    }
  )

  // Return audio as blob 🔊
  const audioBuffer = await response.arrayBuffer()

  return new Response(audioBuffer, {
    headers: { 'Content-Type': 'audio/mpeg' }
  })
}

// Frontend — generate and play audio 🔊
const generateAndPlay = async (text: string) => {
  setLoading(true)

  const response = await fetch('/api/speech', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      text,
      voiceId: 'EXAVITQu4vr4xnSDxMaL' // "Bella" voice — natural female 🎤
      // More voices at: elevenlabs.io/voice-library
    })
  })

  // Convert response to audio blob and play it 🎵
  const audioBlob = await response.blob()
  const audioUrl = URL.createObjectURL(audioBlob)
  const audio = new Audio(audioUrl)
  audio.play()

  setLoading(false)
}

return (
  <button
    onClick={() => generateAndPlay('Hello! This is AI-generated speech.')}
    disabled={loading}
    className="px-6 py-3 bg-orange-500 text-white rounded-lg"
  >
    {loading ? '🎤 Generating...' : '🔊 Listen'}
  </button>
)

// Perplexity API — identical format to OpenAI! Easy to learn 🎯
export async function POST(req) {
  const { question } = await req.json()

  const response = await fetch('https://api.perplexity.ai/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.PERPLEXITY_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      model: 'llama-3.1-sonar-large-128k-online', // the "online" = searches web 🌐
      messages: [
        {
          role: 'system',
          content: 'Be precise and cite your sources. Today\'s date is important for context.'
        },
        {
          role: 'user',
          content: question
        }
      ],
      return_citations: true,  // ← returns source URLs! 📎
      return_images: false
    })
  })

  const data = await response.json()

  return Response.json({
    answer: data.choices[0].message.content,
    citations: data.citations || []  // source links! 📎
  })
}

// Show AI answer + where it got the info from 📎
{answer && (
  <div className="space-y-4">
    <div className="p-4 bg-blue-50 rounded-lg">
      <p>{answer}</p>
    </div>

    {citations.length > 0 && (
      <div>
        <p className="text-sm text-gray-500 mb-2">📎 Sources:</p>
        <div className="space-y-1">
          {citations.map((url, i) => (
            <a
              key={i}
              href={url}
              target="_blank"
              rel="noopener noreferrer"
              className="block text-sm text-blue-600 hover:underline truncate"
            >
              {i + 1}. {url}
            </a>
          ))}
        </div>
      </div>
    )}
  </div>
)}

Tech stack:
├── Next.js 14 (App Router)
├── 5 AI APIs integrated
├── TypeScript throughout
├── Deployed on Vercel
└── README with architecture diagram

Interview value: PRICELESS 💎

Week 1: OpenAI GPT
→ Build the text explainer from last post
→ Add JSON mode for structured output
→ Deploy + add to portfolio

Week 2: Gemini (it's FREE — no excuses 😄)  
→ Rebuild something with Gemini
→ Add image analysis feature
→ Compare output quality

Week 3: ElevenLabs
→ Add voice to your existing project
→ Demo it in your next interview
→ Watch their reaction 😄

Week 4: Claude + Perplexity
→ Add long document analysis
→ Add real-time search feature
→ Now you know all 5 ✅