Integrating ChatGPT into Your Web App: A Practical Guide

Adding ChatGPT (or any LLM) to your product usually means one thing in practice: calling OpenAI's API from your backend and streaming a response back to the user. Here's a complete, real integration in a Laravel app.

Getting an API Key

Create a key at platform.openai.com and store it in .env — never in your frontend code, and never committed to git:

OPENAI_API_KEY=sk-...

A Basic Chat Completion Call

use Illuminate\Support\Facades\Http;

$response = Http::withToken(config('services.openai.key'))
    ->post('https://api.openai.com/v1/chat/completions', [
        'model' => 'gpt-4o-mini',
        'messages' => [
            ['role' => 'system', 'content' => 'You are a helpful support assistant.'],
            ['role' => 'user', 'content' => $request->input('message')],
        ],
    ]);

return response()->json(['reply' => $response['choices'][0]['message']['content']]);

Streaming for a Better UX

Waiting several seconds for a full response feels slow. Streaming tokens as they generate (the "typing" effect you see in ChatGPT itself) is what makes an AI feature feel responsive:

$response = Http::withToken($key)->withOptions(['stream' => true])
    ->post('https://api.openai.com/v1/chat/completions', [
        'model' => 'gpt-4o-mini',
        'stream' => true,
        'messages' => $messages,
    ]);

foreach ($response->toPsrResponse()->getBody() as $chunk) {
    echo $chunk;
    ob_flush();
    flush();
}

Keeping Conversation Context

The API is stateless — every request must include the FULL message history for the model to "remember" the conversation. Store messages in your database per conversation/session and replay them on each request, trimming older messages once you approach the model's context limit.

Cost and Rate Limiting

• Cache or rate-limit per user — an unthrottled chat endpoint is an unthrottled bill.
• Use a cheaper/faster model (like gpt-4o-mini) for simple tasks; reserve larger models for genuinely complex ones.
• Log token usage per request so you can actually see where cost is going.

That's the entire integration — everything more advanced (function calling, retrieval-augmented generation, agents) builds on this exact same request/response foundation.