Chatbot AI per Siti Web con JavaScript, FastAPI e Turnstile

Name: Chatbot AI per Siti Web con JavaScript, FastAPI e Turnstile
Rating: 5.0 (1 reviews)

Sviluppa widget e backend, integra un LLM, blocca i bot malevoli e pubblica un assistente virtuale in ogni sito web

Created byMassimiliano Sorrentino

Last updated 5/2026

Italian

What you'll learn

Progettare e implementare API REST per un chatbot (endpoint, JSON, error handling, hardening)
Sviluppare backend FastAPI e frontend JavaScript per un widget chatbot integrabile in ogni sito web
Scrivere system prompt e istruzioni: tono, policy, limiti, gestione casi “non so” e fallback
Integrare un LLM: chiamate API, gestione contesto e controllo del formato delle risposte
Gestione delle chat degli utenti
Gestione dei session token firmati
Proteggere il bot con Cloudflare Turnstile: widget client e verifica token server-side
Deploy in produzione: Apache reverse proxy, HTTPS con Certbot/Let’s Encrypt e hardening base

Course content

7 sections • 15 lectures • 5h 5m total length

Presentazione docente e panoramica del corso16:07
Chi sono, a chi e' rivolto, prerequisiti minimi e cosa otterrai a fine percorso. Mappa ad alto livello: widget JavaScript embeddabile, backend FastAPI con API REST, integrazione LLM, Turnstile anti-bot e deploy minimale con HTTPS. Come seguire: teoria con slide e pratica con screen share su Cursor e file del progetto.

REST per il chatbot: endpoint, JSON e status code36:01
Teoria essenziale: come modellare un'API REST per un chatbot. Cosa sono risorse ed endpoint, quali payload JSON usare, come scegliere status code e messaggi di errore coerenti. Colleghiamo i concetti agli endpoint del progetto: /api/config/{site_id}, /api/session/init, /api/chat.
Pratica: leggiamo app/main.py (Pydantic, CORS, errori)15:20
Screen share su Cursor: lettura guidata di chatbot_sorretti_it/app/main.py. Individuiamo modelli Pydantic per request/response, validazione (Field e max length), gestione errori (HTTPException) e configurazione CORS. Obiettivo: sapere dove mettere mani per aggiungere o modificare un endpoint senza rompere i contratti.

Teoria: architettura e flusso end-to-end della chat35:06
Mappa delle cartelle e componenti chiave: public/widget.js (widget), app/main.py (API), app/tenants.json (tenant e prompt), app/groq_client.py (LLM), app/turnstile.py (verifica anti-bot), ops/apache (deploy). Flusso: widget -> /api/config -> /api/session/init -> /api/chat -> risposta.
Pratica: widget JS (embed, UI, chiamate API)29:21
Screen share su Cursor: apriamo chatbot_sorretti_it/public/widget.js. Vediamo come si embedda con data-site, come si costruisce la UI, come si chiama /api/config e come parte il flusso verso /api/session/init e /api/chat. Criteri di correttezza: gestione errori, stato UI e history in-session.

Teoria: system prompt e limiti per tenant27:38
Come controllare comportamento e costi del chatbot con un system prompt per-tenant. Struttura di tenants.json: name, allowed_origins/hostnames, system_prompt e limits (history, message length, max tokens). Obiettivo: capire cosa cambia tra siti diversi e come evitare risposte inventate.
Pratica: /api/chat e client LLM (Groq)19:45
Screen share su Cursor: percorriamo la logica di /api/chat in app/main.py e la chiamata al provider in app/groq_client.py. Vediamo come si compone messages (system + history + user), come si tronca la history e come si gestiscono errori upstream. Obiettivo: sapere dove intervenire per cambiare modello, limiti o policy di risposta.

Teoria: come funziona Turnstile nel nostro flusso32:37
Spiegazione end-to-end: rendering del widget Turnstile nel frontend, ottenimento token, invio al backend su /api/session/init e verifica server-side tramite siteverify. Controlli di sicurezza: hostname allowlist per tenant e gestione errori (403) quando la verifica fallisce. Obiettivo: sapere esattamente cosa protegge e dove si posiziona.
Pratica: crea e configura Turnstile su Cloudflare20:15
Configurazione pratica: creazione account Cloudflare, creazione di un widget Turnstile, ottenimento sitekey e secret key. Integrazione nel progetto: aggiornamento .env (TURNSTILE_SITEKEY e TURNSTILE_SECRET_KEY) e verifica del flusso /api/session/init. Controlli finali: hostname corretto e comportamento del widget in caso di errore.

Teoria: reverse proxy e HTTPS (cosa serve davvero)39:45
Concetti essenziali per andare online: perche' mettere Apache davanti a Uvicorn, come esporre /api e servire il widget, e cosa significa HTTPS in pratica. Checklist: dominio, DNS, proxy, certificato, variabili d'ambiente e avvio processo.
Teoria: process manager e variabili d'ambiente (pm2 e .env)17:29
Micro-lezione per completare il deploy reale: perche' serve un process manager, come tenere online Uvicorn e come leggere i problemi dai log. Checklist .env del progetto: GROQ_API_KEY, GROQ_MODEL, TURNSTILE_SITEKEY, TURNSTILE_SECRET_KEY, SESSION_SECRET e ALLOWED_ORIGINS. Focus su un punto critico: avvio pm2 con working directory corretta per trovare il modulo app.
Pratica: leggiamo i vhost Apache e verifichiamo il proxy10:20
Screen share su Cursor: leggiamo ops/apache/*.conf. Individuiamo ProxyPass /api, redirect HTTP->HTTPS e certificati. Mini-verifica: cosa controllare quando vedi 404/503 su /api e quali file modificare per ripristinare la configurazione dopo Certbot. Obiettivo: avere un metodo ripetibile e minimale.
Pratica: aggiungere un tenant e update automatici (GitHub Actions)3:30
Screen share su Cursor: aggiungiamo un nuovo site_id in app/tenants.json (allowed_origins, allowed_hostnames, system_prompt, limits), aggiorniamo
ALLOWED_ORIGINS in .env e ricaviamo lo snippet di embed con data-site. Chiudiamo con una panoramica pratica del deploy automatico: cosa succede al push su master (pull, pip install, pm2 restart) e quali secrets servono per l'SSH.
Pratica: test del chatbot in azione1:57
Screen share finale di verifica end-to-end: apriamo il sito, avviamo il widget,
superiamo Turnstile e proviamo alcune richieste reali per vedere il chatbot in azione. Controlliamo il flusso minimo lato utente e ripassiamo cosa verificare quando il sistema risponde correttamente dopo configurazione e deploy.

Requirements

Non serve essere esperti, ma è utile saper leggere codice. Useremo Cursor/AI per aiutarti a scrivere e capire JavaScript e Python; fornirò template e materiali completi.
Base di programmazione. Utile: basi HTTP/JSON. Servono PC, terminale, editor (VS Code o Cursor), Python e un server Linux con dominio per deploy/SSL.

Description

In questo corso costruirai e comprenderai un chatbot web completo, basato su un progetto reale: un widget JavaScript embeddabile e un backend FastAPI che espone API REST per configurazione, inizializzazione sessione e chat.

Vedrai come si struttura un servizio multi-tenant tramite site_id, con prompt e limiti per sito, e come si integra un provider LLM (via API) mantenendo controllo su contesto, history e output. Lavoreremo su contratti request/response chiari, validazione con Pydantic, gestione errori coerente e CORS per permettere l'integrazione del widget su domini diversi senza compromettere la sicurezza.

Affronteremo anche aspetti pratici che in un progetto reale fanno la differenza: limiti sulla history e sulla lunghezza dei messaggi, protezione contro abusi, variabili d'ambiente e checklist di configurazione per passare da locale a produzione senza sorprese.

Una parte centrale è dedicata alla protezione anti-bot con Cloudflare Turnstile: prima chiariremo il meccanismo (token, verifica server-side, controlli hostname), poi farai la configurazione pratica su Cloudflare e collegherai chiavi e variabili d'ambiente al progetto.

Chiudiamo con il deploy in produzione: configureremo un reverse proxy Apache per esporre in sicurezza le API, implementeremo connessioni HTTPS con certificati Let's Encrypt e gestiremo l'applicazione con un process manager. Vedremo infine il flusso end-to-end: dall'aggiunta di un nuovo tenant fino alla generazione dello snippet JavaScript da copiare e incollare nel sito di destinazione.

Per chi è questo corso?
Questo percorso ha un doppio valore. Da un lato, è un'ottima palestra didattica per chi vuole imparare a progettare API REST solide, gestire la sicurezza e strutturare un'architettura moderna. Dall'altro, ti consegna un progetto reale, completo e "production-ready": un widget incorporabile con estrema facilità in qualsiasi sito web.

Che tu sia uno sviluppatore con le basi di programmazione che vuole fare il salto di qualità, un developer senior in cerca di un'architettura di riferimento per integrare l'IA generativa, o uno startupper che desidera lanciare il proprio servizio SaaS di chatbot, qui troverai un prodotto finito, spendibile e pronto per il mercato.

Who this course is for:

Sviluppatori web (o aspiranti) e startupper che vogliono creare e pubblicare un chatbot su siti web con JavaScript e FastAPI, usando REST API, Turnstile e deploy Apache+SSL.
Sviluppatori che vogliono imparare le API REST
Sviluppatori che vogliono imparare a utilizzare Cloudflare Turnstile per la protezione antibot

Chatbot AI per Siti Web con JavaScript, FastAPI e Turnstile

What you'll learn

Explore related topics

Course content

Introduzione1 lecture • 16min

REST in FastAPI (fondamenti sul progetto)2 lectures • 51min

Tour del progetto e widget embeddabile2 lectures • 1hr 4min

LLM e multi-tenant (site_id)2 lectures • 47min

Cloudflare Turnstile (anti-bot)2 lectures • 53min

Deploy minimale e chiusura5 lectures • 1hr 13min

Conclusione1 lecture • 1min

Requirements

Description

Who this course is for: