AI Integration Guide: Connecting OpenAI API to Your App

Before starting, ensure you have:

First, install the OpenAI SDK:

npm install openai

Then create an API route in Next.js:

// app/api/chat/route.ts

import { OpenAI } from 'openai';

import { NextResponse } from 'next/server';

const openai = new OpenAI({

apiKey: process.env.OPENAI_API_KEY,

});

export async function POST(request: Request) {

const { messages } = await request.json();

const completion = await openai.chat.completions.create({

model: 'gpt-4-turbo-preview',

messages: [

{ role: 'system', content: 'You are a helpful assistant.' },

...messages,

],

temperature: 0.7,

max_tokens: 1000,

});

return NextResponse.json({

message: completion.choices[0].message,

});

}

Create a chat interface:

'use client';

import { useState } from 'react';

export default function Chat() {

const [messages, setMessages] = useState([]);

const [input, setInput] = useState('');

const sendMessage = async () => {

const newMessages = [...messages, { role: 'user', content: input }];

setMessages(newMessages);

const response = await fetch('/api/chat', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ messages: newMessages }),

});

const data = await response.json();

setMessages([...newMessages, data.message]);

setInput('');

};

return (

<div>

{messages.map((m, i) => (

<div key={i}>{m.content}</div>

))}

<input value={input} onChange={(e) => setInput(e.target.value)} />

<button onClick={sendMessage}>Send</button>

</div>

);

}

Never expose your API key in client-side code. Use environment variables:

OPENAI_API_KEY=sk-your-key-here

AI integration is straightforward with the OpenAI SDK. Start with simple implementations and iterate based on your use case.