POC Chatbot booking — groupe hôtelier européen
Mission en coursAssistant IA conversationnel intégré au site d'un groupe hôtelier européen multi-marques (8 brands). Search hôtel → checkout → 3DS sans quitter la conversation.
- Next.js 15
- TypeScript
- Claude Sonnet 4.6
- Apollo Client
- GraphQL
- Express
- SSE streaming
- Styled Components
- Adyen Drop-in
- Jest
POC d'un chatbot conversationnel embarqué dans la stack Next.js + GraphQL d'un grand groupe hôtelier européen (mission White Label, 8 brands). L'assistant guide l'utilisateur depuis la recherche d'hôtel jusqu'au paiement Adyen 3DS, en réutilisant intégralement l'API GraphQL existante — pas de backend parallèle, pas de duplication de logique. Brand-gated, feature-toggle-gated, multilingue FR/EN, critical-path-safe : 14 366 tests passent toujours, dont 457 dédiés au chatbot, et zéro régression sur les autres marques.
Le problème
Sur un site de réservation hôtelière, l'utilisateur jongle entre une barre de recherche, des filtres latéraux, des cartes d'hôtels, une page détail, un sélecteur de chambre, un formulaire de paiement. Chaque étape est une chance de décrocher. Le funnel classique perd l'utilisateur silencieusement entre la page liste et le checkout.
L'enjeu côté business : ouvrir un nouveau canal de conversion conversationnel sans dupliquer l'API, sans toucher au critical path booking déjà éprouvé en production sur 8 marques, et sans contaminer les marques qui n'ont pas opté pour l'IA.
La solution
Un widget React monté en sibling de l'app Next.js existante, branché sur trois routes Express /api/chat* ajoutées au même serveur custom — pas de microservice, pas de nouvelle stack. Le LLM (Claude Sonnet 4.6) orchestre 12 tools serveur qui consomment exactement les mêmes queries et mutations GraphQL que le site natif : searchResortsWithFilters, availabilityRooms, bookingProcess, cancelBooking, etc.
L'assistant pilote l'utilisateur en streaming SSE, affiche des bulles UI riches (cartes d'hôtels, chips de filtres, sélecteur de chambres, récap checkout, confirmation 3DS), et bascule sur la page de paiement native quand le paiement Adyen doit s'exécuter dans le contexte browser. Brand-gated (LHG only via ALLOWED_BRANDS) + feature-toggle Azure App Config : invisible pour les autres marques, désactivable à chaud.
Ce qui est livré
- Recherche d'hôtels par destination + dates + occupants (FR/EN)
- Filtres dynamiques : prix, étoiles, équipements, marques
- Sélection chambre + tarif avec interception member-rate
- Checkout inline (iframe) ou redirect natif selon le contexte
- Paiement 3DS Adyen avec confirmation dans la conversation
- Annulation d'une réservation existante (query publique getBookingDetails)
- Session HttpOnly signée HMAC-SHA256 (TTL 24h, secret Azure App Config)
- 15 bulles UI typées + 12 tools serveur + 7 actions front-callables (bypass LLM)
- 457 tests Jest dédiés chatbot, 0 régression sur les 14 366 tests du site
- Migration vers MCP (Model Context Protocol) — packaging des toolswip
- Auth-aware user bookings (limitation cross-domain JWT à lever)wip
Process IA
Le chatbot est piloté par Claude Sonnet 4.6 via le SDK Anthropic officiel. Boucle d'orchestration jusqu'à 8 itérations, MAX_INPUT_TOKENS = 100 000, streaming SSE chunk par chunk vers le browser. Chaque tool est défini comme un schéma JSON Schema universel (mappable demain sur OpenAI tools, Mistral tools, Gemini function_declarations) — l'architecture est volontairement découplée du SDK : le swap d'un LLM concurrent coûte ~150-200 LOC dans un seul fichier orchestrator.ts.
Côté process delivery, le POC a été spec'é puis livré en 7 plans d'implémentation distincts (writing-plans → executing-plans Superpowers), reviews intermédiaires entre tasks, suivi via Linear, audits techniques tracés dans docs/superpowers/audits/. La prochaine étape stratégique est d'extraire les 12 tools dans un MCP server partagé — ce qui rendrait les mêmes capacités consommables par l'app mobile, l'outillage support (Claude Desktop), ou n'importe quel client LLM tiers.
- Claude Sonnet 4.6 (Anthropic)
- Claude Code (Anthropic)
- Superpowers (Jesse Vincent)
- MCP (Model Context Protocol)