LearnKit AI

Open-source TypeScript engine and React components for embedding personalized AI learning paths in any product. No API key. No backend. Apache-2.0.

Quickstart

Install both packages, call generateLearningPath(), and render the result.

Install

pnpm add @learnkit-ai/core @learnkit-ai/react
# or
npm install @learnkit-ai/core @learnkit-ai/react

Generate a path

import { generateLearningPath } from '@learnkit-ai/core';

const path = generateLearningPath({
  role:  'Software Engineer',
  tools: ['Claude', 'Cursor'],
  goal:  'ship a production agent',
  level: 'beginner',
});

console.log(path.weeks.length);              // 4
console.log(path.weeks[0].lessons[0].title); // "Your first system prompt"

Render it

import { LearningPath } from '@learnkit-ai/react';

export default function OnboardingPage() {
  return (
    <LearningPath
      input={{
        role:  'Software Engineer',
        tools: ['Claude', 'Cursor'],
        goal:  'ship a production agent',
        level: 'beginner',
      }}
      theme="warm"
    />
  );
}

No network calls. generateLearningPath() is a pure function. Same input always produces the same path. Works in SSR, edge runtimes, or plain Node.js. No API key required.

@learnkit-ai/core

generateLearningPath(input)

The main export. Pure function. No async, no network, no side effects. Validates input with Zod before generating.

function generateLearningPath(input: LearningPathInput): LearningPath

getSupportedRoles()

Returns the list of role labels you can pass as input.role.

import { getSupportedRoles } from '@learnkit-ai/core';

getSupportedRoles();
// ['Product Manager', 'Software Engineer', 'Designer',
//  'Data Analyst', 'Marketer', 'Founder',
//  'Operations', 'Researcher']

getSupportedTools()

Returns the list of tool names you can include in input.tools.

import { getSupportedTools } from '@learnkit-ai/core';

getSupportedTools();
// ['Claude', 'ChatGPT', 'Cursor', 'Copilot',
//  'Gemini', 'Midjourney', 'Notion AI', 'Perplexity']

isRoleSupported(role)

import { isRoleSupported } from '@learnkit-ai/core';

isRoleSupported('Software Engineer'); // true
isRoleSupported('Astronaut');         // false

@learnkit-ai/react

<LearningPath />

Renders a full 4-week path. Calls generateLearningPath() internally from the provided input.

<LearningPath
  input={LearningPathInput}     // required
  onLessonClick={(lesson) => {}} // optional
  theme="warm"                   // "warm" | "midnight" | "technical"
  className="my-class"           // optional
/>

<LessonCard />

Renders a single lesson. Useful when you want to integrate individual lessons into your own layout.

<LessonCard
  lesson={Lesson}         // required
  status="completed"      // "not_started" | "in_progress" | "completed"
  onClick={() => {}}      // optional
  className="my-card"     // optional
/>

<AIGuide />

Drop-in avatar + tip card. Embed anywhere you want contextual help. No configuration required beyond a message.

<AIGuide
  message="Need a hand with your first prompt?"
  animated={true}  // default true
  size={28}        // avatar size in px, default 28
/>

useLearnKit(input)

Headless hook. Returns { path, error }. Build your own UI on top - the hook handles input validation and memoizes the result.

import { useLearnKit } from '@learnkit-ai/react';

function MyCustomPath() {
  const { path, error } = useLearnKit({
    role:  'Product Manager',
    tools: ['ChatGPT', 'Notion AI'],
    goal:  'run an AI discovery sprint',
    level: 'intermediate',
  });

  if (error) return <p>{error.message}</p>;
  return (
    <ul>
      {path.weeks.map(week => (
        <li key={week.id}>{week.title}</li>
      ))}
    </ul>
  );
}

Types & schemas

All types are inferred from Zod schemas in @learnkit-ai/schemas. No manual type duplication. Import from either the schemas package directly or from your consuming package.

// LearningPathInput - the contract. Will not change without a major version bump.
type LearningPathInput = {
  role:           string                              // from getSupportedRoles()
  tools:          string[]                            // from getSupportedTools()
  goal:           string
  level:          'beginner' | 'intermediate' | 'advanced'
  companyContext?: string                             // optional, max 500 chars
}

// LearningPath - the output
type LearningPath = {
  id:    string
  input: LearningPathInput
  weeks: Week[]
}

type Week = {
  id:      string
  title:   string
  lessons: Lesson[]
}

type Lesson = {
  id:          string
  title:       string
  description: string
  duration:    number  // minutes
  tools:       string[]
}

Theming

@learnkit-ai/react uses CSS custom properties only - no Tailwind. Three built-in themes ship out of the box. Override any token in your own CSS.

/* Built-in themes - pass as the theme prop */
theme="warm"       // warm paper, terracotta accent (default)
theme="midnight"   // dark ink, blue accent
theme="technical"  // neutral gray, green accent

/* Override any token in your own CSS */
:root {
  --accent:    #7C3AED;  /* your brand color */
  --paper:     #FAFAF8;
  --mono:      'JetBrains Mono', monospace;
}

Self-hosting

To fork and customize the lesson templates, clone the repo and edit packages/core/src/generate.ts.

git clone https://github.com/learnkit-ai/learnkit
cd learnkit
pnpm install

# Edit lesson templates
code packages/core/src/generate.ts

# Run tests after any changes
pnpm test

# Start the dev server
pnpm dev

Contributions welcome. See CONTRIBUTING.md for the commit and PR conventions. Apache-2.0 - use it, fork it, ship it.