Intégrer l'API OpenAI : Guide Complet pour Développeurs

Vous voulez intégrer ChatGPT ou GPT-4 dans votre application ? L’API OpenAI ouvre la porte à des possibilités infinies : chatbots intelligents, génération de contenu, analyse de données, assistance au code… Dans ce guide technique, on va tout décortiquer, du premier appel API jusqu’aux architectures de production robustes.

Prérequis : Ce Que Vous Devez Savoir

Avant de plonger, assurez-vous d’avoir :

✅ Bases en programmation (Python, JavaScript, ou PHP) ✅ Compréhension des APIs REST (requêtes HTTP, JSON) ✅ Notions de backend (serveur, authentification, environnement) ✅ Budget : L’API OpenAI est payante (on verra les coûts plus bas)

Langages couverts dans ce guide : Python (principal), JavaScript/Node.js (exemples), mentions PHP

Étape 1 : Créer Votre Compte et Obtenir Votre Clé API

Création du Compte OpenAI

Allez sur platform.openai.com
Créez un compte (email + vérification)
Configurez le paiement (carte bancaire obligatoire)
Définissez un budget mensuel (recommandé : $10-50 pour débuter)

Générer Votre Clé API

Dans le dashboard, allez dans « API Keys »
Cliquez sur « Create new secret key »
Donnez un nom descriptif : mon-projet-dev
COPIEZ LA CLÉ IMMÉDIATEMENT → Vous ne pourrez plus la revoir !
Stockez-la dans un gestionnaire de secrets (1Password, LastPass) ou variable d’environnement

⚠️ SÉCURITÉ CRITIQUE : Ne commitez JAMAIS votre clé API dans Git. Utilisez des variables d’environnement.

<span class="hljs-comment"># Fichier .env (à ajouter dans .gitignore)</span>
<span class="hljs-attr">OPENAI_API_KEY</span>=sk-proj-xxxxxxxxxxxxxxxxxxxxx

Étape 2 : Premier Appel API – « Hello World » de l’IA

Installation des Bibliothèques

Python :

pip <span class="hljs-keyword">install</span> openai python-dotenv

Node.js :

npm <span class="hljs-keyword">install</span> openai dotenv

Votre Premier Script Python

<span class="hljs-built_in">import</span> os
from openai <span class="hljs-built_in">import</span> OpenAI
from dotenv <span class="hljs-built_in">import</span> load_dotenv

<span class="hljs-comment"># Charger les variables d'environnement</span>
load_dotenv()

<span class="hljs-comment"># Initialiser le client OpenAI</span>
<span class="hljs-attr">client</span> = OpenAI(
    <span class="hljs-attr">api_key=os.environ.get("OPENAI_API_KEY")</span>
)

<span class="hljs-comment"># Premier appel API</span>
<span class="hljs-attr">response</span> = client.chat.completions.create(
    <span class="hljs-attr">model="gpt-4-turbo",</span>
    <span class="hljs-attr">messages=[</span>
        {<span class="hljs-string">"role"</span>: <span class="hljs-string">"system"</span>, <span class="hljs-string">"content"</span>: <span class="hljs-string">"Tu es un assistant utile et concis."</span>},
        {<span class="hljs-string">"role"</span>: <span class="hljs-string">"user"</span>, <span class="hljs-string">"content"</span>: <span class="hljs-string">"Explique-moi l'API OpenAI en une phrase."</span>}
    ],
    <span class="hljs-attr">max_tokens=100,</span>
    <span class="hljs-attr">temperature=0.7</span>
)

<span class="hljs-comment"># Afficher la réponse</span>
print(response.choices[<span class="hljs-number">0</span>].message.content)

Résultat attendu :

L<span class="hljs-symbol">'API</span> OpenAI permet aux développeurs d<span class="hljs-symbol">'int</span>égrer des <span class="hljs-keyword">mod</span>èles d<span class="hljs-symbol">'IA</span> comme GPT-<span class="hljs-number">4</span> dans leurs applications via des requêtes HTTP simples.

Décryptage du Code

client.chat.completions.create() : La fonction principale

model : Quel modèle utiliser (gpt-4-turbo, gpt-3.5-turbo, gpt-4)
messages : Conversation avec rôles (system, user, assistant)
max_tokens : Limite de tokens en sortie (contrôle coûts)
temperature : Créativité (0 = déterministe, 1 = créatif)

Structure des messages :

system : Instructions globales pour l’IA (ton, style, contraintes)
user : Message de l’utilisateur
assistant : Réponse de l’IA (pour conversations multi-tours)

Étape 3 : Construire une Conversation Multi-Tours

Le Contexte, Clé de la Qualité

GPT ne garde pas la mémoire entre les appels. Vous devez lui renvoyer tout l’historique.

<span class="hljs-keyword">import</span> os
<span class="hljs-keyword">from</span> openai <span class="hljs-keyword">import</span> OpenAI
<span class="hljs-keyword">from</span> dotenv <span class="hljs-keyword">import</span> load_dotenv

load_dotenv()
client = OpenAI(api_key=os.environ.get(<span class="hljs-string">"OPENAI_API_KEY"</span>))

<span class="hljs-comment"># Historique de la conversation</span>
conversation_history = [
    {<span class="hljs-string">"role"</span>: <span class="hljs-string">"system"</span>, <span class="hljs-string">"content"</span>: <span class="hljs-string">"Tu es un expert Python serviable."</span>}
]

<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">chat</span><span class="hljs-params">(user_message)</span>:</span>
    <span class="hljs-comment"># Ajouter le message utilisateur</span>
    conversation_history.append({<span class="hljs-string">"role"</span>: <span class="hljs-string">"user"</span>, <span class="hljs-string">"content"</span>: user_message})

    <span class="hljs-comment"># Appel API avec tout l'historique</span>
    response = client.chat.completions.create(
        model=<span class="hljs-string">"gpt-4-turbo"</span>,
        messages=conversation_history,
        temperature=<span class="hljs-number">0.7</span>
    )

    <span class="hljs-comment"># Récupérer et stocker la réponse</span>
    assistant_message = response.choices[<span class="hljs-number">0</span>].message.content
    conversation_history.append({<span class="hljs-string">"role"</span>: <span class="hljs-string">"assistant"</span>, <span class="hljs-string">"content"</span>: assistant_message})

    <span class="hljs-keyword">return</span> assistant_message

<span class="hljs-comment"># Simulation conversation</span>
print(chat(<span class="hljs-string">"Comment créer une liste en Python ?"</span>))
print(chat(<span class="hljs-string">"Et pour la trier ?"</span>))  <span class="hljs-comment"># GPT se souviendra du contexte "liste"</span>
print(chat(<span class="hljs-string">"Montre-moi un exemple complet."</span>))

Avantage : Conversations fluides et contextualisées Inconvénient : Chaque appel coûte plus cher (historique = plus de tokens)

Optimisation : Limiter l’Historique

def chat(user_message, <span class="hljs-attr">max_history=10):</span>
    conversation_history.append({<span class="hljs-string">"role"</span>: <span class="hljs-string">"user"</span>, <span class="hljs-string">"content"</span>: user_message})

    <span class="hljs-comment"># Garder seulement les N derniers échanges</span>
    <span class="hljs-attr">messages_to_send</span> = [conversation_history[<span class="hljs-number">0</span>]]  <span class="hljs-comment"># Toujours garder le system</span>
    messages_to_send += conversation_history[-max_history:]

    <span class="hljs-attr">response</span> = client.chat.completions.create(
        <span class="hljs-attr">model="gpt-4-turbo",</span>
        <span class="hljs-attr">messages=messages_to_send,</span>
        <span class="hljs-attr">temperature=0.7</span>
    )

    <span class="hljs-attr">assistant_message</span> = response.choices[<span class="hljs-number">0</span>].message.content
    conversation_history.append({<span class="hljs-string">"role"</span>: <span class="hljs-string">"assistant"</span>, <span class="hljs-string">"content"</span>: assistant_message})

    return assistant_message

Étape 4 : Architecture d’une Application Réelle

Stack Recommandée

Frontend :

React / Vue.js / Vanilla JS
Interface utilisateur pour le chat

Backend :

Python : Flask / FastAPI
Node.js : Express
PHP : Laravel / Symfony
Gère les appels API OpenAI (JAMAIS depuis le frontend !)

Base de données (optionnel) :

PostgreSQL / MySQL pour stocker les conversations
Redis pour le cache

Exemple : API Backend avec FastAPI (Python)

<span class="hljs-keyword">from</span> fastapi <span class="hljs-keyword">import</span> FastAPI, HTTPException
<span class="hljs-keyword">from</span> fastapi.middleware.cors <span class="hljs-keyword">import</span> CORSMiddleware
<span class="hljs-keyword">from</span> pydantic <span class="hljs-keyword">import</span> BaseModel
<span class="hljs-keyword">from</span> openai <span class="hljs-keyword">import</span> OpenAI
<span class="hljs-keyword">import</span> os
<span class="hljs-keyword">from</span> dotenv <span class="hljs-keyword">import</span> load_dotenv

load_dotenv()
app = FastAPI()
client = OpenAI(api_key=os.environ.get(<span class="hljs-string">"OPENAI_API_KEY"</span>))

<span class="hljs-comment"># CORS pour le frontend</span>
app.add_middleware(
    CORSMiddleware,
    allow_origins=[<span class="hljs-string">"http://localhost:3000"</span>],  <span class="hljs-comment"># Votre frontend</span>
    allow_credentials=<span class="hljs-keyword">True</span>,
    allow_methods=[<span class="hljs-string">"*"</span>],
    allow_headers=[<span class="hljs-string">"*"</span>],
)

<span class="hljs-comment"># Modèle de données</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ChatRequest</span><span class="hljs-params">(BaseModel)</span>:</span>
    message: str
    conversation_id: str = <span class="hljs-keyword">None</span>

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ChatResponse</span><span class="hljs-params">(BaseModel)</span>:</span>
    response: str
    conversation_id: str

<span class="hljs-comment"># Stockage temporaire (en prod : base de données)</span>
conversations = {}

<span class="hljs-meta">@app.post("/api/chat", response_model=ChatResponse)</span>
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">chat_endpoint</span><span class="hljs-params">(request: ChatRequest)</span>:</span>
    <span class="hljs-keyword">try</span>:
        <span class="hljs-comment"># Récupérer ou créer l'historique</span>
        conv_id = request.conversation_id <span class="hljs-keyword">or</span> str(uuid.uuid4())
        history = conversations.get(conv_id, [
            {<span class="hljs-string">"role"</span>: <span class="hljs-string">"system"</span>, <span class="hljs-string">"content"</span>: <span class="hljs-string">"Tu es un assistant utile."</span>}
        ])

        <span class="hljs-comment"># Ajouter le message utilisateur</span>
        history.append({<span class="hljs-string">"role"</span>: <span class="hljs-string">"user"</span>, <span class="hljs-string">"content"</span>: request.message})

        <span class="hljs-comment"># Appel OpenAI</span>
        response = client.chat.completions.create(
            model=<span class="hljs-string">"gpt-4-turbo"</span>,
            messages=history,
            max_tokens=<span class="hljs-number">500</span>,
            temperature=<span class="hljs-number">0.7</span>
        )

        <span class="hljs-comment"># Récupérer la réponse</span>
        assistant_message = response.choices[<span class="hljs-number">0</span>].message.content
        history.append({<span class="hljs-string">"role"</span>: <span class="hljs-string">"assistant"</span>, <span class="hljs-string">"content"</span>: assistant_message})

        <span class="hljs-comment"># Stocker l'historique</span>
        conversations[conv_id] = history

        <span class="hljs-keyword">return</span> ChatResponse(
            response=assistant_message,
            conversation_id=conv_id
        )

    <span class="hljs-keyword">except</span> Exception <span class="hljs-keyword">as</span> e:
        <span class="hljs-keyword">raise</span> HTTPException(status_code=<span class="hljs-number">500</span>, detail=str(e))

<span class="hljs-comment"># Endpoint de santé</span>
<span class="hljs-meta">@app.get("/api/health")</span>
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">health</span><span class="hljs-params">()</span>:</span>
    <span class="hljs-keyword">return</span> {<span class="hljs-string">"status"</span>: <span class="hljs-string">"ok"</span>}

Frontend Simple (JavaScript)

<span class="hljs-comment">// Appel depuis votre frontend</span>
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sendMessage</span>(<span class="hljs-params">message, conversationId = null</span>) </span>{
    <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> fetch(<span class="hljs-string">'http://localhost:8000/api/chat'</span>, {
        <span class="hljs-attr">method</span>: <span class="hljs-string">'POST'</span>,
        <span class="hljs-attr">headers</span>: {
            <span class="hljs-string">'Content-Type'</span>: <span class="hljs-string">'application/json'</span>,
        },
        <span class="hljs-attr">body</span>: <span class="hljs-built_in">JSON</span>.stringify({
            <span class="hljs-attr">message</span>: message,
            <span class="hljs-attr">conversation_id</span>: conversationId
        })
    });

    <span class="hljs-keyword">const</span> data = <span class="hljs-keyword">await</span> response.json();
    <span class="hljs-keyword">return</span> data;
}

<span class="hljs-comment">// Utilisation</span>
<span class="hljs-keyword">const</span> result = <span class="hljs-keyword">await</span> sendMessage(<span class="hljs-string">"Bonjour !"</span>);
<span class="hljs-built_in">console</span>.log(result.response);
<span class="hljs-built_in">console</span>.log(result.conversation_id);  <span class="hljs-comment">// À sauvegarder pour la suite</span>

Étape 5 : Fonctionnalités Avancées

Streaming : Réponses en Temps Réel

Au lieu d’attendre la réponse complète, affichez-la mot par mot (comme ChatGPT).

<span class="hljs-keyword">from</span> openai <span class="hljs-keyword">import</span> OpenAI
<span class="hljs-keyword">import</span> os

client = OpenAI(api_key=os.environ.get(<span class="hljs-string">"OPENAI_API_KEY"</span>))

response = client.chat.completions.create(
    model=<span class="hljs-string">"gpt-4-turbo"</span>,
    messages=[{<span class="hljs-string">"role"</span>: <span class="hljs-string">"user"</span>, <span class="hljs-string">"content"</span>: <span class="hljs-string">"Raconte-moi une histoire courte."</span>}],
    stream=<span class="hljs-keyword">True</span>  <span class="hljs-comment"># Active le streaming</span>
)

<span class="hljs-comment"># Afficher en temps réel</span>
<span class="hljs-keyword">for</span> chunk <span class="hljs-keyword">in</span> response:
    <span class="hljs-keyword">if</span> chunk.choices[<span class="hljs-number">0</span>].delta.content:
        print(chunk.choices[<span class="hljs-number">0</span>].delta.content, end=<span class="hljs-string">''</span>, flush=<span class="hljs-keyword">True</span>)

Avec FastAPI (Server-Sent Events) :

<span class="hljs-keyword">from</span> fastapi.responses <span class="hljs-keyword">import</span> StreamingResponse

<span class="hljs-meta">@app.post("/api/chat/stream")</span>
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">chat_stream</span><span class="hljs-params">(request: ChatRequest)</span>:</span>
    <span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">generate</span><span class="hljs-params">()</span>:</span>
        response = client.chat.completions.create(
            model=<span class="hljs-string">"gpt-4-turbo"</span>,
            messages=[{<span class="hljs-string">"role"</span>: <span class="hljs-string">"user"</span>, <span class="hljs-string">"content"</span>: request.message}],
            stream=<span class="hljs-keyword">True</span>
        )

        <span class="hljs-keyword">for</span> chunk <span class="hljs-keyword">in</span> response:
            <span class="hljs-keyword">if</span> chunk.choices[<span class="hljs-number">0</span>].delta.content:
                <span class="hljs-keyword">yield</span> f<span class="hljs-string">"data: {chunk.choices[0].delta.content}\n\n"</span>

    <span class="hljs-keyword">return</span> StreamingResponse(generate(), media_type=<span class="hljs-string">"text/event-stream"</span>)

Function Calling : Donner des Pouvoirs à GPT

Permettez à GPT d’appeler des fonctions de votre code.

<span class="hljs-attr">tools</span> = [
    {
        <span class="hljs-string">"type"</span>: <span class="hljs-string">"function"</span>,
        <span class="hljs-string">"function"</span>: {
            <span class="hljs-string">"name"</span>: <span class="hljs-string">"get_weather"</span>,
            <span class="hljs-string">"description"</span>: <span class="hljs-string">"Obtenir la météo pour une ville"</span>,
            <span class="hljs-string">"parameters"</span>: {
                <span class="hljs-string">"type"</span>: <span class="hljs-string">"object"</span>,
                <span class="hljs-string">"properties"</span>: {
                    <span class="hljs-string">"city"</span>: {
                        <span class="hljs-string">"type"</span>: <span class="hljs-string">"string"</span>,
                        <span class="hljs-string">"description"</span>: <span class="hljs-string">"Le nom de la ville"</span>
                    }
                },
                <span class="hljs-string">"required"</span>: [<span class="hljs-string">"city"</span>]
            }
        }
    }
]

<span class="hljs-attr">response</span> = client.chat.completions.create(
    <span class="hljs-attr">model="gpt-4-turbo",</span>
    <span class="hljs-attr">messages=[{"role":</span> <span class="hljs-string">"user"</span>, <span class="hljs-string">"content"</span>: <span class="hljs-string">"Quel temps fait-il à Casablanca ?"</span>}],
    <span class="hljs-attr">tools=tools,</span>
    <span class="hljs-attr">tool_choice="auto"</span>
)

<span class="hljs-comment"># Si GPT veut appeler la fonction</span>
<span class="hljs-keyword">if</span> response.choices[<span class="hljs-number">0</span>].message.tool_calls:
    <span class="hljs-attr">function_call</span> = response.choices[<span class="hljs-number">0</span>].message.tool_calls[<span class="hljs-number">0</span>]
    <span class="hljs-keyword">if</span> function_call.function.<span class="hljs-attr">name</span> == <span class="hljs-string">"get_weather"</span>:
        <span class="hljs-attr">city</span> = json.loads(function_call.function.arguments)[<span class="hljs-string">"city"</span>]
        <span class="hljs-comment"># Appeler votre vraie fonction météo</span>
        <span class="hljs-attr">weather</span> = get_weather_from_api(city)
        <span class="hljs-comment"># Renvoyer le résultat à GPT</span>
        ...

Vision : Analyser des Images

response = client<span class="hljs-selector-class">.chat</span><span class="hljs-selector-class">.completions</span><span class="hljs-selector-class">.create</span>(
    model=<span class="hljs-string">"gpt-4-vision-preview"</span>,
    messages=[
        {
            <span class="hljs-string">"role"</span>: <span class="hljs-string">"user"</span>,
            <span class="hljs-string">"content"</span>: [
                {<span class="hljs-string">"type"</span>: <span class="hljs-string">"text"</span>, <span class="hljs-string">"text"</span>: <span class="hljs-string">"Que vois-tu sur cette image ?"</span>},
                {
                    <span class="hljs-string">"type"</span>: <span class="hljs-string">"image_url"</span>,
                    <span class="hljs-string">"image_url"</span>: {
                        <span class="hljs-string">"url"</span>: <span class="hljs-string">"https://example.com/image.jpg"</span>
                    }
                }
            ]
        }
    ],
    max_tokens=<span class="hljs-number">300</span>
)

<span class="hljs-function"><span class="hljs-title">print</span><span class="hljs-params">(response.choices[<span class="hljs-number">0</span>].message.content)</span></span>

Étape 6 : Gestion des Coûts et Monitoring

Comprendre la Tarification

GPT-4 Turbo (novembre 2025) :

Input : $0.01 / 1K tokens
Output : $0.03 / 1K tokens

GPT-3.5 Turbo :

Input : $0.0005 / 1K tokens
Output : $0.0015 / 1K tokens

Exemple de calcul :

Conversation de 500 tokens input + 200 tokens output
GPT-4 Turbo : (500 × 0.01 / 1000) + (200 × 0.03 / 1000) = $0.011
1000 conversations = $11

Calculer les Tokens Avant l’Appel

<span class="hljs-keyword">import</span> tiktoken

def count_tokens(text, model=<span class="hljs-string">"gpt-4"</span>):
    encoding = tiktoken.encoding_for_model(model)
    <span class="hljs-keyword">return</span> len(encoding.encode(text))

message = <span class="hljs-string">"Bonjour, comment vas-tu ?"</span>
tokens = count_tokens(message)
print(f<span class="hljs-string">"Ce message utilise {tokens} tokens"</span>)

Monitoring et Alertes

import os
from datetime import datetime

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UsageTracker</span>:</span>
    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">__init__</span><span class="hljs-params">(<span class="hljs-keyword">self</span>)</span></span>:
        <span class="hljs-keyword">self</span>.total_tokens = <span class="hljs-number">0</span>
        <span class="hljs-keyword">self</span>.total_cost = <span class="hljs-number">0</span>
        <span class="hljs-keyword">self</span>.daily_limit = <span class="hljs-number">10.0</span>  <span class="hljs-comment"># $10/jour</span>

    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">track_request</span><span class="hljs-params">(<span class="hljs-keyword">self</span>, response)</span></span>:
        usage = response.usage
        input_tokens = usage.prompt_tokens
        output_tokens = usage.completion_tokens

        <span class="hljs-comment"># Calcul du coût (GPT-4 Turbo)</span>
        cost = (input_tokens * <span class="hljs-number">0</span>.<span class="hljs-number">01</span> / <span class="hljs-number">1000</span>) + (output_tokens * <span class="hljs-number">0</span>.<span class="hljs-number">03</span> / <span class="hljs-number">1000</span>)

        <span class="hljs-keyword">self</span>.total_tokens += usage.total_tokens
        <span class="hljs-keyword">self</span>.total_cost += cost

        print(f<span class="hljs-string">"Tokens: {usage.total_tokens} | Coût: ${cost:.4f} | Total journalier: ${self.total_cost:.2f}"</span>)

        <span class="hljs-keyword">if</span> <span class="hljs-keyword">self</span>.total_cost &gt; <span class="hljs-keyword">self</span>.<span class="hljs-symbol">daily_limit:</span>
            raise Exception(<span class="hljs-string">"Budget journalier dépassé !"</span>)

        <span class="hljs-keyword">return</span> cost

<span class="hljs-comment"># Utilisation</span>
tracker = UsageTracker()

response = client.chat.completions.create(
    model=<span class="hljs-string">"gpt-4-turbo"</span>,
    messages=[{<span class="hljs-string">"role"</span>: <span class="hljs-string">"user"</span>, <span class="hljs-string">"content"</span>: <span class="hljs-string">"Hello"</span>}]
)

tracker.track_request(response)

Stratégies d’Optimisation

1. Choisir le bon modèle

Tâches simples → gpt-3.5-turbo (20x moins cher)
Tâches complexes → gpt-4-turbo
Raisonnement avancé → gpt-4

2. Limiter les tokens

<span class="hljs-attr">response</span> = client.chat.completions.create(
    <span class="hljs-attr">model="gpt-4-turbo",</span>
    <span class="hljs-attr">messages=messages,</span>
    <span class="hljs-attr">max_tokens=200,</span>  <span class="hljs-comment"># Limite stricte</span>
    <span class="hljs-attr">temperature=0.5</span>  <span class="hljs-comment"># Moins créatif = moins de tokens</span>
)

3. Cache les réponses

Utilisez Redis pour stocker les réponses fréquentes
Exemple : FAQ, données statiques

4. Résumez l’historique

Au lieu de garder 50 messages, résumez-les
Utilisez GPT pour résumer l’historique lui-même

Étape 7 : Best Practices de Production

Sécurité

✅ Jamais de clé API côté client

<span class="hljs-comment">// ❌ JAMAIS ça</span>
<span class="hljs-keyword">const</span> apiKey = <span class="hljs-string">"sk-proj-xxxxx"</span>;
fetch(<span class="hljs-string">'https://api.openai.com/v1/chat/completions'</span>, {
    <span class="hljs-attr">headers</span>: { <span class="hljs-string">'Authorization'</span>: <span class="hljs-string">`Bearer <span class="hljs-subst">${apiKey}</span>`</span> }
});

<span class="hljs-comment">// ✅ Toujours passer par votre backend</span>
fetch(<span class="hljs-string">'/api/chat'</span>, { <span class="hljs-attr">method</span>: <span class="hljs-string">'POST'</span>, <span class="hljs-attr">body</span>: <span class="hljs-built_in">JSON</span>.stringify({message}) });

✅ Rate limiting

<span class="hljs-keyword">from</span> fastapi_limiter <span class="hljs-keyword">import</span> FastAPILimiter
<span class="hljs-keyword">from</span> fastapi_limiter.depends <span class="hljs-keyword">import</span> RateLimiter

<span class="hljs-meta">@app.post("/api/chat", dependencies=[Depends(RateLimiter(times=10, seconds=60))])</span>
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">chat_endpoint</span><span class="hljs-params">(request: ChatRequest)</span>:</span>
    <span class="hljs-comment"># Max 10 requêtes par minute par IP</span>
    ...

✅ Authentification utilisateur

<span class="hljs-keyword">from</span> fastapi <span class="hljs-keyword">import</span> Depends, HTTPException
<span class="hljs-keyword">from</span> fastapi.security <span class="hljs-keyword">import</span> HTTPBearer

security = HTTPBearer()

<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">verify_token</span><span class="hljs-params">(credentials: HTTPAuthorizationCredentials = Depends<span class="hljs-params">(security)</span>)</span>:</span>
    <span class="hljs-keyword">if</span> credentials.credentials != <span class="hljs-string">"votre-token-secret"</span>:
        <span class="hljs-keyword">raise</span> HTTPException(status_code=<span class="hljs-number">401</span>, detail=<span class="hljs-string">"Invalid token"</span>)
    <span class="hljs-keyword">return</span> credentials

<span class="hljs-meta">@app.post("/api/chat", dependencies=[Depends(verify_token)])</span>
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">chat_endpoint</span><span class="hljs-params">(request: ChatRequest)</span>:</span>
    ...

Gestion des Erreurs

<span class="hljs-keyword">from</span> openai <span class="hljs-keyword">import</span> OpenAIError, RateLimitError, APITimeoutError

<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">safe_openai_call</span><span class="hljs-params">(messages, max_retries=<span class="hljs-number">3</span>)</span>:</span>
    <span class="hljs-keyword">for</span> attempt <span class="hljs-keyword">in</span> range(max_retries):
        <span class="hljs-keyword">try</span>:
            response = client.chat.completions.create(
                model=<span class="hljs-string">"gpt-4-turbo"</span>,
                messages=messages,
                timeout=<span class="hljs-number">30</span>  <span class="hljs-comment"># Timeout de 30 secondes</span>
            )
            <span class="hljs-keyword">return</span> response

        <span class="hljs-keyword">except</span> RateLimitError:
            <span class="hljs-keyword">if</span> attempt &lt; max_retries - <span class="hljs-number">1</span>:
                time.sleep(<span class="hljs-number">2</span> ** attempt)  <span class="hljs-comment"># Backoff exponentiel</span>
                <span class="hljs-keyword">continue</span>
            <span class="hljs-keyword">else</span>:
                <span class="hljs-keyword">raise</span> Exception(<span class="hljs-string">"Rate limit dépassé, réessayez plus tard"</span>)

        <span class="hljs-keyword">except</span> APITimeoutError:
            <span class="hljs-keyword">if</span> attempt &lt; max_retries - <span class="hljs-number">1</span>:
                <span class="hljs-keyword">continue</span>
            <span class="hljs-keyword">else</span>:
                <span class="hljs-keyword">raise</span> Exception(<span class="hljs-string">"Timeout de l'API OpenAI"</span>)

        <span class="hljs-keyword">except</span> OpenAIError <span class="hljs-keyword">as</span> e:
            <span class="hljs-keyword">raise</span> Exception(f<span class="hljs-string">"Erreur OpenAI: {str(e)}"</span>)

Logging et Debugging

<span class="hljs-keyword">import</span> logging

logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">chat_with_logging</span><span class="hljs-params">(user_message)</span>:</span>
    logger.info(f<span class="hljs-string">"User message: {user_message}"</span>)

    <span class="hljs-keyword">try</span>:
        response = client.chat.completions.create(
            model=<span class="hljs-string">"gpt-4-turbo"</span>,
            messages=[{<span class="hljs-string">"role"</span>: <span class="hljs-string">"user"</span>, <span class="hljs-string">"content"</span>: user_message}]
        )

        assistant_message = response.choices[<span class="hljs-number">0</span>].message.content
        logger.info(f<span class="hljs-string">"Assistant response: {assistant_message}"</span>)
        logger.info(f<span class="hljs-string">"Tokens used: {response.usage.total_tokens}"</span>)

        <span class="hljs-keyword">return</span> assistant_message

    <span class="hljs-keyword">except</span> Exception <span class="hljs-keyword">as</span> e:
        logger.error(f<span class="hljs-string">"Error: {str(e)}"</span>)
        <span class="hljs-keyword">raise</span>

Cas d’Usage Concrets

1. Chatbot Support Client

system_prompt = <span class="hljs-string">"""Tu es un assistant support pour une plateforme e-commerce.
Règles:
- Sois poli et professionnel
- Si tu ne sais pas, redirige vers un humain
- Ne donne jamais de remboursement sans validation
- Limite tes réponses à 3 phrases maximum
"""</span>

messages = [
    {<span class="hljs-string">"role"</span>: <span class="hljs-string">"system"</span>, <span class="hljs-string">"content"</span>: system_prompt},
    {<span class="hljs-string">"role"</span>: <span class="hljs-string">"user"</span>, <span class="hljs-string">"content"</span>: <span class="hljs-string">"Ma commande n'est pas arrivée"</span>}
]

2. Génération de Contenu SEO

<span class="hljs-attr">prompt</span> = <span class="hljs-string">"""Écris un article de blog SEO-optimisé sur le thème: {theme}
Structure:
- Titre H1 accrocheur
- Introduction (100 mots)
- 3 sections H2 avec contenu (200 mots chacune)
- Conclusion avec CTA
- Mots-clés: {keywords}
"""</span>

3. Analyse de Documents

<span class="hljs-attr">document</span> = <span class="hljs-string">"..."</span> <span class="hljs-comment"># Votre document long</span>

<span class="hljs-attr">response</span> = client.chat.completions.create(
    <span class="hljs-attr">model="gpt-4-turbo",</span>
    <span class="hljs-attr">messages=[</span>
        {<span class="hljs-string">"role"</span>: <span class="hljs-string">"user"</span>, <span class="hljs-string">"content"</span>: f<span class="hljs-string">"Résume ce document en 5 points clés:\n\n{document}"</span>}
    ]
)

4. Assistant Code

<span class="hljs-attr">system_prompt</span> = <span class="hljs-string">"""Tu es un expert Python.
Quand on te demande du code:
1. Explique d'abord la logique
2. Donne le code commenté
3. Montre un exemple d'utilisation
"""</span>

Alternatives et Comparaisons

OpenAI vs Anthropic (Claude)

OpenAI (GPT-4) :

✅ Plus puissant pour le raisonnement
✅ Plus d’intégrations
❌ Plus cher
❌ Moins sécurisé (hallucinations)

Anthropic (Claude) :

✅ Plus fiable, moins d’hallucinations
✅ Meilleur pour l’analyse de documents longs
✅ Contexte plus large (200K tokens)
❌ API similaire mais syntaxe différente

Modèles Open-Source (Alternatives)

Llama 3 (Meta) : Gratuit, auto-hébergeable
Mistral : Performance proche GPT-3.5, EU
Falcon : Open-source, performant

Conclusion : Prêt à Construire

Vous avez maintenant toutes les cartes en main pour intégrer l’API OpenAI dans vos projets :

Configuration et premier appel ✅
Architecture backend robuste ✅
Gestion des coûts et monitoring ✅
Best practices de production ✅

Le plus important : Commencez petit, testez, itérez. L’API OpenAI est puissante mais coûteuse. Optimisez dès le début pour éviter les mauvaises surprises.

Prochaines étapes :

Construire un MVP simple
Tester avec de vrais utilisateurs
Monitorer les coûts
Scaler progressivement

💼 Besoin d’aide pour intégrer l’IA dans votre application ? Net & Pro accompagne les entreprises dans le développement de solutions IA sur-mesure, de la conception à la mise en production.

📚 Ressources complémentaires :

Des questions sur l’intégration ? Des cas d’usage spécifiques ? Partagez en commentaire ! 👇

Intégrer l’API OpenAI : Guide Complet pour Développeurs