GPT-4OpenAIAPITutorialJavaScript
Getting Started with GPT-4 API: Complete Developer Guide
Learn how to integrate GPT-4 API into your applications with practical examples, error handling, and best practices for production use.
AI4Dev Team
January 15, 2024
5 min read
Getting Started with GPT-4 API: Complete Developer Guide
The GPT-4 API has revolutionized how developers can integrate advanced language capabilities into their applications. This comprehensive guide will walk you through everything you need to know to get started with GPT-4 API integration.
Prerequisites
Before diving into GPT-4 API integration, ensure you have:
- Node.js 18+ installed
- An OpenAI account with API access
- Basic understanding of REST APIs
- Familiarity with JavaScript/TypeScript
Setting Up Your Environment
First, let's set up a new project and install the necessary dependencies:
bash
mkdir gpt4-api-demo
cd gpt4-api-demo
npm init -y
npm install openai dotenv
npm install -D @types/node typescript ts-node
Create a .env file in your project root:
env
OPENAI_API_KEY=your_api_key_here
Basic GPT-4 API Integration
Here's a simple example to get you started:
typescript
import OpenAI from 'openai';
import dotenv from 'dotenv';
dotenv.config();
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
async function generateResponse(prompt: string) {
try {
const completion = await openai.chat.completions.create({
model: "gpt-4",
messages: [
{
role: "user",
content: prompt,
},
],
max_tokens: 150,
temperature: 0.7,
});
return completion.choices[0].message.content;
} catch (error) {
console.error('Error calling GPT-4 API:', error);
throw error;
}
}
// Usage example
async function main() {
const prompt = "Explain the concept of async/await in JavaScript";
const response = await generateResponse(prompt);
console.log('GPT-4 Response:', response);
}
main();
Understanding API Parameters
Key Parameters Explained
- model: Specify "gpt-4" or "gpt-4-turbo" for the latest version
- messages: Array of conversation messages with roles (system, user, assistant)
- max_tokens: Maximum number of tokens to generate (1 token ≈ 4 characters)
- temperature: Controls randomness (0.0 = deterministic, 1.0 = very creative)
- top_p: Alternative to temperature for nucleus sampling
- frequency_penalty: Reduces repetition of tokens based on frequency
- presence_penalty: Reduces repetition of topics
Advanced Usage Patterns
System Messages for Context
Use system messages to set the behavior and context:
typescript
const completion = await openai.chat.completions.create({
model: "gpt-4",
messages: [
{
role: "system",
content: "You are a helpful coding assistant that provides clear, concise explanations with practical examples."
},
{
role: "user",
content: "How do I implement rate limiting in Express.js?"
}
]
});
Streaming Responses
For real-time applications, use streaming:
typescript
async function streamResponse(prompt: string) {
const stream = await openai.chat.completions.create({
model: "gpt-4",
messages: [{ role: "user", content: prompt }],
stream: true,
});
for await (const chunk of stream) {
const content = chunk.choices[0]?.delta?.content || '';
process.stdout.write(content);
}
}
Error Handling Best Practices
Implement robust error handling for production applications:
typescript
import { OpenAI } from 'openai';
async function safeApiCall(prompt: string, retries = 3) {
for (let attempt = 1; attempt <= retries; attempt++) {
try {
const completion = await openai.chat.completions.create({
model: "gpt-4",
messages: [{ role: "user", content: prompt }],
max_tokens: 150,
});
return completion.choices[0].message.content;
} catch (error) {
if (error instanceof OpenAI.APIError) {
console.log(`API Error (${error.status}): ${error.message}`);
if (error.status === 429 && attempt < retries) {
// Rate limited, wait and retry
await new Promise(resolve => setTimeout(resolve, 1000 * attempt));
continue;
}
}
if (attempt === retries) throw error;
}
}
}
Cost Optimization Strategies
1. Token Management
typescript
import { encoding_for_model } from 'tiktoken';
function countTokens(text: string, model: string = 'gpt-4') {
const encoder = encoding_for_model(model as any);
const tokens = encoder.encode(text);
encoder.free();
return tokens.length;
}
// Estimate cost before API call
const inputTokens = countTokens(prompt);
const estimatedCost = (inputTokens * 0.03 + 150 * 0.06) / 1000; // GPT-4 pricing
console.log(`Estimated cost: $${estimatedCost.toFixed(4)}`);
2. Response Caching
typescript
const responseCache = new Map<string, { response: string; timestamp: number }>();
const CACHE_TTL = 3600000; // 1 hour
async function getCachedResponse(prompt: string) {
const cacheKey = prompt.toLowerCase().trim();
const cached = responseCache.get(cacheKey);
if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
return cached.response;
}
const response = await generateResponse(prompt);
responseCache.set(cacheKey, {
response,
timestamp: Date.now()
});
return response;
}
Production Considerations
Rate Limiting
Implement client-side rate limiting:
typescript
import pQueue from 'p-queue';
const queue = new pQueue({
concurrency: 3, // Max 3 concurrent requests
interval: 1000, // Per second
intervalCap: 5, // Max 5 requests per interval
});
async function queuedApiCall(prompt: string) {
return queue.add(() => generateResponse(prompt));
}
Environment Configuration
typescript
interface Config {
openaiApiKey: string;
model: string;
maxTokens: number;
temperature: number;
}
const config: Config = {
openaiApiKey: process.env.OPENAI_API_KEY || '',
model: process.env.OPENAI_MODEL || 'gpt-4',
maxTokens: parseInt(process.env.MAX_TOKENS || '150'),
temperature: parseFloat(process.env.TEMPERATURE || '0.7'),
};
Testing Your Integration
Create unit tests for your GPT-4 integration:
typescript
import { jest } from '@jest/globals';
describe('GPT-4 Integration', () => {
it('should generate a response for a valid prompt', async () => {
const prompt = 'What is JavaScript?';
const response = await generateResponse(prompt);
expect(response).toBeDefined();
expect(typeof response).toBe('string');
expect(response.length).toBeGreaterThan(0);
});
it('should handle API errors gracefully', async () => {
// Mock API error
jest.spyOn(openai.chat.completions, 'create').mockRejectedValue(
new Error('API Error')
);
await expect(generateResponse('test')).rejects.toThrow('API Error');
});
});
Next Steps
Now that you have a solid foundation with GPT-4 API:
- Explore function calling for structured outputs
- Implement conversation memory for multi-turn chats
- Add content moderation for user-generated inputs
- Scale with proper architecture using queues and workers
- Monitor usage and costs with logging and analytics
Conclusion
The GPT-4 API opens up incredible possibilities for AI-powered applications. By following these best practices for setup, error handling, and optimization, you'll be well-equipped to build robust, production-ready integrations.
Remember to always test thoroughly, monitor your usage, and keep user experience at the forefront of your implementation decisions.
