DEV Community

Cover image for How to Build AI-Powered React Apps in 2025
Hashan Lakruwan
Hashan Lakruwan

Posted on

How to Build AI-Powered React Apps in 2025

#webdev #ai #react #nextjs

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

  1. Install Dependencies
    npm install ai @ai-sdk/openai

  2. 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();
}
Enter fullscreen mode Exit fullscreen mode
  1. 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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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! 👇

Top comments (0)