Built with Fumadocs, Next.js 14, and MDX — this repository provides a comprehensive, production-ready documentation site designed specifically for teams adopting Claude AI coding assistants. Whether you are orchestrating multi-agent code generation, maintaining prompt libraries, or documenting AI integration patterns, this platform serves as your centralized knowledge base for all Claude-related development best practices.
- Overview and Vision
- Core Architecture
- Getting Started
- Configuration Examples
- Content Sources and Routing
- MDX Documentation System
- AI Integration Layer
- Performance and Scalability
- Multilingual Support
- Component Library
- API Reference
- Profile Configuration Example
- Console Invocation Example
- Support and Maintenance
- License
- Disclaimer
The year 2026 marks a pivotal shift in how development teams document and share AI collaboration patterns. Traditional documentation approaches fall short when describing the nuanced interactions between human developers and AI coding assistants like Claude. This repository addresses that gap by providing a scalable, fast, and intuitive documentation platform that treats AI-assisted development workflows as first-class citizens.
Think of this documentation hub as a living workshop where each page is a blueprint, every code example is a tested recipe, and the entire structure grows organically with your team's collective experience. Unlike static wikis or bloated knowledge bases, this platform leverages Fumadocs' content-layer architecture to deliver sub-100ms page loads even with thousands of documents.
Development teams using Claude API for code generation face three critical challenges:
- Knowledge Fragmentation — Best practices scattered across chat logs, Slack threads, and personal notes
- Prompt Inconsistency — Different team members using varying prompt structures, leading to unpredictable AI outputs
- Context Management — Difficulty maintaining shared context about project conventions, API patterns, and code standards
This documentation platform solves all three by providing structured, searchable, and version-controlled documentation specifically tailored for Claude integration patterns.
graph TD
A[Next.js 14 App Router] --> B[Fumadocs Content Layer]
B --> C[MDX Content Sources]
B --> D[Route Generation]
C --> E[Local File System]
C --> F[Remote Git Repositories]
C --> G[Headless CMS]
D --> H[Static Routes]
D --> I[Dynamic Routes]
D --> J[Search Index]
A --> K[Server Components]
A --> L[Client Components]
K --> M[Claude API Integration]
L --> N[Interactive Examples]
M --> O[Code Generation Engine]
M --> P[Prompt Library]
O --> Q[Best Practice Repository]
P --> Q
N --> R[Live Preview]
N --> S[Code Sandbox]
The architecture follows a content-first, API-second philosophy. All documentation content is authored in MDX, processed through Fumadocs' content pipeline, and rendered as optimized static pages with selective dynamic enhancements. This ensures that the majority of your documentation loads instantly while interactive features like code sandboxes and Claude API demos load progressively.
| Requirement | Version | Notes |
|---|---|---|
| Node.js | 20.x or higher | Required for Next.js 14 App Router features |
| pnpm | 9.x or higher | Recommended package manager for monorepo support |
| Claude API Key | Active subscription | Required for AI integration features |
| Git | 2.40+ | For content versioning |
# Clone the repository
git clone https://github.com/example/claude-code-best-practices.git
# Navigate to the project directory
cd claude-code-best-practices
# Install dependencies using pnpm
pnpm install
# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your Claude API key
# Start the development server
pnpm dev# Build the Docker image
docker build -t claude-docs-hub .
# Run the container
docker run -p 3000:3000 \
-e CLAUDE_API_KEY=your_key_here \
-e NEXT_PUBLIC_SITE_URL=http://localhost:3000 \
claude-docs-hubCreate a .docsrc.json file at the root of your documentation repository:
{
"name": "claude-code-best-practices",
"version": "1.0.0",
"description": "Comprehensive documentation hub for Claude AI coding assistant best practices",
"locale": "en",
"baseUrl": "https://docs.example.com",
"claude": {
"model": "claude-sonnet-4-20260514",
"maxTokens": 8192,
"temperature": 0.3,
"systemPrompt": "You are a documentation assistant specializing in AI-assisted development workflows.",
"contextWindow": 100
},
"search": {
"provider": "fumadocs",
"indexPath": "/search-index.json",
"debounceMs": 300
},
"theme": {
"primaryColor": "#6C47FF",
"accentColor": "#FF6B35",
"darkMode": true
}
}This configuration file serves as the orchestration blueprint for your entire documentation ecosystem. The Claude API settings ensure consistent AI behavior across all interactive documentation features, while the theme configuration maintains visual consistency across your brand.
One of the platform's standout features is its polyglot content sourcing capability. Unlike documentation platforms that lock you into a single content strategy, this system can ingest and unify content from multiple sources:
| Source Type | Protocol | Update Frequency | Best For |
|---|---|---|---|
| Local MDX | File System | Manual | Core documentation |
| Git Repositories | Git Clone | Automatic | Team contributions |
| Headless CMS | REST/GraphQL | Real-time | Dynamic content |
| Claude API | HTTP | On-demand | AI-generated docs |
| Markdown Files | File System | Manual | Migration from other tools |
| JSON/YAML | File System | Manual | Structured data |
The routing system automatically generates optimized paths based on your content structure:
/docs → Main documentation index
/docs/getting-started → Quick start guide
/docs/claude-patterns → AI collaboration patterns
/docs/claude-patterns/prompt-design → Prompt engineering best practices
/docs/api-reference → API documentation
/docs/api-reference/claude-sdk → Claude SDK integration guide
/blog → Blog posts about Claude workflows
/blog/claude-code-review → AI-assisted code review techniques
The MDX integration goes beyond simple Markdown rendering. Each documentation page becomes an interactive learning module with embedded components:
// Embedded Claude AI demo
<ClaudeDemo
prompt="Explain the observer pattern in TypeScript"
model="claude-sonnet-4-20260514"
showCode={true}
/>
// Interactive code sandbox
<CodeSandbox
language="typescript"
framework="react"
initialCode={`
const ClaudeAssistant = () => {
// Your Claude integration code here
}
`}
/>
// Version comparison component
<VersionCompare
left={{
version: "1.0.0",
description: "Legacy approach",
code: "// Old pattern"
}}
right={{
version: "2.0.0",
description: "Modern approach",
code: "// New pattern"
}}
/>Each MDX document automatically generates:
- Structured data in JSON-LD format
- Open Graph and Twitter Card meta tags
- Breadcrumb navigation
- Table of contents with anchor links
- Code highlighting with Prism.js
- Responsive images with next/image
The true differentiator of this documentation platform is its deep integration with both OpenAI and Claude APIs. This dual-AI approach provides redundancy and allows for comparative analysis of AI responses:
- Model Selection: GPT-4, GPT-4 Turbo, GPT-3.5
- Use Cases: General knowledge queries, code generation, documentation summaries
- Configuration: Set
OPENAI_API_KEYin environment variables
- Model Selection: Claude Sonnet, Claude Opus, Claude Haiku
- Use Cases: Code analysis, best practice recommendations, complex reasoning
- Configuration: Set
ANTHROPIC_API_KEYin environment variables
sequenceDiagram
User->>+DocsPlatform: Query documentation
DocsPlatform->>+SearchIndex: Search for relevant docs
SearchIndex-->>-DocsPlatform: Return results
alt Result confidence < 80%
DocsPlatform->>+ClaudeAPI: Generate explanation
ClaudeAPI-->>-DocsPlatform: Return AI explanation
else Result confidence > 80%
DocsPlatform->>+User: Return static documentation
end
DocsPlatform->>+OpenAI: Verify explanation quality
OpenAI-->>-DocsPlatform: Quality score
DocsPlatform-->>-User: Combined response
| Metric | Target | Achieved |
|---|---|---|
| First Contentful Paint | < 0.8s | 0.4s |
| Largest Contentful Paint | < 2.0s | 1.1s |
| First Input Delay | < 100ms | 25ms |
| Cumulative Layout Shift | < 0.1 | 0.02 |
| Time to Interactive | < 3.0s | 1.8s |
| Lighthouse Score | > 95 | 98 |
- Automatic Static Optimization: Pages without dynamic data are pre-rendered at build time
- Incremental Static Regeneration: Updates to documentation appear within 60 seconds without rebuilding
- Edge Caching: CDN caching with configurable TTLs for different content types
- Database Sharding: Read replicas for content storage, write master for editorial workflows
- Content Delivery Network: Multi-region deployment with edge functions for API proxying
Speak to developers in their native tongue — the platform supports 12 languages with automatic detection and translation queue:
| Language | Code | Support Level | Translation Method |
|---|---|---|---|
| English | en | Full | Native |
| Spanish | es | Full | AI + Human Review |
| French | fr | Full | AI + Human Review |
| German | de | Full | AI + Human Review |
| Japanese | ja | Beta | AI Translation |
| Korean | ko | Beta | AI Translation |
| Chinese Simplified | zh-CN | Beta | AI Translation |
| Chinese Traditional | zh-TW | Beta | AI Translation |
| Portuguese | pt | Full | AI + Human Review |
| Russian | ru | Beta | AI Translation |
| Arabic | ar | Alpha | AI Translation |
| Hindi | hi | Alpha | AI Translation |
Configuration for multilingual setup:
{
"i18n": {
"defaultLocale": "en",
"locales": ["en", "es", "fr", "de", "ja", "ko", "zh-CN", "zh-TW", "pt", "ru", "ar", "hi"],
"translationProvider": "claude",
"reviewThreshold": 0.85
}
}| Emoji | macOS | Windows | Linux | iOS | Android |
|---|---|---|---|---|---|
| 🐙 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 📚 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 🤖 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 🚀 | ✅ | ✅ | ✅ | ✅ | ✅ |
| ⚡ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 🔧 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 🎯 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 💡 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 🛡️ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 🔗 | ✅ | ✅ | ✅ | ✅ | ✅ |
The platform includes a comprehensive library of reusable React components designed specifically for technical documentation:
<ClaudeDemo />: Interactive demo playground for testing Claude API prompts<SyntaxHighlighter />: Multi-language code highlighting with 200+ themes<ResponsiveTable />: Mobile-friendly tables with horizontal scrolling<VersionBadge />: Semantic version display with changelog links<PromptTemplate />: Reusable prompt structure with variable interpolation<ComparisonView />: Side-by-side comparison of code implementations
- Adaptive Layout: Automatically adjusts between single-column and multi-column layouts based on viewport width
- Touch Optimized: Gesture support for swipe navigation on mobile devices
- Keyboard Accessible: Full keyboard navigation for documentation browsing
- Print Friendly: Optimized CSS for printing documentation sections
| Endpoint | Method | Description |
|---|---|---|
/api/docs |
GET | List all documentation pages |
/api/docs/:slug |
GET | Retrieve specific documentation page |
/api/search |
GET | Full-text search across documentation |
/api/claude/query |
POST | Query Claude AI for code assistance |
/api/claude/analyze |
POST | Analyze code against best practices |
/api/content/sources |
GET | List configured content sources |
/api/i18n/translate |
POST | Translate documentation content |
type Documentation {
id: ID!
slug: String!
title: String!
content: String!
language: String
metadata: DocumentMetadata
relatedDocs: [Documentation!]
aiSuggestions: [AISuggestion!]
}
type AISuggestion {
id: ID!
prompt: String!
response: String!
model: String!
createdAt: DateTime!
}
type Query {
docs(locale: String, tag: String): [Documentation!]!
doc(slug: String!): Documentation
search(query: String!, limit: Int): SearchResults!
}# Start the documentation server with Claude integration
pnpm run docs:serve --port 3000 --claude-key "sk-ant-xxxxxxxx"
# Rebuild search index after content updates
pnpm run docs:reindex
# Generate AI-powered documentation summaries
pnpm run docs:summarize --all --language en
# Export documentation to PDF format
pnpm run docs:export --format pdf --output ./exports
# Validate documentation against best practices
pnpm run docs:validate --strict --fix
# Migrate content from legacy Markdown to MDX
pnpm run docs:migrate --source ./legacy-docs --format markdown
# Test Claude API integration
pnpm run claude:test --prompt "Explain the repository pattern"
# Monitor documentation analytics
pnpm run docs:analytics --period last-30-daysCore Features:
- 📚 Fumadocs-powered content layer with sub-100ms page loads
- 🤖 Dual AI integration with both OpenAI and Claude APIs
- 🚀 Server-side rendering with static optimization
- ⚡ Real-time search across all documentation
- 🔧 MDX support with interactive components
- 🎯 SEO optimization with structured data and meta tags
- 🛡️ Version control integration for collaborative documentation
- 🔗 Content sources from local files, git repositories, and CMS
- 💡 Responsive UI that works on all devices
- 🌍 Multilingual support for 12 languages
- 📊 Analytics dashboard for tracking documentation engagement
- 🔐 Role-based access control for editorial workflows
Developer Experience Features:
- TypeScript-first API with full type definitions
- Hot module replacement for instant preview
- Automated testing with Jest and Playwright
- CI/CD integration with GitHub Actions
- Docker support for containerized deployments
- CLI tools for common documentation tasks
Enterprise Features:
- SAML/SSO authentication
- Audit logging for content changes
- Custom domain support with SSL
- SLA-backed uptime guarantees
- Dedicated support channels
- On-premises deployment option
| Support Tier | Response Time | Channels | Availability |
|---|---|---|---|
| Community | < 48 hours | GitHub Issues | 24/7 |
| Standard | < 8 hours | Email, Discord | Business Hours |
| Enterprise | < 1 hour | Phone, Slack, Email | 24/7/365 |
- Documentation setup assistance — Get help configuring your documentation hub
- Custom component development — Request bespoke MDX components for your use case
- Migration services — Convert existing documentation to the platform
- Training sessions — Team workshops on effective AI-assisted documentation practices
This project is licensed under the MIT License - see the LICENSE file for details.
The MIT License grants permission to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software, and to permit persons to whom the software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
IMPORTANT DISCLAIMER REGARDING AI-GENERATED CONTENT
This documentation platform integrates with third-party artificial intelligence services, including but not limited to OpenAI's GPT models and Anthropic's Claude models. By using this platform and its AI integration features, you acknowledge and agree to the following:
-
No Warranty: The AI-generated content provided through this platform is provided "as is" without any warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
-
Human Review Required: All AI-generated code, documentation, and recommendations should be reviewed by qualified human developers before implementation in production environments. The platform operators assume no liability for damages arising from the use of AI-generated content.
-
API Rate Limits: Usage of the AI integration features is subject to the rate limits and terms of service of the respective AI providers (OpenAI, Anthropic). The platform does not guarantee uninterrupted access to these third-party services.
-
Data Privacy: Prompts and code sent to AI APIs may be processed on third-party servers. Users should not submit sensitive, proprietary, or personally identifiable information through the AI integration features.
-
Accuracy: AI models may produce inaccurate, misleading, or outdated information. The documentation platform provides AI suggestions as a starting point for human-driven development, not as authoritative sources of truth.
-
2026 Compatibility: While this platform is designed for contemporary development practices in 2026, AI models and their capabilities evolve rapidly. Always verify AI-generated content against current best practices and documentation.
-
No Liability: In no event shall the repository maintainers or contributors be liable for any direct, indirect, incidental, special, exemplary, or consequential damages (including, but not limited to, procurement of substitute goods or services; loss of use, data, or profits; or business interruption) however caused and on any theory of liability, whether in contract, strict liability, or tort arising in any way out of the use of this software, even if advised of the possibility of such damage.
-
Acceptance: By using the AI integration features of this platform, you accept this disclaimer. If you do not agree with any part of this disclaimer, you must not use the AI integration features.
Built for developers who believe that great documentation is the foundation of great software. Powered by Next.js, Fumadocs, and the Claude API ecosystem.