Guided Conversational Experience Engine (Genkit Flows + Typed React Client)
An enterprise conversational-AI platform
Overview
A “guided experience” engine for the conversational-AI platform: a Genkit-based backend of AI flows, prompts, and tools paired with a type-safe React client that walks users through structured, multi-step AI interactions rather than open-ended chat.
Why It Exists
Open-ended chat is not always the right interface. Many enterprise workflows benefit from a guided path, steps, prompts, and constraints that steer users toward a useful outcome while still drawing on an LLM and a knowledge base. This service provides that structured layer.
What We Built
A TypeScript Firebase Functions backend on Genkit (genkit, @genkit-ai/firebase, genkitx-openai) structured into flows, prompts, tools, and a storage module, with retrieval via @genkit-ai/dev-local-vectorstore and llm-chunk, and Firebase Storage for assets. The client is a Vite + React app using TanStack Router (file-based, generated routeTree.gen.ts) and TanStack Query for type-safe routing and data fetching, with entities and routes modules. Answer rendering is notably rich: react-markdown with remark-gfm, remark-math + rehype-katex for math, and rehype-starry-night for syntax-highlighted code, plus custom scrollbar styling.
Technologies & Approach
Genkit provides the structured AI orchestration; TanStack Router/Query give the client end-to-end type safety; KaTeX and starry-night rendering make it suitable for technical, math- and code-heavy guided content. The shared Genkit + local-vector-store foundation mirrors the sibling content-generation service, reflecting a consistent platform architecture.
Outcome / Impact
Delivered a guided, multi-step conversational mode for the platform with first-class technical content rendering, extending the product beyond freeform chat into structured, outcome-oriented flows.
Capabilities Demonstrated
- Guided, multi-step AI conversation design
- Genkit flow/tool/prompt orchestration with RAG grounding
- Type-safe React routing and data fetching (TanStack)
- Rich technical rendering (Markdown, math, syntax-highlighted code)