How to Build AI-Powered React Apps in 2025

Hashan Lakruwan — Thu, 11 Dec 2025 10:01:54 +0000

In 2025, "AI Integrated" is no longer a feature—it's a requirement.

As a Full-Stack Developer, I've seen a massive shift in client demands. Everyone wants a chatbot, a summarizer, or a generative UI.

Today, I’ll show you how to get started with the Vercel AI SDK to build a streaming chat interface in Next.js 16.

Why Vercel AI SDK?

Building AI apps used to mean dealing with complex WebSocket servers and managing streaming state manually. The Vercel AI SDK handles all of that for you.

Streaming First: Built-in support for streaming responses.
Provider Agnostic: Switch between OpenAI, Anthropic, or Mistral easily.
React Hooks: useChat and useCompletion make integration a breeze

Quick Start Guide

Install Dependencies
npm install ai @ai-sdk/openai
Create an API Route
In app/api/chat/route.ts:

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
export const maxDuration = 30;
export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-4o'),
    messages,
  });
  return result.toDataStreamResponse();
}

Build the UI In your component page.tsx:

'use client';
import { useChat } from 'ai/react';
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {messages.map(m => (
        <div key={m.id} className="whitespace-pre-wrap">
          {m.role === 'user' ? 'User: ' : 'AI: '}
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

The "Generative UI" Trend

The next big thing is Generative UI—where the AI doesn't just return text, but returns React Components.

Imagine asking a travel bot for a flight, and instead of text, it renders a clickable Ticket Component. This is the future of UX.

I'm currently experimenting with these patterns on my own projects. If you're interested in advanced Next.js architecture or need a hand with your AI implementation, feel free to check out my work or get in touch:

Check out my portfolio
hashanlakruwan.me

Conclusion
The barrier to entry for building AI apps has never been lower. The real challenge now is building useful UX around them.

What AI features are you building this year? Let me know in the comments! 👇

DEV Community: Hashan Lakruwan

How to Build AI-Powered React Apps in 2025

Why Vercel AI SDK?

The "Generative UI" Trend