Intégrer une API IA dans votre application en 5 minutes
Ajouter de l'intelligence artificielle à votre application n'est plus un projet de plusieurs semaines. Avec une API IA comme NeuraAPI, vous pouvez intégrer la génération de texte, l'analyse de sentiment, la classification et bien plus en quelques minutes. Ce tutoriel vous montre comment, avec du code copiable à chaque étape.
Ce que vous allez apprendre
- Installer et configurer le SDK NeuraAPI
- Créer un service IA côté serveur
- Exposer une route API Next.js sécurisée
- Appeler l'IA depuis un composant React
- Ajouter du rate limiting et du caching
- Gérer les erreurs et les quotas
Étape 1 — Créer un compte et obtenir une clé API
Rendez-vous sur NeuraAPI et créez un compte gratuit. Vous recevez immédiatement une clé API commençant par napi_. 100 crédits mensuels sont offerts sans engagement.
Cette clé est votre passeport pour tous les modèles IA : GPT-4, Claude, Mistral, et d'autres. Une seule clé, zéro configuration multiple.
Étape 2 — Installer le SDK (30 secondes)
Le SDK TypeScript officiel rend l'intégration ultra-simple. Une seule dépendance :
npm install @neuraapi/sdkLe SDK est entièrement typé. Vous bénéficiez de l'autocomplétion et de la vérification de types dans votre éditeur. Pas de surprises à l'exécution.
Étape 3 — Créer un service IA côté serveur (1 minute)
Centralisez tous les appels IA dans un seul fichier. C'est plus propre, plus maintenable, et ça facilite le debugging :
// lib/ai.ts
import { NeuraAPI } from '@neuraapi/sdk'
const ai = new NeuraAPI(process.env.NEURA_API_KEY!)
export async function generateContent(prompt: string) {
const result = await ai.generate({
prompt,
maxTokens: 1000,
})
return result.content
}
export async function analyzeSentiment(text: string) {
const result = await ai.analyze({
text,
task: 'sentiment',
})
return {
sentiment: result.sentiment,
confidence: result.confidence,
}
}
export async function classifyText(text: string, categories: string[]) {
const result = await ai.classify({
text,
categories,
})
return {
category: result.category,
scores: result.scores,
}
}Chaque fonction encapsule un type d'opération IA. Votre code reste lisible et testable.
Étape 4 — Créer une route API Next.js (1 minute)
Exposez une route API sécurisée qui servira de proxy entre votre frontend et l'API IA. C'est ici que vous validez les entrées et gérez l'authentification :
// app/api/ai/generate/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { auth } from '@/lib/auth'
import { generateContent } from '@/lib/ai'
import { z } from 'zod'
const schema = z.object({
prompt: z.string().min(1).max(5000),
})
export async function POST(req: NextRequest) {
const session = await auth()
if (!session?.user) {
return NextResponse.json({ error: 'Non autorisé' }, { status: 401 })
}
const body = await req.json()
const parsed = schema.safeParse(body)
if (!parsed.success) {
return NextResponse.json(
{ error: 'Paramètres invalides' },
{ status: 400 }
)
}
try {
const content = await generateContent(parsed.data.prompt)
return NextResponse.json({ content })
} catch (error) {
if (error instanceof Error && error.message.includes('credits')) {
return NextResponse.json(
{ error: 'Crédits épuisés' },
{ status: 402 }
)
}
return NextResponse.json(
{ error: 'Erreur de génération' },
{ status: 500 }
)
}
}Notez la validation avec zod : elle protège votre API contre les entrées malveillantes. Le prompt est limité à 5000 caractères pour éviter les abus.
Étape 5 — Appeler depuis le frontend (30 secondes)
Côté client, appelez votre route API avec un simple fetch. Voici un composant React complet avec states de chargement et gestion d'erreurs :
// components/AIGenerator.tsx
'use client'
import { useState } from 'react'
export function AIGenerator() {
const [prompt, setPrompt] = useState('')
const [result, setResult] = useState('')
const [loading, setLoading] = useState(false)
const [error, setError] = useState('')
const handleGenerate = async () => {
if (!prompt.trim()) return
setLoading(true)
setResult('')
setError('')
try {
const res = await fetch('/api/ai/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt }),
})
const data = await res.json()
if (!res.ok) {
setError(data.error || 'Une erreur est survenue')
return
}
setResult(data.content)
} catch {
setError('Erreur de connexion')
} finally {
setLoading(false)
}
}
return (
<div className="space-y-4">
<textarea
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="Décrivez ce que vous voulez générer..."
className="w-full rounded-lg border border-indigo-800 bg-indigo-950 p-3 text-white"
rows={4}
/>
<button
onClick={handleGenerate}
disabled={loading || !prompt.trim()}
className="rounded-lg bg-indigo-600 px-6 py-2 text-white disabled:opacity-50"
>
{loading ? 'Génération en cours...' : 'Générer'}
</button>
{error && (
<div className="rounded-lg bg-red-900/30 border border-red-800/50 p-3 text-red-300 text-sm">
{error}
</div>
)}
{result && (
<div className="rounded-lg bg-indigo-900/30 border border-indigo-800/50 p-4">
<p className="text-indigo-200 whitespace-pre-wrap">{result}</p>
</div>
)}
</div>
)
}Étape 6 — Ajouter du rate limiting (bonus)
Protégez votre API contre les abus avec un rate limiter simple basé en mémoire. En production, utilisez Redis :
// lib/rate-limit.ts
const requests = new Map<string, number[]>()
export function rateLimit(
key: string,
limit = 10,
windowMs = 60000
) {
const now = Date.now()
const timestamps = requests.get(key) || []
const recent = timestamps.filter(t => now - t < windowMs)
if (recent.length >= limit) {
return false
}
recent.push(now)
requests.set(key, recent)
return true
}
// Dans votre route API :
// if (!rateLimit(session.user.id)) {
// return NextResponse.json(
// { error: 'Trop de requêtes. Réessayez dans 1 minute.' },
// { status: 429 }
// )
// }Bonnes pratiques pour l'intégration IA
Ne jamais exposer la clé API côté client
Utilisez toujours un proxy serveur (route API Next.js). La clé API ne doit jamais figurer dans le code JavaScript envoyé au navigateur. Si elle fuit, n'importe qui peut consommer vos crédits.
Valider les entrées utilisateur
Sanitisez et validez toujours le prompt avec zod ou joi. Limitez la longueur, filtrez les caractères dangereux, et rejetez les entrées suspectes avant qu'elles n'atteignent le modèle IA.
Mettre en cache les réponses
Pour des prompts similaires, mettez en cache les réponses IA. Un cache Redis avec un TTL de 24h réduit les coûts de 60-80% sans impacter la qualité pour la plupart des use cases.
Monitorer les coûts par utilisateur
Trackez la consommation de crédits par utilisateur et par fonctionnalité. Cela vous permet d'identifier les features les plus coûteuses et d'optimiser en conséquence.
Comparaison avec les alternatives
NeuraAPI se distingue des alternatives comme OpenAI ou Anthropic directement par plusieurs points :
- Un seul SDK pour accéder à plusieurs modèles (GPT-4, Claude, Mistral)
- Tarification simplifiée : un crédit = un appel, pas de calcul token complexe
- Points de terminaison dédiés pour chaque tâche (generate, analyze, classify, chat)
- Support en français et documentation en français
Conclusion
En 5 étapes simples, vous avez intégré l'IA dans votre application. La génération de contenu, l'analyse de sentiment et la classification sont maintenant accessibles à vos utilisateurs. Le tout en moins de 5 minutes de code.
NeuraAPI simplifie cette intégration : une seule clé API, un SDK TypeScript, des endpoints documentés. Vous vous concentrez sur votre produit, nous gérons l'infrastructure IA.
Prêt à intégrer l'IA ?
Obtenez votre clé API gratuite et commencez à construire en quelques minutes.