How to Integrate ChatGPT into Your App: Complete Developer Guide

npm install openai

// src/lib/openai.ts
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  // Optional: set organization ID
  organization: process.env.OPENAI_ORG_ID,
});

export async function chat(messages: OpenAI.ChatCompletionMessageParam[]) {
  const response = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages,
    temperature: 0.7,
    max_tokens: 4096,
  });
  return response.choices[0].message.content;
}

# .env.local (never commit this file)
OPENAI_API_KEY=sk-proj-xxxxxxxxxxxxxxxxxxxxx
OPENAI_ORG_ID=org-xxxxxxxxxxxxxxxxxxxxx

# Next.js API route (app/api/chat/route.ts)
import { NextRequest, NextResponse } from 'next/server';
import { chat } from '@/lib/openai';

export async function POST(req: NextRequest) {
  const { messages } = await req.json();

  // Validate & sanitize input
  if (!Array.isArray(messages) || messages.length === 0) {
    return NextResponse.json({ error: 'Invalid messages' }, { status: 400 });
  }

  const reply = await chat(messages);
  return NextResponse.json({ reply });
}

// Server: app/api/chat/stream/route.ts
import OpenAI from 'openai';

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export async function POST(req: Request) {
  const { messages } = await req.json();

  const stream = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages,
    stream: true,
  });

  const encoder = new TextEncoder();
  const readable = new ReadableStream({
    async start(controller) {
      for await (const chunk of stream) {
        const text = chunk.choices[0]?.delta?.content || '';
        controller.enqueue(encoder.encode(`data: ${JSON.stringify({ text })}\n\n`));
      }
      controller.enqueue(encoder.encode('data: [DONE]\n\n'));
      controller.close();
    },
  });

  return new Response(readable, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      Connection: 'keep-alive',
    },
  });
}

// Client: hooks/useChat.ts
export function useChat() {
  const [response, setResponse] = useState('');
  const [isStreaming, setIsStreaming] = useState(false);

  const sendMessage = async (messages: Message[]) => {
    setIsStreaming(true);
    setResponse('');

    const res = await fetch('/api/chat/stream', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ messages }),
    });

    const reader = res.body?.getReader();
    const decoder = new TextDecoder();

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

      const chunk = decoder.decode(value);
      const lines = chunk.split('\n').filter(l => l.startsWith('data: '));

      for (const line of lines) {
        const data = line.slice(6);
        if (data === '[DONE]') break;
        const { text } = JSON.parse(data);
        setResponse(prev => prev + text);
      }
    }
    setIsStreaming(false);
  };

  return { response, isStreaming, sendMessage };
}

const tools: OpenAI.ChatCompletionTool[] = [
  {
    type: 'function',
    function: {
      name: 'get_order_status',
      description: 'Look up the status of a customer order by order ID',
      parameters: {
        type: 'object',
        properties: {
          order_id: { type: 'string', description: 'The order ID (e.g., ORD-12345)' },
        },
        required: ['order_id'],
      },
    },
  },
  {
    type: 'function',
    function: {
      name: 'search_products',
      description: 'Search product catalog by query',
      parameters: {
        type: 'object',
        properties: {
          query: { type: 'string' },
          category: { type: 'string', enum: ['electronics', 'clothing', 'home'] },
          max_price: { type: 'number' },
        },
        required: ['query'],
      },
    },
  },
];

// Handle tool calls in a loop
async function handleWithTools(messages: Message[]) {
  let response = await openai.chat.completions.create({
    model: 'gpt-4o', messages, tools, tool_choice: 'auto',
  });

  while (response.choices[0].finish_reason === 'tool_calls') {
    const toolCalls = response.choices[0].message.tool_calls!;
    messages.push(response.choices[0].message);

    for (const call of toolCalls) {
      const result = await executeFunction(call.function.name,
        JSON.parse(call.function.arguments));
      messages.push({
        role: 'tool', tool_call_id: call.id,
        content: JSON.stringify(result),
      });
    }

    response = await openai.chat.completions.create({
      model: 'gpt-4o', messages, tools,
    });
  }
  return response.choices[0].message.content;
}

// Generate embeddings
const embedding = await openai.embeddings.create({
  model: 'text-embedding-3-large',
  input: 'Your document text here...',
  dimensions: 1536, // Reduce dimensions for faster search
});

const vector = embedding.data[0].embedding; // Float array

// Store in Pinecone / pgvector / Supabase
await vectorDB.upsert({
  id: 'doc-123',
  values: vector,
  metadata: { source: 'product-docs', title: 'Setup Guide' },
});

// RAG query flow
async function ragQuery(userQuestion: string) {
  // 1. Embed the question
  const qEmbed = await openai.embeddings.create({
    model: 'text-embedding-3-large',
    input: userQuestion, dimensions: 1536,
  });

  // 2. Search vector DB for relevant chunks
  const results = await vectorDB.query({
    vector: qEmbed.data[0].embedding,
    topK: 5, includeMetadata: true,
  });

  // 3. Build context from retrieved chunks
  const context = results.matches
    .map(m => m.metadata.text).join('\n---\n');

  // 4. Send to ChatGPT with context
  return openai.chat.completions.create({
    model: 'gpt-4o',
    messages: [
      { role: 'system', content: `Answer based on this context:\n${context}` },
      { role: 'user', content: userQuestion },
    ],
  });
}

import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(20, '1 m'), // 20 requests per minute
  analytics: true,
});

// Middleware for rate limiting
export async function POST(req: NextRequest) {
  const ip = req.headers.get('x-forwarded-for') ?? '127.0.0.1';
  const { success, limit, reset, remaining } = await ratelimit.limit(ip);

  if (!success) {
    return NextResponse.json(
      { error: 'Too many requests' },
      { status: 429, headers: {
        'X-RateLimit-Limit': limit.toString(),
        'X-RateLimit-Remaining': remaining.toString(),
        'X-RateLimit-Reset': reset.toString(),
      }},
    );
  }

  // Proceed with OpenAI call...
}

// Retry with exponential backoff for OpenAI errors
async function callWithRetry(fn: () => Promise<any>, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await fn();
    } catch (error: any) {
      if (error.status === 429 || error.status === 500) {
        const delay = Math.pow(2, i) * 1000 + Math.random() * 1000;
        await new Promise(r => setTimeout(r, delay));
        continue;
      }
      throw error;
    }
  }
  throw new Error('Max retries exceeded');
}