Integrate with Fumadocs

Fumadocs owns the docs UI — sidebar, layout, theme, search input, route handlers. Leadtype owns the content pipeline — <include> expansion, frontmatter resolution, the typed tag contract, and the agent/LLM artifacts. The two pair naturally: fumadocs reads source MDX, leadtype provides the source primitive and the build-time transforms that go through fumadocs's MDX compiler.

This page covers the wiring. For everything fumadocs does after that, see fumadocs's own docs.

TL;DR

bun add leadtype fumadocs-core fumadocs-ui

lib/source.ts

import { loader } from "fumadocs-core/source";
import { fumadocsSource } from "leadtype/fumadocs";

const fumaSource = await fumadocsSource({ contentDir: "./content/docs" });
export const source = loader({ baseUrl: "/docs", source: fumaSource });
export const leadtypeSource = fumaSource.leadtype;

next.config.mjs

import createMDX from "@next/mdx";
import { createMdxSourcePlugins } from "leadtype/mdx";
import path from "node:path";

const typeTableBasePath = path.resolve(process.cwd(), ".c15t");

export default createMDX({
  options: {
    remarkPlugins: [...createMdxSourcePlugins({ typeTableBasePath })],
  },
})({ pageExtensions: ["ts", "tsx", "mdx"] });

That's the minimum. The rest of this page covers DocsLayout wiring, page rendering, custom-tag mapping, and search.

Install

bun add leadtype fumadocs-core fumadocs-ui

Leadtype declares fumadocs-core >= 15 as an optional peer dependency — install it explicitly when you want the adapter.

Wire the source

content/source.ts

import { loader } from "fumadocs-core/source";
import { fumadocsSource } from "leadtype/fumadocs";

export const source = loader({
  baseUrl: "/docs",
  source: await fumadocsSource({
    contentDir: "./content/docs",
    groups: [
      { slug: "get-started", title: "Get Started" },
      { slug: "guides", title: "Guides" },
    ],
  }),
});

fumadocsSource() pre-walks contentDir, returns a synchronous Source for fumadocs, and exposes the underlying DocsSource on source.leadtype for loadPage() / buildSearchIndex() / resolveInclude().

Add the source preset to your MDX compiler

Leadtype's MDX-source preset expands <include>, resolves <ExtractedTypeTable>, and strips authoring imports — at build time. Everything else stays JSX for your runtime components.

next.config.mjs

import createMDX from "@next/mdx";
import { createMdxSourcePlugins } from "leadtype/mdx";
import path from "node:path";

const typeTableBasePath = path.resolve(process.cwd(), ".c15t");

const withMDX = createMDX({
  options: {
    remarkPlugins: [...createMdxSourcePlugins({ typeTableBasePath })],
  },
});

export default withMDX({ pageExtensions: ["ts", "tsx", "mdx"] });

The same plugin list works with @mdx-js/rollup, fumadocs-mdx, and any other MDX compiler that accepts a remark plugin list. Set typeTableBasePath to the source root that contains files referenced by <ExtractedTypeTable path="…">.

Implement the tag components

Use the prop types from leadtype/mdx so your components type-check against the same contract the source preset expects:

import type { CalloutProps, TabsProps, StepProps } from "leadtype/mdx";

export function Callout({ variant, title, children }: CalloutProps) {
  return (
    <aside data-variant={variant ?? "info"}>
      {title ? <p><strong>{title}</strong></p> : null}
      <div>{children}</div>
    </aside>
  );
}

See MDX tag contract for the full prop list across all 14 tags.

Load a page from a server component

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

import { notFound } from "next/navigation";
import { MDXRemote } from "next-mdx-remote-client/rsc";
import { source } from "@/content/source";
import { mdxComponents } from "@/lib/mdx-components";

export default async function Page({
  params,
}: {
  params: Promise<{ slug?: string[] }>;
}) {
  const { slug } = await params;
  const page = await source.leadtype.loadPage(slug ?? []);
  if (!page) {
    notFound();
  }

  return (
    <article>
      <h1>{page.title}</h1>
      <MDXRemote source={page.markdown} components={mdxComponents} />
    </article>
  );
}

If you prefer fumadocs's built-in page resolution, call source.getPage(slug) and import the source .mdx directly through fumadocs-mdx as you normally would — the createMdxSourcePlugins() preset will resolve includes during MDX compilation.

Add search

Build a search index from the same source:

app/api/search/route.ts

import { source } from "@/content/source";

const bundle = await source.leadtype.buildSearchIndex();

export async function GET() {
  return Response.json(bundle.index);
}

For provider-specific search (Vercel AI, TanStack, Cloudflare), wire the bundle into a leadtype/search/* adapter. See Search.