NeuraAPI
Tutoriel15 Juin 202412 min de lecture

Comment intégrer l'IA dans votre SaaS en 30 minutes

Partager :

Ajouter de l'intelligence artificielle à votre SaaS n'est plus réservé aux grandes entreprises. Avec les bonnes APIs, vous pouvez intégrer la génération de texte, le SEO automatisé et la génération de code en quelques minutes. Ce tutoriel vous montre exactement comment faire, avec du code copiable.

Prérequis

  • Un projet Next.js 14+ (App Router)
  • Une clé API NeuraAPI (gratuite sur /register)
  • Node.js 18+ installé

Étape 1 — Créer votre compte et obtenir une clé API

Rendez-vous sur /register et créez un compte gratuit. Vous recevez immédiatement une clé API commençant par napi_. 100 crédits mensuels sont offerts.

Conservez cette clé en lieu sûr. Elle sera utilisée dans tous vos appels API.

Étape 2 — Installer le SDK

Le SDK TypeScript rend l'intégration ultra-simple. Une seule dépendance, zéro configuration.

npm install @neuraapi/sdk

Étape 3 — Créer un service IA côté serveur

Créez un fichier lib/ai.ts qui encapsule les appels API. C'est le point central de votre intégration.

// 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 Next.js

Exposez une route API dans votre SaaS. Cette route sera appelée par votre frontend pour générer du contenu.

// 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 — Appeler depuis le frontend

Côté client, appelez votre route API avec un simple fetch. Voici un composant React complet.

// 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
        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 un rate limiting

Protégez votre API contre les abus. Voici un middleware simple qui limite les appels par utilisateur.

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

Ne jamais exposer la clé API côté client

Utilisez toujours un proxy serveur (route API Next.js) pour les appels à l'API IA. La clé API ne doit jamais figurer dans le code JavaScript envoyé au navigateur.

Valider les entrées utilisateur

Sanitisez et validez toujours le prompt envoyé par l'utilisateur. Limitez la longueur, filtrez les caractères dangereux, et utilisez zod ou joi pour la validation.

Mettre en cache les réponses

Pour les prompts similaires, mettez en cache les réponses IA. Un cache Redis avec un TTL de 24h réduit considérablement les coûts sans impacter la qualité.

Monitorer les coûts

Trackez la consommation de crédits par utilisateur et par fonctionnalité. Les APIs IA peuvent coûter cher si elles ne sont pas optimisées.

Conclusion

En 6 étapes simples, vous avez intégré l'IA dans votre SaaS. La génération de contenu, le SEO automatisé et la génération de code sont maintenant accessibles à vos utilisateurs. Le tout en moins de 30 minutes.

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.

Commencer gratuitementLire la doc