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サービスを作成
API呼び出しをカプセル化するlib/ai.tsファイルを作成します。これは統合の中心ポイントです。
// 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キーをクライアント側で公開しない
AI API呼び出しには常にサーバープロキシ（Next.js APIルート）を使用してください。APIキーはブラウザに送信されるJavaScriptコードに表示されるべきではありません。
ユーザー入力を検証
ユーザーから送信されたプロンプトは常にサニタイズして検証してください。長さを制限し、危険な文字をフィルタリングし、検証にはzodまたはjoiを使用してください。
レスポンスをキャッシュ
類似のプロンプトについては、AIレスポンスをキャッシュしてください。24時間のTTLを持つRedisキャッシュは、品質に影響を与えずにコストを大幅に削減します。
コストを監視
ユーザーごと、機能ごとのクレジット消費を追跡してください。AI APIは最適化しないと高コストになる可能性があります。
まとめ
6つの簡単なステップで、SaaSにAIを統合しました。コンテンツ生成、自動SEO、コード生成がユーザーに利用可能になりました。すべて30分以内に完了します。
NeuraAPIはこの統合をシンプルにします：単一のAPIキー、TypeScript SDK、ドキュメント付きエンドポイント。あなたはプロダクトに集中し、私たちはAIインフラを管理します。