Case study
Travel Insurance Conversational AI
Overview
A conversational travel-insurance purchase platform built at ICICI Lombard that replaces a traditional multi-screen journey with a single guided chat interface. In one conversation the user moves through quote generation, plan selection, applicant details, insured details, KYC, payment and policy issuance.
I contributed primarily on the frontend — building the conversational UI, the SSE streaming layer, and the dynamic rendering engine that turns backend events into interactive UI.
Problem / Context
Traditional insurance funnels are built around forms, not people. The same data is re-entered across disconnected screens, plan comparisons are buried behind jargon, and KYC and payment — where intent is highest — are also where users drop off. The business wanted a single, auditable, conversational journey that keeps compliance and data accuracy intact.
My Contribution
- Built the conversational UI and message rendering for the full purchase journey
- Implemented the SSE streaming client and an asynchronous stream parser for mixed-format backend events
- Built a dynamic UI-schema renderer that maps backend payloads to interactive components (plan cards, forms, prompts)
- Handled race conditions between plan and premium responses, plus validation, session handling and responsive/mobile UX
- Integrated the frontend against FastAPI endpoints for quote, plans, applicant, insured, KYC and payment
The backend (FastAPI, Oracle DB, rule-based + LLM intent detection, state-machine journey orchestration) was owned by the wider team; my work sat on the client and the API boundary.
Technical Architecture
Rendering: SSR for the initial page shell (insurance pages need SEO), fully client-side for all chat interaction after hydration. React state and useRefpatterns coordinate streaming text, cached payloads and deferred UI rendering.
Key Engineering Challenges
Mixed-format SSE payloads
The stream carried strict JSON, Python-style dicts (None/True/False) and plain text interchangeably, so a single JSON.parse() failed on a large share of events.
Solution: a layered parser — strict JSON first, then a Python-literal to JS normalisation pass, then a plain-text fallback — so no event is ever dropped and the UI degrades gracefully.
Race between plan and premium responses
Plans and premiums arrive as separate SSE chunks in no guaranteed order. If premiums land first, plan cards render with blank prices.
Solution: a cache-and-merge strategy — premium chunks are held in a useRef cache and merged when plans arrive, so cards render once, complete, in a single update. A "wait-for-text-completion" lock stops cards appearing mid-sentence.
Dynamic UI without frontend redeploys
The journey needed new steps and field sets without shipping a frontend build each time.
Solution: a UI-schema renderer that interprets backend-described components at runtime, so journey changes are driven by the backend contract rather than client code.
Mobile animation performance
Multiple plan cards animating simultaneously dropped frame rate on mid-range devices.
Solution: serialised animations with AnimatePresence mode="wait" and auto-expanded the recommended plan on mobile to cut concurrent animation work.
Impact
~60% ↓
LLM cost — rule-first intent routing
<200ms
Response on structured journey steps
58 → 91
Lighthouse across the broader platform
The conversational journey replaced a long multi-screen flow with a single guided conversation, and the dynamic renderer let the team evolve the journey from the backend.
Tech Stack
Next.js 15 (App Router) · React · TypeScript · Server-Sent Events · CSS Modules · FastAPI (backend) · Oracle DB (backend) · rule-based + LLM intent detection · state-machine journey orchestration