Building an AI Chat Application

Build the basics of an AI chat application, including the frontend chat UI, a backend endpoint, and conversation history.

Let's think about it this way for a second

A chat app is more than just a message input box. It involves UI state, backend authentication, conversation history, loading/error state, and content safety. Keep the key on the server — the browser should only ever call your own API route.

Let's connect this to everyday life

For the first version, only send a small amount of history and cap the message length. You can add streaming, database-backed history, and moderation later. Get a small, working vertical slice done first.

• Message input and submit state
• Server-side AI route
• Loading, error, and empty-response states
• History limit and privacy notice

Let's try it hands-on together

import OpenAI from "openai";

const client = new OpenAI();

export async function POST(request: Request) {
  const { message } = await request.json();
  if (typeof message !== "string" || message.length > 2000) {
    return Response.json({ error: "Invalid message" }, { status: 400 });
  }
  const result = await client.responses.create({
    model: "gpt-5.6",
    input: message,
  });
  return Response.json({ answer: result.output_text });
}

The frontend sends a POST request and can display the AI answer JSON.

OpenAI API Quickstart — OpenAI

OpenAI — Text generation — OpenAI