Aller au contenu principalAller au pied de page
NeuraAPI
NeuraAPI
Navigation
Guide15 juin 202412 min de lecture

Intégrer une API IA dans votre SaaS en 6 étapes

Partager :

L'intelligence artificielle n'est plus réservée aux grandes entreprises. Avec des API comme NeuraAPI, vous pouvez intégrer des fonctionnalités IA avancées dans votre SaaS en quelques heures.

Prérequis

  • Un projet Next.js, React ou Node.js existant
  • Un compte NeuraAPI (gratuit)
  • Des connaissances de base en TypeScript

Étape 1 : Créer votre compte et récupérer votre clé API

Rendez-vous sur /register et créez votre compte gratuit. Vous recevrez immédiatement une clé API commençant par napi_. Conservez-la précieusement, elle sera utilisée dans tout votre projet.

Vous recevez 100 crédits gratuits au démarrage, suffisants pour tester tous les endpoints de l'API.

Étape 2 : Installer le SDK

Installez le SDK NeuraAPI dans votre projet :

npm install @neuraapi/sdk

Étape 3 : Configurer l'SDK

Créez un fichier lib/ai.ts pour centraliser votre configuration IA :

// 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 generateSEO(topic: string, keywords: string[]) {
  const result = await ai.seo({
    topic,
    keywords,
    maxTokens: 2000,
  })
  return {
    title: result.title,
    metaDescription: result.metaDescription,
    content: result.content,
  }
}

export async function generateCode(description: string, language = 'typescript') {
  const result = await ai.code({
    description,
    language,
  })
  return result.code
}

Étape 4 : Créer une route API

Créez une route API sécurisée qui appellera l'IA :

// app/api/generate/route.ts
import { NextResponse } from 'next/server'
import { generateContent } from '@/lib/ai'
import { auth } from '@/lib/auth'

export async function POST(req: Request) {
  const session = await auth()
  if (!session) {
    return NextResponse.json({ error: 'Non autorisé' }, { status: 401 })
  }

  const { prompt } = await req.json()

  if (!prompt || typeof prompt !== 'string') {
    return NextResponse.json({ error: 'Prompt requis' }, { status: 400 })
  }

  try {
    const content = await generateContent(prompt)
    return NextResponse.json({ content })
  } catch (error) {
    return NextResponse.json({ error: 'Erreur de génération' }, { status: 500 })
  }
}

Étape 5 : Créer le composant Frontend

Créez un composant React pour l'utilisateur :

// 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 handleGenerate = async () => {
    if (!prompt.trim()) return
    setLoading(true)
    setResult('')

    const res = await fetch('/api/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt }),
    })

    const data = await res.json()
    setResult(data.content || data.error)
    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 p-3"
        rows={3}
      />
      <button
        onClick={handleGenerate}
        disabled={loading}
        className="rounded-lg bg-indigo-600 px-6 py-2 text-white"
      >
        {loading ? 'Génération...' : 'Générer'}
      </button>
      {result && (
        <div className="rounded-lg bg-gray-50 p-4">
          <p>{result}</p>
        </div>
      )}
    </div>
  )
}

Étape 6 : Ajouter le rate limiting

Protégez votre API contre les abus en ajoutant un rate limiter :

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

// Utilisation dans la route API :
// if (!rateLimit(session.user.id)) {
//   return NextResponse.json({ error: 'Trop de requêtes' }, { 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.

Conclusion

Intégrer une API IA dans votre SaaS n'a jamais été aussi simple. Avec NeuraAPI et ces 6 étapes, vous pouvez offrir des fonctionnalités d'IA puissantes à vos utilisateurs en quelques heures.

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

Prêt à intégrer l'IA dans votre SaaS ?

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