fumadocsはReact.jsフレームワーク(Next.js、Astro、TanStack Start、Waku、React Router)向けにドキュメントサイトを構築するためのフレームワークです。MDXコンテンツの読み込みからページツリー生成、検索、OpenAPI・GraphQL・AsyncAPIページ生成までを一式のパッケージ群として提供します。リポジトリ自体はpnpmモノレポで、apps/docsという公式ドキュメントサイトがfumadocsパッケージ群を使って自分自身を構築する形になっています。
コアはfumadocs-mdxがcontent配下のMDXファイルを読み込み、meta.jsonなどの構成情報と合わせてページツリーを生成する仕組みです。apps/docs/lib/source経由でこのツリーをDocsLayoutなどのUIコンポーネントに渡し、サイドバー・タブ・パンくずを自動構築します。検索はflexsearch・algolia・orama-cloud・mixedbreadなど複数のバックエンドに対応し、apps/docs/app/api/search/route.tsのようなAPIルートで実装を差し替えられます。OpenAPI・GraphQL・AsyncAPIの各ページはfumadocs-openapiやfumadocs-graphql、fumadocs-asyncapiが仕様ファイルからReactコンポーネントを生成する方式です。llms.txtやllms-full.txtのルートも用意されており、AI向けにMarkdown化したドキュメントを配信します。UI側はfumadocs-ui(このリポジトリでは@fumadocs/base-uiとして参照)がレイアウト・目次・コードブロックなどの見た目を担当します。
- STEP 01
pnpm installでモノレポ全体の依存関係をインストールすると、fumadocs-core・fumadocs-ui・fumadocs-mdxなど複数のworkspaceパッケージがリンクされます。
- STEP 02
pnpm --filter=docs devでapps/docsを起動すると、Next.js 16のdevサーバーがcontent/docs配下のMDXを読み込みドキュメントサイトを表示します。
- STEP 03
トップページでは検索ボタンやAskAI機能(inkeep連携)が表示され、apps/docs/app/api/search/route.tsやapp/api/chat/route.tsが実際にAPIキー設定を必要とします。
- STEP 04
content/docs内のMDXファイルを編集すると、fumadocs-mdxのホットリロードでサイドバーとページ内容が即座に反映されます。
- STEP 05
OpenAPIやGraphQL、AsyncAPIのサンプルページ(examples/asyncapiなど)を個別に起動すると、仕様ファイルから自動生成されたAPIリファレンスページが確認できます。
- STEP 06
pnpm buildを実行するとscripts/pre-build.tsとpost-build.tsが走り、静的ビルドやllms.txt生成などの後処理が行われます。
実行環境を整えると、MDXで書いたコンテンツがサイドバー付きのドキュメントサイトとして表示され、検索・AIチャット・OpenAPI/GraphQL/AsyncAPIページ・多言語対応・EPUB書き出しといった機能を実際に触って確認できます。あくまで確認できるのはapps/docsという公式サンプルの完成形であり、自分のプロジェクトに組み込む場合はmanual-installationの手順に沿って別途セットアップが必要です。
package.jsonに記載の依存パッケージはESM専用であり、CommonJSベースの既存プロジェクトへの導入には制約があります。
検索・AIチャット機能(inkeep、mixedbread、orama-cloud、algoliaなど)を実際に動かすには、それぞれ外部サービスのAPIキー設定が別途必要です。
apps/docsはfumadocs自身の全機能を見せるための巨大なショーケースであり、実際に自分のプロジェクトで使う際に必要な最小構成とは規模が大きく異なります。
READMEには詳細なセットアップ手順や動作確認済みバージョン情報が少なく、実際の挙動は主にapps/docsのソースコードから推測する必要があります。
Next.js、Astro、TanStack Start、Waku、React Routerのいずれかでドキュメントサイトを新規に作りたい開発者、特にOpenAPIやMDX、多言語対応、AI検索まで一式揃った土台を求める人に向いています。ファイル構成やpackage.jsonの依存関係、apps/docsの実装を見る限り、機能の幅広さと実装の一貫性は確認でき、公式サイト自体がこのフレームワークで動いている点も信頼材料です。ただし外部サービス連携部分の実際の挙動や導入コストは、この資料だけでは断定できないため、その点は導入前に公式ドキュメントで個別に確認することをおすすめします。