OpenAI API integration with website

OpenAI API Integration with Website

OpenAI API provides access to GPT-4o, GPT-4o mini, DALL-E 3, Whisper, and other models. Website integration unlocks capabilities: AI chat with users, automatic content generation, text analysis, audio transcription, and image generation.

Basic Integration

use OpenAI\Client;

$openai = OpenAI::client(config('services.openai.api_key'));

$response = $openai->chat()->create([
    'model'    => 'gpt-4o-mini',
    'messages' => [
        ['role' => 'system', 'content' => 'You are a support assistant for Company X. Respond concisely and directly.'],
        ['role' => 'user',   'content' => $userMessage],
    ],
    'temperature' => 0.3,
    'max_tokens'  => 500,
]);

$answer = $response->choices[0]->message->content;

Streaming Responses

// Streaming for "live typing" effect
Route::get('/api/chat/stream', function (Request $request) {
    $message = $request->query('message');

    return response()->stream(function () use ($message) {
        $openai = OpenAI::client(config('services.openai.api_key'));
        $stream = $openai->chat()->createStreamed([
            'model'    => 'gpt-4o-mini',
            'messages' => [['role' => 'user', 'content' => $message]],
        ]);

        foreach ($stream as $response) {
            $chunk = $response->choices[0]->delta->content ?? '';
            if ($chunk) {
                echo "data: " . json_encode(['content' => $chunk]) . "\n\n";
                ob_flush();
                flush();
            }
        }
        echo "data: [DONE]\n\n";
    }, 200, [
        'Content-Type'  => 'text/event-stream',
        'Cache-Control' => 'no-cache',
    ]);
});

// Frontend: consume SSE stream
async function streamChat(message: string, onChunk: (text: string) => void) {
  const resp = await fetch(`/api/chat/stream?message=${encodeURIComponent(message)}`);
  const reader = resp.body!.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    const lines = decoder.decode(value).split('\n');
    for (const line of lines) {
      if (line.startsWith('data: ') && line !== 'data: [DONE]') {
        const data = JSON.parse(line.slice(6));
        onChunk(data.content);
      }
    }
  }
}

Embeddings for Semantic Search

// Index content
$response = $openai->embeddings()->create([
    'model' => 'text-embedding-3-small',
    'input' => $article->title . "\n" . $article->content,
]);

$embedding = $response->embeddings[0]->embedding;  // vector with 1536 dimensions

// Store in PostgreSQL with pgvector extension
DB::statement(
    'UPDATE articles SET embedding = ? WHERE id = ?',
    [json_encode($embedding), $article->id]
);

// Search by vector similarity
$queryEmbedding = /* embedding of search query */;
$results = DB::select(
    'SELECT *, (embedding <=> ?) AS distance FROM articles ORDER BY distance LIMIT 5',
    [json_encode($queryEmbedding)]
);

Content Moderation

$moderation = $openai->moderations()->create([
    'input' => $userComment,
]);

if ($moderation->results[0]->flagged) {
    $categories = array_filter((array) $moderation->results[0]->categories);
    Log::warning('Moderation flagged content', ['categories' => $categories]);
    throw new ContentModerationException('Comment violates site rules');
}

Image Generation (DALL-E 3)

$image = $openai->images()->create([
    'model'           => 'dall-e-3',
    'prompt'          => $request->prompt,
    'n'               => 1,
    'size'            => '1024x1024',
    'quality'         => 'standard',
    'response_format' => 'url',
]);

$imageUrl = $image->data[0]->url;

Cost Estimation

GPT-4o mini: ~$0.15 / 1M input tokens, $0.60 / 1M output tokens. For a chat with 500 tokens per request — approximately $0.0004 per request. At 10,000 requests per day — ~$4/day.

Timeline

AI chat with streaming: 3–4 days. Semantic search with pgvector: +2 days. Image generation: 1–2 days.