Dans ce guide, nous allons parcourir le processus de construction d'une application alimentee par l'IA qui interagit avec une base de donnees PostgreSQL en utilisant le langage naturel. Cette application sera capable de generer des requetes SQL a partir d'entrees en langage naturel, d'expliquer les composants des requetes en langage simple et de creer des graphiques visuels pour representer les resultats des requetes.

Configuration du Projet

Pour commencer, nous utiliserons la pile technologique suivante:

Next.js (App Router)
AI SDK
OpenAI
Zod
Postgres avec Vercel Postgres
shadcn-ui et TailwindCSS pour le styling
Recharts pour la visualisation des donnees

Cloner le Repository

Pour vous concentrer sur la fonctionnalite IA, clonez le repository de demarrage:

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

Installer les Dependances

Installez les dependances necessaires avec pnpm:

pnpm install

Configurer la Base de Donnees

Creez une base de donnees Postgres et configurez les variables d'environnement:

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

Construire l'Interface de Requete

Creer le Composant d'Entree

// 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="Posez une question sur vos donnees en langage naturel..."
          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"
        >
          Analyser
        </button>
      </div>
    </form>
  );
}

Creer la Route API

// 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('La requete SQL generee'),
  explanation: z.string().describe('Explication de ce que fait la requete'),
});
 
export async function POST(req: Request) {
  const { question } = await req.json();
 
  // Generer la requete SQL a partir de la question
  const { object } = await generateObject({
    model: openai('gpt-4-turbo'),
    schema: QuerySchema,
    prompt: `Basee sur la question suivante, generez une requete SQL pour une base de donnees PostgreSQL:
 
Question: ${question}
 
Generez une requete SQL valide et securisee.`,
  });
 
  // Executer la requete
  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: 'Echec de l execution de la requete' },
      { status: 500 }
    );
  }
}

Visualiser les Resultats

Creer le Composant de Graphique

// 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>
  );
}

Exemples de Requetes

Les utilisateurs peuvent poser des questions comme:

"Montrez-moi les 10 meilleurs clients par ventes totales"
"Quelle est la valeur moyenne des commandes par mois?"
"Quels produits ont la marge beneficiaire la plus elevee?"

Conclusion

Vous avez construit un outil d'analyse SQL alimente par l'IA qui permet aux utilisateurs d'interroger des bases de donnees en langage naturel. Cet outil peut etre etendu en ajoutant plus de types de visualisation et en supportant des requetes plus complexes.

Reference: Vercel Labs Natural Language Postgres