Documentation

Overview

Documentation is powered by Fumadocs with:

MDX content with components
Full-text search (Orama)
AI chat assistant
Content gating for premium docs

Content Structure

src/content/
├── docs/
│   ├── index.mdx
│   ├── meta.json
│   ├── getting-started/
│   │   ├── index.mdx
│   │   └── meta.json
│   └── features/
│       └── ...
└── blogs/
    └── ...

Writing Pages

Frontmatter

---
title: Page Title
description: Brief description for SEO.
---

Your content here...

Control page order in meta.json:

{
  "title": "Section Name",
  "pages": [
    "index",
    "installation",
    "configuration"
  ]
}

MDX Components

Callouts

import { Callout } from 'fumadocs-ui/components/callout';

<Callout type="info">
  Helpful information here.
</Callout>

<Callout type="warn">
  Warning message.
</Callout>

Cards

import { Cards, Card } from 'fumadocs-ui/components/card';

<Cards>
  <Card title="Title" href="/path" description="Description" />
</Cards>

Steps

import { Steps, Step } from 'fumadocs-ui/components/steps';

<Steps>
<Step>
### Step One
Content for step one.
</Step>

<Step>
### Step Two
Content for step two.
</Step>
</Steps>

Code Blocks

```typescript title="example.ts"
const hello = 'world';
```

With line highlighting:

```typescript {2-3}
const a = 1;
const b = 2; // highlighted
const c = 3; // highlighted
```

Search

Search is powered by Orama and works automatically.

API Endpoint

src/app/api/search/route.ts

import { source } from '@/lib/source';
import { createSearchAPI } from 'fumadocs-core/search/server';

export const { GET } = createSearchAPI('advanced', {
  indexes: source.getPages(),
});

AI Chat

The "Ask AI" feature uses your docs as context.

Setup

src/app/api/chat/route.ts

import { streamText } from 'ai';
import { google } from '@ai-sdk/google';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: google('gemini-2.0-flash'),
    system: 'You are a helpful assistant...',
    messages,
  });

  return result.toDataStreamResponse();
}

Set GOOGLE_API_KEY to enable AI features.

Content Gating

Gate premium content behind purchases:

src/lib/gating.ts

export const gatedFolders = [
  '/docs/premium',
  '/docs/advanced',
];

Users without purchases see a paywall. See Content Gating.

Building

Generate static docs:

bun run build

The build process:

Compiles MDX to React
Generates search index
Creates static pages

Content Gating - Premium content setup
Project Structure - Content location

Was this page helpful?