Hands-On Guide: Build an AI Legal Chatbot with Next.js and OpenAI GPT-4o-mini

A chatbot is a software application designed to simulate human-like conversations with users through text or voice interactions. Think of it as a virtual assistant that can answer questions, provide information, or help complete tasks — all through natural language.

Chatbots are everywhere today, from customer support on websites to personal assistants.

In this tutorial, we’ll build an NDA (Non-Disclosure Agreement) review chatbot — a specialized AI assistant that helps you understand legal documents. You’ll be able to upload a contract, then ask questions about its contents. For example, you might ask:

When building a chatbot, choosing the right framework is crucial. Next.js offers powerful features, let's cover some of them that make Next.js a Perfect option for our application:

The OpenAI API gives developers easy access to powerful AI language models without needing to build or train them from scratch. Here are some key advantages:

OpenAI offers several language models, each with different sizes and capabilities:

Each model offers a trade-off between speed, cost, intelligence, and capability.

For this project, we’ll use GPT-4o-mini because:

Open your Command line interface and run the following command npx create-next-app@latest

After installation is done, in the command line, change the directory cd nda-chatbot and run npm run dev

Visit Localhost. You should see something like the following

Let's install the OpenAI API Library. In the command prompt, run the following npm install openai

Go to the OpenAI site and on the left sidebar, get an API key. Copy the key and in the root of the project, create a .env file, and add OPENAI_API_KEY="YourKey" to it.

Now, let's install frontend libraries and dependencies. Install Heroicon by running npm install @heroicons/react

In the project root directory, create a folder called lib And inside it, create a file called openai.ts

and in the app/global.css Remove everything and only add the following to it

In the app folder, add components directory and create the following files in it

In the app directory, change the page.tsx to the following

Here is what you should see on your screen

The first step for our user is to upload a file; until a file is uploaded and we don't have a file ID user can't write anything in the input field. Here is a breakdown of the actions

Now let's build different pieces of our AI Chatbot based on these actions

Change the chatbot component to the following

We added a new state for fileID and modified the text input to show different placeholder text and change read-only behaviour depending on whether the fileID exists or not.

In the app folder, create /api/ai/chatbot a folder and inside the chatbot, create a file called route.tsx

Here we are unpacking formData to get the file, message, and fileID from it. If there is no file ID, we upload the file first using the uploadFile function by passing the file object to it. If there is a file ID, we generate the response using thegenerateResponse function.

OpenAI File API receives a filesystem read stream and stores that in their storage,e so we need to implement a function that

Let's build this function by creating a new folder called utils in the app directory, create a new file called uploadFile.tsx In it with the following content

In this function, we receive the user message and file ID, and pass those to the OpenAI responses API to generate a response for the user input. In the utils directory, create a new file called generateResponse.tsx

Our function uses the file as an input and returns the generated response.

In this section, we are going to use Role playing and Chain of Thoughts as our prompt engineering techniques to generate accurate answers to the user's input. In a new article, we dedicate full effort to prompt engineering and how to debug our prompt using different techniques.

Update the generateResponse.tsx

We defined a system prompt to guide and control the model in responding user's behaviour. Now it's time to give it a try

In this hands-on guide, we built a contract review chatbot using Next.js and OpenAI’s GPT-4o-mini model. You learned how to set up the project, handle file uploads, integrate with the OpenAI Files and Responses APIs, and create a user-friendly chat interface. This chatbot can understand and answer questions about legal documents like NDAs, making complex contract review more accessible.

In our next article, we’ll dive deep into prompt engineering — a crucial technique to improve the chatbot’s accuracy and reduce AI hallucinations. You’ll learn how to craft effective prompts that guide the model to provide precise, reliable answers tailored to your legal use case.

Additionally, future tutorials will explore exciting new features such as listing and managing existing files stored in OpenAI, enhancing user workflows, and expanding the chatbot’s capabilities.

Stay tuned and keep experimenting — the possibilities with AI-powered chatbots are endless!

Here is the project Github Repo