NeuraAPI
درس15 يونيو 202412 دقيقة للقراءة

كيفية دمج الذكاء الاصطناعي في SaaS الخاص بك في 30 دقيقة

Partager :

إضافة الذكاء الاصطناعي إلى SaaS الخاص بك لم تعد محفوظة للشركات الكبيرة. مع APIs المناسبة، يمكنك دمج إنتاج النصوص وتحسين محركات البحث الآلي وإنتاج الكود في بضع دقائق. يُظهر لك هذا الدليل بالضبط كيفية القيام بذلك، مع كود قابل للنسخ.

المتطلبات الأساسية

  • مشروع Next.js 14+ (App Router)
  • مفتاح API من NeuraAPI (مجاني على /register)
  • Node.js 18+ مثبت

الخطوة 1 — أنشئ حسابك واحصل على مفتاح API

اذهب إلى /register وأنشئ حساباً مجانياً. تتلقى فوراً مفتاح API يبدأ بـ napi_. يتم تقديم 100 رصيد شهرياً مجاناً.

احتفظ بهذا المفتاح في مكان آمن. سيتم استخدامه في جميع مكالمات API الخاصة بك.

الخطوة 2 — قم بتثبيت SDK

ي يجعل SDK TypeScript التكامل فائلاً بسيطاً. تبعية واحدة، صفر تكوين.

npm install @neuraapi/sdk

الخطوة 3 — أنشئ خدمة ذكاء اصطناعي من جانب الخادم

أنشئ ملف 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 — أنشئ مسار API في Next.js

اعرض مسار API في SaaS الخاص بك. سيتم استدعاء هذا المسار من واجهة المستخدم لتوليد المحتوى.

// 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: 'الrompt مطلوب' }, { status: 400 })
  }

  try {
    const content = await generateContent(prompt)
    return NextResponse.json({ content })
  } catch (error) {
    return NextResponse.json({ error: 'خطأ في التوليد' }, { status: 500 })
  }
}

الخطوة 5 — استدعاء من واجهة المستخدم

من جانب العميل، استدعِ مسار API الخاص بك بـ fetch بسيط. هذا مكون 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
        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 الخاص بك من سوء الاستخدام. هذا middleware بسيط يقيّد المكالمات لكل مستخدم.

// 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) لاستدعاءات API الذكاء الاصطناعي. يجب ألا يظهر مفتاح API أبداً في كود JavaScript المرسل إلى المتصفح.

تحقق من مدخلات المستخدم

قم دائماً بتطهير والتحقق من الprompt المرسل من المستخدم. حدد الطول، وفلتر الأحرف الخطرة، واستخدم zod أو joi للتحقق.

خزّن الاستجابات

لل prompts المتشابهة، خزّن استجابات الذكاء الاصطناعي. ذاكرة Redis مع TTL 24 ساعة تقلل التكاليف بشكل كبير دون التأثير على الجودة.

راقب التكاليف

تتبع استهلاك الرصيد لكل مستخدم و كل ميزة. يمكن أن تكون APIs الذكاء الاصطناعي مكلفة إذا لم يتم تحسينها.

الخلاصة

في 6 خطوات بسيطة، قمت بدمج الذكاء الاصطناعي في SaaS الخاص بك. إنتاج المحتوى وتحسين محركات البحث الآلي وإنتاج الكود أصبحت الآن متاحة لمستخدميك. كل ذلك في أقل من 30 دقيقة.

NeuraAPI يُبسط هذا التكامل: مفتاح API واحد، SDK TypeScript، نقاط نهاية موثقة. أنت تركز على منتجك، نحن ندير بنية الذكاء الاصطناعي.

مستعد لدمج الذكاء الاصطناعي؟

احصل على مفتاح API المجاني وابدأ البناء في دقائق.