🤖 Chatbot con OpenAI API e JS

Impara a creare un chatbot intelligente usando JavaScript vanilla e l'API di OpenAI

📚 Tutorial Completo

1 Ottenere la API Key

Vai su platform.openai.com e crea una nuova API key. Conservala in modo sicuro!

2 Struttura HTML di Base

Crea la struttura base del chatbot:

<div class="chatbot-container">
    <div class="chat-header">ChatBot AI</div>
    <div class="chat-messages" id="messages"></div>
    <div class="chat-input">
        <input type="text" id="userInput" placeholder="Scrivi un messaggio...">
        <button onclick="sendMessage()">Invia</button>
    </div>
</div>
3 Configurazione JavaScript

Imposta le variabili e la funzione principale:

// Configurazione
const API_URL = 'https://api.openai.com/v1/chat/completions';
let API_KEY = ''; // Inserire la propria API key
const MODEL = 'gpt-4.1-nano'; // Modello specificato

// Funzione per inviare messaggio
async function sendMessage() {
    const input = document.getElementById('userInput');
    const message = input.value.trim();
    
    if (!message || !API_KEY) return;
    
    // Aggiungi messaggio utente
    addMessage(message, 'user');
    input.value = '';
    
    // Mostra indicatore di caricamento
    showLoading();
    
    try {
        const response = await callOpenAI(message);
        hideLoading();
        addMessage(response, 'bot');
    } catch (error) {
        hideLoading();
        addMessage('Errore: ' + error.message, 'bot');
    }
}
4 Chiamata API OpenAI

Funzione per comunicare con l'API:

async function callOpenAI(message) {
    const response = await fetch(API_URL, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${API_KEY}`
        },
        body: JSON.stringify({
            model: MODEL,
            messages: [
                {
                    role: 'system',
                    content: 'Sei un assistente virtuale utile e amichevole.'
                },
                {
                    role: 'user',
                    content: message
                }
            ],
            max_tokens: 150,
            temperature: 0.7
        })
    });
    
    if (!response.ok) {
        throw new Error(`Errore API: ${response.status}`);
    }
    
    const data = await response.json();
    return data.choices[0].message.content;
}
5 Funzioni di Supporto

Aggiungi le funzioni per gestire l'interfaccia:

function addMessage(text, sender) {
    const messagesDiv = document.getElementById('messages');
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${sender}-message`;
    messageDiv.textContent = text;
    messagesDiv.appendChild(messageDiv);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

function showLoading() {
    const messagesDiv = document.getElementById('messages');
    const loadingDiv = document.createElement('div');
    loadingDiv.className = 'message bot-message';
    loadingDiv.id = 'loading';
    loadingDiv.innerHTML = '<div class="loading"></div>Sto pensando...';
    messagesDiv.appendChild(loadingDiv);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

function hideLoading() {
    const loading = document.getElementById('loading');
    if (loading) loading.remove();
}
Importante: Non esporre mai la tua API key nel codice client in produzione! Questo esempio è puramente dimostrativo; in un sistema reale utilizzerai una variabile di ambiente, un file di configurazione esterna (letto con ajax / PHP) o un sistema di localStorage.

🔧 Personalizzazioni Avanzate

Puoi personalizzare il comportamento del chatbot modificando:

  • temperature: Controlla la creatività (0.0-1.0)
  • max_tokens: Lunghezza massima risposta
  • system message: Personalità del bot
  • Cronologia: Mantieni conversazioni precedenti

🚀 Demo Funzionante

La chiave viene usata solo per questa demo e non viene salvata.
🤖 ChatBot AI - Demo
Ciao! Inserisci la tua API key sopra e iniziamo a chattare! 👋

📝 Codice Completo

Ecco il codice JavaScript completo per il chatbot:

// Configurazione chatbot
const API_URL = 'https://api.openai.com/v1/chat/completions';
let API_KEY = '';
const MODEL = 'gpt-4.1-nano';

function setApiKey(key) {
    API_KEY = key;
    document.getElementById('sendBtn').disabled = !key;
}

async function sendMessage() {
    const input = document.getElementById('userInput');
    const message = input.value.trim();
    
    if (!message || !API_KEY) return;
    
    addMessage(message, 'user');
    input.value = '';
    
    showLoading();
    
    try {
        const response = await callOpenAI(message);
        hideLoading();
        addMessage(response, 'bot');
    } catch (error) {
        hideLoading();
        addMessage('Errore: ' + error.message, 'bot');
    }
}

async function callOpenAI(message) {
    const response = await fetch(API_URL, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${API_KEY}`
        },
        body: JSON.stringify({
            model: MODEL,
            messages: [
                {
                    role: 'system',
                    content: 'Sei un assistente virtuale utile e amichevole.'
                },
                {
                    role: 'user',
                    content: message
                }
            ],
            max_tokens: 150,
            temperature: 0.7
        })
    });
    
    if (!response.ok) {
        throw new Error(`Errore API: ${response.status}`);
    }
    
    const data = await response.json();
    return data.choices[0].message.content;
}

function addMessage(text, sender) {
    const messagesDiv = document.getElementById('messages');
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${sender}-message`;
    messageDiv.textContent = text;
    messagesDiv.appendChild(messageDiv);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

function showLoading() {
    const messagesDiv = document.getElementById('messages');
    const loadingDiv = document.createElement('div');
    loadingDiv.className = 'message bot-message';
    loadingDiv.id = 'loading';
    loadingDiv.innerHTML = '<div class="loading"></div>Sto pensando...';
    messagesDiv.appendChild(loadingDiv);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

function hideLoading() {
    const loading = document.getElementById('loading');
    if (loading) loading.remove();
}

function copyCode(btn) {
    const code = btn.nextElementSibling.textContent;
    navigator.clipboard.writeText(code);
    btn.textContent = 'Copiato!';
    setTimeout(() => btn.textContent = 'Copia', 2000);
}