Embedding AI learning paths in your SaaS onboarding flow

SaaS products that sell AI features have a new cold-start problem: users sign up, land in the product, and have no idea how to build a prompt that actually works. The standard fix is a tooltip tour. That is not enough.

LearnKit AI is designed to sit inside your product and give each user a personalized 30-day curriculum tuned to their role and the specific AI tools your product exposes. The React component takes a role, a set of tools, and a goal, and renders a full path with no backend required.

The implementation is three steps. First, detect or ask for the user's role at signup - store it in your user record. Second, install @learnkit-ai/react and drop <LearningPath input={{ role: user.role, tools: yourProductTools, goal: yourDefaultGoal, level: user.level }} theme="warm" onLessonClick={openWorkbench} /> into your onboarding modal or help sidebar. Third, wire the onLessonClick callback to open whatever lesson viewer you want - the component just fires the Lesson object.

The useLearnKit() hook gives you a headless alternative if your design system does not match the built-in themes. It returns { path, error } and memoizes the result, so re-renders are safe.

One detail worth knowing: the path is fully generated client-side. There is no network call in generateLearningPath(). That means it works in SSR, in edge functions, in offline mode. It also means you can pregenerate paths for your most common role/level combinations and cache them at build time - a pattern we use on /demo to make the initial render instant.