Aggiungere intelligenza artificiale al tuo SaaS non è più riservato alle grandi aziende. Con le API giuste, puoi integrare la generazione di testo, SEO automatizzata e generazione di codice in pochi minuti. Questo tutorial ti mostra esattamente come fare, con codice copiabile.

Prerequisiti

Un progetto Next.js 14+ (App Router)
Una chiave API NeuraAPI (gratuita su /register)
Node.js 18+ installato

Passo 1 — Crea il tuo account e ottieni una chiave API

Vai su /register e crea un account gratuito. Ricevi immediatamente una chiave API che inizia con napi_. 100 crediti mensili sono offerti.

Conserva questa chiave in un posto sicuro. Sarà usata in tutte le tue chiamate API.

Passo 2 — Installa il SDK

Il SDK TypeScript rende l'integrazione ultra-semplice. Una singola dipendenza, zero configurazione.

npm install @neuraapi/sdk

Passo 3 — Crea un servizio IA lato server

Crea un file lib/ai.ts che incapsula le chiamate API. Questo è il punto centrale della tua integrazione.

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

Passo 4 — Crea una route API Next.js

Esponi una route API nel tuo SaaS. Questa route sarà chiamata dal tuo frontend per generare contenuti.

// 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 autorizzato' }, { status: 401 })
  }

  const { prompt } = await req.json()

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

  try {
    const content = await generateContent(prompt)
    return NextResponse.json({ content })
  } catch (error) {
    return NextResponse.json({ error: 'Errore di generazione' }, { status: 500 })
  }
}

Passo 5 — Chiama dal frontend

Lato client, chiama la tua route API con un semplice fetch. Ecco un componente React completo.

// 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="Descrivi cosa vuoi generare..."
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="Descrivi cosa vuoi generare..."
        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 ? 'Generazione...' : 'Genera'}
      </button>
      {result && (
        <div className="rounded-lg bg-gray-50 p-4">
          <p>{result}</p>
        </div>
      )}
    </div>
  )
}

Passo 6 — Aggiungi il rate limiting

Proteggi la tua API dagli abusi. Ecco un middleware semplice che limita le chiamate per utente.

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

// Utilizzo nella route API:
// if (!rateLimit(session.user.id)) {
//   return NextResponse.json({ error: 'Troppe richieste' }, { status: 429 })
// }

Best Practice

Mai esporre la chiave API lato client

Usa sempre un proxy server (route API Next.js) per le chiamate all'API IA. La chiave API non deve mai apparire nel codice JavaScript inviato al browser.

Valida gli input utente

Sanitizza e valida sempre l'prompt inviato dall'utente. Limita la lunghezza, filtra i caratteri pericolosi e usa zod o joi per la validazione.

Metti in cache le risposte

Per prompt simili, metti in cache le risposte IA. Una cache Redis con TTL di 24h riduce notevolmente i costi senza impattare la qualità.

Monitora i costi

Traccia il consumo di crediti per utente e per funzionalità. Le API IA possono costare caro se non ottimizzate.

Conclusione

In 6 semplici passi, hai integrato l'IA nel tuo SaaS. La generazione di contenuti, SEO automatizzata e generazione di codice sono ora accessibili ai tuoi utenti. Tutto in meno di 30 minuti.

NeuraAPI semplifica questa integrazione: una singola chiave API, un SDK TypeScript, endpoint documentati. Tu ti concentri sul tuo prodotto, noi gestiamo l'infrastruttura IA.

Pronto a integrare l'IA?

Ottieni la tua chiave API gratuita e inizia a costruire in pochi minuti.

Inizia gratis Leggi la documentazione

Come integrare l'IA nel tuo SaaS in 30 minuti