Remark LLMs

The remarkLLMs plugin exports the Markdown of a document as _markdown, for LLMs. It keeps the Markdown you wrote, see Stringification for how it's generated.

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

## Getting Started

<Callout>Hello **world**.</Callout>

ESM is removed, headings get their IDs (see headingIds), and included content is expanded with Fumadocs MDX.

UsageCopy Anchor Link

import { defineDocs } from 'fumadocs-mdx/config';

export default defineDocs({
  docs: {
    postprocess: {
      // `true`, or the options of `remarkLLMs`
      includeProcessedMarkdown: true,
    },
  },
});

With Fumadocs MDX, read it from your pages:

const markdown = await page.data.getText('processed');

JSX ElementsCopy Anchor Link

JSX elements are kept as you wrote them. To change them:

PlaceholdersCopy Anchor Link

List the components to output as placeholders:

import type { LLMsOptions } from 'fumadocs-core/mdx-plugins/remark-llms';

const llmsOptions: LLMsOptions = {
  mdxAsPlaceholder: ['Callout'],
};

Then render them, from runtime data if needed:

import { renderPlaceholder } from 'fumadocs-core/mdx-plugins/remark-llms.runtime';

const markdown = await renderPlaceholder(await page.data.getText('processed'), {
  // `children` is the Markdown of its content
  Callout: ({ attributes, children }) => `> **${attributes.title}**\n>\n> ${children}`,
});

Function OutputCopy Anchor Link

With output: 'function', _markdown is a component: Markdown stays as you wrote it, JSX elements are rendered by your components.

import type { LLMsOptions } from 'fumadocs-core/mdx-plugins/remark-llms';

const llmsOptions: LLMsOptions = {
  output: 'function',
};

Render it with your components:

import { getMDXComponents } from '@/components/mdx';

const markdown = await page.data.getText('processed', {
  components: getMDXComponents(),
});

Components define their Markdown form with asMarkdown(), others are kept as JSX, see Markdown Rendering.

OptionsCopy Anchor Link