AI & LLMs
Integrate AI functionality to Fumadocs.
Docs for LLM
Serve your docs as Markdown for LLMs and AI agents:
npx @fumadocs/cli feature llmsIt enables processed Markdown on your docs collection, adds docsLlms to lib/source.ts, and creates the routes below. The generated files are listed here if you prefer a manual setup.
docsLlms
llms() renders your docs for LLMs. renderPage turns one page into Markdown, from the processed document rather than the raw file content:
import { llms } from 'fumadocs-core/source';
export const docsLlms = llms(source, {
renderPage: async (page) => `# ${page.data.title} (${page.url})
${await page.data.getText('processed')}`,
});
| Method | Output |
|---|---|
index(lang?) | the llms.txt index, built from the page tree |
page(page) | one page, rendered with renderPage |
full(lang?) | every page rendered with renderPage, joined |
renderPage is required
page() and full() are only available when you pass renderPage, since Fumadocs cannot know
how your content source exposes its Markdown.
renderPage reads the processed Markdown of pages, so enable includeProcessedMarkdown:
import { defineDocs } from 'fumadocs-mdx/config';
export const docs = defineDocs({
dir: 'content/docs',
docs: {
postprocess: {
includeProcessedMarkdown: true,
},
},
});
MDX components appear as JSX syntax by default. Render them into meaningful Markdown with the output option.
Runtime content sources like @fumadocs/local-md resolve on demand. Pass their getSource and the CLI generates the same routes:
export const docsLlms = llms(getSource, {
renderPage: (page) => `# ${page.data.title} (${page.url})
${page.data.content}`,
});With getSource, index() and indexNode() return a promise instead of a string.
llms.txt
An index of all pages, generated from the page tree.
import { docsLlms } from '@/lib/source';
export const revalidate = false;
export async function GET() {
return new Response(await docsLlms.index());
}
llms-full.txt
The content of all pages in a single file.
import { docsLlms } from '@/lib/source';
export const revalidate = false;
export async function GET() {
return new Response(await docsLlms.full());
}
*.md
The Markdown of a single page, for AI agents.
import { createGetUrl } from 'fumadocs-core/source';
export const docsContentRoute = '/llms.mdx/docs';
const getContentUrl = createGetUrl(docsContentRoute);
export function getPageMarkdownUrl(page: { slugs: string[]; locale?: string }) {
const segments = [...page.slugs, 'content.md'];
return { segments, url: getContentUrl(segments, page.locale) };
}
Accept
AI agents can ask for Markdown with the Accept header. Serve the Markdown of a page when the request prefers it:
import { NextRequest, NextResponse } from 'next/server';
import { isMarkdownPreferred, rewritePath } from 'fumadocs-core/negotiation';
const { rewrite: rewriteLLM } = rewritePath('/docs{/*path}', '/llms.mdx/docs{/*path}/content.md');
export default function proxy(request: NextRequest) {
if (isMarkdownPreferred(request)) {
const result = rewriteLLM(request.nextUrl.pathname);
if (result) {
return NextResponse.rewrite(new URL(result, request.nextUrl), {
headers: { Vary: 'Accept' },
});
}
}
return NextResponse.next();
}The same URL now has two representations, so the response needs Vary: Accept to prevent cache collisions.
Next.js discards Vary on App Router page responses, so the HTML responses of docs pages can't
carry the header. Set it at your CDN if a shared cache serves your docs.
Page Actions
Page actions let readers copy the Markdown of a page, or open the page in AI apps. They require the *.md route.

Render them in your docs page:
import { MarkdownCopyButton, ViewOptionsPopover } from 'fumadocs-ui/layouts/docs/page';
import { getPageMarkdownUrl } from '@/lib/shared';
const markdownUrl = getPageMarkdownUrl(page).url;
<div className="flex flex-row gap-2 items-center border-b pt-2 pb-6">
<MarkdownCopyButton markdownUrl={markdownUrl} />
<ViewOptionsPopover
markdownUrl={markdownUrl}
githubUrl={`https://github.com/${owner}/${repo}/blob/main/content/docs/${encodeURI(page.path)}`}
/>
</div>;MCP Server
Expose your docs to AI agents through a MCP server, with tools to list, search and read pages.
npx @fumadocs/cli feature mcpIt creates a /api/mcp route with the streamable HTTP transport, on top of the LLM routes above.
The tools come from fumadocs-core/mcp.
import { createMcpHandler, McpServer } from '@modelcontextprotocol/server';
import { registerSearchTool, registerSourceTools } from 'fumadocs-core/mcp';
import { createFromSource } from 'fumadocs-core/search/server';
import { docsLlms, source } from '@/lib/source';
const handler = createMcpHandler(() => {
const mcp = new McpServer(
{
name: 'docs',
version: '1.0.0',
},
// the tools never change, a stream to watch them would hold a serverless function open
{ capabilities: { tools: { listChanged: false } } },
);
registerSourceTools(mcp, source, docsLlms);
registerSearchTool(mcp, createFromSource(source));
return mcp;
});
export async function GET(request: Request) {
return handler.fetch(request);
}
export async function POST(request: Request) {
return handler.fetch(request);
}
export async function DELETE(request: Request) {
return handler.fetch(request);
}
Connect an agent to it with:
{
"mcpServers": {
"docs": { "url": "https://your-site.com/api/mcp" }
}
}WebMCP
Experimental
WebMCP is an early web standard, available in
Chrome 149+ behind the #enable-webmcp-testing flag and an origin trial. The API may still
change.
Where the MCP server above serves agents connecting to your site, WebMCP exposes tools to the AI agent of the browser, on the page the reader is viewing.
npx @fumadocs/cli feature webmcpIt creates a WebMCP component on top of the LLM routes. Render it inside <RootProvider />.
search_docsqueries the search API route. You can replacefetchClientwith other clients.read_pagefetches the Markdown of a page, from/llms.mdx/docs/page/content.md.
Ask AI

You can install the AI chat dialog using Fumadocs CLI.
npx @fumadocs/cli add ai/openrouterIt's automatically configured for OpenRouter using Vercel AI SDK, with a /search tool for AI.
You can use other models by updating the /api/chat route.
Fumadocs doesn't provide the AI model, it's up to you.
Your AI model can use the llms-full.txt file generated above, or more diversified sources of information when combined with 3rd party solutions.
Docs layouts render the chat from their aiChat option. The option takes client state, so create a client component for your layout and use it in place of the original layout:
'use client';
// or the Notebook, Glass and Spacious layouts
import { DocsLayout as Layout, type DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
// the installed components
import { AIChat, AIChatPanel, useAIChat } from './search';
export function DocsLayout(props: DocsLayoutProps) {
return (
<AIChat>
<ChatLayout {...props} />
</AIChat>
);
}
function ChatLayout(props: DocsLayoutProps) {
const { open, setOpen } = useAIChat();
return (
<Layout
{...props}
aiChat={{ open, onOpenChange: setOpen, panel: <AIChatPanel />, trigger: true }}
/>
);
}The layout options are passed to a client component, so they have to be serializable.
How is this guide?
Last updated on
