# GPlay Central AI — Next.js & React Integration Blueprint

Panduan integrasi resmi GPlay Central AI Engine untuk framework **Next.js (App Router / Pages Router)** & **React**.

---

## 1. Konfigurasi Environment Variables (`.env.local`)

```env
GPLAY_AI_BASE_URL=http://localhost:5000/api/v1
GPLAY_AI_API_KEY=kunci_api_tenant_kamu
```

---

## 2. Server Action / API Route (`app/api/ai/invoice/route.ts`)

```typescript
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const { invoiceText } = await request.json();

  const res = await fetch(`${process.env.GPLAY_AI_BASE_URL}/finance/extract-invoice`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-KEY': process.env.GPLAY_AI_API_KEY || '',
    },
    body: JSON.stringify({ invoiceText }),
  });

  const data = await res.json();
  return NextResponse.json(data);
}
```

---

## 3. Client Component React UI (`components/InvoiceExtractor.tsx`)

```tsx
'use client';
import { useState } from 'react';

export default function InvoiceExtractor() {
  const [text, setText] = useState('');
  const [result, setResult] = useState<any>(null);

  const handleAnalyze = async () => {
    const res = await fetch('/api/ai/invoice', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ invoiceText: text }),
    });
    const data = await res.json();
    setResult(data.data);
  };

  return (
    <div className="p-4 border rounded">
      <textarea value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={handleAnalyze}>Ekstrak dengan GPlay AI</button>
      {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
    </div>
  );
}
```

---

## 4. Next.js App Router Server Actions for AI v2.0 (`app/actions/ai.ts`)

```typescript
'use server';

export async function auditCodeAction(sourceCode: string, language = 'typescript') {
  const res = await fetch(`${process.env.GPLAY_AI_BASE_URL}/devops/code-assistant`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-KEY': process.env.GPLAY_AI_API_KEY || '',
    },
    body: JSON.stringify({ sourceCode, language, task: 'audit_and_unit_test' }),
  });
  return await res.json();
}

export async function checkThreatAction(targetEndpoint: string, trafficLog: string) {
  const res = await fetch(`${process.env.GPLAY_AI_BASE_URL}/security/threat-analyzer`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-KEY': process.env.GPLAY_AI_API_KEY || '',
    },
    body: JSON.stringify({ targetEndpoint, trafficLog }),
  });
  return await res.json();
}

export async function detectPlagiarismAction(text: string, sensitivity = 0.85) {
  const res = await fetch(`${process.env.GPLAY_AI_BASE_URL}/content/detect-ai-plagiarism`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-KEY': process.env.GPLAY_AI_API_KEY || '',
    },
    body: JSON.stringify({ text, sensitivity }),
  });
  return await res.json();
}

export async function auditSmartContractAction(sourceCode: string, language = 'solidity') {
  const res = await fetch(`${process.env.GPLAY_AI_BASE_URL}/web3/audit-smart-contract`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-KEY': process.env.GPLAY_AI_API_KEY || '',
    },
    body: JSON.stringify({ sourceCode, language }),
  });
  return await res.json();
}

export async function sendSlackAlertAction(channel: string, eventTitle: string, alertLevel = 'critical') {
  const res = await fetch(`${process.env.GPLAY_AI_BASE_URL}/workspace/slack-notifier`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-KEY': process.env.GPLAY_AI_API_KEY || '',
    },
    body: JSON.stringify({ channel, eventTitle, alertLevel }),
  });
  return await res.json();
}

export async function detectApiAnomalyAction(apiKeyId: string, requestRatePerMin: number) {
  const res = await fetch(`${process.env.GPLAY_AI_BASE_URL}/security/api-anomaly-detector`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-KEY': process.env.GPLAY_AI_API_KEY || '',
    },
    body: JSON.stringify({ apiKeyId, requestRatePerMin }),
  });
  return await res.json();
}

export async function shieldPromptInjectionAction(prompt: string) {
  const res = await fetch(`${process.env.GPLAY_AI_BASE_URL}/guardrails/prompt-injection-shield`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-KEY': process.env.GPLAY_AI_API_KEY || '',
    },
    body: JSON.stringify({ prompt }),
  });
  return await res.json();
}

export async function checkInvoiceTamperAction(documentHash: string, eMeteraiSerial: string) {
  const res = await fetch(`${process.env.GPLAY_AI_BASE_URL}/finsec/invoice-tamper-check`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-KEY': process.env.GPLAY_AI_API_KEY || '',
    },
    body: JSON.stringify({ documentHash, eMeteraiSerial }),
  });
  return await res.json();
}
```