Build an AI-Powered App with the OpenAI API: Step-by-Step Tutorial

The OpenAI API gives you programmatic access to GPT-4o and other models. In this tutorial, you will build a streaming AI chatbot with Next.js from scratch — covering API setup, streaming responses, and deployment.

Getting Started with the OpenAI API

The OpenAI API provides programmatic access to GPT-4o, GPT-4o mini, DALL-E 3, Whisper (speech-to-text), and TTS (text-to-speech). You pay per token — roughly $0.15 per million input tokens for GPT-4o mini and $5 per million for GPT-4o. For most projects, GPT-4o mini provides 90 percent of the capability at 3 percent of the cost.

Create an account at platform.openai.com, navigate to API keys, and generate a new secret key. Store it as OPENAI_API_KEY in your environment variables — never hardcode it in your source code or commit it to Git. Install the SDK with npm install openai for JavaScript or pip install openai for Python.

Understanding the Chat Completions API

The core API call takes an array of messages, each with a role (system, user, or assistant) and content. The system message sets the AI's behavior and persona. User messages are what the human sends. Assistant messages are previous AI responses, which you include to maintain conversation history.

The response includes the generated message content, token usage (input and output counts for billing calculation), finish reason (stop means it completed normally, length means it hit the token limit), and the model used. Always log token usage in development to estimate production costs before launch.

Building a Streaming Chatbot with Next.js

Streaming shows responses word by word as they are generated rather than waiting for the full response. This dramatically improves perceived performance — users see the AI thinking rather than staring at a spinner. In Next.js, create an API route that calls the OpenAI API with stream: true and pipes the response directly to the client.

The frontend connects to this API route using the Vercel AI SDK (npm install ai), which handles streaming, parsing, and state management with React hooks. The useChat hook provides messages, input, handleInputChange, and handleSubmit — everything you need for a complete chatbot UI in about 20 lines of component code.

Adding Function Calling and Tool Use

Function calling lets the AI call your application's functions — fetching weather data, searching a database, looking up a user's account. Define functions with their name, description, and parameter schema. When the AI decides to call a function, it returns a structured object instead of plain text. Your code executes the function and returns the result, which the AI uses to formulate its final response.

This pattern is how AI agents work — the AI reasons about what information it needs, calls tools to get it, synthesizes the results, and responds. Tool calling transforms a simple chatbot into a capable AI assistant that can take real actions in your application. Add moderation using OpenAI's free moderation endpoint to flag harmful content before it reaches your application.

Share your thoughts about this article.

Claude AI vs ChatGPT vs Gemini: Which AI Assistant Wins in 2025?

The AI assistant landscape is more competitive than ever. Claude, ChatGPT, and Gemini each excel in ...

Prompt Engineering: 20 Advanced Techniques to 10x Your AI Productivity

The difference between a mediocre and exceptional AI output is usually the prompt. These 20 proven t...

Never Miss a Tech Article

Join thousands of developers getting the latest AI, coding, and tech tutorials delivered to their inbox every week.

CodeWithBeast is your hub for AI, coding, and the latest in tech. Empowering developers, creators, and learners worldwide.

Get in touch

Our Social Network

Build an AI-Powered App with the OpenAI API: Step-by-Step Tutorial