j0KZ API Integration - Connect to Any Service
🎯 When to Use This Skill
Use when you need to:
- Integrate payment providers (Stripe, PayPal)
- Connect social media APIs (Twitter, Facebook)
- Use cloud services (AWS, Google Cloud)
- Implement OAuth authentication
- Handle webhooks
- Sync data between systems
- Build API clients
⚡ Quick Integration (15 minutes)
WITH MCP (API Designer):
"Create integration client for [API name] with authentication and error handling"
"Generate TypeScript types from this OpenAPI spec"
WITHOUT MCP - Universal Pattern:
// The Universal API Client Pattern
class APIClient {
constructor(config) {
this.baseURL = config.baseURL;
this.headers = {
'Content-Type': 'application/json',
...config.headers
};
this.timeout = config.timeout || 30000;
this.retries = config.retries || 3;
}
async request(endpoint, options = {}) {
const url = `${this.baseURL}${endpoint}`;
try {
// 1. Add authentication
const headers = await this.authenticate(options);
// 2. Make request with timeout
const response = await this.fetchWithTimeout(url, {
...options,
headers: { ...this.headers, ...headers }
});
// 3. Handle response
return await this.handleResponse(response);
} catch (error) {
// 4. Retry logic
if (this.shouldRetry(error) && this.retries > 0) {
this.retries--;
return this.request(endpoint, options);
}
throw this.handleError(error);
}
}
}
📚 API Integration Patterns
1. Authentication Types
API Key Authentication
class APIKeyClient {
constructor(apiKey) {
this.apiKey = apiKey;
}
async authenticate() {
return {
// Header authentication
'X-API-Key': this.apiKey,
// Or query parameter
// params: { api_key: this.apiKey }
};
}
}
// Usage
const client = new APIKeyClient(process.env.API_KEY);
OAuth 2.0 Flow
class OAuth2Client {
constructor(config) {
this.clientId = config.clientId;
this.clientSecret = config.clientSecret;
this.redirectUri = config.redirectUri;
this.tokenEndpoint = config.tokenEndpoint;
}
// Step 1: Get authorization URL
getAuthorizationUrl(state) {
const params = new URLSearchParams({
client_id: this.clientId,
redirect_uri: this.redirectUri,
response_type: 'code',
state: state,
scope: 'read write'
});
return `${this.authEndpoint}?${params}`;
}
// Step 2: Exchange code for token
async getAccessToken(code) {
const response = await fetch(this.tokenEndpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
grant_type: 'authorization_code',
code: code,
client_id: this.clientId,
client_secret: this.clientSecret,
redirect_uri: this.redirectUri
})
});
const data = await response.json();
return {
accessToken: data.access_token,
refreshToken: data.refresh_token,
expiresIn: data.expires_in
};
}
// Step 3: Refresh token when expired
async refreshAccessToken(refreshToken) {
const response = await fetch(this.tokenEndpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
grant_type: 'refresh_token',
refresh_token: refreshToken,
client_id: this.clientId,
client_secret: this.clientSecret
})
});
return await response.json();
}
}
JWT Bearer Token
class JWTClient {
constructor(secret) {
this.secret = secret;
}
generateToken(payload) {
const jwt = require('jsonwebtoken');
return jwt.sign(payload, this.secret, {
expiresIn: '1h',
algorithm: 'HS256'
});
}
async authenticate() {
const token = this.generateToken({
sub: this.userId,
iat: Math.floor(Date.now() / 1000)
});
return {
'Authorization': `Bearer ${token}`
};
}
}
2. Error Handling & Retries
class ResilientAPIClient {
constructor() {
this.maxRetries = 3;
this.baseDelay = 1000; // 1 second
}
async requestWithRetry(fn, retries = this.maxRetries) {
try {
return await fn();
} catch (error) {
if (retries === 0 || !this.isRetryable(error)) {
throw this.enhanceError(error);
}
const delay = this.calculateBackoff(this.maxRetries - retries);
await this.sleep(delay);
return this.requestWithRetry(fn, retries - 1);
}
}
isRetryable(error) {
// Retry on network errors and 5xx status codes
const retryableStatuses = [408, 429, 500, 502, 503, 504];
return (
error.code === 'ECONNRESET' ||
error.code === 'ETIMEDOUT' ||
retryableStatuses.includes(error.statusCode)
);
}
calculateBackoff(attempt) {
// Exponential backoff with jitter
const exponentialDelay = this.baseDelay * Math.pow(2, attempt);
const jitter = Math.random() * 1000;
return exponentialDelay + jitter;
}
enhanceError(error) {
// Add context to errors
return {
...error,
timestamp: new Date().toISOString(),
context: {
endpoint: error.config?.url,
method: error.config?.method,
requestId: error.config?.headers?.['X-Request-ID']
},
suggestion: this.getErrorSuggestion(error)
};
}
getErrorSuggestion(error) {
const suggestions = {
401: 'Check API credentials',
403: 'Verify permissions/scopes',
404: 'Check endpoint URL',
429: 'Implement rate limiting',
500: 'API server error - contact support',
ECONNREFUSED: 'Check if API is accessible'
};
return suggestions[error.code] || suggestions[error.statusCode] || 'Unknown error';
}
sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
}
3. Rate Limiting
class RateLimitedClient {
constructor(requestsPerSecond = 10) {
this.queue = [];
this.processing = false;
this.interval = 1000 / requestsPerSecond;
this.lastRequestTime = 0;
}
async request(fn) {
return new Promise((resolve, reject) => {
this.queue.push({ fn, resolve, reject });
this.process();
});
}
async process() {
if (this.processing || this.queue.length === 0) return;
this.processing = true;
while (this.queue.length > 0) {
const timeSinceLastRequest = Date.now() - this.lastRequestTime;
const timeToWait = Math.max(0, this.interval - timeSinceLastRequest);
if (timeToWait > 0) {
await this.sleep(timeToWait);
}
const { fn, resolve, reject } = this.queue.shift();
try {
const result = await fn();
resolve(result);
} catch (error) {
reject(error);
}
this.lastRequestTime = Date.now();
}
this.processing = false;
}
sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
}
// Usage
const rateLimited = new RateLimitedClient(5); // 5 requests per second
await rateLimited.request(() => fetch('/api/endpoint'));
4. Webhook Handling
class WebhookHandler {
constructor(secret) {
this.secret = secret;
this.handlers = new Map();
}
// Register webhook endpoint
register(app) {
app.post('/webhooks/:provider', express.raw({ type: '*/*' }),
(req, res) => this.handle(req, res)
);
}
async handle(req, res) {
try {
// 1. Verify signature
if (!this.verifySignature(req)) {
return res.status(401).json({ error: 'Invalid signature' });
}
// 2. Parse event
const event = JSON.parse(req.body);
// 3. Idempotency check
if (await this.isDuplicate(event.id)) {
return res.status(200).json({ status: 'already_processed' });
}
// 4. Process event
await this.processEvent(event);
// 5. Store event ID
await this.storeEventId(event.id);
res.status(200).json({ status: 'success' });
} catch (error) {
console.error('Webhook error:', error);
res.status(500).json({ error: 'Processing failed' });
}
}
verifySignature(req) {
const crypto = require('crypto');
// Example: Stripe signature verification
const signature = req.headers['stripe-signature'];
const payload = req.body;
const hmac = crypto.createHmac('sha256', this.secret);
hmac.update(payload);
const expectedSignature = hmac.digest('hex');
return crypto.timingSafeEqual(
Buffer.from(signature),
Buffer.from(expectedSignature)
);
}
async isDuplicate(eventId) {
// Check if event already processed
// Use database or cache
return await redis.exists(`webhook:${eventId}`);
}
async storeEventId(eventId) {
// Store with TTL to prevent infinite growth
await redis.setex(`webhook:${eventId}`, 86400, '1'); // 24 hours
}
async processEvent(event) {
const handler = this.handlers.get(event.type);
if (!handler) {
console.warn(`No handler for event type: ${event.type}`);
return;
}
await handler(event);
}
on(eventType, handler) {
this.handlers.set(eventType, handler);
}
}
// Usage
const webhook = new WebhookHandler(process.env.WEBHOOK_SECRET);
webhook.on('payment.succeeded', async (event) => {
await updateOrder(event.data.order_id, 'paid');
});
5. Response Caching
class CachedAPIClient {
constructor(ttl = 300000) { // 5 minutes default
this.cache = new Map();
this.ttl = ttl;
}
async get(endpoint, options = {}) {
const cacheKey = this.getCacheKey(endpoint, options);
// Check cache
const cached = this.cache.get(cacheKey);
if (cached && cached.expires > Date.now()) {
return cached.data;
}
// Fetch fresh data
const data = await this.fetch(endpoint, options);
// Cache response
this.cache.set(cacheKey, {
data,
expires: Date.now() + this.ttl
});
// Cleanup old entries
this.cleanup();
return data;
}
getCacheKey(endpoint, options) {
return `${endpoint}:${JSON.stringify(options)}`;
}
cleanup() {
const now = Date.now();
for (const [key, value] of this.cache.entries()) {
if (value.expires < now) {
this.cache.delete(key);
}
}
}
invalidate(pattern) {
// Invalidate cache entries matching pattern
for (const key of this.cache.keys()) {
if (key.includes(pattern)) {
this.cache.delete(key);
}
}
}
}
🔄 Common API Integrations
Stripe Payment Integration
class StripeIntegration {
constructor(apiKey) {
this.stripe = require('stripe')(apiKey);
}
async createPaymentIntent(amount, currency = 'usd') {
try {
const paymentIntent = await this.stripe.paymentIntents.create({
amount: amount * 100, // Convert to cents
currency,
automatic_payment_methods: {
enabled: true,
},
metadata: {
integration_version: '1.0.0'
}
});
return {
clientSecret: paymentIntent.client_secret,
paymentIntentId: paymentIntent.id
};
} catch (error) {
throw this.handleStripeError(error);
}
}
handleStripeError(error) {
const errors = {
card_declined: 'Your card was declined',
expired_card: 'Your card has expired',
insufficient_funds: 'Insufficient funds',
processing_error: 'Processing error, please try again'
};
return {
message: errors[error.code] || 'Payment failed',
code: error.code,
type: error.type
};
}
}
OpenAI API Integration
class OpenAIIntegration {
constructor(apiKey) {
this.apiKey = apiKey;
this.baseURL = 'https://api.openai.com/v1';
}
async complete(prompt, options = {}) {
const response = await fetch(`${this.baseURL}/completions`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${this.apiKey}`
},
body: JSON.stringify({
model: options.model || 'gpt-3.5-turbo',
messages: [{ role: 'user', content: prompt }],
max_tokens: options.maxTokens || 150,
temperature: options.temperature || 0.7
})
});
if (!response.ok) {
throw new Error(`OpenAI API error: ${response.status}`);
}
const data = await response.json();
return data.choices[0].message.content;
}
}
📊 API Integration Testing
// Mock API for testing
class MockAPIClient {
constructor() {
this.responses = new Map();
this.calls = [];
}
mockResponse(endpoint, response, options = {}) {
const key = `${options.method || 'GET'}:${endpoint}`;
this.responses.set(key, {
response,
delay: options.delay || 0,
error: options.error
});
}
async request(endpoint, options = {}) {
const key = `${options.method || 'GET'}:${endpoint}`;
const mock = this.responses.get(key);
this.calls.push({ endpoint, options, timestamp: Date.now() });
if (!mock) {
throw new Error(`No mock for ${key}`);
}
if (mock.delay) {
await this.sleep(mock.delay);
}
if (mock.error) {
throw mock.error;
}
return mock.response;
}
getCallHistory() {
return this.calls;
}
sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
}
// Usage in tests
describe('API Integration', () => {
let client;
beforeEach(() => {
client = new MockAPIClient();
client.mockResponse('/users', { users: [] });
});
test('should fetch users', async () => {
const result = await client.request('/users');
expect(result.users).toEqual([]);
expect(client.getCallHistory()).toHaveLength(1);
});
});
🎯 Integration Best Practices
Environment Configuration
// config/api.js
const config = {
development: {
baseURL: 'https://sandbox.api.example.com',
timeout: 30000,
retries: 3
},
production: {
baseURL: 'https://api.example.com',
timeout: 10000,
retries: 5
}
};
export default config[process.env.NODE_ENV || 'development'];
Logging & Monitoring
class MonitoredAPIClient {
async request(endpoint, options) {
const startTime = Date.now();
const requestId = this.generateRequestId();
try {
console.log(`[${requestId}] API Request: ${endpoint}`);
const response = await this.makeRequest(endpoint, options);
const duration = Date.now() - startTime;
console.log(`[${requestId}] Success: ${duration}ms`);
// Send metrics
this.metrics.record('api.request', {
endpoint,
duration,
status: response.status,
success: true
});
return response;
} catch (error) {
const duration = Date.now() - startTime;
console.error(`[${requestId}] Error: ${error.message} (${duration}ms)`);
// Send error metrics
this.metrics.record('api.error', {
endpoint,
duration,
error: error.code,
success: false
});
throw error;
}
}
generateRequestId() {
return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
}
}
💡 Quick Reference
// Universal API client initialization
const api = new APIClient({
baseURL: process.env.API_BASE_URL,
headers: {
'X-API-Version': '2.0'
},
timeout: 10000,
retries: 3,
cache: true,
rateLimit: 10 // requests per second
});
// Make requests
const users = await api.get('/users');
const user = await api.post('/users', { name: 'John' });
const updated = await api.put('/users/1', { name: 'Jane' });
const deleted = await api.delete('/users/1');
// Handle webhooks
api.onWebhook('user.created', async (event) => {
await processNewUser(event.data);
});
Remember: Good API integration is invisible to users but crucial for developers! 🔌