docs

MemexLLM Frontend Documentation

Next.js 14 application with TypeScript, Tailwind CSS, and shadcn/ui for the MemexLLM AI research assistant.

Overview

The frontend provides a modern, responsive interface for interacting with the MemexLLM backend. It supports document upload, AI-powered chat with citations, content generation, and notebook management.

Documentation Index (A-Z)

Getting Started

Document	Description
API Client	Backend API integration
Architecture	Frontend architecture and design patterns
Components	UI components documentation
Configuration	Environment variables and setup
Hooks	Custom React hooks
Types	TypeScript type definitions

Development

Document	Description
Contributing	Contribution guidelines

Quick Start

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm
• Backend API running

Installation

cd frontend
pnpm install

Environment Setup

Create .env.local:

# Required
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-anon-key
NEXT_PUBLIC_API_URL=http://localhost:8000

# Optional
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_SENTRY_DSN=your-sentry-dsn
NEXT_PUBLIC_POSTHOG_KEY=phc_...
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
NEXT_PUBLIC_LANGFUSE_HOST=https://cloud.langfuse.com

Development

pnpm dev

Open http://localhost:3000

Tech Stack

Category	Technology
Framework	Next.js 14 (App Router)
Language	TypeScript
Styling	Tailwind CSS
Components	shadcn/ui
State	React hooks + Context
Auth	Supabase Auth
API	REST + Server-Sent Events
Testing	Jest + React Testing Library

Project Structure

frontend/
├── app/                    # Next.js App Router
│   ├── auth/              # Authentication pages
│   ├── home/              # Home/dashboard page
│   ├── notebook/          # Notebook pages
│   ├── settings/          # Settings page
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Landing page
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   ├── landing/          # Landing page sections
│   └── *.tsx             # Feature components
├── hooks/                # Custom React hooks
├── lib/                  # Utilities and API
│   ├── api/             # API clients
│   ├── supabase/        # Supabase clients
│   ├── analytics/       # Analytics providers
│   ├── types.ts         # Type definitions
│   └── utils.ts         # Utilities
├── public/              # Static assets
└── __tests__/           # Test files

Features

• Authentication: Supabase Auth with SSR support
• Document Management: Upload and manage research documents
• Google Drive Integration: Import files directly from Google Drive
• AI Chat: Contextual Q&A with source citations and smart prompts
• Content Generation: Podcasts, quizzes, flashcards, mindmaps
• Real-time: SSE streaming for chat responses
• Responsive: Mobile-first design
• Analytics: User behavior tracking with PostHog
• Dark Mode: System-aware theming

Scripts

Command	Description
pnpm dev	Start development server
pnpm build	Build for production
pnpm start	Start production server
pnpm lint	Run ESLint
pnpm test	Run tests
pnpm test:watch	Run tests in watch mode
pnpm test:coverage	Run tests with coverage

License

MIT License