Aller au contenu principalAller au pied de page
NeuraAPI
NeuraAPI
Navigation
Guide 10 juin 2024 12 min de lecture

Comment intégrer une API IA dans votre application en 6 étapes

Partager :

Intégrer l'IA dans votre application n'a jamais été aussi simple. Suivez ce guide pas à pas.

Ce que vous allez apprendre

  • Créer un compte NeuraAPI
  • Installer et configurer le SDK
  • Appeler les endpoints IA
  • Gérer les erreurs
  • Optimiser les performances
  • Déployer en production

Étape 1 : Créer votre compte

Rendez-vous sur NeuraAPI et créez votre compte gratuit. napi_. Vous recevrez immédiatement une clé API.

Vous recevez 100 crédits gratuits au démarrage.

Étape 2 : Installer le SDK

Installez le SDK NeuraAPI :

npm install @neuraapi/sdk

Le SDK est entièrement typé avec autocomplete.

Étape 3 : Configurer l'authentification

Créez un fichier de configuration :

// 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,
  }
}

Centralisez votre clé API de manière sécurisée.

Étape 4 : Appeler un endpoint

Créez une route API :

// 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 }
    )
  }
}

Appelez l'endpoint de génération de texte. zod: Le SDK gère automatiquement la mise en forme.

Étape 5 : Gérer les erreurs

Ajoutez la gestion des erreurs : fetch. Prévoyez des messages d'erreur clairs pour vos utilisateurs.

// 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 aria-label="Décrivez ce que vous voulez générer..."
        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 : Déployer

Déployez votre application sur Vercel ou votre hébergeur préféré.

// 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

Sécurisez votre clé API

Ne jamais exposer votre clé API côté client. Utilisez toujours des routes API serveur.

Mettez en place le rate limiting

Limitez le nombre de requêtes par utilisateur pour éviter les abus et contrôler vos coûts.

Mettez en cache les réponses

Pour les prompts identiques, mettez en cache les réponses pour réduire la latence et les coûts.

Gérez les erreurs gracieusement

Prévoyez des messages d'erreur clairs pour les utilisateurs en cas de rate limit ou d'indisponibilité de l'API.

Comparaison

Comparé aux autres solutions, NeuraAPI offre le meilleur rapport qualité-prix pour intégrer l'IA dans vos projets.

  • SDK TypeScript SDK TypeScript prêt à l'emploi
  • Multi-endpoints 8+ endpoints IA
  • Gratuit pour commencer 100 crédits gratuits/mois
  • Support réactif Support prioritaire

Conclusion

Intégrer une API IA dans votre application n'a jamais été aussi simple. Avec NeuraAPI et ces 6 étapes, vous pouvez offrir des fonctionnalités d'IA puissantes.

Commencez gratuitement dès aujourd'hui et découvrez comment l'IA peut transformer votre projet.

Commencer maintenant

Créez votre compte gratuit et obtenez 100 crédits pour commencer.