LS Docs

AI-powered writing workspace built with Next.js + NVIDIA NIM

LS Docs is a modern, feature-rich writing application that combines rich text editing, AI-powered writing assistance, and flexible export options. Built for writers, developers, and anyone who needs a powerful documentation workspace.

System Architecture

flowchart TB
    subgraph Client["Frontend - Next.js App Router"]
        UI["UI Components\n(Radix UI + Tailwind)"]
        Editor["Editor Core\n(Tiptap Editor)"]
        Store["State Management\n(Zustand Store)"]
        Theme["Theming\n(next-themes)"]

        UI --> Editor
        UI --> Theme
        Editor --> Store
    end

    subgraph Extensions["Tiptap Extensions"]
        TE1["Text Formatting\n(Bold, Italic, Underline, etc.)"]
        TE2["Tables\n(Spreadsheet Support)"]
        TE3["Code Blocks\n(Syntax Highlighting)"]
        TE4["Task Lists\n& Checkboxes"]
        TE5["HTML Blocks\n(Custom Extension)"]
        TE6["AI Suggestions\n(NVIDIA NIM Integration)"]
    end

    subgraph Export["Export Engine"]
        EXP1["PDF Export\n(jsPDF + html2canvas)"]
        EXP2["DOCX Export\n(docx library)"]
        EXP3["Markdown Export\n(turndown)"]
        EXP4["HTML Export\n(html2canvas)"]
    end

    subgraph AI["AI Integration"]
        API["/api/ai Route Handler"]
        NIM["NVIDIA NIM API\n(Mistral, Llama, etc.)"]
    end

    Editor --> Extensions
    Editor --> Export
    Editor --> AI
    Store --> AI
    API --> NIM

    style Client fill:#1a1a2e,color:#fff
    style Extensions fill:#16213e,color:#fff
    style Export fill:#0f3460,color:#fff
    style AI fill:#533483,color:#fff

Features

Core Editor

Rich Text Editing — Full-featured WYSIWYG editor powered by Tiptap
- Bold, italic, underline, strikethrough, highlight
- Headings (H1–H6), paragraphs, blockquotes
- Ordered and unordered lists, task lists with checkboxes
- Code blocks with syntax highlighting (highlight.js/lowlight)
- Tables with full spreadsheet support via @silevis/reactgrid
- Images with drag-and-drop and URL support
- Text alignment (left, center, right, justify)
- Subscript and superscript
- Character count and word count
- Placeholder support for empty documents
Custom HTML Blocks — Embed raw HTML content within the document using a custom Tiptap extension
Slash Commands — Quick-insert blocks by typing / in the editor (headings, lists, tables, code blocks, images, dividers, etc.)
Command Palette — Global shortcut ⌘K / Ctrl+K to quickly search commands and actions

AI-Powered Writing

10+ AI Writing Modes powered by NVIDIA NIM:
- Continue writing
- Improve writing
- Fix spelling & grammar
- Summarize
- Expand
- Change tone (Professional, Casual, Academic, Creative)
- Translate (English, Spanish, French, German, Chinese, Japanese)
- Generate from prompt
- Explain code
- Simplify language
AI Inline Toolbar — Select text and apply AI transformations with a floating toolbar
AI Slash Commands — Insert AI-generated content via slash commands

Export Options

PDF Export — High-fidelity PDF generation with preserved styling
DOCX Export — Microsoft Word-compatible documents via docx library
Markdown Export — Convert document to Markdown format using Turndown
HTML Export — Export as raw HTML
Plain Text Export — Export as .txt file

UI/UX

Command Palette — Fast command and file search via cmdk
Dark/Light Theme — System-aware theming with manual toggle via next-themes
Editor Toolbar — Comprehensive formatting toolbar with dropdown menus
Floating Bubble Menu — Format selected text with floating toolbar
Drag & Drop — Reorder blocks and list items using @dnd-kit
Tooltips — Contextual tooltips for all editor actions via tippy.js
Smooth Animations — Micro-interactions via framer-motion
Responsive Design — Optimized for desktop, tablet, and mobile views
Toast Notifications — Non-intrusive notifications via sonner

Tech Stack & Dependencies

Core Framework

Package	Version	Purpose
Next.js	15.5.18	React framework with App Router
React	18.3.1	UI library
TypeScript	5	Type safety
Tailwind CSS	3.4.15	Utility-first CSS
Radix UI	1.2.x	Accessible UI primitives

Editor

Package	Version	Purpose
Tiptap	2.10.3	Rich text editor framework
Starter Kit	2.10.3	Basic Tiptap extensions
Code Block (Lowlight)	2.10.3	Syntax-highlighted code blocks
Table / Task List	2.10.3	Table and task list support
React Grid	4.1.17	Spreadsheet functionality

State & Icons

Package	Version	Purpose
Zustand	5.0.12	Lightweight state management
Phosphor Icons	2.1.7	Icon library
Lucide React	1.14.0	Additional icons

Fonts

Package	Version	Purpose
Inter	5.2.8	UI font
Crimson Pro	5.2.8	Serif display font
JetBrains Mono	5.2.8	Monospace/code font
IBM Plex Mono	5.2.7	Monospace font
Space Grotesk	5.2.10	Display font

Export & Conversion

Package	Version	Purpose
jsPDF	4.2.1	PDF generation
html2canvas	1.4.1	Canvas rendering for PDF
docx	9.6.1	DOCX export
Turndown	7.2.4	HTML to Markdown
Marked	18.0.3	Markdown parsing
FileSaver	2.0.5	File download

AI Integration

Package	Version	Purpose
NVIDIA NIM API	—	AI models (Mistral, Llama, etc.)

UI Enhancements

Package	Version	Purpose
Framer Motion	12.38.0	Animations
Sonner	2.0.7	Toast notifications
CMDK	1.1.1	Command palette
Tippy.js	6.3.7	Tooltips
Class Variance Authority	0.7.1	Component variants
Date-fns	4.1.0	Date formatting

Configuration

Environment Variables

Create a .env.local file in the root directory:

# Required for AI features
NVIDIA_NIM_API_KEY=your_key_here

Get your API key from NVIDIA NIM

Next.js Configuration (`next.config.mjs`)

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  compiler: { removeConsole: process.env.NODE_ENV === 'production' },
  images: { formats: ['image/avif', 'image/webp'] },
  experimental: { optimizePackageImports: ['@phosphor-icons/react'] }
};

Notable settings:

reactStrictMode — Enables React strict mode for development
removeConsole — Strips console.log in production builds
optimizePackageImports — Tree-shakes Phosphor Icons for smaller bundles
images.formats — Enables AVIF and WebP image formats

Tailwind Configuration (`tailwind.config.ts`)

Custom design tokens (CSS variables):

// Background colors
bg-primary, bg-secondary, bg-tertiary, bg-overlay

// Text colors
text-primary, text-secondary, text-muted, text-disabled

// Borders
border-default, border-strong

// Accent
accent-blue, accent-blue-hover, accent-blue-subtle, accent-blue-border

Custom fonts:

fontFamily: {
  sans: ["var(--font-inter)", ...],
  serif: ["var(--font-serif)", ...],
  mono: ["var(--font-mono)", ...]
}

Custom animations:

keyframes: {
  "accordion-down" | "accordion-up" | "ai-pulse"
}
animation: {
  "accordion-down" | "accordion-up"
}

Package Scripts

{
  "dev": "next dev",      // Start development server
  "build": "next build",  // Build for production
  "start": "next start",  // Start production server
  "lint": "next lint"     // Run ESLint
}

Getting Started

Prerequisites

Node.js 20.x or later
npm or pnpm package manager
NVIDIA NIM API Key (for AI features)

Installation

# Clone the repository
git clone <repo-url>
cd ls-docs

# Install dependencies
npm install

# Copy environment example
cp .env.example .env.local

# Add your NVIDIA NIM API key to .env.local
# NVIDIA_NIM_API_KEY=your_key_here

# Start development server
npm run dev

Visit http://localhost:3000 to open the application.

Available Scripts

Command	Description
`npm run dev`	Start development server on port 3000
`npm run build`	Build production-optimized bundle
`npm run start`	Run production server
`npm run lint`	Run ESLint checks

Project Structure

ls-docs/
├── app/                          # Next.js App Router
│   ├── api/ai/route.ts           # AI API endpoint (NVIDIA NIM)
│   ├── app/globals.css           # Global styles
│   ├── app/layout.tsx            # Root layout
│   ├── app/page.tsx              # Docs page
│   └── landing/                  # Landing page
├── components/
│   ├── editor/                   # Editor components
│   │   ├── Editor.tsx            # Main editor
│   │   ├── EditorToolbar.tsx     # Toolbar
│   │   ├── BubbleMenu.tsx        # Floating format menu
│   │   ├── extensions/           # Tiptap extension overrides
│   │   └── AIPopover.tsx         # AI features UI
│   └── ui/                       # Reusable UI primitives
│       ├── dialog.tsx            # Dialog component
│       ├── tooltip.tsx           # Tooltip component
│       ├── dropdown-menu.tsx     # Dropdown menu
│       └── ...                   # Other Radix-based components
├── lib/
│   ├── store.ts                  # Zustand store
│   ├── nvidia.ts                # NVIDIA NIM API client
│   ├── export.ts                 # Export utilities
│   ├── extensions/               # Custom Tiptap extensions
│   │   ├── HTMLBlockExtension.ts
│   │   └── SpreadsheetExtension.ts
│   ├── slashCommandExtension.ts  # Slash command handler
│   └── utils.ts                  # Utility functions (cn)
├── public/                       # Static assets
├── .env.example                  # Environment template
├── next.config.mjs               # Next.js config
├── tailwind.config.ts            # Tailwind config
├── tsconfig.json                 # TypeScript config
└── package.json                  # Dependencies & scripts

Stats

Metric	Value
Total Dependencies	~85 packages
Dev Dependencies	~10 packages
Next.js Version	15.5.18
Tiptap Extensions	20+ extensions
UI Primitives	Radix UI + custom

Name		Name	Last commit message	Last commit date
.claude		.claude
.github		.github
app		app
components		components
contexts		contexts
lib		lib
public		public
scripts		scripts
types		types
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
CODE_STRUCTURE.md		CODE_STRUCTURE.md
README.md		README.md
checkpoints.md		checkpoints.md
fix.js		fix.js
fix.py		fix.py
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
tsconfig.tsbuildinfo		tsconfig.tsbuildinfo

Navigation Menu

Repository files navigation

LS Docs

Table of Contents

System Architecture

Features

Core Editor

AI-Powered Writing

Export Options

UI/UX

Tech Stack & Dependencies

Core Framework

Editor

State & Icons

Fonts

Export & Conversion

AI Integration

UI Enhancements

Configuration

Environment Variables

Next.js Configuration (`next.config.mjs`)

Tailwind Configuration (`tailwind.config.ts`)

Package Scripts

Getting Started

Prerequisites

Installation

Available Scripts

Project Structure

Stats

License

About

Releases

Packages

Used by

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

LS Docs

Table of Contents

System Architecture

Features

Core Editor

AI-Powered Writing

Export Options

UI/UX

Tech Stack & Dependencies

Core Framework

Editor

State & Icons

Fonts

Export & Conversion

AI Integration

UI Enhancements

Configuration

Environment Variables

Next.js Configuration (next.config.mjs)

Tailwind Configuration (tailwind.config.ts)

Package Scripts

Getting Started

Prerequisites

Installation

Available Scripts

Project Structure

Stats

License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages

Next.js Configuration (`next.config.mjs`)

Tailwind Configuration (`tailwind.config.ts`)