将人工智能添加到您的 SaaS 不再仅限于大公司。使用正确的 API，您可以在几分钟内集成文本生成、自动化 SEO 和代码生成。本教程将准确展示如何操作，提供可复制的代码。
前提条件
- Next.js 14+ 项目（App Router）
- NeuraAPI 密钥（在 /register 免费获取）
- 已安装 Node.js 18+
步骤 1 — 创建账户并获取 API 密钥
前往 /register 创建免费账户。您将立即收到一个以 napi_ 开头的 API 密钥。每月提供 100 个免费积分。
请妥善保管此密钥。它将在所有 API 调用中使用。
步骤 2 — 安装 SDK
TypeScript SDK 使集成变得极其简单。单一依赖，零配置。
npm install @neuraapi/sdk
步骤 3 — 创建服务端 AI 服务
创建一个 lib/ai.ts 文件来封装 API 调用。这是集成的核心点。
// 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
}步骤 4 — 创建 Next.js API 路由
在您的 SaaS 中公开一个 API 路由。此路由将被前端调用以生成内容。
// 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: '未授权' }, { status: 401 })
}
const { prompt } = await req.json()
if (!prompt || typeof prompt !== 'string') {
return NextResponse.json({ error: '需要提示词' }, { status: 400 })
}
try {
const content = await generateContent(prompt)
return NextResponse.json({ content })
} catch (error) {
return NextResponse.json({ error: '生成错误' }, { status: 500 })
}
}步骤 5 — 从前端调用
在客户端，使用简单的 fetch 调用您的 API 路由。以下是一个完整的 React 组件。
// 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="描述您想要生成的内容..."
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="描述您想要生成的内容..."
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 ? '生成中...' : '生成'}
</button>
{result && (
<div className="rounded-lg bg-gray-50 p-4">
<p>{result}</p>
</div>
)}
</div>
)
}步骤 6 — 添加速率限制
保护您的 API 免受滥用。以下是一个简单的中间件，限制每个用户的调用次数。
// 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
}
// 在 API 路由中使用：
// if (!rateLimit(session.user.id)) {
// return NextResponse.json({ error: '请求过多' }, { status: 429 })
// }最佳实践
切勿在客户端暴露 API 密钥
始终使用服务器代理（Next.js API 路由）进行 AI API 调用。API 密钥绝不能出现在发送到浏览器的 JavaScript 代码中。
验证用户输入
始终清理和验证用户发送的提示词。限制长度，过滤危险字符，使用 zod 或 joi 进行验证。
缓存响应
对于类似的提示词，缓存 AI 响应。具有 24 小时 TTL 的 Redis 缓存可在不影响质量的情况下大幅降低成本。
监控成本
跟踪每个用户和每个功能的积分消耗。如果未优化，AI API 可能会很昂贵。
结论
通过 6 个简单步骤，您已将 AI 集成到 SaaS 中。内容生成、自动化 SEO 和代码生成现在对您的用户来说都是可访问的。全部在 30 分钟内完成。
NeuraAPI 简化了此集成：单一 API 密钥、TypeScript SDK、文档化的端点。您专注于产品，我们管理 AI 基础设施。