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단계 — Rate limiting 추가

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 인프라를 관리합니다.

AI 통합을 시작할 준비가 되셨나요?

무료 API 키를 받고 몇 분 만에 구축을 시작하세요.

무료로 시작하기 문서 읽기

SaaS에 30분 만에 AI를 통합하는 방법