feat: use fumadoc 15 + tailwind 4 (#1690)

Co-authored-by: thucpn <thucsh2@gmail.com>

Author: himself65

apps/next/package.json

@@ -8,11 +8,11 @@
     "start": "next start",
     "postdev": "fumadocs-mdx",
     "postbuild": "fumadocs-mdx && tsx scripts/post-build.mts",
-    "build:docs": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" typedoc && node ./scripts/generate-docs.mjs"
+    "build:docs": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" typedoc && tsx scripts/generate-docs.mts"
   },
   "dependencies": {
     "@icons-pack/react-simple-icons": "^10.1.0",
-    "@llamaindex/chat-ui": "0.0.9",
+    "@llamaindex/chat-ui": "0.2.0",
     "@llamaindex/cloud": "workspace:*",
     "@llamaindex/core": "workspace:*",
     "@llamaindex/node-parser": "workspace:*",
@@ -27,24 +27,24 @@
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.4",
-    "@vercel/functions": "^1.5.0",
     "@scalar/api-client-react": "^1.1.25",
+    "@vercel/functions": "^1.5.0",
     "ai": "^3.4.33",
     "class-variance-authority": "^0.7.0",
     "clsx": "2.1.1",
     "foxact": "^0.2.41",
     "framer-motion": "^11.11.17",
-    "fumadocs-core": "^14.7.7",
-    "fumadocs-docgen": "^1.3.7",
-    "fumadocs-mdx": "^11.5.3",
-    "fumadocs-openapi": "^5.12.0",
-    "fumadocs-twoslash": "^2.0.3",
-    "fumadocs-typescript": "^3.0.3",
-    "fumadocs-ui": "^14.7.7",
+    "fumadocs-core": "^15.0.15",
+    "fumadocs-docgen": "^2.0.0",
+    "fumadocs-mdx": "^11.5.6",
+    "fumadocs-openapi": "^6.3.0",
+    "fumadocs-twoslash": "^3.1.0",
+    "fumadocs-typescript": "^3.1.0",
+    "fumadocs-ui": "^15.0.15",
     "hast-util-to-jsx-runtime": "^2.3.2",
     "llamaindex": "workspace:*",
     "lucide-react": "^0.460.0",
-    "next": "15.1.7",
+    "next": "15.2.0",
     "next-themes": "^0.4.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -55,8 +55,8 @@
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
     "rimraf": "^6.0.1",
-    "shiki": "^2.3.2",
-    "shiki-magic-move": "^1.0.0",
+    "shiki": "^3.1.0",
+    "shiki-magic-move": "^1.0.1",
     "swr": "^2.2.5",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
@@ -68,26 +68,27 @@
   },
   "devDependencies": {
     "@next/env": "^15.0.3",
+    "@tailwindcss/postcss": "^4.0.9",
     "@types/mdx": "^2.0.13",
     "@types/node": "22.9.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
     "fast-glob": "^3.3.2",
     "gray-matter": "^4.0.3",
     "monaco-editor-webpack-plugin": "^7.1.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.3",
     "raw-loader": "^4.0.2",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.1.0",
     "remark-stringify": "^11.0.0",
-    "tailwindcss": "^3.4.15",
-    "tsx": "^4.19.2",
+    "tailwindcss": "^4.0.9",
+    "tsx": "^4.19.3",
     "typedoc": "0.27.4",
     "typedoc-plugin-markdown": "^4.3.1",
     "typedoc-plugin-merge-modules": "^6.1.0",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
   }
 }

apps/next/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

apps/next/postcss.config.mjs

@@ -1,8 +1,6 @@
-import * as OpenAPI from "fumadocs-openapi";
 import { generateFiles } from "fumadocs-typescript";
 import fs from "node:fs";
 import * as path from "node:path";
-import { fileURLToPath } from "node:url";
 import { rimrafSync } from "rimraf";
 
 const out = "./src/content/docs/cloud/api";
@@ -15,28 +13,17 @@ rimrafSync(out, {
   },
 });
 
-void OpenAPI.generateFiles({
-  input: [
-    fileURLToPath(
-      new URL("../../../packages/cloud/openapi.json", import.meta.url),
-    ),
-  ],
-  output: out,
-  groupBy: "tag",
-});
-
 void generateFiles({
   input: ["./src/content/docs/api/**/*.mdx"],
   output: (file) => path.resolve(path.dirname(file), path.basename(file)),
   transformOutput,
 });
 
-function transformOutput(filePath, content) {
+function transformOutput(filePath: string, content: string) {
   const fileName = path.basename(filePath);
   let title = fileName.split(".")[0];
-  let pageContent = content;
   if (title === "index") title = "LlamaIndex API Reference";
-  return `---\ntitle: ${title}\n---\n\n${transformAbsoluteUrl(pageContent, filePath)}`;
+  return `---\ntitle: ${title}\n---\n\n${transformAbsoluteUrl(content, filePath)}`;
 }
 
 /**
@@ -46,20 +33,17 @@ function transformOutput(filePath, content) {
  * [text](BaseVectorStore.mdx#constructors) -> [text](/docs/api/classes/BaseVectorStore#constructors)
  * [text](TaskStep.mdx) -> [text](/docs/api/type-aliases/TaskStep)
  */
-function transformAbsoluteUrl(content, filePath) {
+function transformAbsoluteUrl(content: string, filePath: string) {
   const group = path.dirname(filePath).split(path.sep).pop();
-  return content.replace(
-    /\]\(([^)]+)\.mdx([^)]*)\)/g,
-    (match, slug, anchor) => {
-      const slugParts = slug.split("/");
-      const fileName = slugParts[slugParts.length - 1];
-      const fileGroup = slugParts[slugParts.length - 2] ?? group;
-      const result = ["/docs/api", fileGroup, fileName, anchor]
-        .filter(Boolean)
-        .join("/");
-      return `](${result})`;
-    },
-  );
+  return content.replace(/\]\(([^)]+)\.mdx([^)]*)\)/g, (_, slug, anchor) => {
+    const slugParts = slug.split("/");
+    const fileName = slugParts[slugParts.length - 1];
+    const fileGroup = slugParts[slugParts.length - 2] ?? group;
+    const result = ["/docs/api", fileGroup, fileName, anchor]
+      .filter(Boolean)
+      .join("/");
+    return `](${result})`;
+  });
 }
 
 // append meta.json for API page

apps/next/scripts/generate-docs.mjs renamed to apps/next/scripts/generate-docs.mts

@@ -1,11 +1,7 @@
 import { upsertBatchPipelineDocumentsApiV1PipelinesPipelineIdDocumentsPut } from "@llamaindex/cloud/api";
 import fg from "fast-glob";
-import {
-  fileGenerator,
-  remarkDocGen,
-  remarkInstall,
-  typescriptGenerator,
-} from "fumadocs-docgen";
+import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
+import { remarkAutoTypeTable } from "fumadocs-typescript";
 import matter from "gray-matter";
 import * as fs from "node:fs/promises";
 import path, { relative } from "node:path";
@@ -21,7 +17,8 @@ async function processContent(content: string): Promise<string> {
   const file = await remark()
     .use(remarkMdx)
     .use(remarkGfm)
-    .use(remarkDocGen, { generators: [typescriptGenerator(), fileGenerator()] })
+    .use(remarkAutoTypeTable)
+    .use(remarkDocGen, { generators: [fileGenerator()] })
     .use(remarkInstall, { persist: { id: "package-manager" } })
     .use(remarkStringify)
     .process(content);

apps/next/scripts/update-llamacloud.mts

@@ -1,6 +1,12 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
+@plugin "tailwindcss-animate";
+@source '../../node_modules/fumadocs-ui/dist/**/*.js';
+@source "../../node_modules/fumadocs-openapi/dist/**/*.js",
+@source '../../node_modules/@llamaindex/chat-ui/dist/**/*.js';
+@config "../../tailwind.config.mjs";
+
 @layer base {
   :root {
     --page-max-width: 1840px;
@@ -46,6 +52,7 @@
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
   }
+
   .dark {
     --color-neutral-000: #0e0c15;
     --color-neutral-100: #252134;
@@ -87,40 +94,3 @@
     --chart-5: 340 75% 55%;
   }
 }
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-
-  /*
-  * Override default styles for Markdown
-  */
-  .prose
-    :where(blockquote):not(
-      :where([class~="not-prose"], [class~="not-prose"] *)
-    ) {
-    font-style: normal !important;
-  }
-
-  .prose
-    :where(blockquote p:first-of-type):not(
-      :where([class~="not-prose"], [class~="not-prose"] *)
-    ):before {
-    content: none !important;
-  }
-
-  .prose
-    :where(blockquote p:first-of-type):not(
-      :where([class~="not-prose"], [class~="not-prose"] *)
-    ):after {
-    content: none !important;
-  }
-
-  .prose
-    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    @apply text-blue-600 !important;
-  }
-}

apps/next/src/app/global.css

@@ -1,5 +1,5 @@
 import * as Base from "fumadocs-ui/components/codeblock";
-import { toJsxRuntime, type Jsx } from "hast-util-to-jsx-runtime";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { codeToHast } from "shiki";
@@ -39,12 +39,11 @@ export async function CodeBlock({
   });
 
   const rendered = toJsxRuntime(hast, {
-    jsx: jsx as Jsx,
-    jsxs: jsxs as Jsx,
+    jsx: jsx,
+    jsxs: jsxs,
     Fragment,
-    development: false,
+    development: process.env.NODE_ENV === "development",
     components: {
-      // @ts-expect-error -- JSX component
       pre: Base.Pre,
     },
   });

apps/next/src/components/code-block.tsx

@@ -1,11 +1,16 @@
 "use client";
-import { ChatInput, ChatMessages, ChatSection } from "@llamaindex/chat-ui";
+import {
+  ChatHandler,
+  ChatInput,
+  ChatMessages,
+  ChatSection,
+} from "@llamaindex/chat-ui";
 import { useChat } from "ai/react";
 
 export const ChatDemo = () => {
   const handler = useChat();
   return (
-    <ChatSection handler={handler}>
+    <ChatSection handler={handler as ChatHandler}>
       <ChatMessages>
         <ChatMessages.List className="h-auto max-h-[400px]" />
         <ChatMessages.Actions />

apps/next/src/components/demo/chat/api/demo.tsx

@@ -1,23 +1,25 @@
 "use client";
 
 import {
+  ChatHandler,
   ChatInput,
   ChatMessage,
   ChatMessages,
   ChatSection as ChatSectionUI,
+  Message,
 } from "@llamaindex/chat-ui";
 import { useChatRSC } from "./use-chat-rsc";
 
 export const ChatSectionRSC = () => {
   const handler = useChatRSC();
   return (
-    <ChatSectionUI handler={handler}>
+    <ChatSectionUI handler={handler as ChatHandler}>
       <ChatMessages>
         <ChatMessages.List className="h-auto max-h-[400px]">
           {handler.messages.map((message, index) => (
             <ChatMessage
               key={index}
-              message={message}
+              message={message as Message}
               isLast={index === handler.messages.length - 1}
             >
               <ChatMessage.Avatar />

apps/next/src/components/demo/chat/rsc/chat-section.tsx

@@ -34,6 +34,7 @@ First we'll need to pull in our dependencies. These are:
 import { FunctionTool, Settings } from "llamaindex";
 import { OpenAI, OpenAIAgent } from "@llamaindex/openai";
 import "dotenv/config";
+import { z } from "zod";
 ```
 
 ### Initialize your LLM
@@ -86,20 +87,14 @@ This is the most complicated part of creating an agent. We need to define a `Fun
 const tool = FunctionTool.from(sumNumbers, {
   name: "sumNumbers",
   description: "Use this function to sum two numbers",
-  parameters: {
-    type: "object",
-    properties: {
-      a: {
-        type: "number",
-        description: "First number to sum",
-      },
-      b: {
-        type: "number",
-        description: "Second number to sum",
-      },
-    },
-    required: ["a", "b"],
-  },
+  parameters: z.object({
+    a: z.number({
+      description: "First number to sum",
+    }),
+    b: z.number({
+      description: "Second number to sum",
+    }),
+  }),
 });
 ```