AI | Fumadocs

Docs for LLM

You can make your docs site more AI-friendly with dedicated docs content for large language models.

First, make a getLLMText function that converts pages into static MDX content:

lib/get-llm-text.ts

import { remark } from 'remark';
import remarkGfm from 'remark-gfm';
import remarkMdx from 'remark-mdx';
import { remarkInclude } from 'fumadocs-mdx/config';
import { source } from '@/lib/source';
import type { InferPageType } from 'fumadocs-core/source';

const processor = remark()
  .use(remarkMdx)
  // needed for Fumadocs MDX
  .use(remarkInclude)
  .use(remarkGfm);

export async function getLLMText(page: InferPageType<typeof source>) {
  const processed = await processor.process({
    path: page.data._file.absolutePath,
    value: page.data.content,
  });

  return `# ${page.data.title}
URL: ${page.url}

${page.data.description}

${processed.value}`;
}

Modify it to include other remark plugins.

`llms-full.txt`

A version of docs for AIs to read.

app/llms-full.txt/route.ts

import { source } from '@/lib/source';
import { getLLMText } from '@/lib/get-llm-text';

// cached forever
export const revalidate = false;

export async function GET() {
  const scan = source.getPages().map(getLLMText);
  const scanned = await Promise.all(scan);

  return new Response(scanned.join('\n\n'));
}

`*.mdx`

Allow people to append .mdx to a page to get its Markdown/MDX content.

You can make a route handler to return page content, and redirect users to that route using middleware.

import { type NextRequest, NextResponse } from 'next/server';
import { getLLMText } from '@/lib/get-llm-text';
import { source } from '@/lib/source';
import { notFound } from 'next/navigation';

export const revalidate = false;

export async function GET(
  _req: NextRequest,
  { params }: { params: Promise<{ slug?: string[] }> },
) {
  const { slug } = await params;
  const page = source.getPage(slug);
  if (!page) notFound();

  return new NextResponse(await getLLMText(page));
}

export function generateStaticParams() {
  return source.generateParams();
}

Page Actions

Common page actions for AI, require *.mdx to be implemented first.

AI Page Actions

npx @fumadocs/cli add ai-page-actions

Use it in your docs page like:

app/docs/[[...slug]]/page.tsx

<div className="flex flex-row gap-2 items-center border-b pt-2 pb-6">
  <LLMCopyButton markdownUrl={`${page.url}.mdx`} />
  <ViewOptions
    markdownUrl={`${page.url}.mdx`}
    githubUrl={`https://github.com/${owner}/${repo}/blob/dev/apps/docs/content/docs/${page.path}`}
  />
</div>

AI Search

You can install the AI search dialog using Fumadocs CLI:

npx @fumadocs/cli add ai-search

By default, it's configured for Inkeep AI. Since it's connected via Vercel AI SDK, you can connect to your own AI models easily.

Note that Fumadocs doesn't provide the AI model, it's up to you.

AI

Docs for LLM

llms-full.txt

*.mdx

Page Actions

AI Search

On this page

`llms-full.txt`

`*.mdx`