Getting Started

bun add @loopkit/nestjs

# Required for Prisma adapter
bun add @prisma/client

# Optional content transforms
bun add marked        # Markdown rendering
bun add katex         # Math rendering
bun add highlight.js  # Code syntax highlighting
bun add sanitize-html # XSS protection

bun add @loopkit/react

bun add react react-dom  # React 18 or 19

import { Module } from '@nestjs/common';
import { LoopKitModule, PrismaLoopKitAdapter } from '@loopkit/nestjs';
import { PrismaService } from './prisma.service';

@Module({
    imports: [
        LoopKitModule.register({
            storage: new PrismaLoopKitAdapter(new PrismaService()),
        }),
    ],
})
export class AppModule {}

import { Controller, Post, Body, Param } from '@nestjs/common';
import { ReviewSessionService, DeckService } from '@loopkit/nestjs';

@Controller('loopkit')
export class FlashcardController {
    constructor(
        private readonly session: ReviewSessionService,
        private readonly decks: DeckService,
    ) {}

    @Post('decks/:deckId/study')
    async buildQueue(@Param('deckId') deckId: string) {
        return this.session.buildQueue(deckId);
    }

    @Post('cards/:cardId/grade')
    async gradeCard(
        @Param('cardId') cardId: string,
        @Body() body: { grade: string; timeTakenMs: number },
    ) {
        return this.session.gradeCard(cardId, body.grade as any, body.timeTakenMs);
    }
}

import { NoteTypeService } from '@loopkit/nestjs';

@Injectable()
export class AppInitService implements OnModuleInit {
    constructor(private readonly noteTypes: NoteTypeService) {}

    async onModuleInit() {
        await this.noteTypes.seedDefaults();
    }
}

import { LoopKitProvider } from '@loopkit/react';
import '@loopkit/react/styles.css';

function App() {
    return (
        <LoopKitProvider apiUrl="/api/loopkit">
            <YourApp />
        </LoopKitProvider>
    );
}

import { ReviewSession } from '@loopkit/react';

function StudyPage({ deckId }: { deckId: string }) {
    return (
        <ReviewSession
            deckId={deckId}
            onComplete={(summary) => {
                console.log(`Reviewed ${summary.totalReviewed} cards`);
            }}
        />
    );
}

import { useReviewSession } from '@loopkit/react';

function CustomStudy({ deckId }: { deckId: string }) {
    const {
        sessionState,
        currentCard,
        renderedContent,
        nextIntervals,
        progress,
        startSession,
        showAnswer,
        grade,
    } = useReviewSession();

    if (sessionState === 'idle') {
        return <button onClick={() => startSession(deckId)}>Start Study</button>;
    }

    if (sessionState === 'reviewing' && renderedContent) {
        return (
            <div>
                <p>{progress.reviewed} / {progress.total}</p>
                <div dangerouslySetInnerHTML={{ __html: renderedContent.front }} />
                <button onClick={showAnswer}>Show Answer</button>
            </div>
        );
    }

    if (sessionState === 'answered' && renderedContent) {
        return (
            <div>
                <div dangerouslySetInnerHTML={{ __html: renderedContent.back }} />
                <div>
                    <button onClick={() => grade('again')}>Again {nextIntervals?.again}</button>
                    <button onClick={() => grade('hard')}>Hard {nextIntervals?.hard}</button>
                    <button onClick={() => grade('good')}>Good {nextIntervals?.good}</button>
                    <button onClick={() => grade('easy')}>Easy {nextIntervals?.easy}</button>
                </div>
            </div>
        );
    }

    return <p>Session complete!</p>;
}