بناء أداة تحليل SQL مدعومة بالذكاء الاصطناعي

git clone https://github.com/vercel-labs/natural-language-postgres
cd natural-language-postgres
git checkout starter

pnpm install

# .env.local
POSTGRES_URL="postgres://..."
OPENAI_API_KEY="sk-..."

// components/QueryInput.tsx
'use client';
 
import { useState } from 'react';
 
export function QueryInput({ onSubmit }: { onSubmit: (query: string) => void }) {
  const [input, setInput] = useState('');
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      onSubmit(input);
    }
  };
 
  return (
    <form onSubmit={handleSubmit} className="w-full max-w-2xl">
      <div className="flex gap-2">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="اسأل عن بياناتك بلغة طبيعية..."
          className="flex-1 p-3 border rounded-lg"
        />
        <button
          type="submit"
          className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
        >
          تحليل
        </button>
      </div>
    </form>
  );
}

// app/api/analyze/route.ts
import { openai } from '@ai-sdk/openai';
import { generateObject } from 'ai';
import { z } from 'zod';
import { sql } from '@vercel/postgres';
 
const QuerySchema = z.object({
  sqlQuery: z.string().describe('استعلام SQL المولد'),
  explanation: z.string().describe('شرح ما يفعله الاستعلام'),
});
 
export async function POST(req: Request) {
  const { question } = await req.json();
 
  // توليد استعلام SQL من السؤال
  const { object } = await generateObject({
    model: openai('gpt-4-turbo'),
    schema: QuerySchema,
    prompt: `بناءً على السؤال التالي، ولد استعلام SQL لقاعدة بيانات PostgreSQL:
 
السؤال: ${question}
 
ولد استعلام SQL صالحاً وآمناً.`,
  });
 
  // تنفيذ الاستعلام
  try {
    const result = await sql.query(object.sqlQuery);
 
    return Response.json({
      query: object.sqlQuery,
      explanation: object.explanation,
      results: result.rows,
    });
  } catch (error) {
    return Response.json(
      { error: 'فشل تنفيذ الاستعلام' },
      { status: 500 }
    );
  }
}

// components/ResultChart.tsx
'use client';
 
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';
 
interface ResultChartProps {
  data: Record<string, any>[];
  xKey: string;
  yKey: string;
}
 
export function ResultChart({ data, xKey, yKey }: ResultChartProps) {
  return (
    <div className="w-full h-80">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey={xKey} />
          <YAxis />
          <Tooltip />
          <Bar dataKey={yKey} fill="#3b82f6" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}