Añadir inteligencia artificial a tu SaaS ya no está reservado para las grandes empresas. Con las APIs correctas, puedes integrar la generación de texto, SEO automatizado y generación de código en unos minutos. Este tutorial te muestra exactamente cómo hacerlo, con código copiable.
Prerrequisitos
- Un proyecto Next.js 14+ (App Router)
- Una clave API de NeuraAPI (gratuita en /register)
- Node.js 18+ instalado
Paso 1 — Crea tu cuenta y obtén una clave API
Ve a /register y crea una cuenta gratuita. Recibes inmediatamente una clave API que comienza por napi_. Se ofrecen 100 créditos mensuales.
Guarda esta clave en un lugar seguro. Se usará en todas tus llamadas API.
Paso 2 — Instala el SDK
El SDK TypeScript hace la integración ultra-sencilla. Una sola dependencia, cero configuración.
npm install @neuraapi/sdk
Paso 3 — Crea un servicio IA del lado del servidor
Crea un archivo lib/ai.ts que encapsule las llamadas API. Este es el punto central de tu integración.
// 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
}Paso 4 — Crea una ruta API de Next.js
Expón una ruta API en tu SaaS. Esta ruta será llamada por tu frontend para generar contenido.
// 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: 'No autorizado' }, { status: 401 })
}
const { prompt } = await req.json()
if (!prompt || typeof prompt !== 'string') {
return NextResponse.json({ error: 'Prompt requerido' }, { status: 400 })
}
try {
const content = await generateContent(prompt)
return NextResponse.json({ content })
} catch (error) {
return NextResponse.json({ error: 'Error de generación' }, { status: 500 })
}
}Paso 5 — Llama desde el frontend
Del lado del cliente, llama a tu ruta API con un simple fetch. Aquí hay 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="Describe lo que quieres generar..."
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="Describe lo que quieres generar..."
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 ? 'Generando...' : 'Generar'}
</button>
{result && (
<div className="rounded-lg bg-gray-50 p-4">
<p>{result}</p>
</div>
)}
</div>
)
}Paso 6 — Añade rate limiting
Protege tu API contra abusos. Aquí hay un middleware simple que limita las llamadas por usuario.
// 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
}
// Uso en la ruta API:
// if (!rateLimit(session.user.id)) {
// return NextResponse.json({ error: 'Demasiadas solicitudes' }, { status: 429 })
// }Buenas prácticas
Nunca expongas la clave API del lado del cliente
Usa siempre un proxy del servidor (ruta API de Next.js) para las llamadas a la API de IA. La clave API nunca debe aparecer en el código JavaScript enviado al navegador.
Valida las entradas del usuario
Siempre sanitiza y valida el prompt enviado por el usuario. Limita la longitud, filtra caracteres peligrosos, y usa zod o joi para la validación.
Almacena en caché las respuestas
Para prompts similares, almacena en caché las respuestas de IA. Un caché Redis con TTL de 24h reduce considerablemente los costos sin impactar la calidad.
Monitorea los costos
Rastrea el consumo de créditos por usuario y por función. Las APIs de IA pueden ser costosas si no están optimizadas.
Conclusión
En 6 pasos simples, has integrado la IA en tu SaaS. La generación de contenido, SEO automatizado y generación de código ahora son accesibles para tus usuarios. Todo en menos de 30 minutos.
NeuraAPI simplifica esta integración: una sola clave API, un SDK TypeScript, endpoints documentados. Te concentras en tu producto, nosotros gestionamos la infraestructura de IA.
¿Listo para integrar la IA?
Obtén tu clave API gratuita y comienza a construir en minutos.