How to create ChatGPT like generative UI Chat box

This guide will walk you through building a generative UI chat box similar to the one used by ChatGPT. To achieve the smooth, real-time typing effect, we'll be using the powerful ai package developed by Vercel. Understanding How It Works Feel free to skip this section if you'd rather jump straight into the code. When you send a prompt to ChatGPT, the response doesn’t arrive all at once. Instead, it appears gradually like the AI is typing in real-time. This effect is made possible through streaming. Rather than waiting for the entire message to be generated, the server sends the response in small chunks. Meanwhile, the frontend listens for these chunks and updates the UI live, creating that smooth, conversational flow. Under the hood this is possible because the server is sending a ReadableStream. Vercel’s ai package handles this complexity for you, making it easy to implement a real-time chat experience. Pre-requisites Before we dive in, here are a few things you should be familiar with: This guide assumes you have some prior experience with React or Next.js. I’ll focus only on the core logic needed to create a generative UI, so you’re expected to handle the integration and overall app structure on your own. You should have a basic frontend setup ready, preferably using Next.js or React.js. Make sure you have the ai package installed. You can do that by running: npm install ai Backend Let’s start by creating the backend API route that will handle incoming chat messages and stream AI-generated responses back to the frontend. 1. Import Required Dependencies Import the AI model you want to use and the streamText utility from the ai package: import { google } from '@ai-sdk/google'; // You can switch this to any other supported model import { streamText } from 'ai'; 2. Extract Input Data from the Request Extract the latest user message and the chat history from the request body: const { body: { userInput, messages }, } = req; 3. Stream Response from the Model Pass the input and chat history to the model using streamText. This returns a ReadableStream, which we send back to the client: const result = await streamText({ model: google('gemini-2.0-flash-001'), messages: [...messages, { role: 'user', content: userInput }], }); return result.toTextStreamResponse();

Apr 13, 2025 - 10:26

How to create ChatGPT like generative UI Chat box

This guide will walk you through building a generative UI chat box similar to the one used by ChatGPT. To achieve the smooth, real-time typing effect, we'll be using the powerful ai package developed by Vercel.

Understanding How It Works

Feel free to skip this section if you'd rather jump straight into the code.

When you send a prompt to ChatGPT, the response doesn’t arrive all at once. Instead, it appears gradually like the AI is typing in real-time. This effect is made possible through streaming.

Rather than waiting for the entire message to be generated, the server sends the response in small chunks. Meanwhile, the frontend listens for these chunks and updates the UI live, creating that smooth, conversational flow. Under the hood this is possible because the server is sending a ReadableStream.

Vercel’s ai package handles this complexity for you, making it easy to implement a real-time chat experience.

Pre-requisites

Before we dive in, here are a few things you should be familiar with:

This guide assumes you have some prior experience with React or Next.js. I’ll focus only on the core logic needed to create a generative UI, so you’re expected to handle the integration and overall app structure on your own.
You should have a basic frontend setup ready, preferably using Next.js or React.js.
Make sure you have the ai package installed. You can do that by running:

npm install ai

Backend

Let’s start by creating the backend API route that will handle incoming chat messages and stream AI-generated responses back to the frontend.

1. Import Required Dependencies

Import the AI model you want to use and the streamText utility from the ai package:

import { google } from '@ai-sdk/google'; // You can switch this to any other supported model
import { streamText } from 'ai';

2. Extract Input Data from the Request

Extract the latest user message and the chat history from the request body:

const {
  body: { userInput, messages },
} = req;

3. Stream Response from the Model

Pass the input and chat history to the model using streamText. This returns a ReadableStream, which we send back to the client:

const result = await streamText({
  model: google('gemini-2.0-flash-001'),
  messages: [...messages, { role: 'user', content: userInput }],
});

return result.toTextStreamResponse();