Modern React Frontend for AI-Powered Document Intelligence
Next.js 14 application with TypeScript, Tailwind CSS, and shadcn/ui for the MemexLLM AI research assistant.
Backend Repo • Features • Architecture • Tech Stack • Quick Start • Documentation • Deployment
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.
Built for production with server-side rendering, real-time streaming, and enterprise-grade authentication.
The frontend follows a layered architecture with clear separation of concerns:
┌─────────────────────────────────────────────────────────────┐
│ User Interface │
│ (Landing, Home, Notebook Pages) │
└──────────────────────────┬──────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Component Layer │
│ (Chat Panel, Sources Panel, Studio Panel, etc.) │
└──────────────────────────┬──────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Hooks Layer │
│ (useNotes, useStudio, useChat, etc.) │
└──────────────────────────┬──────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ API Client Layer │
│ (notebooksApi, chatApi, documentsApi, etc.) │
└──────────────────────────┬──────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Backend API (FastAPI) │
└─────────────────────────────────────────────────────────────┘
- Server Components: Default Next.js 14 App Router pattern for optimal performance
- Client Components: Interactive UI components with React hooks
- Custom Hooks: Reusable stateful logic (useNotes, useStudio, useChat)
- API Client Pattern: Type-safe REST API integration with SSE streaming
- Authentication: JWT-based auth with Supabase Auth SSR support
See docs/ARCHITECTURE.md for detailed architecture documentation.
- Authentication: Supabase Auth with SSR support
- Document Management: Upload and manage research documents (PDF, TXT, DOCX, audio, YouTube, web pages)
- AI Chat: Contextual Q&A with source citations and streaming responses
- Content Generation: Create podcasts, quizzes, flashcards, and mindmaps from documents
- Notebook Organization: Organize research into notebooks with chat history and notes
- Real-time: Server-Sent Events (SSE) for streaming chat responses
- Responsive: Mobile-first design with dark/light mode
| 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 |
| Analytics | PostHog + Sentry |
- Node.js 18+
- pnpm (recommended) or npm
- Backend API running
cd frontend
pnpm installCreate .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=your-posthog-keypnpm devfrontend/
├── app/ # Next.js App Router
│ ├── auth/ # Authentication pages (login, signup, etc.)
│ ├── home/ # Home/dashboard page
│ ├── notebook/ # Notebook workspace pages
│ ├── settings/ # User settings page
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Landing page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── landing/ # Landing page sections
│ ├── chat-panel.tsx # Main chat interface
│ ├── sources-panel.tsx # Document sources panel
│ ├── notes-panel.tsx # Notes management
│ ├── studio-panel.tsx # Content generation
│ └── ...
├── hooks/ # Custom React hooks
│ ├── use-notes.ts # Notes CRUD + auto-save
│ ├── use-studio.ts # Content generation
│ └── use-suggested-questions.ts
├── lib/ # Utilities and API
│ ├── api/ # API clients
│ │ ├── client.ts # Base HTTP client
│ │ ├── types.ts # API types
│ │ ├── notebooks.ts
│ │ ├── chat.ts
│ │ ├── documents.ts
│ │ └── ...
│ ├── supabase/ # Supabase clients
│ ├── analytics/ # Analytics providers
│ ├── types.ts # Shared types
│ └── utils.ts # Utilities
├── public/ # Static assets
├── docs/ # Documentation
└── __tests__/ # Test files
See the docs/ directory for detailed documentation:
| Document | Description |
|---|---|
| Architecture | System design, data flows, and architectural patterns |
| API Client | Backend API integration |
| Components | UI components documentation |
| Configuration | Environment variables and setup |
| Hooks | Custom React hooks |
| Types | TypeScript type definitions |
| 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 |
Main chat interface with streaming support, citations, and suggested questions.
Document management with upload, status tracking, and preview.
Rich text notes with auto-save using TipTap editor.
AI content generation interface for podcasts, quizzes, flashcards, and mindmaps.
The frontend communicates with the backend via REST API and Server-Sent Events:
import { chatApi } from "@/lib/api";
// Send message with streaming
await chatApi.sendMessageStream(
notebookId,
"What is this document about?",
(token) => setMessage(prev => prev + token),
(citations) => setCitations(citations),
() => setIsStreaming(false)
);Uses Supabase Auth with cookie-based sessions:
import { createClient } from "@/lib/supabase/client";
const supabase = createClient();
const { data: { session } } = await supabase.auth.getSession();Uses Tailwind CSS with custom brand colors:
/* Primary brand color */
.bg-synapse-500 /* #ff8200 */
/* Surface colors for dark theme */
.bg-surface-0 /* #0a0a0a */
.bg-surface-1 /* #141414 */| Variable | Required | Description |
|---|---|---|
NEXT_PUBLIC_SUPABASE_URL |
Yes | Supabase project URL |
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY |
Yes | Supabase anon key |
NEXT_PUBLIC_API_URL |
Yes | Backend API URL |
NEXT_PUBLIC_APP_URL |
No | Frontend app URL |
NEXT_PUBLIC_SENTRY_DSN |
No | Sentry error tracking |
NEXT_PUBLIC_POSTHOG_KEY |
No | PostHog analytics |
- Push to GitHub
- Import project in Vercel
- Add environment variables
- Deploy
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]- Follow the existing code style
- Use TypeScript strict mode
- Write tests for new features
- Update documentation
See CONTRIBUTING.md for details.
MIT License