Adicionar inteligência artificial ao seu SaaS não é mais reservado para grandes empresas. Com as APIs certas, você pode integrar geração de texto, SEO automatizado e geração de código em poucos minutos. Este tutorial mostra exatamente como fazer, com código copiável.
Pré-requisitos
- Um projeto Next.js 14+ (App Router)
- Uma chave API NeuraAPI (gratuita em /register)
- Node.js 18+ instalado
Etapa 1 — Crie sua conta e obtenha uma chave API
Vá para /register e crie uma conta gratuita. Você recebe imediatamente uma chave API começando com napi_. 100 créditos mensais são oferecidos.
Guarde esta chave em local seguro. Ela será usada em todas suas chamadas de API.
Etapa 2 — Instale o SDK
O SDK TypeScript torna a integração ultra-simples. Uma única dependência, zero configuração.
npm install @neuraapi/sdk
Etapa 3 — Crie um serviço IA do lado do servidor
Crie um arquivo lib/ai.ts que encapsula as chamadas API. Este é o ponto central da sua integração.
// 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
}Etapa 4 — Crie uma rota API Next.js
Exponha uma rota API no seu SaaS. Esta rota será chamada pelo seu frontend para gerar conteúdo.
// 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: 'Não autorizado' }, { status: 401 })
}
const { prompt } = await req.json()
if (!prompt || typeof prompt !== 'string') {
return NextResponse.json({ error: 'Prompt obrigatório' }, { status: 400 })
}
try {
const content = await generateContent(prompt)
return NextResponse.json({ content })
} catch (error) {
return NextResponse.json({ error: 'Erro de geração' }, { status: 500 })
}
}Etapa 5 — Chame do frontend
No lado do cliente, chame sua rota API com um simples fetch. Aqui está um 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="Descreva o que você quer gerar..."
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="Descreva o que você quer gerar..."
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 ? 'Gerando...' : 'Gerar'}
</button>
{result && (
<div className="rounded-lg bg-gray-50 p-4">
<p>{result}</p>
</div>
)}
</div>
)
}Etapa 6 — Adicione rate limiting
Proteja sua API contra abusos. Aqui está um middleware simples que limita as chamadas por usuário.
// 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 na rota API:
// if (!rateLimit(session.user.id)) {
// return NextResponse.json({ error: 'Muitas requisições' }, { status: 429 })
// }Boas práticas
Nunca exponha a chave API no lado do cliente
Use sempre um proxy do servidor (rota API Next.js) para chamadas de API de IA. A chave API nunca deve aparecer no código JavaScript enviado ao navegador.
Valide as entradas do usuário
Sempre sanitizar e validar o prompt enviado pelo usuário. Limite o comprimento, filtre caracteres perigosos e use zod ou joi para validação.
Cache as respostas
Para prompts similares, armazene em cache as respostas de IA. Um cache Redis com TTL de 24h reduz consideravelmente os custos sem impactar a qualidade.
Monitore os custos
Rastreie o consumo de créditos por usuário e por funcionalidade. As APIs de IA podem ser caras se não forem otimizadas.
Conclusão
Em 6 etapas simples, você integrou a IA no seu SaaS. Geração de conteúdo, SEO automatizado e geração de código agora são acessíveis aos seus usuários. Tudo em menos de 30 minutos.
NeuraAPI simplifica essa integração: uma única chave API, um SDK TypeScript, endpoints documentados. Você se concentra no seu produto, nós gerenciamos a infraestrutura de IA.
Pronto para integrar a IA?
Obtenha sua chave API gratuita e comece a construir em minutos.