chore: bump bunchee

chore: add tailwindcss prettier (#1723 )
feat(docs): improve misc (#1722 )
2026-07-16 07:14:29 -04:00 · 2025-03-09 01:19:33 -08:00 · 2025-03-09 01:11:27 -08:00 · 2025-03-09 00:57:47 -08:00 · 2025-03-09 00:34:49 -08:00 · 2025-03-09 00:02:30 -08:00
148 changed files with 3153 additions and 4695 deletions
@@ -5,8 +5,15 @@ const withMDX = createMDX();
 /** @type {import('next').NextConfig} */
 const config = {
  reactStrictMode: true,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
  transpilePackages: ["monaco-editor"],
-  serverExternalPackages: ["@huggingface/transformers"],
+  serverExternalPackages: [
+    "@huggingface/transformers",
+    "twoslash",
+    "typescript",
+  ],
  webpack: (config, { isServer }) => {
    if (Array.isArray(config.target) && config.target.includes("web")) {
      config.target = ["web", "es2020"];
@@ -3,16 +3,17 @@
  "version": "0.1.9",
  "private": true,
  "scripts": {
-    "build": "pnpm run build:docs && next build",
+    "postinstall": "fumadocs-mdx",
+    "prebuild": "pnpm run build:docs",
+    "build": "next build",
    "dev": "next dev",
    "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"
+    "postbuild": "tsx scripts/post-build.mts",
+    "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,36 +28,35 @@
    "@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.1",
    "next-themes": "^0.4.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-icons": "^5.3.0",
    "react-monaco-editor": "^0.56.2",
-    "react-text-transition": "^3.1.0",
    "react-use-measure": "^2.1.1",
    "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",
@@ -67,27 +67,28 @@
    "zod": "^3.23.8"
  },
  "devDependencies": {
-    "@next/env": "^15.0.3",
+    "@next/env": "^15.2.1",
+    "@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"
  }
 }
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
@@ -1,8 +1,7 @@
-import * as OpenAPI from "fumadocs-openapi";
-import { generateFiles } from "fumadocs-typescript";
+import { generateFiles as openapiGenerateFiles } from "fumadocs-openapi";
+import { generateFiles as typescriptGenerateFiles } 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 +14,23 @@ rimrafSync(out, {
  },
 });

-void OpenAPI.generateFiles({
-  input: [
-    fileURLToPath(
-      new URL("../../../packages/cloud/openapi.json", import.meta.url),
-    ),
-  ],
-  output: out,
+void openapiGenerateFiles({
+  input: ["../../packages/cloud/openapi.json"],
+  output: "./src/content/docs/cloud/api",
  groupBy: "tag",
 });

-void generateFiles({
+void typescriptGenerateFiles({
  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 +40,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
@@ -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);
@@ -2,10 +2,11 @@ import { rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
 import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
 import { defineConfig, defineDocs } from "fumadocs-mdx/config";
 import { transformerTwoslash } from "fumadocs-twoslash";
+import { createFileSystemTypesCache } from "fumadocs-twoslash/cache-fs";
 import rehypeKatex from "rehype-katex";
 import remarkMath from "remark-math";

-export const { docs, meta } = defineDocs({
+export const docs = defineDocs({
  dir: "./src/content/docs",
 });

@@ -20,7 +21,11 @@ export default defineConfig({
      },
      transformers: [
        ...(rehypeCodeDefaultOptions.transformers ?? []),
-        transformerTwoslash(),
+        transformerTwoslash({
+          typesCache: createFileSystemTypesCache({
+            dir: ".next/cache/twoslash",
+          }),
+        }),
        {
          name: "transformers:remove-notation-escape",
          code(hast) {
@@ -8,7 +8,7 @@ import {
 } from "@/components/infinite-providers";
 import { MagicMove } from "@/components/magic-move";
 import { NpmInstall } from "@/components/npm-install";
-import { TextEffect } from "@/components/text-effect";
+import { Supports } from "@/components/supports";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { LEGACY_DOCUMENT_URL } from "@/lib/const";
@@ -24,18 +24,18 @@ import { Suspense } from "react";
 export default function HomePage() {
  return (
    <main className="container mx-auto px-4 py-12">
-      <h1 className="text-4xl md:text-6xl font-bold text-center mb-4">
+      <h1 className="mb-4 text-center text-4xl font-bold md:text-6xl">
        Build context-augmented web apps using
        <br /> <span className="text-blue-500">LlamaIndex.TS</span>
      </h1>
-      <p className="text-xl text-center text-fd-muted-foreground mb-12 ">
+      <p className="text-fd-muted-foreground mb-12 text-center text-xl">
        LlamaIndex.TS is the JS/TS version of{" "}
        <a href="https://llamaindex.ai">LlamaIndex</a>, the framework for
        building agentic generative AI applications connected to your data.
      </p>
-      <div className="text-center text-lg text-fd-muted-foreground mb-12">
+      <div className="text-fd-muted-foreground mb-12 text-center text-lg">
        <span>Designed for building web applications in </span>
-        <TextEffect />
+        <Supports />
      </div>

      <div className="flex flex-wrap justify-center gap-4">
@@ -149,13 +149,13 @@ await agent.chat('...');`}
        >
          <div className="mt-8 flex flex-col gap-8">
            <div>
-              <h3 className="text-lg font-semibold text-fd-muted-foreground mb-2">
+              <h3 className="text-fd-muted-foreground mb-2 text-lg font-semibold">
                LLMs
              </h3>
              <InfiniteLLMProviders />
            </div>
            <div>
-              <h3 className="text-lg font-semibold text-fd-muted-foreground mb-2">
+              <h3 className="text-fd-muted-foreground mb-2 text-lg font-semibold">
                Vector Stores
              </h3>
              <InfiniteVectorStoreProviders />
@@ -1,11 +0,0 @@
-import { LEGACY_DOCUMENT_URL } from "@/lib/const";
-import { redirect } from "next/navigation";
-
-export default async function Page(props: {
-  params: Promise<{
-    any: string[];
-  }>;
-}) {
-  const path = await props.params.then(({ any }) => any.join("/"));
-  return redirect(new URL(path, LEGACY_DOCUMENT_URL).toString());
-}
@@ -13,6 +13,8 @@ import { notFound } from "next/navigation";

 const { AutoTypeTable } = createTypeTable();

+export const revalidate = false;
+
 export default async function Page(props: {
  params: Promise<{ slug?: string[] }>;
 }) {
@@ -26,10 +28,10 @@ export default async function Page(props: {
    <DocsPage
      toc={page.data.toc}
      full={page.data.full}
+      lastUpdate={page.data.lastModified}
      editOnGithub={{
        owner: "run-llama",
        repo: "LlamaIndexTS",
-        sha: "main",
        path: `apps/next/src/content/docs/${page.file.path}`,
      }}
    >
@@ -64,6 +66,7 @@ export async function generateMetadata(props: {

  return createMetadata(
    metadataImage.withImage(page.slugs, {
+      metadataBase: new URL("https://ts.llamaindex.ai"),
      title: page.data.title,
      description: page.data.description,
      openGraph: {
@@ -22,7 +22,7 @@ export default function Layout({ children }: { children: ReactNode }) {
                variant: "secondary",
                size: "xs",
                className:
-                  "md:flex-1 px-2 ms-2 gap-1.5 text-fd-muted-foreground rounded-full",
+                  "text-fd-muted-foreground ms-2 gap-1.5 rounded-full px-2 md:flex-1",
              }),
            )}
          >
@@ -1,6 +1,13 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
+@import "../../node_modules/fumadocs-twoslash/dist/twoslash.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 +53,7 @@
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
+
  .dark {
    --color-neutral-000: #0e0c15;
    --color-neutral-100: #252134;
@@ -87,40 +95,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;
-  }
-}
@@ -32,7 +32,7 @@ export default function Layout({ children }: { children: ReactNode }) {
          href="/favicon-16x16.png"
        />
      </head>
-      <body className="flex flex-col min-h-screen">
+      <body className="flex min-h-screen flex-col">
        <TooltipProvider>
          <AIProvider>
            <RootProvider>{children}</RootProvider>
@@ -0,0 +1,62 @@
+import fg from "fast-glob";
+import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
+import { remarkInclude } from "fumadocs-mdx/config";
+import { remarkAutoTypeTable } from "fumadocs-typescript";
+import matter from "gray-matter";
+import * as fs from "node:fs/promises";
+import path from "node:path";
+import { remark } from "remark";
+import remarkGfm from "remark-gfm";
+import remarkMdx from "remark-mdx";
+import remarkStringify from "remark-stringify";
+
+export const revalidate = false;
+
+export async function GET() {
+  const files = await fg([
+    "./src/content/docs/**/*.mdx",
+    // remove generated openapi files
+    "!./src/content/docs/cloud/api/**/*",
+  ]);
+
+  const scan = files.map(async (file) => {
+    const fileContent = await fs.readFile(file);
+    const { content, data } = matter(fileContent.toString());
+
+    const dir = path.dirname(file).split(path.sep).at(4);
+    const category = {
+      llamaindex: "LlamaIndexTS Framework",
+      api: "LlamaIndexTS API",
+      cloud: "LlamaCloud Service",
+    }[dir ?? ""];
+
+    const processed = await processContent(file, content);
+    return `file: ${file}
+# ${category}: ${data.title}
+
+${data.description}
+        
+${processed}`;
+  });
+
+  const scanned = await Promise.all(scan);
+
+  return new Response(scanned.join("\n\n"));
+}
+
+async function processContent(path: string, content: string): Promise<string> {
+  const file = await remark()
+    .use(remarkMdx)
+    .use(remarkInclude)
+    .use(remarkGfm)
+    .use(remarkAutoTypeTable)
+    .use(remarkDocGen, { generators: [fileGenerator()] })
+    .use(remarkInstall, { persist: { id: "package-manager" } })
+    .use(remarkStringify)
+    .process({
+      path,
+      value: content,
+    });
+
+  return String(file);
+}
@@ -45,13 +45,13 @@ export const AITrigger = (props: AITriggerProps) => {
    <Dialog>
      <DialogTrigger {...props} />
      <DialogPortal>
-        <DialogOverlay className="fixed inset-0 z-50 bg-fd-background/50 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" />
+        <DialogOverlay className="bg-fd-background/50 data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in fixed inset-0 z-50 backdrop-blur-sm" />
        <DialogContent
          onOpenAutoFocus={(e) => {
            document.getElementById("nd-ai-input")?.focus();
            e.preventDefault();
          }}
-          className="fixed left-1/2 z-50 my-[5vh] flex max-h-[90dvh] w-[98vw] max-w-[860px] origin-left -translate-x-1/2 flex-col rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in"
+          className="bg-fd-popover text-fd-popover-foreground data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in fixed left-1/2 z-50 my-[5vh] flex max-h-[90dvh] w-[98vw] max-w-[860px] origin-left -translate-x-1/2 flex-col rounded-lg border shadow-lg focus-visible:outline-none"
        >
          <DialogHeader>
            <DialogTitle className="sr-only">Search AI</DialogTitle>
@@ -67,11 +67,11 @@ export const AITrigger = (props: AITriggerProps) => {
              </AlertDescription>
            </Alert>
          </DialogHeader>
-          <div className="overflow-scroll flex-grow mt-4">
+          <div className="mt-4 flex-grow overflow-scroll">
            <ChatList messages={messages} />
          </div>
          <form
-            className="px-4 py-2 space-y-4"
+            className="space-y-4 px-4 py-2"
            action={async () => {
              const value = inputValue.trim();
              setInputValue("");
@@ -102,7 +102,7 @@ export const AITrigger = (props: AITriggerProps) => {
              }
            }}
          >
-            <div className="flex flex-row w-full items-center gap-2">
+            <div className="flex w-full flex-row items-center gap-2">
              <Textarea
                tabIndex={0}
                placeholder="Ask AI about documentation."
@@ -1,50 +1,21 @@
+import { highlight } from "fumadocs-core/highlight";
 import * as Base from "fumadocs-ui/components/codeblock";
-import { toJsxRuntime, type Jsx } from "hast-util-to-jsx-runtime";
-import { Fragment } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { codeToHast } from "shiki";
+import type { BundledLanguage } from "shiki";

 export interface CodeBlockProps {
  code: string;
  wrapper?: Base.CodeBlockProps;
-  lang: "bash" | "ts" | "tsx";
+  lang: BundledLanguage;
 }

-export async function CodeBlock({
-  code,
-  lang,
-  wrapper,
-}: CodeBlockProps): Promise<React.ReactElement> {
-  const hast = await codeToHast(code, {
+export async function CodeBlock({ code, lang, wrapper }: CodeBlockProps) {
+  const rendered = await highlight(code, {
    lang,
-    defaultColor: false,
    themes: {
      light: "github-light",
      dark: "vesper",
    },
-    transformers: [
-      {
-        name: "rehype-code:pre-process",
-        line(node) {
-          if (node.children.length === 0) {
-            // Keep the empty lines when using grid layout
-            node.children.push({
-              type: "text",
-              value: " ",
-            });
-          }
-        },
-      },
-    ],
-  });
-
-  const rendered = toJsxRuntime(hast, {
-    jsx: jsx as Jsx,
-    jsxs: jsxs as Jsx,
-    Fragment,
-    development: false,
    components: {
-      // @ts-expect-error -- JSX component
      pre: Base.Pre,
    },
  });
@@ -10,7 +10,7 @@ export function Contributing(): ReactElement {
      <h2 className="mb-4 text-xl font-semibold sm:text-2xl">
        Made possible by you <Heart className="inline align-middle" />
      </h2>
-      <p className="mb-4 text-fd-muted-foreground">
+      <p className="text-fd-muted-foreground mb-4">
        LlamaIndex.TS is powered by the open source community.
      </p>
      <div className="mb-8 flex flex-row items-center gap-2">
@@ -33,7 +33,7 @@ export default async function ContributorCounter({
            href={`https://github.com/${contributor.login}`}
            rel="noreferrer noopener"
            target="_blank"
-            className="size-10 overflow-hidden rounded-full border-4 border-fd-background bg-fd-background md:-mr-4 md:size-12"
+            className="border-fd-background bg-fd-background size-10 overflow-hidden rounded-full border-4 md:-mr-4 md:size-12"
            style={{
              zIndex: topContributors.length - i,
            }}
@@ -48,7 +48,7 @@ export default async function ContributorCounter({
          </a>
        ))}
        {displayCount < contributors.length ? (
-          <div className="size-12 content-center rounded-full bg-fd-secondary text-center">
+          <div className="bg-fd-secondary size-12 content-center rounded-full text-center">
            +{contributors.length - displayCount}
          </div>
        ) : null}
@@ -83,7 +83,7 @@ export function CreateAppAnimation(): React.ReactElement {
      }}
    >
      {tick > timeWindowOpen && (
-        <LaunchAppWindow className="absolute bottom-5 right-4 z-10 animate-in fade-in slide-in-from-top-10" />
+        <LaunchAppWindow className="animate-in fade-in slide-in-from-top-10 absolute bottom-5 right-4 z-10" />
      )}
      <pre className="overflow-hidden rounded-xl border text-xs">
        <div className="flex flex-row items-center gap-2 border-b px-4 py-2">
@@ -92,7 +92,7 @@ export function CreateAppAnimation(): React.ReactElement {
          <div className="grow" />
          <div className="size-2 rounded-full bg-red-400" />
        </div>
-        <div className="min-h-[200px] bg-gradient-to-b from-fd-secondary [mask-image:linear-gradient(to_bottom,white,transparent)]">
+        <div className="from-fd-secondary min-h-[200px] bg-gradient-to-b [mask-image:linear-gradient(to_bottom,white,transparent)]">
          <code className="grid p-4">{lines}</code>
        </div>
      </pre>
@@ -103,7 +103,7 @@ export function CreateAppAnimation(): React.ReactElement {
 function UserMessage({ children }: { children: ReactNode }) {
  return (
    <div className="group relative flex items-start">
-      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-background">
+      <div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
        <IconUser />
      </div>
      <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
@@ -122,7 +122,7 @@ function BotMessage({
 }) {
  return (
    <div className={cn("group relative flex items-start", className)}>
-      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground">
+      <div className="bg-primary text-primary-foreground flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
        <IconAI />
      </div>
      <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
@@ -164,7 +164,7 @@ export function ChatExample() {

  return (
    <div className="max-w-64">
-      <div className="flex flex-col px-4 gap-2">
+      <div className="flex flex-col gap-2 px-4">
        {userMessageLength === userMessageFull.length && (
          <UserMessage>
            <span>{userMessageFull}</span>
@@ -204,11 +204,11 @@ function LaunchAppWindow(
    <div
      {...props}
      className={cn(
-        "overflow-hidden rounded-md border bg-fd-background shadow-xl",
+        "bg-fd-background overflow-hidden rounded-md border shadow-xl",
        props.className,
      )}
    >
-      <div className="relative flex h-6 flex-row items-center border-b bg-fd-muted px-4 text-xs text-fd-muted-foreground">
+      <div className="bg-fd-muted text-fd-muted-foreground relative flex h-6 flex-row items-center border-b px-4 text-xs">
        <p className="absolute inset-x-0 text-center">localhost:8080</p>
      </div>
      <div className="p-4 text-sm">
@@ -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 />
@@ -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 />
@@ -57,7 +57,7 @@ export const IDE = () => {
  const maxChars = useSlider();
  const useSetMaxChars = useSetSlider();
  return (
-    <div className="flex flex-col p-4 border-r max-h-96 overflow-scroll">
+    <div className="flex max-h-96 flex-col overflow-scroll border-r p-4">
      <div>
        <Label>Max Chars {maxChars}</Label>
        <Slider
@@ -113,7 +113,7 @@ const Preview = ({ text }: { text: string }) => {
      },
    },
  });
-  return <CodeBlock className="py-0 m-2">{rendered}</CodeBlock>;
+  return <CodeBlock className="m-2 py-0">{rendered}</CodeBlock>;
 };

 function ScrollToBottom() {
@@ -122,7 +122,7 @@ function ScrollToBottom() {
  return (
    !isAtBottom && (
      <button
-        className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
+        className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
        onClick={() => scrollToBottom()}
      />
    )
@@ -136,7 +136,7 @@ export const NodePreview = () => {
  const textChunks = useMemo(() => parser.splitText(code), [code, maxChars]);
  return (
    <StickToBottom
-      className="block relative max-h-96 overflow-scroll"
+      className="relative block max-h-96 overflow-scroll"
      resize="smooth"
      initial="smooth"
    >
@@ -154,7 +154,7 @@ export const CodeNodeParserDemo = () => {
  const isClient = useIsClient();
  if (!isClient) {
    return (
-      <div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
+      <div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
        <Skeleton className="h-96" />
        <Skeleton className="h-96" />
      </div>
@@ -165,13 +165,13 @@ export const CodeNodeParserDemo = () => {
      <CodeProvider>
        <Suspense
          fallback={
-            <div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
+            <div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
              <Skeleton className="h-96" />
              <Skeleton className="h-96" />
            </div>
          }
        >
-          <div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
+          <div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
            <IDE />
            <NodePreview />
          </div>
@@ -75,7 +75,7 @@ function ScrollToBottom() {
  return (
    !isAtBottom && (
      <button
-        className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
+        className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
        onClick={() => scrollToBottom()}
      />
    )
@@ -91,9 +91,9 @@ export function WorkflowStreamingDemo() {
  const [total, setTotal] = useState<number>(10);

  return (
-    <div className="flex flex-col items-start w-full gap-2">
-      <div className="flex flex-row justify-center items-center">
-        <div className="text-lg mr-2">Compute total</div>{" "}
+    <div className="flex w-full flex-col items-start gap-2">
+      <div className="flex flex-row items-center justify-center">
+        <div className="mr-2 text-lg">Compute total</div>{" "}
        <FlowInput value={total} onChange={(value) => setTotal(value)} />
      </div>
      <Button
@@ -141,7 +141,7 @@ export function WorkflowStreamingDemo() {
      >
        Start Workflow
      </Button>
-      <StickToBottom className="w-full flex flex-col gap-2 p-2 border border-gray-200 rounded-lg max-h-96 overflow-y-auto">
+      <StickToBottom className="flex max-h-96 w-full flex-col gap-2 overflow-y-auto rounded-lg border border-gray-200 p-2">
        <StickToBottom.Content className="flex flex-col gap-2">
          {ui}
        </StickToBottom.Content>
@@ -20,7 +20,7 @@ export function Feature({
      className={cn("border-l border-t px-6 py-12 md:py-16", className)}
      {...props}
    >
-      <div className="mb-4 inline-flex items-center gap-2 text-sm font-medium text-fd-muted-foreground">
+      <div className="text-fd-muted-foreground mb-4 inline-flex items-center gap-2 text-sm font-medium">
        <Icon className="size-4" />
        <p>{subheading}</p>
      </div>
@@ -60,7 +60,7 @@ export default function FlowInput({
          className={clsx(
            showCaret ? "caret-primary" : "caret-transparent",
            "spin-hide w-[1.5em] bg-transparent py-2 text-center font-[inherit] text-transparent outline-none",
-            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+            "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
          )}
          // Make sure to disable kerning, to match NumberFlow:
          style={{ fontKerning: "none" }}
@@ -8,7 +8,7 @@ import { IconAI, IconUser } from "./ui/icons";
 export function UserMessage({ children }: { children: ReactNode }) {
  return (
    <div className="group relative flex items-start">
-      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-background">
+      <div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
        <IconUser />
      </div>
      <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
@@ -54,7 +54,7 @@ export function BotCard({
    <div className="group relative flex items-start md:-ml-12">
      <div
        className={cn(
-          "flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground",
+          "bg-primary text-primary-foreground flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm",
          !showAvatar && "invisible",
        )}
      >
@@ -25,7 +25,7 @@ export const NpmInstall = () => {
      className="flex flex-row items-center justify-center"
    >
      <code className="mr-2">$ npm i llamaindex</code>
-      <div className="relative cursor-pointer bg-transparent w-4 h-4">
+      <div className="relative h-4 w-4 cursor-pointer bg-transparent">
        <div
          className={`absolute inset-0 transform transition-all duration-300 ${
            hasCheckIcon ? "scale-0 opacity-0" : "scale-100 opacity-100"
@@ -0,0 +1,268 @@
+import { cn } from "@/lib/utils";
+import {
+  AnimatePresence,
+  motion,
+  Transition,
+  type AnimationControls,
+  type Target,
+  type TargetAndTransition,
+  type VariantLabels,
+} from "framer-motion";
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from "react";
+
+export interface RotatingTextRef {
+  next: () => void;
+  previous: () => void;
+  jumpTo: (index: number) => void;
+  reset: () => void;
+}
+
+export interface RotatingTextProps
+  extends Omit<
+    React.ComponentPropsWithoutRef<typeof motion.span>,
+    "children" | "transition" | "initial" | "animate" | "exit"
+  > {
+  texts: string[];
+  transition?: Transition;
+  initial?: boolean | Target | VariantLabels;
+  animate?: boolean | VariantLabels | AnimationControls | TargetAndTransition;
+  exit?: Target | VariantLabels;
+  animatePresenceMode?: "sync" | "wait";
+  animatePresenceInitial?: boolean;
+  rotationInterval?: number;
+  staggerDuration?: number;
+  staggerFrom?: "first" | "last" | "center" | "random" | number;
+  loop?: boolean;
+  auto?: boolean;
+  splitBy?: string;
+  onNext?: (index: number) => void;
+  mainClassName?: string;
+  splitLevelClassName?: string;
+  elementLevelClassName?: string;
+}
+
+export const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
+  (
+    {
+      texts,
+      transition = { type: "spring", damping: 25, stiffness: 300 },
+      initial = { y: "100%", opacity: 0 },
+      animate = { y: 0, opacity: 1 },
+      exit = { y: "-120%", opacity: 0 },
+      animatePresenceMode = "wait",
+      animatePresenceInitial = false,
+      rotationInterval = 2000,
+      staggerDuration = 0,
+      staggerFrom = "first",
+      loop = true,
+      auto = true,
+      splitBy = "characters",
+      onNext,
+      mainClassName,
+      splitLevelClassName,
+      elementLevelClassName,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [currentTextIndex, setCurrentTextIndex] = useState<number>(0);
+
+    const splitIntoCharacters = (text: string): string[] => {
+      if (typeof Intl !== "undefined" && Intl.Segmenter) {
+        const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
+        return Array.from(
+          segmenter.segment(text),
+          (segment) => segment.segment,
+        );
+      }
+      return Array.from(text);
+    };
+
+    const elements = useMemo(() => {
+      const currentText: string = texts[currentTextIndex];
+      if (splitBy === "characters") {
+        const words = currentText.split(" ");
+        return words.map((word, i) => ({
+          characters: splitIntoCharacters(word),
+          needsSpace: i !== words.length - 1,
+        }));
+      }
+      if (splitBy === "words") {
+        return currentText.split(" ").map((word, i, arr) => ({
+          characters: [word],
+          needsSpace: i !== arr.length - 1,
+        }));
+      }
+      if (splitBy === "lines") {
+        return currentText.split("\n").map((line, i, arr) => ({
+          characters: [line],
+          needsSpace: i !== arr.length - 1,
+        }));
+      }
+
+      return currentText.split(splitBy).map((part, i, arr) => ({
+        characters: [part],
+        needsSpace: i !== arr.length - 1,
+      }));
+    }, [texts, currentTextIndex, splitBy]);
+
+    const getStaggerDelay = useCallback(
+      (index: number, totalChars: number): number => {
+        const total = totalChars;
+        if (staggerFrom === "first") return index * staggerDuration;
+        if (staggerFrom === "last")
+          return (total - 1 - index) * staggerDuration;
+        if (staggerFrom === "center") {
+          const center = Math.floor(total / 2);
+          return Math.abs(center - index) * staggerDuration;
+        }
+        if (staggerFrom === "random") {
+          const randomIndex = Math.floor(Math.random() * total);
+          return Math.abs(randomIndex - index) * staggerDuration;
+        }
+        return Math.abs((staggerFrom as number) - index) * staggerDuration;
+      },
+      [staggerFrom, staggerDuration],
+    );
+
+    const handleIndexChange = useCallback(
+      (newIndex: number) => {
+        setCurrentTextIndex(newIndex);
+        if (onNext) onNext(newIndex);
+      },
+      [onNext],
+    );
+
+    const next = useCallback(() => {
+      const nextIndex =
+        currentTextIndex === texts.length - 1
+          ? loop
+            ? 0
+            : currentTextIndex
+          : currentTextIndex + 1;
+      if (nextIndex !== currentTextIndex) {
+        handleIndexChange(nextIndex);
+      }
+    }, [currentTextIndex, texts.length, loop, handleIndexChange]);
+
+    const previous = useCallback(() => {
+      const prevIndex =
+        currentTextIndex === 0
+          ? loop
+            ? texts.length - 1
+            : currentTextIndex
+          : currentTextIndex - 1;
+      if (prevIndex !== currentTextIndex) {
+        handleIndexChange(prevIndex);
+      }
+    }, [currentTextIndex, texts.length, loop, handleIndexChange]);
+
+    const jumpTo = useCallback(
+      (index: number) => {
+        const validIndex = Math.max(0, Math.min(index, texts.length - 1));
+        if (validIndex !== currentTextIndex) {
+          handleIndexChange(validIndex);
+        }
+      },
+      [texts.length, currentTextIndex, handleIndexChange],
+    );
+
+    const reset = useCallback(() => {
+      if (currentTextIndex !== 0) {
+        handleIndexChange(0);
+      }
+    }, [currentTextIndex, handleIndexChange]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        next,
+        previous,
+        jumpTo,
+        reset,
+      }),
+      [next, previous, jumpTo, reset],
+    );
+
+    useEffect(() => {
+      if (!auto) return;
+      const intervalId = setInterval(next, rotationInterval);
+      return () => clearInterval(intervalId);
+    }, [next, rotationInterval, auto]);
+
+    return (
+      <motion.span
+        className={cn(
+          "relative flex flex-wrap whitespace-pre-wrap",
+          mainClassName,
+        )}
+        {...rest}
+        layout
+        transition={transition}
+      >
+        <span className="sr-only">{texts[currentTextIndex]}</span>
+        <AnimatePresence
+          mode={animatePresenceMode}
+          initial={animatePresenceInitial}
+        >
+          <motion.div
+            key={currentTextIndex}
+            className={cn(
+              splitBy === "lines"
+                ? "flex w-full flex-col"
+                : "relative flex flex-wrap whitespace-pre-wrap",
+            )}
+            layout
+            aria-hidden="true"
+          >
+            {elements.map((wordObj, wordIndex, array) => {
+              const previousCharsCount = array
+                .slice(0, wordIndex)
+                .reduce((sum, word) => sum + word.characters.length, 0);
+              return (
+                <span
+                  key={wordIndex}
+                  className={cn("inline-flex", splitLevelClassName)}
+                >
+                  {wordObj.characters.map((char, charIndex) => (
+                    <motion.span
+                      key={charIndex}
+                      initial={initial}
+                      animate={animate}
+                      exit={exit}
+                      transition={{
+                        ...transition,
+                        delay: getStaggerDelay(
+                          previousCharsCount + charIndex,
+                          array.reduce(
+                            (sum, word) => sum + word.characters.length,
+                            0,
+                          ),
+                        ),
+                      }}
+                      className={cn("inline-block", elementLevelClassName)}
+                    >
+                      {char}
+                    </motion.span>
+                  ))}
+                  {wordObj.needsSpace && (
+                    <span className="whitespace-pre"> </span>
+                  )}
+                </span>
+              );
+            })}
+          </motion.div>
+        </AnimatePresence>
+      </motion.span>
+    );
+  },
+);
+
+RotatingText.displayName = "RotatingText";
@@ -0,0 +1,27 @@
+"use client";
+import { RotatingText } from "@/components/reactbits/rotating-text";
+
+const supports = [
+  "Next.js",
+  "Node.js",
+  "Hono",
+  "Express.js",
+  "Deno",
+  "Nest.js",
+  "Waku",
+];
+
+export const Supports = () => {
+  return (
+    <RotatingText
+      texts={supports}
+      mainClassName="inline-flex bg-transparent overflow-hidden justify-center"
+      initial={{ y: "100%" }}
+      animate={{ y: 0 }}
+      exit={{ y: "-120%" }}
+      staggerDuration={0.025}
+      transition={{ type: "spring", damping: 30, stiffness: 400 }}
+      rotationInterval={2000}
+    />
+  );
+};
@@ -1,28 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import ReactTextTransition from "react-text-transition";
-
-const supports = [
-  "Next.js",
-  "Node.js",
-  "Hono",
-  "Express.js",
-  "Deno",
-  "Nest.js",
-  "Waku",
-];
-
-export const TextEffect = () => {
-  const [counter, setCounter] = useState(0);
-  useEffect(() => {
-    const id = setInterval(() => {
-      setCounter(
-        (Math.floor(Math.random() * supports.length) + 1) % supports.length,
-      );
-    }, 4000);
-    return () => {
-      clearInterval(id);
-    };
-  }, []);
-  return <ReactTextTransition inline>{supports[counter]}</ReactTextTransition>;
-};
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
      className,
    )}
    {...props}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
        <Cross2Icon className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
    {...props}
  />
 ));
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
      <input
        type={type}
        className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
          className,
        )}
        ref={ref}
@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
-      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      className={cn("bg-primary/10 animate-pulse rounded-md", className)}
      {...props}
    />
  );
@@ -17,10 +17,10 @@ const Slider = React.forwardRef<
    )}
    {...props}
  >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    <SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
+      <SliderPrimitive.Range className="bg-primary absolute h-full" />
    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
    return (
      <textarea
        className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
          className,
        )}
        ref={ref}
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
-        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
        className,
      )}
      {...props}
@@ -2,5 +2,5 @@
  "title": "LlamaCloud",
  "description": "The Cloud framework for LLM",
  "root": true,
-  "pages": ["---Guide---", "index", "api"]
+  "pages": ["---Guide---", "index", "..."]
 }
@@ -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",
+    }),
+  }),
 });
 ```

@@ -2,7 +2,7 @@
 title: A RAG agent that does math
 ---

-In [our third iteration of the agent](https://github.com/run-llama/ts-agents/blob/main/3_rag_and_tools/agent.ts) we've combined the two previous agents, so we've defined both `sumNumbers` and a `QueryEngineTool` and created an array of two tools:
+In [our third iteration of the agent](https://github.com/run-llama/ts-agents/blob/main/3_rag_and_tools/agent.ts) we've combined the two previous agents, so we've defined both `sumNumbers` and a `QueryEngineTool` and created an array of two tools. The tools support both Zod and JSON Schema for parameter definition:

 ```javascript
 // define the query engine as a tool
@@ -17,24 +17,42 @@ const tools = [
  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",
+      }),
+    }),
  }),
 ];
 ```

+You can also use JSON Schema to define the tool parameters as an alternative to Zod.
+
+```javascript
+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"],
+  },
+}),
+```
+
+
 These tool descriptions are identical to the ones we previously defined. Now let's ask it 3 questions in a row:

 ```javascript
@@ -3,8 +3,6 @@ title: Using API Route
 description: Chat interface for your LlamaIndexTS application using API Route
 ---
 import { ChatDemo } from '../../../../../components/demo/chat/api/demo';
-import "@llamaindex/chat-ui/styles/code.css";
-import "@llamaindex/chat-ui/styles/katex.css";

 Using [chat-ui](https://github.com/run-llama/chat-ui), it's easy to add a chat interface to your LlamaIndexTS application.
 You just need to create an API route that provides an `api/chat` endpoint and a chat component to consume the API.
@@ -0,0 +1,22 @@
+---
+title: Install @llamaindex/chat
+description: Chat interface for your LlamaIndexTS application
+---
+
+## Quick Start
+
+You can quickly add a chatbot to your project by using Shadcn CLI command:
+
+```sh
+npx shadcn@latest add https://ui.llamaindex.ai/r/chat.json
+```
+
+## Manual Installation
+
+To install the package, run the following command in your project directory:
+
+```sh
+npm install @llamaindex/chat-ui
+```
+
+For more information, check out the [github.comrun-llama/chat-ui](https://github.com/run-llama/chat-ui)
@@ -1,6 +1,6 @@
 {
-  "title": "Chat-UI",
+  "title": "Chat UI",
  "description": "Use chat-ui to add a chat interface to your LlamaIndexTS application.",
  "defaultOpen": false,
-  "pages": ["chat", "rsc"]
+  "pages": ["install", "chat", "rsc"]
 }
@@ -3,8 +3,6 @@ title: Using Next.js RSC
 description: Chat interface for your LlamaIndexTS application using Next.js RSC
 ---
 import { ChatDemoRSC } from '../../../../../components/demo/chat/rsc/demo';
-import "@llamaindex/chat-ui/styles/code.css";
-import "@llamaindex/chat-ui/styles/katex.css";

 Using [chat-ui](https://github.com/run-llama/chat-ui), it's easy to add a chat interface to your LlamaIndexTS application using [Next.js RSC](https://nextjs.org/docs/app/building-your-application/rendering/server-components) and [Vercel AI RSC](https://sdk.vercel.ai/docs/ai-sdk-rsc/overview).

@@ -127,26 +127,21 @@ async function main() {
 ```ts
 import { BEDROCK_MODELS, Bedrock } from "@llamaindex/community";
 import { FunctionTool, LLMAgent } from "llamaindex";
+import { z } from "zod";

 const sumNumbers = FunctionTool.from(
  ({ a, b }: { a: number; b: number }) => `${a + b}`,
  {
    name: "sumNumbers",
    description: "Use this function to sum two numbers",
-    parameters: {
-      type: "object",
-      properties: {
-        a: {
-          type: "number",
-          description: "The first number",
-        },
-        b: {
-          type: "number",
-          description: "The second number",
-        },
-      },
-      required: ["a", "b"],
-    },
+    parameters: z.object({
+      a: z.number({
+        description: "The first number",
+      }),
+      b: z.number({
+        description: "The second number",
+      }),
+    }),
  },
 );

@@ -155,20 +150,14 @@ const divideNumbers = FunctionTool.from(
  {
    name: "divideNumbers",
    description: "Use this function to divide two numbers",
-    parameters: {
-      type: "object",
-      properties: {
-        a: {
-          type: "number",
-          description: "The dividend a to divide",
-        },
-        b: {
-          type: "number",
-          description: "The divisor b to divide by",
-        },
-      },
-      required: ["a", "b"],
-    },
+    parameters: z.object({
+      a: z.number({
+        description: "The dividend a to divide",
+      }),
+      b: z.number({
+        description: "The divisor b to divide by",
+      }),
+    }),
  },
 );

@@ -39,16 +39,11 @@ const queryKnowledgeBase = async ({ question }, { userToken }) => {
 const kbTool = FunctionTool.from(queryKnowledgeBase, {
  name: 'queryKnowledgeBase',
  description: 'Query knowledge base',
-  parameters: {
-    type: 'object',
-    properties: {
-      question: {
-        type: 'string',
-        description: 'The user question',
-      },
-    },
-    required: ['question'],
-  },
+  parameters: z.object({
+    question: z.string({
+      description: 'The user question',
+    }),
+  }),
 });

 // create an agent
@@ -1,11 +1,10 @@
-import { docs, meta } from '../../.source';
-import { createMDXSource } from 'fumadocs-mdx';
+import { docs } from '@/.source';
 import { loader } from 'fumadocs-core/source';
 import { createOpenAPI } from "fumadocs-openapi/server";

 export const source = loader({
  baseUrl: '/docs',
-  source: createMDXSource(docs, meta),
+  source: docs.toFumadocsSource(),
 });

 export const openapi = createOpenAPI();
@@ -1,5 +1,3 @@
-import { createPreset } from "fumadocs-ui/tailwind-plugin";
-
 /** @type {import('tailwindcss').Config} */
 export default {
  darkMode: ["class"],
@@ -8,13 +6,7 @@ export default {
    "./src/app/**/*.{ts,tsx}",
    "./src/content/**/*.{md,mdx}",
    "./src/mdx-components.{ts,tsx}",
-    "./node_modules/fumadocs-ui/dist/**/*.js",
-    "./node_modules/fumadocs-openapi/dist/**/*.js",
-    "./node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}",
  ],
-  presets: [createPreset()],
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  plugins: [require("tailwindcss-animate")],
  theme: {
    extend: {
      borderRadius: {
@@ -16,7 +16,8 @@
    "jsx": "preserve",
    "incremental": true,
    "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@/.source": ["./.source/index.ts"]
    },
    "plugins": [
      {
@@ -11,7 +11,7 @@
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20241112.0",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
    "wrangler": "^3.89.0"
  },
  "dependencies": {
@@ -16,7 +16,7 @@
    "@cloudflare/workers-types": "^4.20241112.0",
    "@vitest/runner": "2.1.5",
    "@vitest/snapshot": "2.1.5",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
    "vitest": "2.1.5",
    "wrangler": "^3.87.0"
  },
@@ -9,7 +9,7 @@
    "preview": "vite preview"
  },
  "devDependencies": {
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
    "vite": "^5.4.12",
    "vite-plugin-wasm": "^3.3.0"
  },
@@ -10,18 +10,16 @@
  "dependencies": {
    "ai": "^4.0.0",
    "llamaindex": "workspace:*",
-    "next": "15.1.7",
+    "next": "15.2.0",
    "react": "19.0.0",
    "react-dom": "19.0.0"
  },
  "devDependencies": {
    "@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",
    "eslint": "9.16.0",
    "eslint-config-next": "15.1.0",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.15",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
  }
 }
@@ -1,8 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-const config = {
-  plugins: {
-    tailwindcss: {},
-  },
-};
-
-export default config;
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./globals.css";

 const inter = Inter({ subsets: ["latin"] });

@@ -1,20 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-};
-export default config;
@@ -9,14 +9,14 @@
  },
  "dependencies": {
    "llamaindex": "workspace:*",
-    "next": "15.1.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "next": "15.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@types/node": "^22.9.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "typescript": "^5.7.2"
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "typescript": "^5.7.3"
  }
 }
@@ -8,21 +8,19 @@
    "start": "next start"
  },
  "dependencies": {
-    "llamaindex": "workspace:*",
    "@llamaindex/huggingface": "workspace:*",
    "@llamaindex/readers": "workspace:*",
-    "next": "15.1.7",
+    "llamaindex": "workspace:*",
+    "next": "15.2.0",
    "react": "19.0.0",
    "react-dom": "19.0.0"
  },
  "devDependencies": {
    "@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",
    "eslint": "9.16.0",
    "eslint-config-next": "15.1.0",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.15",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
  }
 }
@@ -1,8 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-const config = {
-  plugins: {
-    tailwindcss: {},
-  },
-};
-
-export default config;
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./globals.css";

 const inter = Inter({ subsets: ["latin"] });

@@ -1,20 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-};
-export default config;
@@ -15,7 +15,7 @@
  "devDependencies": {
    "@size-limit/preset-big-lib": "^11.1.6",
    "size-limit": "^11.1.6",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
    "vite": "^6.1.0"
  },
  "dependencies": {
@@ -17,10 +17,10 @@
    "waku": "0.21.20"
  },
  "devDependencies": {
-    "@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",
-    "tailwindcss": "^3.4.15",
-    "typescript": "5.7.2"
+    "tailwindcss": "^4.0.9",
+    "typescript": "5.7.3"
  }
 }
@@ -1,7 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
@@ -10,10 +10,10 @@ export const Chat = (props: ChatProps) => {
  const [response, setResponse] = useState<string | null>(null);

  return (
-    <section className="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4">
+    <section className="-mx-4 mt-4 rounded border border-dashed border-blue-400 p-4">
      <h2 className="text-lg font-bold">Chat with AI</h2>
      {response ? (
-        <p className="text-sm text-gray-600 max-w-sm">{response}</p>
+        <p className="max-w-sm text-sm text-gray-600">{response}</p>
      ) : null}
      <form
        action={async (formData) => {
@@ -26,7 +26,7 @@ export const Chat = (props: ChatProps) => {
        <input
          type="text"
          name="question"
-          className="border border-gray-400 rounded-sm px-2 py-0.5 text-sm"
+          className="rounded-sm border border-gray-400 px-2 py-0.5 text-sm"
        />
        <button className="rounded-sm bg-black px-2 py-0.5 text-sm text-white">
          Ask
@@ -1,4 +1,2 @@
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap");
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
@@ -1,4 +1,5 @@
 import { FunctionTool } from "llamaindex";
+import { z } from "zod";

 function sumNumbers({ a, b }: { a: number; b: number }) {
  return `${a + b}`;
@@ -11,39 +12,27 @@ function divideNumbers({ a, b }: { a: number; b: number }) {
 export const sumNumbersTool = FunctionTool.from(sumNumbers, {
  name: "sumNumbers",
  description: "Use this function to sum two numbers",
-  parameters: {
-    type: "object",
-    properties: {
-      a: {
-        type: "number",
-        description: "The first number",
-      },
-      b: {
-        type: "number",
-        description: "The second number",
-      },
-    },
-    required: ["a", "b"],
-  },
+  parameters: z.object({
+    a: z.number({
+      description: "The first number",
+    }),
+    b: z.number({
+      description: "The second number",
+    }),
+  }),
 });

 export const divideNumbersTool = FunctionTool.from(divideNumbers, {
  name: "divideNumbers",
  description: "Use this function to divide two numbers",
-  parameters: {
-    type: "object",
-    properties: {
-      a: {
-        type: "number",
-        description: "The first number",
-      },
-      b: {
-        type: "number",
-        description: "The second number",
-      },
-    },
-    required: ["a", "b"],
-  },
+  parameters: z.object({
+    a: z.number({
+      description: "The first number",
+    }),
+    b: z.number({
+      description: "The second number",
+    }),
+  }),
 });

 // should always return the 72 degrees
@@ -54,15 +43,10 @@ export const getWeatherTool = FunctionTool.from(
  {
    name: "getWeather",
    description: "Get the weather for a city",
-    parameters: {
-      type: "object",
-      properties: {
-        city: {
-          type: "string",
-          description: "The city to get the weather for",
-        },
-      },
-      required: ["city"],
-    },
+    parameters: z.object({
+      city: z.string({
+        description: "The city to get the weather for",
+      }),
+    }),
  },
 );
@@ -10,22 +10,23 @@
  },
  "devDependencies": {
    "@faker-js/faker": "^9.2.0",
+    "@huggingface/transformers": "^3.0.2",
+    "@llamaindex/anthropic": "workspace:*",
+    "@llamaindex/clip": "workspace:*",
    "@llamaindex/core": "workspace:*",
    "@llamaindex/env": "workspace:*",
    "@llamaindex/ollama": "workspace:*",
    "@llamaindex/openai": "workspace:*",
    "@llamaindex/pinecone": "workspace:*",
    "@llamaindex/postgres": "workspace:*",
-    "@llamaindex/clip": "workspace:*",
-    "@llamaindex/anthropic": "workspace:*",
    "@types/node": "^22.9.0",
    "@types/pg": "^8.11.8",
-    "@huggingface/transformers": "^3.0.2",
    "consola": "^3.2.3",
    "dotenv": "^16.4.5",
    "llamaindex": "workspace:*",
    "pg": "^8.12.0",
    "pgvector": "0.2.0",
-    "tsx": "^4.19.0"
+    "tsx": "^4.19.3",
+    "zod": "^3.24.2"
  }
 }
@@ -1,5 +1,6 @@
-import { OpenAI, OpenAIAgent } from "@llamaindex/openai";
-import { FunctionTool } from "llamaindex";
+import { OpenAI } from "@llamaindex/openai";
+import { AgentWorkflow, FunctionTool } from "llamaindex";
+import { z } from "zod";

 const csvData =
  "TITLE,RELEASE_YEAR,SCORE,NUMBER_OF_VOTES,DURATION,MAIN_GENRE,MAIN_PRODUCTION\nDavid Attenborough: A Life on Our Planet,2020,9,31180,83,documentary,GB\nInception,2010,8.8,2268288,148,scifi,GB\nForrest Gump,1994,8.8,1994599,142,drama,US\nAnbe Sivam,2003,8.7,20595,160,comedy,IN\nBo Burnham: Inside,2021,8.7,44074,87,comedy,US\nSaving Private Ryan,1998,8.6,1346020,169,drama,US\nDjango Unchained,2012,8.4,1472668,165,western,US\nDangal,2016,8.4,180247,161,action,IN\nBo Burnham: Make Happy,2016,8.4,14356,60,comedy,US\nLouis C.K.: Hilarious,2010,8.4,11973,84,comedy,US\nDave Chappelle: Sticks & Stones,2019,8.4,25687,65,comedy,US\n3 Idiots,2009,8.4,385782,170,comedy,IN\nBlack Friday,2004,8.4,20611,143,crime,IN\nSuper Deluxe,2019,8.4,13680,176,thriller,IN\nWinter on Fire: Ukraine's Fight for Freedom,2015,8.3,17710,98,documentary,UA\nOnce Upon a Time in America,1984,8.3,342335,229,drama,US\nTaxi Driver,1976,8.3,795222,113,crime,US\nLike Stars on Earth,2007,8.3,188234,165,drama,IN\nBo Burnham: What.,2013,8.3,11488,60,comedy,US\nFull Metal Jacket,1987,8.3,723306,116,drama,GB\nWarrior,2011,8.2,463276,140,drama,US\nDrishyam,2015,8.2,79075,163,thriller,IN\nQueen,2014,8.2,64805,146,drama,IN\nPaan Singh Tomar,2012,8.2,35888,135,drama,IN";
@@ -8,13 +9,9 @@ const userQuestion = "which are the best comedies after 2010?";

 (async () => {
  // The agent will succeed if we increase `maxTokens` to 1024
-  const llm = new OpenAI({ model: "gpt-4-turbo", maxTokens: 256 });
+  const llm = new OpenAI({ model: "gpt-4-turbo", maxTokens: 1024 });

-  type Input = {
-    code: string;
-  };
-  // initiate fake code interpreter
-  const interpreterTool = FunctionTool.from<Input>(
+  const interpreterTool = FunctionTool.from(
    ({ code }) => {
      console.log(
        `To answer the user's question, call the following code:\n${code}`,
@@ -25,41 +22,34 @@ const userQuestion = "which are the best comedies after 2010?";
      name: "interpreter",
      description:
        "Execute python code in a Jupyter notebook cell and return any result, stdout, stderr, display_data, and error.",
-      parameters: {
-        type: "object",
-        properties: {
-          code: {
-            type: "string",
-            description: "The python code to execute in a single cell.",
-          },
-        },
-        required: ["code"],
-      },
+      parameters: z.object({
+        code: z.string({
+          description: "The python code to execute in a single cell.",
+        }),
+      }),
    },
  );

  const systemPrompt =
    "You are a Python interpreter.\n        - You are given tasks to complete and you run python code to solve them.\n        - The python code runs in a Jupyter notebook. Every time you call $(interpreter) tool, the python code is executed in a separate cell. It's okay to make multiple calls to $(interpreter).\n        - Display visualizations using matplotlib or any other visualization library directly in the notebook. Shouldn't save the visualizations to a file, just return the base64 encoded data.\n        - You can install any pip package (if it exists) if you need to but the usual packages for data analysis are already preinstalled.\n        - You can run any python code you want in a secure environment.";

-  const agent = new OpenAIAgent({
-    llm,
+  const workflow = AgentWorkflow.fromTools({
    tools: [interpreterTool],
+    llm,
+    verbose: false,
    systemPrompt,
-    verbose: true,
  });

  console.log(`User question: ${userQuestion}\n`);

-  await agent.chat({
-    message: [
+  const result = await workflow.run(userQuestion, {
+    chatHistory: [
      {
-        type: "text",
-        text: userQuestion,
-      },
-      {
-        type: "text",
-        text: `Use data from following CSV raw contents:\n${csvData}`,
+        role: "user",
+        content: `Use data from following CSV raw contents:\n${csvData}`,
      },
    ],
  });
+
+  console.log(result);
 })();
@@ -1,5 +1,6 @@
 import { OpenAI } from "@llamaindex/openai";
 import { FunctionTool, ToolCallOptions } from "llamaindex";
+import { z } from "zod";

 (async () => {
  // The tool call will generate a partial JSON for `gpt-4-turbo`
@@ -27,16 +28,11 @@ async function callLLM(init: { model: string }) {
      name: "interpreter",
      description:
        "Execute python code in a Jupyter notebook cell and return any result, stdout, stderr, display_data, and error.",
-      parameters: {
-        type: "object",
-        properties: {
-          code: {
-            type: "string",
-            description: "The python code to execute in a single cell.",
-          },
-        },
-        required: ["code"],
-      },
+      parameters: z.object({
+        code: z.string({
+          description: "The python code to execute in a single cell.",
+        }),
+      }),
    },
  );

@@ -1,25 +1,16 @@
-import { OpenAIAgent } from "@llamaindex/openai";
-import { FunctionTool } from "llamaindex";
+import { OpenAI } from "@llamaindex/openai";
+import { AgentWorkflow, FunctionTool } from "llamaindex";
+import { z } from "zod";

 const sumNumbers = FunctionTool.from(
  ({ a, b }: { a: number; b: number }) => `${a + b}`,
  {
    name: "sumNumbers",
    description: "Use this function to sum two numbers",
-    parameters: {
-      type: "object",
-      properties: {
-        a: {
-          type: "number",
-          description: "The first number",
-        },
-        b: {
-          type: "number",
-          description: "The second number",
-        },
-      },
-      required: ["a", "b"],
-    },
+    parameters: z.object({
+      a: z.number().describe("The first number"),
+      b: z.number().describe("The second number"),
+    }),
  },
 );

@@ -28,33 +19,22 @@ const divideNumbers = FunctionTool.from(
  {
    name: "divideNumbers",
    description: "Use this function to divide two numbers",
-    parameters: {
-      type: "object",
-      properties: {
-        a: {
-          type: "number",
-          description: "The dividend a to divide",
-        },
-        b: {
-          type: "number",
-          description: "The divisor b to divide by",
-        },
-      },
-      required: ["a", "b"],
-    },
+    parameters: z.object({
+      a: z.number().describe("The dividend a to divide"),
+      b: z.number().describe("The divisor b to divide by"),
+    }),
  },
 );

 async function main() {
-  const agent = new OpenAIAgent({
+  const workflow = AgentWorkflow.fromTools({
    tools: [sumNumbers, divideNumbers],
+    llm: new OpenAI({ model: "gpt-4o-mini" }),
+    verbose: false,
  });

-  const response = await agent.chat({
-    message: "How much is 5 + 5? then divide by 2",
-  });
-
-  console.log(response.message);
+  const response = await workflow.run("How much is 5 + 5? then divide by 2");
+  console.log(response.data);
 }

 void main().then(() => {
@@ -6,6 +6,7 @@ import {
  NodeWithScore,
  VectorStoreIndex,
 } from "llamaindex";
+import { z } from "zod";

 async function main() {
  // Load the documents
@@ -32,16 +33,9 @@ async function main() {
    {
      name: "get_abramov_info",
      description: "Get information about the Abramov documents",
-      parameters: {
-        type: "object",
-        properties: {
-          query: {
-            type: "string",
-            description: "The query about Abramov",
-          },
-        },
-        required: ["query"],
-      },
+      parameters: z.object({
+        query: z.string().describe("The query about Abramov"),
+      }),
    },
  );

@@ -1,5 +1,6 @@
 import { OpenAIAgent } from "@llamaindex/openai";
 import { FunctionTool } from "llamaindex";
+import { z } from "zod";

 // Define a function to sum two numbers
 function sumNumbers({ a, b }: { a: number; b: number }) {
@@ -11,50 +12,29 @@ function divideNumbers({ a, b }: { a: number; b: number }) {
  return `${a / b}`;
 }

-// Define the parameters of the sum function as a JSON schema
-const sumJSON = {
-  type: "object",
-  properties: {
-    a: {
-      type: "number",
-      description: "The first number",
-    },
-    b: {
-      type: "number",
-      description: "The second number",
-    },
-  },
-  required: ["a", "b"],
-} as const;
+const sumSchema = z.object({
+  a: z.number().describe("The first number"),
+  b: z.number().describe("The second number"),
+});

-const divideJSON = {
-  type: "object",
-  properties: {
-    a: {
-      type: "number",
-      description: "The dividend",
-    },
-    b: {
-      type: "number",
-      description: "The divisor",
-    },
-  },
-  required: ["a", "b"],
-} as const;
+const divideSchema = z.object({
+  a: z.number().describe("The dividend"),
+  b: z.number().describe("The divisor"),
+});

 async function main() {
  // Create a function tool from the sum function
  const functionTool = FunctionTool.from(sumNumbers, {
    name: "sumNumbers",
    description: "Use this function to sum two numbers",
-    parameters: sumJSON,
+    parameters: sumSchema,
  });

  // Create a function tool from the divide function
  const functionTool2 = FunctionTool.from(divideNumbers, {
    name: "divideNumbers",
    description: "Use this function to divide two numbers",
-    parameters: divideJSON,
+    parameters: divideSchema,
  });

  // Create an OpenAIAgent with the function tools
@@ -1,4 +1,5 @@
 import { FunctionTool } from "llamaindex";
+import { z } from "zod";

 export const getCurrentIDTool = FunctionTool.from(
  () => {
@@ -19,16 +20,9 @@ export const getUserInfoTool = FunctionTool.from(
  {
    name: "get_user_info",
    description: "Get user info",
-    parameters: {
-      type: "object",
-      properties: {
-        userId: {
-          type: "string",
-          description: "The user id",
-        },
-      },
-      required: ["userId"],
-    },
+    parameters: z.object({
+      userId: z.string().describe("The user id"),
+    }),
  },
 );

@@ -40,15 +34,8 @@ export const getWeatherTool = FunctionTool.from(
  {
    name: "get_weather",
    description: "Get the current weather for a location",
-    parameters: {
-      type: "object",
-      properties: {
-        address: {
-          type: "string",
-          description: "The address",
-        },
-      },
-      required: ["address"],
-    },
+    parameters: z.object({
+      address: z.string().describe("The address"),
+    }),
  },
 );
@@ -1,24 +1,28 @@
-import { OpenAI, OpenAIAgent } from "@llamaindex/openai";
+import { OpenAI } from "@llamaindex/openai";
+import { AgentStream, AgentWorkflow } from "llamaindex";
 import { WikipediaTool } from "../wiki";

 async function main() {
  const llm = new OpenAI({ model: "gpt-4-turbo" });
  const wikiTool = new WikipediaTool();

-  // Create an OpenAIAgent with the Wikipedia tool
-  const agent = new OpenAIAgent({
-    llm,
+  const workflow = AgentWorkflow.fromTools({
    tools: [wikiTool],
+    llm,
+    verbose: false,
  });

  // Chat with the agent
-  const response = await agent.chat({
-    message: "Who was Goethe?",
-    stream: true,
-  });
+  const context = workflow.run("Who was Goethe?");

-  for await (const { delta } of response) {
-    process.stdout.write(delta);
+  for await (const event of context) {
+    if (event instanceof AgentStream) {
+      for (const chunk of event.data.delta) {
+        process.stdout.write(chunk);
+      }
+    } else {
+      console.log(event);
+    }
  }
 }

@@ -1,5 +1,6 @@
 import { Anthropic, AnthropicAgent } from "@llamaindex/anthropic";
 import { FunctionTool, Settings } from "llamaindex";
+import { z } from "zod";
 import { WikipediaTool } from "../wiki";

 Settings.callbackManager.on("llm-tool-call", (event) => {
@@ -14,23 +15,16 @@ const anthropic = new Anthropic({
 const agent = new AnthropicAgent({
  llm: anthropic,
  tools: [
-    FunctionTool.from<{ location: string }>(
+    FunctionTool.from(
      (query) => {
        return `The weather in ${query.location} is sunny`;
      },
      {
        name: "weather",
        description: "Get the weather",
-        parameters: {
-          type: "object",
-          properties: {
-            location: {
-              type: "string",
-              description: "The location to get the weather for",
-            },
-          },
-          required: ["location"],
-        },
+        parameters: z.object({
+          location: z.string().describe("The location to get the weather for"),
+        }),
      },
    ),
    new WikipediaTool(),
@@ -1,5 +1,6 @@
 import { Gemini, GEMINI_MODEL } from "@llamaindex/google";
 import { FunctionTool, LLMAgent, Settings } from "llamaindex";
+import { z } from "zod";

 Settings.callbackManager.on("llm-tool-call", (event) => {
  console.log(event.detail);
@@ -14,20 +15,10 @@ const sumNumbers = FunctionTool.from(
  {
    name: "sumNumbers",
    description: "Use this function to sum two numbers",
-    parameters: {
-      type: "object",
-      properties: {
-        a: {
-          type: "number",
-          description: "The first number",
-        },
-        b: {
-          type: "number",
-          description: "The second number",
-        },
-      },
-      required: ["a", "b"],
-    },
+    parameters: z.object({
+      a: z.number().describe("The first number"),
+      b: z.number().describe("The second number"),
+    }),
  },
 );

@@ -36,20 +27,10 @@ const divideNumbers = FunctionTool.from(
  {
    name: "divideNumbers",
    description: "Use this function to divide two numbers",
-    parameters: {
-      type: "object",
-      properties: {
-        a: {
-          type: "number",
-          description: "The dividend a to divide",
-        },
-        b: {
-          type: "number",
-          description: "The divisor b to divide by",
-        },
-      },
-      required: ["a", "b"],
-    },
+    parameters: z.object({
+      a: z.number().describe("The dividend a to divide"),
+      b: z.number().describe("The divisor b to divide by"),
+    }),
  },
 );

@@ -58,20 +39,10 @@ const subtractNumbers = FunctionTool.from(
  {
    name: "subtractNumbers",
    description: "Use this function to subtract two numbers",
-    parameters: {
-      type: "object",
-      properties: {
-        a: {
-          type: "number",
-          description: "The number to subtract from",
-        },
-        b: {
-          type: "number",
-          description: "The number to subtract",
-        },
-      },
-      required: ["a", "b"],
-    },
+    parameters: z.object({
+      a: z.number().describe("The number to subtract from"),
+      b: z.number().describe("The number to subtract"),
+    }),
  },
 );

@@ -64,8 +64,8 @@
  },
  "devDependencies": {
    "@types/node": "^22.9.0",
-    "tsx": "^4.19.0",
-    "typescript": "^5.7.2"
+    "tsx": "^4.19.3",
+    "typescript": "^5.7.3"
  },
  "stackblitz": {
    "startCommand": "npm start"
@@ -25,7 +25,7 @@
  },
  "devDependencies": {
    "@types/node": "^22.9.0",
-    "tsx": "^4.19.0",
-    "typescript": "^5.7.2"
+    "tsx": "^4.19.3",
+    "typescript": "^5.7.3"
  }
 }
@@ -21,7 +21,7 @@
  },
  "devDependencies": {
    "@changesets/cli": "^2.27.5",
-    "eslint": "9.16.0",
+    "eslint": "9.22.0",
    "eslint-config-next": "^15.1.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-turbo": "^2.3.3",
@@ -32,21 +32,19 @@
    "madge": "^8.0.0",
    "prettier": "^3.4.2",
    "prettier-plugin-organize-imports": "^4.1.0",
-    "turbo": "^2.3.3",
-    "typescript": "^5.7.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "turbo": "^2.4.4",
+    "typescript": "^5.7.3",
    "typescript-eslint": "^8.18.0"
  },
  "packageManager": "pnpm@9.12.3",
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
-      "prettier --check",
-      "eslint"
+      "eslint --fix",
+      "prettier --write"
    ],
-    "*.{json,md}": "prettier --check"
-  },
-  "pnpm": {
-    "patchedDependencies": {
-      "bunchee@6.3.4": "patches/bunchee@6.3.4.patch"
-    }
+    "*.{json,md,yml}": [
+      "prettier --write"
+    ]
  }
 }
@@ -8,7 +8,7 @@
    "openai": "^4.73.1"
  },
  "devDependencies": {
-    "tsx": "^4.19.0"
+    "tsx": "^4.19.3"
  },
  "scripts": {
    "start": "node --import tsx --import @llamaindex/autotool/node ./src/index.ts"
@@ -1,3 +0,0 @@
-# Rename this file to `.env.local` to use environment variables locally with `next dev`
-# https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
-MY_HOST="example.com"
@@ -1,35 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
@@ -1,30 +0,0 @@
-This is a [LlamaIndex](https://www.llamaindex.ai/) project using [Next.js](https://nextjs.org/) bootstrapped with [`create-llama`](https://github.com/run-llama/LlamaIndexTS/tree/main/packages/create-llama).
-
-## Getting Started
-
-First, install the dependencies:
-
-```
-npm install
-```
-
-Second, run the development server:
-
-```
-npm run dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about LlamaIndex, take a look at the following resources:
-
- [LlamaIndex Documentation](https://docs.llamaindex.ai) - learn about LlamaIndex (Python features).
- [LlamaIndexTS Documentation](https://ts.llamaindex.ai) - learn about LlamaIndex (Typescript features).
-
-You can check out [the LlamaIndexTS GitHub repository](https://github.com/run-llama/LlamaIndexTS) - your feedback and contributions are welcome!
@@ -1,38 +0,0 @@
-"use server";
-import { OpenAIAgent } from "llamaindex";
-// import your tools on top, that's it
-import { runWithStreamableUI } from "@/context";
-import "@/tool";
-import { convertTools } from "@llamaindex/autotool";
-import { createStreamableUI } from "ai/rsc";
-import type { ReactNode } from "react";
-
-export async function chatWithAI(message: string): Promise<ReactNode> {
-  const agent = new OpenAIAgent({
-    tools: convertTools("llamaindex"),
-  });
-  const uiStream = createStreamableUI();
-  runWithStreamableUI(uiStream, () =>
-    agent
-      .chat({
-        stream: true,
-        message,
-      })
-      .then(async (responseStream) => {
-        return responseStream.pipeTo(
-          new WritableStream({
-            start: () => {
-              uiStream.append("\n");
-            },
-            write: async (message) => {
-              uiStream.append(message.response);
-            },
-            close: () => {
-              uiStream.done();
-            },
-          }),
-        );
-      }),
-  ).catch(uiStream.error);
-  return uiStream.value;
-}
@@ -1,91 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
-  }
-  .background-gradient {
-    background-color: #fff;
-    background-image:
-      radial-gradient(at 21% 11%, rgba(186, 186, 233, 0.53) 0, transparent 50%),
-      radial-gradient(at 85% 0, hsla(46, 57%, 78%, 0.52) 0, transparent 50%),
-      radial-gradient(at 91% 36%, rgba(194, 213, 255, 0.68) 0, transparent 50%),
-      radial-gradient(at 8% 40%, rgba(251, 218, 239, 0.46) 0, transparent 50%);
-  }
-}
@@ -1,26 +0,0 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import { Toaster } from "sonner";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "Create Llama App",
-  description: "Generated by create-llama",
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <Toaster />
-        {children}
-      </body>
-    </html>
-  );
-}
@@ -1,11 +0,0 @@
-import { ChatSection } from "@/components/chat-section";
-
-export const runtime = "edge";
-
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center gap-10 p-24 background-gradient">
-      <ChatSection />
-    </main>
-  );
-}
@@ -1,35 +0,0 @@
-"use client";
-import { chatWithAI } from "@/actions";
-import { ReactNode, useActionState } from "react";
-import { toast } from "sonner";
-
-export function ChatSection() {
-  const [state, formAction] = useActionState<ReactNode | null, FormData>(
-    async (state, payload) => {
-      const input = payload.get("input") as string | null;
-      if (!input) {
-        toast.error("Please type a message");
-        return null;
-      }
-      return chatWithAI(input);
-    },
-    null,
-  );
-  return (
-    <form>
-      <div className="border border-gray-400 p-2 max-w-md">{state}</div>
-      <input
-        className="border border-gray-400 p-2"
-        type="text"
-        name="input"
-        placeholder="Type your message here"
-      />
-      <button
-        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-        formAction={formAction}
-      >
-        Chat
-      </button>
-    </form>
-  );
-}
@@ -1,9 +0,0 @@
-export function LocationCard() {
-  return (
-    <div className="border border-gray-400 p-2 max-w-md">
-      <h1>Weather</h1>
-      <p>San Francisco, CA</p>
-      <p>Sunny</p>
-    </div>
-  );
-}
@@ -1,23 +0,0 @@
-export function Spinner() {
-  return (
-    <div role="status">
-      <svg
-        aria-hidden="true"
-        className="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
-        viewBox="0 0 100 101"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-          fill="currentColor"
-        />
-        <path
-          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-          fill="currentFill"
-        />
-      </svg>
-      <span className="sr-only">Loading...</span>
-    </div>
-  );
-}
@@ -1,14 +0,0 @@
-import type { createStreamableUI } from "ai/rsc";
-import { AsyncLocalStorage } from "node:async_hooks";
-
-type StreamableUI = ReturnType<typeof createStreamableUI>;
-
-const streamUIAsyncLocalStorage = new AsyncLocalStorage<StreamableUI>();
-
-export function getCurrentStreamableUI() {
-  return streamUIAsyncLocalStorage.getStore();
-}
-
-export function runWithStreamableUI<T>(streamUI: StreamableUI, fn: () => T): T {
-  return streamUIAsyncLocalStorage.run(streamUI, fn);
-}
@@ -1,7 +0,0 @@
-import { withNext } from "@llamaindex/autotool/next";
-import withLlamaIndex from "llamaindex/next";
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default withLlamaIndex(withNext(nextConfig));
@@ -1,37 +0,0 @@
-{
-  "name": "@llamaindex/autotool-02-next-example",
-  "private": true,
-  "version": "0.1.134",
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@llamaindex/autotool": "workspace:*",
-    "@radix-ui/react-slot": "^1.1.0",
-    "ai": "^4.0.0",
-    "class-variance-authority": "^0.7.0",
-    "dotenv": "^16.3.1",
-    "llamaindex": "workspace:*",
-    "lucide-react": "^0.460.0",
-    "next": "15.1.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-markdown": "^9.0.1",
-    "react-syntax-highlighter": "^15.5.0",
-    "sonner": "^1.7.0",
-    "tailwind-merge": "^2.5.2"
-  },
-  "devDependencies": {
-    "@types/node": "^22.9.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/react-syntax-highlighter": "^15.5.11",
-    "autoprefixer": "^10.4.20",
-    "cross-env": "^7.0.3",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.15",
-    "typescript": "^5.7.2"
-  }
-}
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Alex Yang	6dde924d0a	chore: bump `bunchee`	2025-03-09 01:19:33 -08:00
Alex Yang	f71b143ceb	chore: add tailwindcss prettier (#1723 )	2025-03-09 01:11:27 -08:00
Alex Yang	ead4a80a3a	feat(docs): improve misc (#1722 )	2025-03-09 00:57:47 -08:00
Alex Yang	da78689e24	fix(docs): use `docs.toFumadocsSource` (#1721 )	2025-03-09 00:34:49 -08:00
Alex Yang	f24a9dfe00	fix(docs): openapi generation & twoslash fix (#1720 )	2025-03-09 00:02:30 -08:00
Alex Yang	e31d6ba472	fix(docs): development error	2025-03-08 21:51:43 -08:00
Alex Yang	d212240d64	feat: use fumadoc 15 + tailwind 4 (#1690 ) Co-authored-by: thucpn <thucsh2@gmail.com>	2025-03-07 23:30:54 -08:00