Web Development

How to Build an LLM-Powered App in Next.js (2025 Guide)

4/18/2025

Mehebub Alam

335

Large Language Models (LLMs) like OpenAI's GPT-4 and Mistral have revolutionized how developers build intelligent applications. Whether you're creating a chatbot, code assistant, or content generator, integrating LLMs into your Next.js project is easier than ever in 2025. In this guide, we’ll walk you through how to create an LLM-powered app using Next.js, with API routes, edge functions, and server-side streaming—all with best practices in mind.

🧠 How to Build an LLM-Powered App in Next.js (2025 Guide)

✨ Introduction

Large Language Models (LLMs) like OpenAI's GPT-4 and Mistral are transforming how we build apps. From chatbots to content generators, integrating LLMs into your Next.js project is easier than ever in 2025.

🛠️ Why Use Next.js for LLM Apps?

Supports serverless and edge functions
Full-stack flexibility (API + frontend)
Built-in SSR, SSG, and streaming
Great DX with App Router and RSC

📦 Prerequisites

Node.js 18+
Next.js app: npx create-next-app@latest
OpenAI API key
Basic React knowledge

🧱 Folder Structure Example

/app
  /chat
    page.tsx           → Chat UI
/api
  /chat
    route.ts           → LLM API handler

🔌 Setting Up the LLM API Route

// /app/api/chat/route.ts
import { NextResponse } from 'next/server'

export async function POST(req: Request) {
  const { messages } = await req.json()

  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
    },
    body: JSON.stringify({
      model: 'gpt-4',
      messages,
      stream: false,
    }),
  })

  const data = await response.json()
  return NextResponse.json({ reply: data.choices[0].message.content })
}

💡 Tip: For best performance, set runtime: 'edge'

💬 Building the Frontend Chat UI

'use client'
import { useState } from 'react'

export default function ChatPage() {
  const [messages, setMessages] = useState([{ role: 'user', content: '' }])
  const [input, setInput] = useState('')

  const sendMessage = async () => {
    const updatedMessages = [...messages, { role: 'user', content: input }]
    setMessages(updatedMessages)
    setInput('')

    const res = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ messages: updatedMessages }),
    })

    const data = await res.json()
    setMessages([...updatedMessages, { role: 'assistant', content: data.reply }])
  }

  return (
    <div className="p-4 max-w-xl mx-auto">
      {messages.map((m, i) => (
        <p key={i}><strong>{m.role}:</strong> {m.content}</p>
      ))}
      <input
        className="border p-2 w-full mt-4"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => e.key === 'Enter' && sendMessage()}
        placeholder="Type a message..."
      />
    </div>
  )
}