React Docs Module

A powerful, embeddable documentation system with built-in search and AI chat capabilities. Perfect for creating beautiful, interactive documentation pages with minimal setup.

Features

• 🎨 Themeable - Customize colors and appearance via docs.json configuration
• 🔍 Full-text Search - Fast, client-side search with caching
• 🤖 AI Chat - Integrated AI assistant for documentation Q&A
• 📝 MDX Support - Write docs in Markdown with custom components
• 📋 Mintlify Compatible - Full support for Mintlify docs.json schema
• 📱 Responsive - Mobile-friendly design with adaptive layouts

Quick Start

1. Installation

npm install react-docs-module

2. Configuration

Create a docs.json file with your documentation configuration using the Mintlify schema:

{
"$schema": "https://leaves.mintlify.com/schema/docs.json",
"theme": "mint", "name": "My Documentation",
"description": "Comprehensive documentation for my project",
"logo": {
"dark": "/assets/logo-dark.png",
"light": "/assets/logo-light.png"
},
"favicon": "/assets/favicon.png",
"colors": {
"primary": "#3B82F6",
"light": "#60A5FA", "dark": "#1D4ED8"
},
"navbar": {
"cta": {
"type": "github",
"url": "https://github.com/your-org/your-repo"
}
},
"navigation": {
"groups": [
{
"group": "Getting Started",
"pages": [
"introduction",
"installation", "quick-start"
]
},
{
"group": "API Reference",
"pages": [
"api/overview",
"api/authentication"
]
}
]
},
"footer": {
"socials": {
"github": "https://github.com/your-org/your-repo",
"twitter": "https://twitter.com/your-handle"
}
},
"feedback": {
"thumbsRating": true
}
}

3. Basic Usage

import{DocumentationLayout,createReactDocsConfig}from'react-docs-module';// Create config with defaults or custom overridesconstconfig=createReactDocsConfig({basePath: "/docs",contentPath: "content/docs",// searchApiPath and aiChatApiPath use defaults});exportdefaultfunctionDocsPage(){return(<DocumentationLayoutconfig={config}navigation={navigation}currentPath="/docs/introduction"headings={headings}><div>Your documentation content here</div></DocumentationLayout>);}

Configuration

ReactDocsConfig

interfaceReactDocsConfig{basePath: string;// Base URL path for docscontentPath: string;// Path to MDX content filessearchApiPath: string;// API endpoint for search indexaiChatApiPath: string;// API endpoint for AI chat}// Factory function with optional overridesfunctioncreateReactDocsConfig(options?: ReactDocsConfigOptions): ReactDocsConfiginterfaceReactDocsConfigOptions{basePath?: string;// Default: "/docs"contentPath?: string;// Default: "content/docs"searchApiPath?: string;// Default: "/api/docs/search-index"aiChatApiPath?: string;// Default: "/api/docs/chat"}

Configuration Examples

// Use all defaultsconstconfig=createReactDocsConfig();// Override specific fieldsconstconfig=createReactDocsConfig({basePath: "/documentation",aiChatApiPath: "/api/custom-chat"});// Override all fieldsconstconfig=createReactDocsConfig({basePath: "/my-docs",contentPath: "docs",searchApiPath: "/api/search",aiChatApiPath: "/api/ai-chat"});

docs.json Schema (Mintlify Compatible)

The docs.json file uses the complete Mintlify schema for full compatibility:

• Required: theme, name, colors.primary, navigation
• Optional: description, logo, favicon, navbar, footer, feedback, and more
• Migration: Existing Mintlify projects can use their mint.json structure in docs.json

Components

Core Components

• DocumentationLayout - Main layout wrapper with sidebar and TOC
• Search - Search component with AI chat integration
• DocsIndex - Documentation index/landing page
• DocsSidebar - Navigation sidebar
• TableOfContents - Page table of contents
• DocPagination - Previous/next page navigation

Theme System

import{DocsThemeProvider,useDocsColors}from'react-docs-module';functionCustomComponent(){constcolors=useDocsColors();return(<divstyle={{color: colors.primary}}>
Themed content
</div>);}

AI Chat Integration

import{streamDocsChatResponse}from'react-docs-module/chat-api';// API route exampleexportasyncfunctionPOST(req: Request){const{ messages }=awaitreq.json();returnstreamDocsChatResponse(config,messages,"You are a helpful documentation assistant.",async(result)=>{// Handle completionconsole.log(result.text);});}

API Reference

Functions

• getDocsSidebar(config) - Generate sidebar navigation from docs.json
• getAllDocs(config) - Get all documentation files metadata
• getAllDocsContent(config) - Get all documentation content (cached)
• getDocBySlug(config, slug) - Get specific document by slug
• buildSearchIndex(config) - Build search index from content
• streamDocsChatResponse(...) - Stream AI chat responses

Types

• ReactDocsConfig - Main configuration interface
• ReactDocsConfigOptions - Configuration factory options
• DocsJsonConfig - docs.json configuration schema (Mintlify compatible)
• ThemeColors - Color theme interface
• ModelProvider - AI model provider configuration

Advanced Usage

Custom Search API

// pages/api/search-index.tsimport{buildSearchIndex,createReactDocsConfig}from'react-docs-module';constDOCS_CONFIG=createReactDocsConfig({contentPath: "content/docs"});exportdefaultasyncfunctionhandler(req,res){constsearchIndex=awaitbuildSearchIndex(DOCS_CONFIG);res.json(searchIndex);}

Custom AI Models

constmodelProvider: ModelProvider={providerType: 'anthropic',model: 'claude-3-sonnet',apiKey: process.env.ANTHROPIC_API_KEY};streamDocsChatResponse(config,messages,prompt,callback,modelProvider);

Custom Theming

/* Use CSS custom properties set by DocsThemeProvider */
.custom-element {
color:var(--docs-primary);
border-color:var(--docs-primary-light);
background-color:var(--docs-primary-dark);
}

Requirements

• React 19+
• TypeScript 5.6+
• Node.js 18+

License

MIT

Contributing

Contributions welcome! Please read our contributing guidelines and submit pull requests to the main repository.