Release 0.10.4 (#1901)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/workflows/lint_on_push_or_pull.yml

@@ -8,6 +8,11 @@ on:
     branches:
       - main
 
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+  TURBO_REMOTE_ONLY: true
+
 jobs:
   lint:
     runs-on: ubuntu-latest

.github/workflows/preview.yml

@@ -1,6 +1,11 @@
 name: Publish Preview
 on: [pull_request]
 
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+  TURBO_REMOTE_ONLY: true
+
 jobs:
   pre_release:
     name: Pre Release
@@ -25,4 +30,4 @@ jobs:
         run: pnpm run build
 
       - name: Pre Release
-        run: pnpx pkg-pr-new publish ./packages/* ./packages/providers/*
+        run: pnpx pkg-pr-new publish --pnpm ./packages/* ./packages/providers/* ./packages/providers/storage/*

.github/workflows/test.yml

@@ -23,7 +23,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [18.x, 20.x, 22.x, 23.x]
+        node-version: [20.x, 22.x, 23.x]
     name: E2E on Node.js ${{ matrix.node-version }}
     runs-on: ubuntu-latest
     steps:
@@ -53,7 +53,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [18.x, 20.x, 22.x, 23.x]
+        node-version: [20.x, 22.x, 23.x]
     name: Test on Node.js ${{ matrix.node-version }}
     runs-on: ubuntu-latest
     steps:
@@ -83,11 +83,6 @@ jobs:
         run: pnpm install
       - name: Build
         run: pnpm run build
-      - name: Use Build For Examples
-        run: |
-          pnpm link ../packages/llamaindex/
-          cd readers && pnpm link ../../packages/llamaindex/
-        working-directory: ./examples
       - name: Run Type Check
         run: pnpm run type-check
       - name: Run Circular Dependency Check
@@ -103,6 +98,7 @@ jobs:
           - nextjs-node-runtime
           - waku-query-engine
           - llama-parse-browser
+          - vite-import-llamaindex
     runs-on: ubuntu-latest
     name: Build LlamaIndex Example (${{ matrix.packages }})
     steps:
@@ -121,6 +117,30 @@ jobs:
         run: pnpm run build
         working-directory: e2e/examples/${{ matrix.packages }}
 
+  size-limit:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+    name: Size Limit
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build llamaindex
+        run: pnpm run build
+      - uses: andresz1/size-limit-action@94bc357df29c36c8f8d50ea497c3e225c3c95d1d
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          directory: e2e/examples/vite-import-llamaindex
+          skip_step: "install"
+          build_script: build
+          package_manager: pnpm
+
   typecheck-examples:
     runs-on: ubuntu-latest
 

.husky/pre-commit

@@ -1,3 +1 @@
-pnpm format
-pnpm lint
-npx lint-staged
+pnpm run lint-staged

.nvmrc

@@ -1 +1 @@
-20
+22

.prettierignore

@@ -7,3 +7,4 @@ dist/
 .source/
 # prttier doesn't support mdx3 we are using
 *.mdx
+packages/server/server/

.vscode/ltex.dictionary.en-US.txt

@@ -0,0 +1 @@
+LlamaIndexTS

.vscode/settings.json

@@ -14,5 +14,6 @@
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "prettier.prettierPath": "./node_modules/prettier"
+  "prettier.prettierPath": "./node_modules/prettier",
+  "prettier.configPath": "prettier.config.mjs"
 }

CONTRIBUTING.md

@@ -14,13 +14,14 @@ There are some important folders in the repository:
     all JS runtime environments.
   - `env`: The environment package of LlamaIndex.TS, which contains the environment-specific classes and interfaces. It
     includes compatibility layers for Node.js, Deno, Vercel Edge Runtime, Cloudflare Workers...
+  - `providers/*`: The providers package of LlamaIndex.TS, which contains the providers for LLM and other services.
 - `apps/*`: The applications based on LlamaIndex.TS.
   - `next`: Our documentation website based on Next.js.
 - `examples`: The code examples of LlamaIndex.TS using Node.js.
 
 ## Getting Started
 
-Make sure you have Node.js LIS (Long-term Support) installed. You can check your Node.js version by running:
+Make sure you have Node.js LTS (Long-term Support) installed. You can check your Node.js version by running:
 
 ```shell
 node -v
@@ -30,7 +31,7 @@ node -v
 ### Use pnpm
 
 ```shell
-corepack enable
+npm install -g pnpm
 ```
 
 ### Install dependencies
@@ -41,26 +42,65 @@ pnpm install
 
 ### Build the packages
 
+To build all packages, run:
+
 ```shell
-# Build all packages
-turbo build --filter "./packages/*"
+pnpm build
 ```
 
+### Run tests
+
+#### Unit tests
+
+After build, to run all unit tests, call:
+
+```shell
+pnpm test
+```
+
+Unit tests are located in the `tests` folder of each package. They are using their own package (e.g. `@llamaindex/core-tests` for `@llamaindex/core`). The tests are importing the package under test and the test package is not published.
+
+#### E2E tests
+
+To run all E2E tests, call:
+
+```shell
+pnpm e2e
+```
+
+All E2E tests are in the `e2e` folder.
+
 ### Docs
 
 See the [docs](./apps/next/README.md) for more information.
 
-## Changeset
+## Adding a new package
+
+Please follow these steps to add a new package:
+
+1. Only add new packages to the `packages/providers` folder.
+2. Use the `package.json` and `tsconfig.json` of an existing packages as template.
+3. Reference your new package in the root `tsconfig.json` file
+4. Add your package to the `examples/package.json` file if you add a new example.
+
+## Before sending a PR
+
+Before sending a PR, make sure of the following:
+
+1. Tests are all running and you added meaningful tests for your change.
+2. If you have a new feature, document it in the `apps/next` docs folder.
+3. If you have a new feature, add a new example in the `examples` folder.
+4. You have a descriptive changeset for each PR:
+
+### Changesets
 
 We use [changesets](https://github.com/changesets/changesets) for managing versions and changelogs. To create a new
 changeset, run in the root folder:
 
-```
+```shell
 pnpm changeset
 ```
 
-Please send a descriptive changeset for each PR.
-
 ## Publishing (maintainers only)
 
 The [Release Github Action](.github/workflows/release.yml) is automatically generating and updating a

README.md

@@ -65,44 +65,18 @@ yarn add llamaindex
 
 See our official document: <https://ts.llamaindex.ai/docs/llamaindex/getting_started/>
 
-### Tips when using in non-Node.js environments
+### Adding provider packages
 
-When you are importing `llamaindex` in a non-Node.js environment(such as Vercel Edge, Cloudflare Workers, etc.)
-Some classes are not exported from top-level entry file.
+In most cases, you'll also need to install provider packages to use LlamaIndexTS. These are for adding AI models, file readers for ingestion or storing documents, e.g. in vector databases.
 
-The reason is that some classes are only compatible with Node.js runtime,(e.g. `PDFReader`) which uses Node.js specific APIs(like `fs`, `child_process`, `crypto`).
+For example, to use the OpenAI LLM, you would install the following package:
 
-If you need any of those classes, you have to import them instead directly though their file path in the package.
-Here's an example for importing the `PineconeVectorStore` class:
-
-```typescript
-import { PineconeVectorStore } from "llamaindex/vector-store/PineconeVectorStore";
+```shell
+npm install @llamaindex/openai
+pnpm install @llamaindex/openai
+yarn add @llamaindex/openai
 ```
 
-As the `PDFReader` is not working with the Edge runtime, here's how to use the `SimpleDirectoryReader` with the `LlamaParseReader` to load PDFs:
-
-```typescript
-import { SimpleDirectoryReader } from "llamaindex/readers/SimpleDirectoryReader";
-import { LlamaParseReader } from "llamaindex/readers/LlamaParseReader";
-
-export const DATA_DIR = "./data";
-
-export async function getDocuments() {
-  const reader = new SimpleDirectoryReader();
-  // Load PDFs using LlamaParseReader
-  return await reader.loadData({
-    directoryPath: DATA_DIR,
-    fileExtToReader: {
-      pdf: new LlamaParseReader({ resultType: "markdown" }),
-    },
-  });
-}
-```
-
-> _Note_: Reader classes have to be added explictly to the `fileExtToReader` map in the Edge version of the `SimpleDirectoryReader`.
-
-You'll find a complete example with LlamaIndexTS here: https://github.com/run-llama/create_llama_projects/tree/main/nextjs-edge-llamaparse
-
 ## Playground
 
 Check out our NextJS playground at https://llama-playground.vercel.app/. The source is available at https://github.com/run-llama/ts-playground

apps/next/CHANGELOG.md

@@ -1,5 +1,390 @@
 # @llamaindex/doc
 
+## 0.2.16
+
+### Patch Changes
+
+- Updated dependencies [7e8e454]
+- Updated dependencies [2225ffd]
+- Updated dependencies [6ddf1c1]
+- Updated dependencies [bc53342]
+- Updated dependencies [41953a3]
+  - @llamaindex/workflow@1.1.0
+  - @llamaindex/cloud@4.0.5
+  - llamaindex@0.10.4
+
+## 0.2.15
+
+### Patch Changes
+
+- Updated dependencies [3ee8c83]
+  - @llamaindex/core@0.6.3
+  - llamaindex@0.10.3
+  - @llamaindex/openai@0.3.5
+  - @llamaindex/cloud@4.0.4
+  - @llamaindex/node-parser@2.0.3
+  - @llamaindex/readers@3.1.1
+  - @llamaindex/workflow@1.0.4
+
+## 0.2.14
+
+### Patch Changes
+
+- Updated dependencies [1e59695]
+  - @llamaindex/readers@3.1.0
+
+## 0.2.13
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+  - llamaindex@0.10.2
+
+## 0.2.12
+
+### Patch Changes
+
+- Updated dependencies [96dd798]
+  - @llamaindex/openai@0.3.3
+  - llamaindex@0.10.1
+
+## 0.2.11
+
+### Patch Changes
+
+- 6cf928f: chore: use bunchee for llamaindex
+- Updated dependencies [6cf928f]
+  - llamaindex@0.10.0
+
+## 0.2.10
+
+### Patch Changes
+
+- 411dcea: Add Nova Premier to AWS Nova models. Add EU endpoints
+
+## 0.2.9
+
+### Patch Changes
+
+- Updated dependencies [d365eb2]
+  - @llamaindex/openai@0.3.2
+  - llamaindex@0.9.19
+
+## 0.2.8
+
+### Patch Changes
+
+- 2ffdb27: docs: correct the CondenseQuestionChatEngine path
+- Updated dependencies [88b7046]
+  - @llamaindex/openai@0.3.1
+  - llamaindex@0.9.18
+
+## 0.2.7
+
+### Patch Changes
+
+- 3ffee26: feat: enhance config params for LlamaIndexServer
+
+## 0.2.6
+
+### Patch Changes
+
+- Updated dependencies [3534c37]
+- Updated dependencies [41191d0]
+  - llamaindex@0.9.17
+  - @llamaindex/workflow@1.0.3
+  - @llamaindex/cloud@4.0.3
+
+## 0.2.5
+
+### Patch Changes
+
+- 4999df1: bump nextjs
+- Updated dependencies [f5e4d09]
+  - llamaindex@0.9.16
+
+## 0.2.4
+
+### Patch Changes
+
+- 9c63f3f: Add support for openai responses api
+- Updated dependencies [9c63f3f]
+- Updated dependencies [c515a32]
+  - @llamaindex/openai@0.3.0
+  - @llamaindex/core@0.6.2
+  - @llamaindex/workflow@1.0.2
+  - llamaindex@0.9.15
+  - @llamaindex/cloud@4.0.2
+  - @llamaindex/node-parser@2.0.2
+  - @llamaindex/readers@3.0.2
+
+## 0.2.3
+
+### Patch Changes
+
+- 648cfb5: Add support for supabase vector store
+  Added doc for the supbase vector store
+- Updated dependencies [1b6f368]
+- Updated dependencies [eaf326e]
+- Updated dependencies [9d951b2]
+  - @llamaindex/core@0.6.1
+  - llamaindex@0.9.14
+  - @llamaindex/cloud@4.0.1
+  - @llamaindex/node-parser@2.0.1
+  - @llamaindex/openai@0.2.1
+  - @llamaindex/readers@3.0.1
+  - @llamaindex/workflow@1.0.1
+
+## 0.2.2
+
+### Patch Changes
+
+- e98033e: docs: correct the number of indexes
+
+## 0.2.1
+
+### Patch Changes
+
+- Updated dependencies [75d6e29]
+  - llamaindex@0.9.13
+
+## 0.2.0
+
+### Minor Changes
+
+- f1db9b3: Adding an options parameter to vercel tool to tailor responses
+
+### Patch Changes
+
+- 21bebfc: Expose more content to fix the issue with unavailable documentation links, and adjust the documentation based on the latest code.
+- 2b39cef: Added documentation for structured output in openai and ollama
+- Updated dependencies [21bebfc]
+- Updated dependencies [93bc0ff]
+- Updated dependencies [91a18e7]
+- Updated dependencies [bf56fc0]
+- Updated dependencies [f8a86e4]
+- Updated dependencies [5189b44]
+- Updated dependencies [58a9446]
+  - @llamaindex/readers@3.0.0
+  - @llamaindex/core@0.6.0
+  - @llamaindex/openai@0.2.0
+  - @llamaindex/cloud@4.0.0
+  - @llamaindex/workflow@1.0.0
+  - llamaindex@0.9.12
+  - @llamaindex/node-parser@2.0.0
+
+## 0.1.11
+
+### Patch Changes
+
+- a8c0637: feat: simplify to provide base URL to OpenAI
+- a654f58: Added docs for using perplexity
+- 98eebf7: Add RequestOptions parameter passing to support Gemini proxy calls.
+  Add a usage example for the RequestOptions parameter.
+- Updated dependencies [a8c0637]
+  - @llamaindex/openai@0.1.61
+  - llamaindex@0.9.11
+
+## 0.1.10
+
+### Patch Changes
+
+- Updated dependencies [aea550a]
+- Updated dependencies [c1b5be5]
+- Updated dependencies [40ee761]
+- Updated dependencies [40ee761]
+  - @llamaindex/openai@0.1.60
+  - llamaindex@0.9.10
+  - @llamaindex/workflow@0.0.16
+  - @llamaindex/core@0.5.8
+  - @llamaindex/cloud@3.0.9
+  - @llamaindex/node-parser@1.0.8
+  - @llamaindex/readers@2.0.8
+
+## 0.1.9
+
+### Patch Changes
+
+- 4bac71d: Support binding additional argument to function tool
+- Updated dependencies [4bac71d]
+  - @llamaindex/core@0.5.7
+  - @llamaindex/cloud@3.0.8
+  - llamaindex@0.9.9
+  - @llamaindex/node-parser@1.0.7
+  - @llamaindex/openai@0.1.59
+  - @llamaindex/readers@2.0.7
+  - @llamaindex/workflow@0.0.15
+
+## 0.1.8
+
+### Patch Changes
+
+- Updated dependencies [4b49428]
+- Updated dependencies [bbc8c87]
+  - @llamaindex/workflow@0.0.14
+  - llamaindex@0.9.8
+
+## 0.1.7
+
+### Patch Changes
+
+- Updated dependencies [beb922b]
+  - @llamaindex/core@0.5.6
+  - llamaindex@0.9.7
+  - @llamaindex/cloud@3.0.7
+  - @llamaindex/node-parser@1.0.6
+  - @llamaindex/openai@0.1.58
+  - @llamaindex/readers@2.0.6
+  - @llamaindex/workflow@0.0.13
+
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [5668970]
+  - @llamaindex/core@0.5.5
+  - @llamaindex/workflow@0.0.12
+  - @llamaindex/cloud@3.0.6
+  - llamaindex@0.9.6
+  - @llamaindex/node-parser@1.0.5
+  - @llamaindex/openai@0.1.57
+  - @llamaindex/readers@2.0.5
+
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [ad3c7f1]
+  - @llamaindex/core@0.5.4
+  - @llamaindex/cloud@3.0.5
+  - llamaindex@0.9.5
+  - @llamaindex/node-parser@1.0.4
+  - @llamaindex/openai@0.1.56
+  - @llamaindex/readers@2.0.4
+
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [cb256f2]
+- Updated dependencies [cb021e7]
+  - @llamaindex/openai@0.1.55
+  - @llamaindex/core@0.5.3
+  - llamaindex@0.9.4
+  - @llamaindex/cloud@3.0.4
+  - @llamaindex/node-parser@1.0.3
+  - @llamaindex/readers@2.0.3
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [d952e68]
+  - @llamaindex/core@0.5.2
+  - @llamaindex/cloud@3.0.3
+  - llamaindex@0.9.3
+  - @llamaindex/node-parser@1.0.2
+  - @llamaindex/openai@0.1.54
+  - @llamaindex/readers@2.0.2
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [c902fcb]
+- Updated dependencies [88d776f]
+  - @llamaindex/cloud@3.0.2
+  - llamaindex@0.9.2
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [6d37d44]
+  - llamaindex@0.9.1
+  - @llamaindex/cloud@3.0.1
+  - @llamaindex/core@0.5.1
+  - @llamaindex/node-parser@1.0.1
+  - @llamaindex/openai@0.1.53
+  - @llamaindex/readers@2.0.1
+  - @llamaindex/workflow@0.0.11
+
+## 0.1.0
+
+### Minor Changes
+
+- 6a4a737: Remove re-exports from llamaindex main package
+- f4588bc: Remove readers package from llamaindex
+
+### Patch Changes
+
+- c7c0800: fix: fumadoc build fail
+- a87efb9: docs: update chat engine docs
+- 7bd5d93: docs: update workflow doc
+- Updated dependencies [6a4a737]
+- Updated dependencies [d924c63]
+- Updated dependencies [b490376]
+- Updated dependencies [f4588bc]
+  - llamaindex@0.9.0
+  - @llamaindex/core@0.5.0
+  - @llamaindex/cloud@3.0.0
+  - @llamaindex/node-parser@1.0.0
+  - @llamaindex/openai@0.1.52
+  - @llamaindex/readers@2.0.0
+
+## 0.0.41
+
+### Patch Changes
+
+- Updated dependencies [1c908fd]
+  - @llamaindex/openai@0.1.51
+  - @llamaindex/node-parser@0.0.24
+  - @llamaindex/workflow@0.0.10
+  - @llamaindex/readers@1.0.25
+  - @llamaindex/cloud@2.0.24
+  - @llamaindex/core@0.4.23
+  - llamaindex@0.8.37
+
+## 0.0.40
+
+### Patch Changes
+
+- Updated dependencies [cb608b5]
+  - @llamaindex/openai@0.1.50
+  - @llamaindex/node-parser@0.0.23
+  - @llamaindex/workflow@0.0.9
+  - @llamaindex/readers@1.0.24
+  - @llamaindex/cloud@2.0.23
+  - @llamaindex/core@0.4.22
+  - llamaindex@0.8.36
+
+## 0.0.39
+
+### Patch Changes
+
+- 6d4d96f: chore: update examples and docs to use unified imports
+- Updated dependencies [15563a0]
+  - @llamaindex/openai@0.1.49
+  - llamaindex@0.8.35
+
+## 0.0.38
+
+### Patch Changes
+
+- Updated dependencies [9f8ad37]
+- Updated dependencies [7265f74]
+  - llamaindex@0.8.34
+  - @llamaindex/openai@0.1.48
+
+## 0.0.37
+
+### Patch Changes
+
+- Updated dependencies [2019a04]
+  - @llamaindex/openai@0.1.47
+  - llamaindex@0.8.33
+
 ## 0.0.36
 
 ### Patch Changes

apps/next/README.md

@@ -6,8 +6,7 @@ This is a Next.js application generated with
 Run development server:
 
 ```bash
-turbo run dev
-# turbo will build all required packages before running the dev server
+pnpm run dev
 ```
 
 ## Learn More

apps/next/fallback.js

@@ -0,0 +1,2 @@
+// fallback for `fs` usage in `web-tree-sitter`
+module.exports = {};

apps/next/next.config.mjs

@@ -1,13 +1,26 @@
 import { createMDX } from "fumadocs-mdx/next";
-import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
 const withMDX = createMDX();
 
 /** @type {import('next').NextConfig} */
 const config = {
+  // default timeout for static generation is 60s, but we need to increase it to 10 minutes due to the large number of document pages
+  staticPageGenerationTimeout: 600,
   reactStrictMode: true,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
   transpilePackages: ["monaco-editor"],
-  serverExternalPackages: ["@huggingface/transformers"],
-  webpack: (config, { isServer }) => {
+  serverExternalPackages: [
+    "@huggingface/transformers",
+    "twoslash",
+    "typescript",
+  ],
+  turbopack: {
+    resolveAlias: {
+      fs: { browser: "./fallback.js" },
+    },
+  },
+  webpack: (config) => {
     if (Array.isArray(config.target) && config.target.includes("web")) {
       config.target = ["web", "es2020"];
     }
@@ -19,14 +32,6 @@ const config = {
     };
     config.resolve.fallback ??= {};
     config.resolve.fallback.fs = false;
-    if (!isServer) {
-      config.plugins.push(
-        new MonacoWebpackPlugin({
-          languages: ["typescript"],
-          filename: "static/[name].worker.js",
-        }),
-      );
-    }
     config.resolve.alias["replicate"] = false;
     return config;
   },

apps/next/package.json

@@ -1,18 +1,22 @@
 {
   "name": "@llamaindex/doc",
-  "version": "0.0.36",
+  "version": "0.2.16",
   "private": true,
   "scripts": {
-    "build": "pnpm run build:docs && next build",
-    "dev": "next dev",
+    "postinstall": "fumadocs-mdx",
+    "prebuild": "pnpm run build:docs",
+    "build": "next build",
+    "dev": "next dev --turbo",
     "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 && tsx scripts/validate-links.mts",
+    "build:docs": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" typedoc && tsx scripts/generate-docs.mts",
+    "validate-links": "tsx scripts/validate-links.mts"
   },
   "dependencies": {
+    "@huggingface/transformers": "^3.5.0",
     "@icons-pack/react-simple-icons": "^10.1.0",
-    "@llamaindex/chat-ui": "0.0.9",
+    "@llama-flow/docs": "0.0.8",
+    "@llamaindex/chat-ui": "0.2.0",
     "@llamaindex/cloud": "workspace:*",
     "@llamaindex/core": "workspace:*",
     "@llamaindex/node-parser": "workspace:*",
@@ -20,6 +24,7 @@
     "@llamaindex/readers": "workspace:*",
     "@llamaindex/workflow": "workspace:*",
     "@mdx-js/mdx": "^3.1.0",
+    "@monaco-editor/react": "^4.7.0",
     "@number-flow/react": "^0.3.4",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.2",
@@ -27,66 +32,67 @@
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.4",
+    "@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.6.0",
-    "fumadocs-docgen": "1.3.2",
-    "fumadocs-mdx": "^11.1.2",
-    "fumadocs-openapi": "^5.8.2",
-    "fumadocs-twoslash": "^2.0.2",
-    "fumadocs-typescript": "^3.0.2",
-    "fumadocs-ui": "14.6.0",
+    "fumadocs-core": "^15.2.7",
+    "fumadocs-docgen": "^2.0.0",
+    "fumadocs-mdx": "^11.6.0",
+    "fumadocs-openapi": "^8.0.1",
+    "fumadocs-twoslash": "^3.1.1",
+    "fumadocs-typescript": "^4.0.2",
+    "fumadocs-ui": "^15.2.7",
     "hast-util-to-jsx-runtime": "^2.3.2",
     "llamaindex": "workspace:*",
     "lucide-react": "^0.460.0",
-    "next": "15.0.3",
+    "next": "^15.3.0",
     "next-themes": "^0.4.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.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": "1.23.1",
-    "shiki-magic-move": "^0.5.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",
     "tree-sitter": "^0.22.1",
     "tree-sitter-typescript": "^0.23.2",
+    "ts-morph": "^25.0.1",
+    "twoslash": "^0.3.1",
     "use-stick-to-bottom": "^1.0.42",
     "web-tree-sitter": "^0.24.4",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@next/env": "^15.0.3",
+    "@next/env": "^15.3.0",
+    "@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",
-    "typedoc": "0.27.4",
-    "typedoc-plugin-markdown": "^4.3.1",
-    "typedoc-plugin-merge-modules": "^6.1.0",
-    "typescript": "^5.7.2"
+    "tailwindcss": "^4.0.9",
+    "tsx": "^4.19.3",
+    "typedoc": "0.28.3",
+    "typedoc-plugin-markdown": "^4.6.2",
+    "typedoc-plugin-merge-modules": " ^7.0.0",
+    "typescript": "^5.7.3"
   }
 }

apps/next/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

apps/next/postcss.config.mjs

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

apps/next/scripts/generate-docs.mjs

@@ -1,86 +0,0 @@
-import * as OpenAPI from "fumadocs-openapi";
-import { generateFiles } from "fumadocs-typescript";
-import fs from "node:fs";
-import * as path from "node:path";
-import { fileURLToPath } from "node:url";
-import { rimrafSync } from "rimraf";
-
-const out = "./src/content/docs/cloud/api";
-const apiRefOut = "./src/content/docs/api";
-
-// clean generated files
-rimrafSync(out, {
-  filter(v) {
-    return !v.endsWith("index.mdx") && !v.endsWith("meta.json");
-  },
-});
-
-void OpenAPI.generateFiles({
-  input: [
-    fileURLToPath(
-      new URL("../../../packages/cloud/openapi.json", import.meta.url),
-    ),
-  ],
-  output: out,
-  groupBy: "tag",
-});
-
-void generateFiles({
-  input: ["./src/content/docs/api/**/*.mdx"],
-  output: (file) => path.resolve(path.dirname(file), path.basename(file)),
-  transformOutput,
-});
-
-function transformOutput(filePath, content) {
-  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)}`;
-}
-
-/**
- * Transforms the content by converting relative MDX links to absolute docs API links
- * Example: [text](../type-aliases/TaskHandler.mdx) -> [text](/docs/api/type-aliases/TaskHandler)
- * [text](BaseChatEngine.mdx) -> [text](/docs/api/classes/BaseChatEngine)
- * [text](BaseVectorStore.mdx#constructors) -> [text](/docs/api/classes/BaseVectorStore#constructors)
- * [text](TaskStep.mdx) -> [text](/docs/api/type-aliases/TaskStep)
- */
-function transformAbsoluteUrl(content, filePath) {
-  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})`;
-    },
-  );
-}
-
-// append meta.json for API page
-fs.writeFileSync(
-  path.resolve(apiRefOut, "meta.json"),
-  JSON.stringify(
-    {
-      title: "API Reference",
-      description: "LlamaIndex API Reference",
-      root: true,
-      pages: [
-        "index",
-        "classes",
-        "enumerations",
-        "functions",
-        "interfaces",
-        "type-aliases",
-        "variables",
-      ],
-    },
-    null,
-    2,
-  ),
-);

apps/next/scripts/generate-docs.mts

@@ -0,0 +1,77 @@
+import {
+  createGenerator,
+  generateFiles as typescriptGenerateFiles,
+} from "fumadocs-typescript";
+import fs from "node:fs";
+import * as path from "node:path";
+import { rimrafSync } from "rimraf";
+
+const generator = createGenerator();
+const out = "./src/content/docs/cloud/api";
+const apiRefOut = "./src/content/docs/api";
+
+// clean generated files
+rimrafSync(out, {
+  filter(v) {
+    return !v.endsWith("index.md") && !v.endsWith("meta.json");
+  },
+});
+
+void typescriptGenerateFiles(generator, {
+  input: ["./src/content/docs/api/**/*.md"],
+  output: (file) => path.resolve(path.dirname(file), path.basename(file)),
+  transformOutput,
+});
+
+function transformOutput(filePath: string, content: string) {
+  const fileName = path.basename(filePath);
+  let title = fileName.split(".")[0];
+  if (title === "index") title = "LlamaIndex API Reference";
+  return `---\ntitle: ${title}\n---\n\n${transformAbsoluteUrl(
+    content.replace(/(?<!\\)\{([^}]+)(?<!\\)}/g, "\\{$1\\}"),
+    filePath,
+  )}`;
+}
+
+/**
+ * Transforms the content by converting relative MD links to absolute docs API links
+ * Example: [text](../type-aliases/TaskHandler.md) -> [text](/docs/api/type-aliases/TaskHandler)
+ * [text](BaseChatEngine.md) -> [text](/docs/api/classes/BaseChatEngine)
+ * [text](BaseVectorStore.md#constructors) -> [text](/docs/api/classes/BaseVectorStore#constructors)
+ * [text](TaskStep.md) -> [text](/docs/api/type-aliases/TaskStep)
+ */
+function transformAbsoluteUrl(content: string, filePath: string) {
+  const group = path.dirname(filePath).split(path.sep).pop();
+  return content.replace(/\]\(([^)]+)\.md([^)]*)\)/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
+fs.writeFileSync(
+  path.resolve(apiRefOut, "meta.json"),
+  JSON.stringify(
+    {
+      title: "API Reference",
+      description: "LlamaIndex API Reference",
+      root: true,
+      pages: [
+        "index",
+        "classes",
+        "enumerations",
+        "functions",
+        "interfaces",
+        "type-aliases",
+        "variables",
+      ],
+    },
+    null,
+    2,
+  ),
+);

apps/next/scripts/post-build.mts

@@ -4,4 +4,8 @@ import { updateLlamaCloud } from "./update-llamacloud.mjs";
 
 env.loadEnvConfig(process.cwd());
 
-await updateLlamaCloud();
+if (process.env.VERCEL_ENV === "production") {
+  updateLlamaCloud().catch((error) => {
+    console.error(error);
+  });
+}

apps/next/scripts/update-llamacloud.mts

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

apps/next/scripts/validate-links.mts

@@ -0,0 +1,249 @@
+import glob from "fast-glob";
+import fs from "fs";
+import matter from "gray-matter";
+import path from "path";
+
+const CONTENT_DIR = path.join(process.cwd(), "src/content/docs");
+const BUILD_DIR = path.join(process.cwd(), ".next");
+
+// Regular expression to find internal links
+// This captures Markdown links [text](/docs/path) and href attributes href="/docs/path"
+const INTERNAL_LINK_REGEX = /(?:(?:\]\(|\bhref=["'])\/docs\/([^")]+))/g;
+
+// Regular expression to find relative links
+// This captures relative links like [text](./path) or ![alt](../images/image.png)
+const RELATIVE_LINK_REGEX = /(?:\]\()(?:\s*)(?:\.\.?)\//g;
+
+interface LinkValidationResult {
+  file: string;
+  invalidLinks: Array<{ link: string; line: number }>;
+}
+
+interface RelativeLinkResult {
+  file: string;
+  relativeLinks: Array<{ line: number; lineContent: string }>;
+}
+
+/**
+ * Get all valid documentation routes from the content directory
+ */
+async function getValidRoutes(): Promise<Set<string>> {
+  const mdxFiles = await glob("**/*.mdx?", { cwd: CONTENT_DIR });
+
+  const routes = new Set<string>();
+
+  // Add each MDX file as a valid route
+  for (const file of mdxFiles) {
+    // Remove .mdx extension and normalize to route format
+    let route = file.replace(/\.mdx?$/, "");
+
+    // Handle index files
+    if (route.endsWith("/index")) {
+      route = route.replace(/\/index$/, "");
+    } else if (route === "index") {
+      route = "";
+    }
+
+    routes.add(route);
+  }
+
+  return routes;
+}
+
+/**
+ * Extract internal links from a MDX file
+ */
+function extractLinksFromFile(
+  filePath: string,
+): Array<{ link: string; line: number }> {
+  const content = fs.readFileSync(filePath, "utf-8");
+  const { content: mdxContent } = matter(content);
+
+  const lines = mdxContent.split("\n");
+  const links: Array<{ link: string; line: number }> = [];
+
+  lines.forEach((line, lineNumber) => {
+    let match;
+    while ((match = INTERNAL_LINK_REGEX.exec(line)) !== null) {
+      if (match[1]) {
+        links.push({
+          link: match[1],
+          line: lineNumber + 1, // 1-based line numbers
+        });
+      }
+    }
+  });
+
+  return links;
+}
+
+/**
+ * Check if a link is an image link
+ */
+function isImageLink(link: string): boolean {
+  // Check for image extensions
+  const imageExtensions = [".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp"];
+  const hasImageExtension = imageExtensions.some((ext) =>
+    link.toLowerCase().endsWith(ext),
+  );
+
+  // Check for markdown image syntax: ![alt](./path)
+  const isMarkdownImage = link.trim().startsWith("!");
+
+  return hasImageExtension || isMarkdownImage;
+}
+
+/**
+ * Extract relative links from a MDX file
+ */
+function findRelativeLinksInFile(
+  filePath: string,
+): Array<{ line: number; lineContent: string }> {
+  const content = fs.readFileSync(filePath, "utf-8");
+  const { content: mdxContent } = matter(content);
+
+  const lines = mdxContent.split("\n");
+  const relativeLinks: Array<{ line: number; lineContent: string }> = [];
+
+  lines.forEach((line, lineNumber) => {
+    // Check for relative links
+    if (RELATIVE_LINK_REGEX.test(line)) {
+      // Reset the regex lastIndex to start from the beginning of the line
+      RELATIVE_LINK_REGEX.lastIndex = 0;
+
+      // Skip image links
+      if (!isImageLink(line)) {
+        relativeLinks.push({
+          line: lineNumber + 1, // 1-based line numbers
+          lineContent: line.trim(),
+        });
+      }
+    }
+  });
+
+  return relativeLinks;
+}
+
+/**
+ * Validate internal links in all MDX files
+ */
+/**
+ * Find relative links in all MDX files
+ */
+async function findRelativeLinks(): Promise<RelativeLinkResult[]> {
+  const mdxFiles = await glob("**/*.mdx?", { cwd: CONTENT_DIR });
+  const results: RelativeLinkResult[] = [];
+
+  for (const file of mdxFiles) {
+    const filePath = path.join(CONTENT_DIR, file);
+    const relativeLinks = findRelativeLinksInFile(filePath);
+
+    if (relativeLinks.length > 0) {
+      results.push({
+        file,
+        relativeLinks,
+      });
+    }
+  }
+
+  return results;
+}
+
+async function validateLinks(): Promise<LinkValidationResult[]> {
+  const mdxFiles = await glob("**/*.mdx?", { cwd: CONTENT_DIR });
+  const validRoutes = await getValidRoutes();
+
+  const results: LinkValidationResult[] = [];
+
+  for (const file of mdxFiles) {
+    const filePath = path.join(CONTENT_DIR, file);
+    const links = extractLinksFromFile(filePath);
+
+    const invalidLinks = links.filter(({ link }) => {
+      // Check if the link exists in valid routes
+      // First normalize the link (remove any query string or hash)
+      const baseLink = link.split("?")[0].split("#")[0];
+      // Remove the trailing slash if present.
+      // This works with links like "api/interfaces/MetadataFilter#operator" and "api/interfaces/MetadataFilter/#operator".
+      const normalizedLink = baseLink.endsWith("/")
+        ? baseLink.slice(0, -1)
+        : baseLink;
+
+      // Remove llamaindex/ prefix if it exists as it's the root of the docs
+      let routePath = normalizedLink;
+      if (routePath.startsWith("llamaindex/")) {
+        routePath = routePath.substring("llamaindex/".length);
+      }
+
+      return !validRoutes.has(normalizedLink) && !validRoutes.has(routePath);
+    });
+
+    if (invalidLinks.length > 0) {
+      results.push({
+        file,
+        invalidLinks,
+      });
+    }
+  }
+
+  return results;
+}
+
+/**
+ * Main function to validate links and report errors
+ */
+async function main() {
+  console.log("🔍 Validating links in documentation...");
+
+  try {
+    // Check for invalid internal links
+    const validationResults: LinkValidationResult[] = await validateLinks();
+    // Check for relative links
+    const relativeLinksResults = await findRelativeLinks();
+
+    let hasErrors = false;
+
+    // Report invalid internal links
+    if (validationResults.length > 0) {
+      console.error("❌ Found invalid internal links:");
+      hasErrors = true;
+
+      for (const result of validationResults) {
+        console.error(`\nFile: ${result.file}`);
+
+        for (const { link, line } of result.invalidLinks) {
+          console.error(`  - Line ${line}: /docs/${link}`);
+        }
+      }
+    }
+
+    // Report relative links
+    if (relativeLinksResults.length > 0) {
+      console.error("\n❌ Found relative links (use absolute paths instead):");
+      hasErrors = true;
+
+      for (const result of relativeLinksResults) {
+        console.error(`\nFile: ${result.file}`);
+
+        for (const { line, lineContent } of result.relativeLinks) {
+          console.error(`  - Line ${line}: ${lineContent}`);
+        }
+      }
+    }
+
+    if (hasErrors) {
+      // Exit with error code to fail the build
+      process.exit(1);
+    } else {
+      console.log("✅ All links are valid!");
+    }
+  } catch (error) {
+    console.error("Error validating links:", error);
+    process.exit(1);
+  }
+}
+
+main().catch((error) => {
+  console.error("Unhandled error:", error);
+  process.exit(1);
+});

apps/next/source.config.ts

@@ -1,12 +1,18 @@
-import { rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
+import {
+  rehypeCodeDefaultOptions,
+  remarkStructure,
+} 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 rehypeKatex from "rehype-katex";
 import remarkMath from "remark-math";
 
-export const { docs, meta } = defineDocs({
-  dir: "./src/content/docs",
+export const docs = defineDocs({
+  dir: ["./src/content/docs", "./node_modules/@llama-flow/docs"],
+  docs: {
+    async: true,
+  },
 });
 
 export default defineConfig({
@@ -41,6 +47,7 @@ export default defineConfig({
       ],
     },
     remarkPlugins: [
+      remarkStructure,
       remarkMath,
       [remarkInstall, { persist: { id: "package-manager" } }],
       [remarkDocGen, { generators: [fileGenerator()] }],

apps/next/src/app/(home)/page.tsx

@@ -8,38 +8,77 @@ 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";
+import { DOCUMENT_URL } from "@/lib/const";
 import { SiStackblitz } from "@icons-pack/react-simple-icons";
-import {
-  CodeBlock as FumaCodeBlock,
-  Pre,
-} from "fumadocs-ui/components/codeblock";
 import { Blocks, Bot, Footprints, Terminal } from "lucide-react";
 import Link from "next/link";
-import { Suspense } from "react";
+
+const codes = [
+  `import { openai } from "@llamaindex/openai";
+
+const llm = openai();
+const response = await llm.complete({ prompt: "How are you?" });`,
+  `import { openai } from "@llamaindex/openai";
+
+const llm = openai();
+const response = await llm.chat({
+  messages: [{ content: "Tell me a joke.", role: "user" }],
+});`,
+  `import { agent } from "@llamaindex/workflow";
+import { openai } from "@llamaindex/openai";
+
+const analyseAgent = agent({
+  llm: openai({ model: "gpt-4o" }),
+  tools: [analyseTools],
+  systemPrompt,
+});
+const response = await analyseAgent.run(\`Analyse the given data:
+\${data}\`);`,
+  `import { agent, multiAgent } from "@llamaindex/workflow";
+import { openai } from "@llamaindex/openai";
+
+const analyseAgent = agent({
+  name: "AnalyseAgent",
+  llm: openai({ model: "gpt-4o" }),
+  tools: [analyseTools],
+});
+const reporterAgent = agent({
+  name: "ReporterAgent",
+  llm: openai({ model: "gpt-4o" }),
+  tools: [reporterTools],
+  canHandoffTo: [analyseAgent],
+});
+
+const agents = multiAgent({
+  agents: [analyseAgent, reporterAgent],
+  rootAgent: reporterAgent,
+});
+
+const response = await agents.run(\`Analyse the given data:
+\${data}\`);`,
+];
 
 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">
-        <Link href={LEGACY_DOCUMENT_URL}>
+        <Link href={DOCUMENT_URL}>
           <Button variant="outline">Get Started</Button>
         </Link>
         <NpmInstall />
@@ -60,57 +99,12 @@ export default function HomePage() {
           icon={Footprints}
           subheading="Progressive"
           heading="From the simplest to the most complex"
-          description="LlamaIndex.TS is designed to be simple to get started, but powerful enough to build complex, agentic AI applications."
+          description="LlamaIndex.TS is designed to be simple to get started, but powerful enough to build complex, agentic AI applications using multi-agents."
         >
-          <Suspense
-            fallback={
-              <FumaCodeBlock allowCopy={false}>
-                <Pre>
-                  <div className="space-y-2">
-                    <Skeleton className="h-4 w-[250px]" />
-                    <Skeleton className="h-4 w-[200px]" />
-                  </div>
-                </Pre>
-              </FumaCodeBlock>
-            }
-          >
-            <MagicMove
-              code={[
-                `import { OpenAI } from "llamaindex";
-const llm = new OpenAI();
-const response = await llm.complete({ prompt: "How are you?" });`,
-                `import { OpenAI } from "llamaindex";
-const llm = new OpenAI();
-const response = await llm.chat({
-  messages: [{ content: "Tell me a joke.", role: "user" }],
-});`,
-                `import { OpenAI, ChatMemoryBuffer } from "llamaindex";
-const llm = new OpenAI({ model: 'gpt4o-turbo' });
-const buffer = new ChatMemoryBuffer({
-  tokenLimit: 128_000,
-})
-buffer.put({ content: "Tell me a joke.", role: "user" })
-const response = await llm.chat({
-  messages: buffer.getMessages(),
-  stream: true
-});`,
-                `import { OpenAIAgent, ChatMemoryBuffer } from "llamaindex";
-const agent = new OpenAIAgent({
-  llm,
-  tools: [...myTools]
-  systemPrompt,
-});
-const buffer = new ChatMemoryBuffer({
-  tokenLimit: 128_000,
-})
-buffer.put({ content: "Analysis the data based on the given data.", role: "user" })
-buffer.put({ content: \`\${data}\`, role: "user" })
-const response = await agent.chat({
-  message: buffer.getMessages(),
-});`,
-              ]}
-            />
-          </Suspense>
+          <MagicMove
+            placeholder={<CodeBlock lang="ts" code={codes[0]} />}
+            code={codes}
+          />
         </Feature>
         <Feature
           icon={Bot}
@@ -119,19 +113,21 @@ const response = await agent.chat({
           description="Truly powerful retrieval-augmented generation applications use agentic techniques, and LlamaIndex.TS makes it easy to build them."
         >
           <CodeBlock
-            code={`import { FunctionTool } from "llamaindex";
-import { OpenAIAgent } from "@llamaindex/openai";
+            code={`import { SimpleDirectoryReader, VectorStoreIndex } from "llamaindex";
+import { openai } from "@llamaindex/openai";
+import { agent } from "@llamaindex/workflow";
 
-const interpreterTool = FunctionTool.from(...);
-const systemPrompt = \`...\`;
+// load documents from current directoy into an index
+const reader = new SimpleDirectoryReader();
+const documents = await reader.loadData(currentDir);
+const index = await VectorStoreIndex.fromDocuments(documents);
 
-const agent = new OpenAIAgent({
-  llm,
-  tools: [interpreterTool],
-  systemPrompt,
+const myAgent = agent({
+  llm: openai({ model: "gpt-4o" }),
+  tools: [index.queryTool()],
 });
 
-await agent.chat('...');`}
+await myAgent.run('...');`}
             lang="ts"
           />
         </Feature>
@@ -143,13 +139,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 />

apps/next/src/app/[...any]/page.tsx

@@ -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());
-}

apps/next/src/app/api/search/route.ts

@@ -1,4 +1,12 @@
 import { source } from "@/lib/source";
+import { structure } from "fumadocs-core/mdx-plugins";
 import { createFromSource } from "fumadocs-core/search/server";
 
-export const { GET } = createFromSource(source);
+// TODO: migrate to another search service, I don't think Vercel can handle that many of documents.
+export const { GET } = createFromSource(source, (page) => ({
+  id: page.file.path,
+  title: page.data.title,
+  description: page.data.description,
+  url: page.url,
+  structuredData: structure(page.data.content),
+}));

apps/next/src/app/docs/[[...slug]]/page.tsx

@@ -1,7 +1,14 @@
+import { ChatDemoRSC } from "@/components/demo/chat/rsc/demo";
+import * as demos from "@/components/demo/lazy";
 import { createMetadata, metadataImage } from "@/lib/metadata";
 import { openapi, source } from "@/lib/source";
+import * as Icons from "@icons-pack/react-simple-icons";
+import { APIPage } from "fumadocs-openapi/ui";
 import { Popup, PopupContent, PopupTrigger } from "fumadocs-twoslash/ui";
-import { createTypeTable } from "fumadocs-typescript/ui";
+import { createGenerator } from "fumadocs-typescript";
+import { AutoTypeTable } from "fumadocs-typescript/ui";
+import { Accordion, Accordions } from "fumadocs-ui/components/accordion";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import {
   DocsBody,
@@ -11,7 +18,9 @@ import {
 } from "fumadocs-ui/page";
 import { notFound } from "next/navigation";
 
-const { AutoTypeTable } = createTypeTable();
+const generator = createGenerator();
+
+export const revalidate = false;
 
 export default async function Page(props: {
   params: Promise<{ slug?: string[] }>;
@@ -20,12 +29,13 @@ export default async function Page(props: {
   const page = source.getPage(params.slug);
   if (!page) notFound();
 
-  const MDX = page.data.body;
+  const { body: MDX, toc, lastModified } = await page.data.load();
 
   return (
     <DocsPage
-      toc={page.data.toc}
+      toc={toc}
       full={page.data.full}
+      lastUpdate={lastModified}
       editOnGithub={{
         owner: "run-llama",
         repo: "LlamaIndexTS",
@@ -38,12 +48,21 @@ export default async function Page(props: {
       <DocsBody>
         <MDX
           components={{
+            ...Icons,
             ...defaultMdxComponents,
-            APIPage: openapi.APIPage,
+            ...demos,
+            ChatDemoRSC,
+            Accordion,
+            Accordions,
+            APIPage: (props) => <APIPage {...openapi.getAPIPageProps(props)} />,
+            Tab,
+            Tabs,
             Popup,
             PopupContent,
             PopupTrigger,
-            AutoTypeTable,
+            AutoTypeTable: (props) => (
+              <AutoTypeTable generator={generator} {...props} />
+            ),
           }}
         />
       </DocsBody>
@@ -64,6 +83,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: {

apps/next/src/app/docs/layout.tsx

@@ -1,11 +1,7 @@
 import { baseOptions } from "@/app/layout.config";
-import { AITrigger } from "@/components/ai-chat";
-import { buttonVariants } from "@/components/ui/button";
 import { source } from "@/lib/source";
-import { cn } from "@/lib/utils";
 import "fumadocs-twoslash/twoslash.css";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
-import { MessageCircle } from "lucide-react";
 import type { ReactNode } from "react";
 
 export default function Layout({ children }: { children: ReactNode }) {
@@ -13,23 +9,9 @@ export default function Layout({ children }: { children: ReactNode }) {
     <DocsLayout
       tree={source.pageTree}
       {...baseOptions}
+      links={[]}
       nav={{
         ...baseOptions.nav,
-        children: (
-          <AITrigger
-            className={cn(
-              buttonVariants({
-                variant: "secondary",
-                size: "xs",
-                className:
-                  "md:flex-1 px-2 ms-2 gap-1.5 text-fd-muted-foreground rounded-full",
-              }),
-            )}
-          >
-            <MessageCircle className="size-3" />
-            Ask LlamaCloud
-          </AITrigger>
-        ),
       }}
     >
       {children}

apps/next/src/app/global.css

@@ -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/styles/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;
-  }
-}

apps/next/src/app/layout.config.tsx

@@ -1,4 +1,4 @@
-import { LEGACY_DOCUMENT_URL } from "@/lib/const";
+import { DOCUMENT_URL } from "@/lib/const";
 import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
 import Image from "next/image";
 
@@ -27,9 +27,19 @@ export const baseOptions: BaseLayoutProps = {
   githubUrl: "https://github.com/run-llama/LlamaIndexTS",
   links: [
     {
-      text: "Docs",
-      url: LEGACY_DOCUMENT_URL,
+      text: "TypeScript",
+      url: DOCUMENT_URL,
       active: "nested-url",
     },
+    {
+      text: "Python",
+      url: "https://docs.llamaindex.ai",
+      active: "url",
+    },
+    {
+      text: "LlamaCloud",
+      url: "https://docs.cloud.llamaindex.ai/",
+      active: "url",
+    },
   ],
 };

apps/next/src/app/layout.tsx

@@ -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>

apps/next/src/app/llms.txt/route.ts

@@ -0,0 +1,58 @@
+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"]);
+
+  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);
+}

apps/next/src/components/ai-chat.tsx

@@ -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."

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

@@ -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,
     },
   });

apps/next/src/components/contribution.tsx

@@ -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">

apps/next/src/components/contributor-count.tsx

@@ -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}

apps/next/src/components/create-app-animation.tsx

@@ -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">

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

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

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

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

apps/next/src/components/demo/code-node-parser.tsx

@@ -1,24 +1,26 @@
 "use client";
-import { createContextState } from "foxact/context-state";
-import { useIsClient } from "foxact/use-is-client";
-import { useShiki } from "fumadocs-core/utils/use-shiki";
-import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock";
-import { lazy, Suspense, use, useMemo } from "react";
-import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
-import Parser from "web-tree-sitter";
-
 import { Label } from "@/components/ui/label";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Slider } from "@/components/ui/slider";
 import { CodeSplitter } from "@llamaindex/node-parser/code";
+import { Editor } from "@monaco-editor/react";
+import { createContextState } from "foxact/context-state";
+import { useIsClient } from "foxact/use-is-client";
+import { useShiki } from "fumadocs-core/highlight/client";
+import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock";
+import { Suspense, use, useMemo } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 
 let promise: Promise<CodeSplitter>;
 if (typeof window !== "undefined") {
-  promise = Parser.init({
-    locateFile(scriptName: string) {
-      return "/" + scriptName;
-    },
-  }).then(async () => {
+  async function run() {
+    const { default: Parser } = await import("web-tree-sitter");
+    await Parser.init({
+      locateFile(scriptName: string) {
+        return "/" + scriptName;
+      },
+    });
+
     const parser = new Parser();
     const Lang = await Parser.Language.load("/tree-sitter-typescript.wasm");
     parser.setLanguage(Lang);
@@ -26,7 +28,9 @@ if (typeof window !== "undefined") {
       getParser: () => parser,
       maxChars: 100,
     });
-  });
+  }
+
+  promise = run();
 }
 
 const [SliderProvider, useSlider, useSetSlider] = createContextState(100);
@@ -48,8 +52,6 @@ const john: Person = {
 
 console.log(greet(john));`);
 
-const Editor = lazy(() => import("react-monaco-editor"));
-
 export const IDE = () => {
   const codeSplitter = use(promise);
   const code = useCode();
@@ -57,7 +59,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
@@ -73,21 +75,6 @@ export const IDE = () => {
         />
       </div>
       <Editor
-        editorWillMount={() => {}}
-        editorDidMount={() => {
-          window.MonacoEnvironment!.getWorkerUrl = (
-            _moduleId: string,
-            label: string,
-          ) => {
-            if (label === "json") return "/_next/static/json.worker.js";
-            if (label === "css") return "/_next/static/css.worker.js";
-            if (label === "html") return "/_next/static/html.worker.js";
-            if (label === "typescript" || label === "javascript")
-              return "/_next/static/ts.worker.js";
-            return "/_next/static/editor.worker.js";
-          };
-        }}
-        editorWillUnmount={() => {}}
         options={{
           minimap: {
             enabled: false,
@@ -97,7 +84,9 @@ export const IDE = () => {
         height="100%"
         width="100%"
         language="typescript"
-        onChange={setCode}
+        onChange={(v) => {
+          if (v) setCode(v);
+        }}
         value={code}
       />
     </div>
@@ -113,7 +102,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 +111,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 +125,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 +143,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 +154,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>

apps/next/src/components/demo/lazy.ts

@@ -0,0 +1,13 @@
+"use client";
+import dynamic from "next/dynamic";
+
+// lazy load client components
+export const ChatDemo = dynamic(() =>
+  import("@/components/demo/chat/api/demo").then((mod) => mod.ChatDemo),
+);
+
+export const CodeNodeParserDemo = dynamic(() =>
+  import("@/components/demo/code-node-parser").then(
+    (mod) => mod.CodeNodeParserDemo,
+  ),
+);

apps/next/src/components/demo/workflow-streaming-ui.tsx

@@ -1,152 +0,0 @@
-"use client";
-import FlowInput from "@/components/flow-input";
-import { Button } from "@/components/ui/button";
-import {
-  StartEvent,
-  StopEvent,
-  Workflow,
-  WorkflowEvent,
-} from "@llamaindex/workflow";
-import { ReactNode, startTransition, useState } from "react";
-import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
-
-class ComputeEvent extends WorkflowEvent<number> {
-  constructor(data: number) {
-    super(data);
-  }
-}
-
-class ComputeResultEvent extends WorkflowEvent<number> {
-  constructor(data: number) {
-    super(data);
-  }
-}
-
-type ContextData = {
-  sum: number;
-};
-
-const workflow = new Workflow<ContextData, number, number>();
-
-const max = 1000;
-const min = 100;
-
-workflow.addStep(
-  {
-    inputs: [StartEvent<number>],
-    outputs: [StopEvent<number>],
-  },
-  async (context, event) => {
-    const total = event.data;
-    for (let i = 0; i < total; i++) {
-      context.sendEvent(new ComputeEvent(i));
-    }
-    console.log("waiting");
-    const computeResults = await Promise.all(
-      Array.from({ length: total }).map(() =>
-        context.requireEvent(ComputeResultEvent),
-      ),
-    );
-    context.data.sum = computeResults.reduce(
-      (acc, result) => acc + result.data,
-      0,
-    );
-    console.log("stop");
-    return new StopEvent(context.data.sum);
-  },
-);
-
-workflow.addStep(
-  {
-    inputs: [ComputeEvent],
-    outputs: [ComputeResultEvent],
-  },
-  async (context, event) => {
-    await new Promise((resolve) =>
-      setTimeout(resolve, Math.floor(Math.random() * (max - min + 1) + min)),
-    );
-    return new ComputeResultEvent(event.data);
-  },
-);
-
-function ScrollToBottom() {
-  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
-
-  return (
-    !isAtBottom && (
-      <button
-        className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
-        onClick={() => scrollToBottom()}
-      />
-    )
-  );
-}
-
-export function WorkflowStreamingDemo() {
-  const [ui, setUI] = useState<ReactNode[]>([
-    <div key={0} className="bg-gray-100 dark:bg-gray-800">
-      Waiting for workflow to start
-    </div>,
-  ]);
-  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>{" "}
-        <FlowInput value={total} onChange={(value) => setTotal(value)} />
-      </div>
-      <Button
-        onClick={async () => {
-          startTransition(() => {
-            setUI([]);
-          });
-          const context = workflow.run(total, {
-            sum: 0,
-          });
-          let i = 0;
-          for await (const event of context) {
-            console.log(event);
-            if (event instanceof ComputeEvent) {
-              setUI((ui) => [
-                ...ui,
-                <div key={i++} className="bg-yellow-100 dark:bg-yellow-800">
-                  Computing task id: {event.data}
-                </div>,
-              ]);
-            } else if (event instanceof ComputeResultEvent) {
-              setUI((ui) => [
-                ...ui,
-                <div key={i++} className="bg-green-100 dark:bg-green-800">
-                  Computed task id: {event.data}
-                </div>,
-              ]);
-            } else if (event instanceof StartEvent) {
-              setUI((ui) => [
-                ...ui,
-                <div key={i++} className="bg-blue-100 dark:bg-blue-800">
-                  Started workflow with total {event.data}
-                </div>,
-              ]);
-            } else if (event instanceof StopEvent) {
-              setUI((ui) => [
-                ...ui,
-                <div key={i++} className="bg-red-100 dark:bg-red-800">
-                  Workflow stopped
-                </div>,
-              ]);
-            }
-          }
-        }}
-      >
-        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.Content className="flex flex-col gap-2">
-          {ui}
-        </StickToBottom.Content>
-        <ScrollToBottom />
-      </StickToBottom>
-    </div>
-  );
-}

apps/next/src/components/feature.tsx

@@ -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>

apps/next/src/components/flow-input.tsx

@@ -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" }}

apps/next/src/components/magic-move.tsx

@@ -1,25 +1,27 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock";
+import { CodeBlock } from "fumadocs-ui/components/codeblock";
 import { RotateCcw } from "lucide-react";
 import { useTheme } from "next-themes";
-import { use, useCallback, useEffect, useState } from "react";
-import { getSingletonHighlighter } from "shiki";
+import { type ReactNode, use, useCallback, useEffect, useState } from "react";
+import { createJavaScriptRegexEngine, getSingletonHighlighter } from "shiki";
 import { ShikiMagicMove } from "shiki-magic-move/react";
-import { createOnigurumaEngine } from "shiki/engine/oniguruma";
 
+const engine = createJavaScriptRegexEngine();
 const highlighterPromise = getSingletonHighlighter({
-  engine: createOnigurumaEngine(() => import("shiki/wasm")),
+  engine,
   themes: ["vesper", "github-light"],
   langs: ["js", "ts", "tsx"],
 });
 
 export type MagicMoveProps = {
   code: string[];
+  placeholder: ReactNode;
 };
 
 export function MagicMove(props: MagicMoveProps) {
+  const [mounted, setMounted] = useState(false);
   const [move, setMove] = useState<number>(0);
   const currentCode = props.code[move];
   const highlighter = use(highlighterPromise);
@@ -38,24 +40,27 @@ export function MagicMove(props: MagicMoveProps) {
     }
   }, [animate, move, props.code]);
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return props.placeholder;
+
   return (
     <CodeBlock allowCopy={false}>
-      {highlighter && (
-        <Pre>
-          <ShikiMagicMove
-            lang="ts"
-            theme={resolvedTheme === "dark" ? "vesper" : "github-light"}
-            highlighter={highlighter}
-            code={currentCode}
-            options={{
-              duration: 800,
-              stagger: 0.3,
-              lineNumbers: false,
-              containerStyle: false,
-            }}
-          />
-        </Pre>
-      )}
+      <ShikiMagicMove
+        className="shiki !block p-4 *:!inline"
+        lang="ts"
+        theme={resolvedTheme === "dark" ? "vesper" : "github-light"}
+        highlighter={highlighter}
+        code={currentCode}
+        options={{
+          duration: 800,
+          stagger: 0.3,
+          lineNumbers: false,
+          containerStyle: false,
+        }}
+      />
       <Button
         className={cn(
           "absolute bottom-2 right-2",

apps/next/src/components/message.tsx

@@ -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",
         )}
       >

apps/next/src/components/npm-install.tsx

@@ -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"

apps/next/src/components/reactbits/rotating-text.tsx

@@ -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";

apps/next/src/components/supports.tsx

@@ -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}
+    />
+  );
+};

apps/next/src/components/text-effect.tsx

@@ -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>;
-};

apps/next/src/components/ui/dialog.tsx

@@ -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}
   />
 ));

apps/next/src/components/ui/input.tsx

@@ -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}

apps/next/src/components/ui/skeleton.tsx

@@ -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}
     />
   );

apps/next/src/components/ui/slider.tsx

@@ -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;

apps/next/src/components/ui/textarea.tsx

@@ -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}

apps/next/src/components/ui/tooltip.tsx

@@ -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}

apps/next/src/content/docs/cloud/index.mdx

@@ -1,8 +0,0 @@
----
-title: LlamaCloud
-description: LlamaCloud is a new generation of managed parsing, ingestion, and retrieval services, designed to bring production-grade context-augmentation to your LLM and RAG applications.
----
-
-This is TypeScript binding for LlamaCloud API. It provides a simple way to interact with LlamaCloud API.
-
-If you are looking for the official documentation, please visit the [Official Document](https://docs.cloud.llamaindex.ai/)

apps/next/src/content/docs/cloud/meta.json

@@ -1,6 +0,0 @@
-{
-  "title": "LlamaCloud",
-  "description": "The Cloud framework for LLM",
-  "root": true,
-  "pages": ["---Guide---", "index", "api"]
-}

apps/next/src/content/docs/llamaindex/examples/agent.mdx

@@ -1,12 +0,0 @@
----
-title: Agents
----
-
-A built-in agent that can take decisions and reasoning based on the tools provided to it.
-
-## OpenAI Agent
-
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSource from "!raw-loader!../../../../../../../examples/agent/openai";
-
-<DynamicCodeBlock lang="ts" code={CodeSource} />

apps/next/src/content/docs/llamaindex/examples/agent_gemini.mdx

@@ -1,8 +0,0 @@
----
-title: Gemini Agent
----
-
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSourceGemini from "!raw-loader!../../../../../../../examples/gemini/agent.ts";
-
-<DynamicCodeBlock lang="ts" code={CodeSourceGemini} />

apps/next/src/content/docs/llamaindex/examples/chat_engine.mdx

@@ -1,10 +0,0 @@
----
-title: Chat Engine
----
-
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSource from "!raw-loader!../../../../../../../examples/chatEngine";
-
-Chat Engine is a class that allows you to create a chatbot from a retriever. It is a wrapper around a retriever that allows you to chat with it in a conversational manner.
-
-<DynamicCodeBlock lang="ts" code={CodeSource} />

apps/next/src/content/docs/llamaindex/examples/context_aware_agent.mdx

@@ -1,61 +0,0 @@
----
-title: Context-Aware Agent
----
-
-The Context-Aware Agent enhances the capabilities of standard LLM agents by incorporating relevant context from a retriever for each query. This allows the agent to provide more informed and specific responses based on the available information.
-
-## Usage
-
-Here's a simple example of how to use the Context-Aware Agent:
-
-```typescript
-import {
-  Document,
-  VectorStoreIndex,
-  OpenAIContextAwareAgent,
-  OpenAI,
-} from "llamaindex";
-
-async function createContextAwareAgent() {
-  // Create and index some documents
-  const documents = [
-    new Document({
-      text: "LlamaIndex is a data framework for LLM applications.",
-      id_: "doc1",
-    }),
-    new Document({
-      text: "The Eiffel Tower is located in Paris, France.",
-      id_: "doc2",
-    }),
-  ];
-
-  const index = await VectorStoreIndex.fromDocuments(documents);
-  const retriever = index.asRetriever({ similarityTopK: 1 });
-
-  // Create the Context-Aware Agent
-  const agent = new OpenAIContextAwareAgent({
-    llm: new OpenAI({ model: "gpt-3.5-turbo" }),
-    contextRetriever: retriever,
-  });
-
-  // Use the agent to answer queries
-  const response = await agent.chat({
-    message: "What is LlamaIndex used for?",
-  });
-
-  console.log("Agent Response:", response.response);
-}
-
-createContextAwareAgent().catch(console.error);
-```
-
-In this example, the Context-Aware Agent uses the retriever to fetch relevant context for each query, allowing it to provide more accurate and informed responses based on the indexed documents.
-
-## Key Components
-
-- `contextRetriever`: A retriever (e.g., from a VectorStoreIndex) that fetches relevant documents or passages for each query.
-
-## Available Context-Aware Agents
-
-- `OpenAIContextAwareAgent`: A context-aware agent using OpenAI's models.
-- `AnthropicContextAwareAgent`: A context-aware agent using Anthropic's models.

apps/next/src/content/docs/llamaindex/examples/meta.json

@@ -1,15 +0,0 @@
-{
-  "title": "Examples",
-  "pages": [
-    "more_examples",
-    "chat_engine",
-    "vector_index",
-    "summary_index",
-    "save_load_index",
-    "context_aware_agent",
-    "agent",
-    "agent_gemini",
-    "local_llm",
-    "other_llms"
-  ]
-}

apps/next/src/content/docs/llamaindex/examples/other_llms.mdx

@@ -1,43 +0,0 @@
----
-title: Using other LLM APIs
----
-
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSource from "!raw-loader!../../../../../../../examples/mistral";
-
-By default LlamaIndex.TS uses OpenAI's LLMs and embedding models, but we support [lots of other LLMs](../modules/llms) including models from Mistral (Mistral, Mixtral), Anthropic (Claude) and Google (Gemini).
-
-If you don't want to use an API at all you can [run a local model](../../examples/local_llm)
-
-## Using another LLM
-
-You can specify what LLM LlamaIndex.TS will use on the `Settings` object, like this:
-
-```typescript
-import { MistralAI, Settings } from "llamaindex";
-
-Settings.llm = new MistralAI({
-  model: "mistral-tiny",
-  apiKey: "<YOUR_API_KEY>",
-});
-```
-
-You can see examples of other APIs we support by checking out "Available LLMs" in the sidebar of our [LLMs section](../modules/llms).
-
-## Using another embedding model
-
-A frequent gotcha when trying to use a different API as your LLM is that LlamaIndex will also by default index and embed your data using OpenAI's embeddings. To completely switch away from OpenAI you will need to set your embedding model as well, for example:
-
-```typescript
-import { MistralAIEmbedding, Settings } from "llamaindex";
-
-Settings.embedModel = new MistralAIEmbedding();
-```
-
-We support [many different embeddings](../modules/embeddings).
-
-## Full example
-
-This example uses Mistral's `mistral-tiny` model as the LLM and Mistral for embeddings as well.
-
-<DynamicCodeBlock lang="ts" code={CodeSource} />

apps/next/src/content/docs/llamaindex/examples/save_load_index.mdx

@@ -1,8 +0,0 @@
----
-title: Save/Load an Index
----
-
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSource from "!raw-loader!../../../../../../../examples/storageContext";
-
-<DynamicCodeBlock lang="ts" code={CodeSource} />

apps/next/src/content/docs/llamaindex/examples/summary_index.mdx

@@ -1,8 +0,0 @@
----
-title: Summary Index
----
-
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSource from "!raw-loader!../../../../../../../examples/summaryIndex";
-
-<DynamicCodeBlock lang="ts" code={CodeSource} />

apps/next/src/content/docs/llamaindex/examples/vector_index.mdx

@@ -1,8 +0,0 @@
----
-title: Vector Index
----
-
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSource from "!raw-loader!../../../../../../../examples/vectorIndex";
-
-<DynamicCodeBlock lang="ts" code={CodeSource} />

apps/next/src/content/docs/llamaindex/getting_started/create_llama.mdx

@@ -1,11 +1,7 @@
 ---
-title: Chatbot tutorial
+title: Create-Llama
 ---
 
-Once you've mastered basic [retrieval-augment generation](retrieval_augmented_generation) you may want to create an interface to chat with your data. You can do this step-by-step, but we recommend getting started quickly using `create-llama`.
-
-## Using create-llama
-
 `create-llama` is a powerful but easy to use command-line tool that generates a working, full-stack web application that allows you to chat with your data. You can learn more about it on [the `create-llama` README page](https://www.npmjs.com/package/create-llama).
 
 Run it once and it will ask you a series of questions about the kind of application you want to generate. Then you can customize your application to suit your use-case. To get started, run:
@@ -22,4 +18,4 @@ npm run dev
 
 to start the development server. You can then visit [http://localhost:3000](http://localhost:3000) to see your app, which should look something like this:
 
-![create-llama interface](./images/create_llama.png)
+![create-llama interface](/images/create_llama.png)

apps/next/src/content/docs/llamaindex/getting_started/examples.mdx

@@ -1,17 +1,17 @@
 ---
-title: See all examples
+title: Code examples
 ---
 
 Our GitHub repository has a wealth of examples to explore and try out. You can check out our [examples folder](https://github.com/run-llama/LlamaIndexTS/tree/main/examples) to see them all at once, or browse the pages in this section for some selected highlights.
 
-## Check out all examples
+## Use examples locally
 
 It may be useful to check out all the examples at once so you can try them out locally. To do this into a folder called `my-new-project`, run these commands:
 
 ```bash npm2yarn
 npx degit run-llama/LlamaIndexTS/examples my-new-project
 cd my-new-project
-npm install
+npm i
 ```
 
 Then you can run any example in the folder with `tsx`, e.g.:
@@ -19,3 +19,14 @@ Then you can run any example in the folder with `tsx`, e.g.:
 ```bash npm2yarn
 npx tsx ./vectorIndex.ts
 ```
+
+## Try examples online
+
+You can also try the examples online using StackBlitz:
+
+<iframe
+  className="w-full h-[440px]"
+  aria-label="LlamaIndex.TS Examples"
+  aria-description="This is a list of examples for LlamaIndex.TS."
+  src="https://stackblitz.com/github/run-llama/LlamaIndexTS/tree/main/examples?file=README.md"
+/>

apps/next/src/content/docs/llamaindex/getting_started/index.mdx

@@ -1,35 +0,0 @@
----
-title: Installation
-description: Install llamaindex by running a single command.
----
-
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-
-<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
-	```shell tab="npm"
-	npm install llamaindex
-	```
-
-	```shell tab="yarn"
-	yarn add llamaindex
-	```
-
-	```shell tab="pnpm"
-	pnpm add llamaindex
-	```
-</Tabs>
-
-## What's next?
-
-<Cards>
-	<Card
-		title="I want to try LlamaIndex.TS"
-		description="Learn how to use LlamaIndex.TS with different JS runtime and frameworks."
-		href="/docs/llamaindex/getting_started/setup"
-	/>
-	<Card
-		title="Show me code examples"
-		description="Explore code examples using LlamaIndex.TS."
-		href="https://stackblitz.com/github/run-llama/LlamaIndexTS/tree/main/examples?file=README.md"
-	/>
-</Cards>

apps/next/src/content/docs/llamaindex/getting_started/installation/cloudflare.mdx

@@ -3,18 +3,11 @@ title: With Cloudflare Worker
 description: In this guide, you'll learn how to use LlamaIndex with CloudFlare Worker
 ---
 
-import {
-  SiNodedotjs,
-  SiDeno,
-  SiBun,
-  SiCloudflareworkers,
-} from "@icons-pack/react-simple-icons";
-
 Before you start, make sure you have try LlamaIndex.TS in Node.js to make sure you understand the basics.
 
 <Card
   title="Getting Started with LlamaIndex.TS in Node.js"
-  href="/docs/llamaindex/getting_started/setup/node"
+  href="/docs/llamaindex/getting_started/installation/node"
 />
 
 Also, you need have the basic understanding of <a href='https://developers.cloudflare.com/workers/'><SiCloudflareworkers className="inline mr-2" color="#F38020" />Cloudflare Worker</a>.
@@ -69,11 +62,9 @@ export default {
 In Cloudflare Worker and similar serverless JS environment, you need to be aware of the following differences:
 
 - Some Node.js modules are not available in Cloudflare Worker, such as `node:fs`, `node:child_process`, `node:cluster`...
-- You are recommend to design your code using network request, such as use `fetch` API to communicate with database, insteadof a long-running process in Node.js.
-- Some of LlamaIndex.TS modules are not available in Cloudflare Worker, for example `SimpleDirectoryReader` (requires `node:fs`), Some multimodal API that relies on [`onnxruntime-node`](https://www.npmjs.com/package/onnxruntime-node)(we might port to HTTP based module in the future).
-- `@llamaindex/core` is designed to work in all JavaScript environment, including Cloudflare Worker. If you find any issue, please report to us.
+- You are recommend to design your code using network request, such as use `fetch` API to communicate with database, instead of a long-running process in Node.js.
+- Some of LlamaIndex.TS packages are not available in Cloudflare Worker, for example `@llamaindex/readers` and `@llamaindex/huggingface`.
+- The main `llamaindex` is designed to work in all JavaScript environment, including Cloudflare Worker. If you find any issue, please report to us.
 - `@llamaindex/env` is a JS environment binding module, which polyfill some Node.js/Modern Web API (for example, we have a memory based `fs` module, and Crypto API polyfill). It is designed to work in all JavaScript environment, including Cloudflare Worker.
 
-## Known issues
 
-- `llamaindex` not work perfectly in Cloudflare Worker, bundle size will be larger than 1MB, which is the limit of Cloudflare Worker. You will need import submodule instead of the whole `llamaindex` module.

apps/next/src/content/docs/llamaindex/getting_started/installation/index.mdx

@@ -0,0 +1,69 @@
+---
+title: Installation
+description: How to install llamaindex packages.
+---
+
+To install llamaindex, run the following command:
+
+```package-install
+npm i llamaindex
+```
+
+In most cases, you'll also need an LLM package to use LlamaIndex. For example, to use the OpenAI LLM, you would install the following:
+
+```package-install
+npm i @llamaindex/openai
+```
+
+Go to [LLM APIs](/docs/llamaindex/modules/models/llms) to find out how to use other LLMs.
+
+
+## Frameworks
+
+LlamaIndex supports a wide range of frameworks and runtimes. Click on the card below to learn more.
+
+<Cards>
+	<Card title={
+		<>
+			<SiNodedotjs className="inline" color="#5FA04E" /> Node.js
+		</>
+	} href="/docs/llamaindex/getting_started/installation/node" />
+	<Card title={
+		<>
+			<SiTypescript className="inline" color="#3178C6" /> TypeScript
+		</>
+	} href="/docs/llamaindex/getting_started/installation/typescript" />
+	<Card title={
+		<>
+			<SiVite className='inline' color='#646CFF' /> Vite
+		</>
+	} href="/docs/llamaindex/getting_started/installation/vite" />
+	<Card
+		title={
+			<>
+				<SiNextdotjs className='inline' /> Next.js (React Server Component)
+			</>
+		}
+		href="/docs/llamaindex/getting_started/installation/next"
+	/>
+	<Card title={
+		<>
+			<SiCloudflareworkers className='inline' color='#F38020' /> Cloudflare Workers
+		</>
+	} href="/docs/llamaindex/getting_started/installation/cloudflare" />
+</Cards>
+
+## What's next?
+
+<Cards>
+	<Card
+		title="Learn LlamaIndex.TS"
+		description="Learn how to use LlamaIndex.TS by starting with one of our tutorials."
+		href="/docs/llamaindex/tutorials/rag"
+	/>
+	<Card
+		title="Show me code examples"
+		description="Explore code examples using LlamaIndex.TS."
+		href="/docs/llamaindex/getting_started/examples"
+	/>
+</Cards>

apps/next/src/content/docs/llamaindex/getting_started/installation/meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Installation",
+  "pages": ["node", "typescript", "next", "vite", "cloudflare"]
+}

apps/next/src/content/docs/llamaindex/getting_started/installation/next.mdx

@@ -7,7 +7,7 @@ Before you start, make sure you have try LlamaIndex.TS in Node.js to make sure y
 
 <Card
   title="Getting Started with LlamaIndex.TS in Node.js"
-  href="/docs/llamaindex/getting_started/setup/node"
+  href="/docs/llamaindex/getting_started/installation/node"
 />
 
 ## Differences between Node.js and Next.js
@@ -17,9 +17,9 @@ This means that you need to be careful when using LlamaIndex.TS in Next.js.
 Don't leak the import data like API keys to the client side.
 
 Also, in Next.js, there is build time and runtime. Some computations can be done at build time like Document embedding could be done at build time for better performance.
-LlamaIndex.TS has lots of upstream dependencies, some of them are not compatible with Next.js.
+Where as the `llamaindex` package is working with Next.js, some provider packages like `@llamaindex/huggingface` are not working well with Next.js. This is due to the upstream dependencies used by the provider package. 
 
-You might need to use `withNext` to make sure that LlamaIndex.TS works well with Next.js.
+Make sure to use `withLlamaIndex` to make sure that LlamaIndex.TS works well with Next.js.
 
 ```js
 // next.config.mjs / next.config.ts
@@ -35,7 +35,7 @@ If you see any dependency issues, you are welcome to open an issue on the GitHub
 
 ## Edge Runtime
 
-[Vercel Edge Runtime](https://edge-runtime.vercel.app/) is a subset of Node.js APIs. Similar to [Cloudflare Workers](./cloudflare#difference-between-nodejs-and-cloudflare-worker),
+[Vercel Edge Runtime](https://edge-runtime.vercel.app/) is a subset of Node.js APIs. Similar to [Cloudflare Workers](/docs/llamaindex/getting_started/installation/cloudflare#difference-between-nodejs-and-cloudflare-worker),
 it is a serverless platform that runs your code on the edge.
 
 Not all features of Node.js are supported in Vercel Edge Runtime, so does LlamaIndex.TS, we are working on more compatibility with all JavaScript runtimes.

apps/next/src/content/docs/llamaindex/getting_started/installation/node.mdx

@@ -22,9 +22,19 @@ node --env-file .env your-script.js
 
 For more information, see the [How to read environment variables from Node.js](https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs).
 
+## Performance Optimization
+
+By the default, we are using `js-tiktoken` for tokenization. You can install `gpt-tokenizer` which is then automatically used by LlamaIndex to get a 60x speedup for tokenization:
+
+```package-install
+npm i gpt-tokenizer
+```
+
+**Note**: This only works for Node.js
+
 ## TypeScript support
 
 <Card
 	title="Getting Started with LlamaIndex.TS in TypeScript"
-	href="/docs/llamaindex/getting_started/setup/typescript"
+	href="/docs/llamaindex/getting_started/installation/typescript"
 />

apps/next/src/content/docs/llamaindex/getting_started/installation/typescript.mdx

@@ -0,0 +1,99 @@
+---
+title: With TypeScript
+description: In this guide, you'll learn how to use LlamaIndex with TypeScript
+---
+
+LlamaIndex.TS is written in TypeScript and designed to be used in TypeScript projects.
+
+We put a lot of work on strong typing to make sure you have a great typing experience with code completion such as:
+
+```ts twoslash
+import { PromptTemplate } from 'llamaindex'
+const promptTemplate = new PromptTemplate({
+  template: `Context information from multiple sources is below.
+---------------------
+{context}
+---------------------
+Given the information from multiple sources and not prior knowledge.
+Answer the query in the style of a Shakespeare play"
+Query: {query}
+Answer:`,
+	templateVars: ["context", "query"],
+});
+// @noErrors
+promptTemplate.format({
+	c
+//^|
+})
+```
+
+## Enable TypeScript
+
+Make sure to set [moduleResolution](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution) in your `tsconfig.json` file:
+
+```json5
+{
+  compilerOptions: {
+    // ⬇️ add this line to your tsconfig.json
+    moduleResolution: "bundler", // or "nodenext" | "node16" | "node"
+  },
+}
+```
+
+We recommend using `bundler` or `nodenext`, but due to popularity of `node`, we still added support for it.
+
+## Enable AsyncIterable for `Web Stream` API
+
+Some modules uses `Web Stream` API like `ReadableStream` and `WritableStream`, you need to enable `DOM.AsyncIterable` in your `tsconfig.json`.
+
+```json5
+{
+  compilerOptions: {
+    // ⬇️ add this lib to your tsconfig.json
+    lib: ["DOM.AsyncIterable"],
+  },
+}
+```
+
+```typescript
+import { tool } from 'llamaindex'
+import { agent } from "@llamaindex/workflow";
+import { openai } from "@llamaindex/openai";
+
+Settings.llm = openai({
+  model: "gpt-4o-mini",
+});
+
+const addTool = tool({
+  name: "add", 
+  description: "Adds two numbers",
+  parameters: z.object({x: z.number(), y: z.number()}),
+  execute: ({ x, y }) => x + y,
+});
+
+const myAgent = agent({
+  tools: [addTool],
+});
+
+// Chat with the agent
+const context = myAgent.run("Hello, how are you?");
+
+for await (const event of context) {
+  if (event instanceof AgentStream) {
+    for (const chunk of event.data.delta) {
+      process.stdout.write(chunk); // stream response
+    }
+  } else {
+    console.log(event); // other events
+  }
+}
+
+```
+
+## Run TypeScript Script in Node.js
+
+We recommend to use [tsx](https://www.npmjs.com/package/tsx) to run TypeScript script in Node.js.
+
+```shell
+node --import tsx ./my-script.ts
+```

apps/next/src/content/docs/llamaindex/getting_started/installation/vite.mdx

@@ -7,7 +7,7 @@ Before you start, make sure you have try LlamaIndex.TS in Node.js to make sure y
 
 <Card
   title="Getting Started with LlamaIndex.TS in Node.js"
-  href="/docs/llamaindex/getting_started/setup/node"
+  href="/docs/llamaindex/getting_started/installation/node"
 />
 
 Also, make sure you have a basic understanding of [Vite](https://vitejs.dev/).

apps/next/src/content/docs/llamaindex/getting_started/meta.json

@@ -1,4 +1,4 @@
 {
   "title": "Getting Started",
-  "pages": ["index", "setup", "starter_tutorial", "environments", "concepts"]
+  "pages": ["installation", "create_llama", "examples"]
 }

apps/next/src/content/docs/llamaindex/getting_started/setup/index.mdx

@@ -1,42 +0,0 @@
----
-title: Choose Framework
-description: We support multiple JS runtime and frameworks, bundlers.
----
-import {
-	SiNodedotjs,
-	SiTypescript,
-	SiNextdotjs,
-	SiCloudflareworkers,
-	SiVite
-} from "@icons-pack/react-simple-icons";
-
-<Cards>
-	<Card title={
-		<>
-			<SiNodedotjs className="inline" color="#5FA04E" /> Node.js
-		</>
-	} href="/docs/llamaindex/getting_started/setup/node" />
-	<Card title={
-		<>
-			<SiTypescript className="inline" color="#3178C6" /> TypeScript
-		</>
-	} href="/docs/llamaindex/getting_started/setup/typescript" />
-	<Card title={
-		<>
-			<SiVite className='inline' color='#646CFF' /> Vite
-		</>
-	} href="/docs/llamaindex/getting_started/setup/vite" />
-	<Card
-		title={
-			<>
-				<SiNextdotjs className='inline' /> Next.js (React Server Component)
-			</>
-		}
-		href="/docs/llamaindex/getting_started/setup/next"
-	/>
-	<Card title={
-		<>
-			<SiCloudflareworkers className='inline' color='#F38020' /> Cloudflare Workers
-		</>
-	} href="/docs/llamaindex/getting_started/setup/cloudflare" />
-</Cards>

apps/next/src/content/docs/llamaindex/getting_started/setup/meta.json

@@ -1,6 +0,0 @@
-{
-  "title": "Setup",
-  "description": "The setup guide",
-  "defaultOpen": true,
-  "pages": ["index", "next", "node", "typescript", "vite", "cloudflare"]
-}

apps/next/src/content/docs/llamaindex/getting_started/setup/typescript.mdx

@@ -1,132 +0,0 @@
----
-title: With TypeScript
-description: In this guide, you'll learn how to use LlamaIndex with TypeScript
----
-import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
-
-LlamaIndex.TS is written in TypeScript and designed to be used in TypeScript projects.
-
-We do lots of work on strong typing to make sure you have a great typing experience with LlamaIndex.TS.
-
-```ts twoslash
-import { PromptTemplate } from '@llamaindex/core/prompts'
-const promptTemplate = new PromptTemplate({
-  template: `Context information from multiple sources is below.
----------------------
-{context}
----------------------
-Given the information from multiple sources and not prior knowledge.
-Answer the query in the style of a Shakespeare play"
-Query: {query}
-Answer:`,
-	templateVars: ["context", "query"],
-});
-// @noErrors
-promptTemplate.format({
-	c
-//^|
-})
-```
-
-```ts twoslash
-import { FunctionTool } from '@llamaindex/core/tools'
-import { z } from 'zod'
-
-// ---cut-before---
-const inputSchema = z.object({
-	time: z.string(),
-	city: z.string(),
-})
-
-type Input = z.infer<typeof inputSchema>
-
-FunctionTool.from<Input>((input) => {
-// @noErrors
-	input.t
-//      ^|
-}, {
-	name: 'getWeather',
-	description: 'Get the weather information',
-	parameters: inputSchema,
-})
-```
-
-## Enable TypeScript
-
-
-```json5
-{
-  compilerOptions: {
-    // ⬇️ add this line to your tsconfig.json
-    moduleResolution: "bundler", // or "node16"
-  },
-}
-```
-
-<Accordions>
-	<Accordion
-		title="Why modify tsconfig.json"
-	>
-
-We are shipping both ESM and CJS module, and compatible with Vercel Edge, Cloudflare Workers, and other serverless platforms.
-
-So we are using [conditional exports](https://nodejs.org/api/packages.html#conditional-exports) to support all environments.
-
-This is a kind of modern way of shipping packages, but might cause TypeScript type check to fail because of legacy module resolution.
-
-Imaging you put output file into `/dist/openai.js` but you are importing `llamaindex/openai` in your code, and set `package.json` like this:
-
-```json5
-{
-	"exports": {
-		"./openai": "./dist/openai.js"
-	}
-}
-```
-
-In old module resolution, TypeScript will not be able to find the module because it is not following the file structure, even you run `node index.js` successfully. (on Node.js >=16)
-
-See more about [moduleResolution](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution) or
-[TypeScript 5.0 blog](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#--moduleresolution-bundler7).
-
-
-	</Accordion>
-</Accordions>
-
-## Enable AsyncIterable for `Web Stream` API
-
-Some modules uses `Web Stream` API like `ReadableStream` and `WritableStream`, you need to enable `DOM.AsyncIterable` in your `tsconfig.json`.
-
-```json5
-{
-  compilerOptions: {
-    // ⬇️ add this lib to your tsconfig.json
-    lib: ["DOM.AsyncIterable"],
-  },
-}
-```
-
-```ts twoslash
-import { OpenAIAgent } from '@llamaindex/openai'
-
-const agent = new OpenAIAgent({
-  tools: []
-})
-
-const response = await agent.chat({
-  message: 'Hello, how are you?',
-  stream: true
-})
-for await (const _ of response) {
-                      //^?
-  // ...
-}
-```
-
-## Run TypeScript Script in Node.js
-
-We recommend to use [tsx](https://www.npmjs.com/package/tsx) to run TypeScript script in Node.js.
-
-```shell
-node --import tsx ./my-script.ts
-```

apps/next/src/content/docs/llamaindex/getting_started/starter_tutorial/meta.json

@@ -1,9 +0,0 @@
-{
-  "title": "Starter Tutorials",
-  "pages": [
-    "retrieval_augmented_generation",
-    "chatbot",
-    "structured_data_extraction",
-    "agent"
-  ]
-}

apps/next/src/content/docs/llamaindex/guide/agents/2_create_agent.mdx

@@ -1,181 +0,0 @@
----
-title: Create a basic agent
----
-
-We want to use `await` so we're going to wrap all of our code in a `main` function, like this:
-
-```typescript
-// Your imports go here
-
-async function main() {
-  // the rest of your code goes here
-}
-
-main().catch(console.error);
-```
-
-For the rest of this guide we'll assume your code is wrapped like this so we can use `await`. You can run the code this way:
-
-```bash
-npx tsx example.ts
-```
-
-### Load your dependencies
-
-First we'll need to pull in our dependencies. These are:
-
-- The OpenAI class to use the OpenAI LLM
-- FunctionTool to provide tools to our agent
-- OpenAIAgent to create the agent itself
-- Settings to define some global settings for the library
-- Dotenv to load our API key from the .env file
-
-```javascript
-import { OpenAI, FunctionTool, OpenAIAgent, Settings } from "llamaindex";
-import "dotenv/config";
-```
-
-### Initialize your LLM
-
-We need to tell our OpenAI class where its API key is, and which of OpenAI's models to use. We'll be using `gpt-4o`, which is capable while still being pretty cheap. This is a global setting, so anywhere an LLM is needed will use the same model.
-
-```javascript
-Settings.llm = new OpenAI({
-  apiKey: process.env.OPENAI_API_KEY,
-  model: "gpt-4o",
-});
-```
-
-### Turn on logging
-
-We want to see what our agent is up to, so we're going to hook into some events that the library generates and print them out. There are several events possible, but we'll specifically tune in to `llm-tool-call` (when a tool is called) and `llm-tool-result` (when it responds).
-
-```javascript
-Settings.callbackManager.on("llm-tool-call", (event) => {
-  console.log(event.detail);
-});
-Settings.callbackManager.on("llm-tool-result", (event) => {
-  console.log(event.detail);
-});
-```
-
-### Create a function
-
-We're going to create a very simple function that adds two numbers together. This will be the tool we ask our agent to use.
-
-```javascript
-const sumNumbers = ({ a, b }) => {
-  return `${a + b}`;
-};
-```
-
-Note that we're passing in an object with two named parameters, `a` and `b`. This is a little unusual, but important for defining a tool that an LLM can use.
-
-### Turn the function into a tool for the agent
-
-This is the most complicated part of creating an agent. We need to define a `FunctionTool`. We have to pass in:
-
-- The function itself (`sumNumbers`)
-- A name for the function, which the LLM will use to call it
-- A description of the function. The LLM will read this description to figure out what the tool does, and if it needs to call it
-- A schema for function. We tell the LLM that the parameter is an `object`, and we tell it about the two named parameters we gave it, `a` and `b`. We describe each parameter as a `number`, and we say that both are required.
-- You can see [more examples of function schemas](https://cookbook.openai.com/examples/how_to_call_functions_with_chat_models).
-
-```javascript
-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"],
-  },
-});
-```
-
-We then wrap up the tools into an array. We could provide lots of tools this way, but for this example we're just using the one.
-
-```javascript
-const tools = [tool];
-```
-
-### Create the agent
-
-With your LLM already set up and your tools defined, creating an agent is simple:
-
-```javascript
-const agent = new OpenAIAgent({ tools });
-```
-
-### Ask the agent a question
-
-We can use the `chat` interface to ask our agent a question, and it will use the tools we've defined to find an answer.
-
-```javascript
-let response = await agent.chat({
-  message: "Add 101 and 303",
-});
-
-console.log(response);
-```
-
-Let's see what running this looks like using `npx tsx agent.ts`
-
-**_Output_**
-
-```javascript
-{
-  toolCall: {
-    id: 'call_ze6A8C3mOUBG4zmXO8Z4CPB5',
-    name: 'sumNumbers',
-    input: { a: 101, b: 303 }
-  },
-  toolResult: {
-    tool: FunctionTool { _fn: [Function: sumNumbers], _metadata: [Object] },
-    input: { a: 101, b: 303 },
-    output: '404',
-    isError: false
-  }
-}
-```
-
-```javascript
-{
-  response: {
-    raw: {
-      id: 'chatcmpl-9KwauZku3QOvH78MNvxJs81mDvQYK',
-      object: 'chat.completion',
-      created: 1714778824,
-      model: 'gpt-4-turbo-2024-04-09',
-      choices: [Array],
-      usage: [Object],
-      system_fingerprint: 'fp_ea6eb70039'
-    },
-    message: {
-      content: 'The sum of 101 and 303 is 404.',
-      role: 'assistant',
-      options: {}
-    }
-  },
-  sources: [Getter]
-}
-```
-
-We're seeing two pieces of output here. The first is our callback firing when the tool is called. You can see in `toolResult` that the LLM has correctly passed `101` and `303` to our `sumNumbers` function, which adds them up and returns `404`.
-
-The second piece of output is the response from the LLM itself, where the `message.content` key is giving us the answer.
-
-Great! We've built an agent with tool use! Next you can:
-
-- [See the full code](https://github.com/run-llama/ts-agents/blob/main/1_agent/agent.ts)
-- [Switch to a local LLM](3_local_model)
-- Move on to [add Retrieval-Augmented Generation to your agent](4_agentic_rag)

apps/next/src/content/docs/llamaindex/guide/agents/3_local_model.mdx

@@ -1,92 +0,0 @@
----
-title: Using a local model via Ollama
----
-
-If you're happy using OpenAI, you can skip this section, but many people are interested in using models they run themselves. The easiest way to do this is via the great work of our friends at [Ollama](https://ollama.com/), who provide a simple to use client that will download, install and run a [growing range of models](https://ollama.com/library) for you.
-
-### Install Ollama
-
-They provide a one-click installer for Mac, Linux and Windows on their [home page](https://ollama.com/).
-
-### Pick and run a model
-
-Since we're going to be doing agentic work, we'll need a very capable model, but the largest models are hard to run on a laptop. We think `mixtral 8x7b` is a good balance between power and resources, but `llama3` is another great option. You can run it simply by running
-
-```bash
-ollama run mixtral:8x7b
-```
-
-The first time you run it will also automatically download and install the model for you.
-
-### Switch the LLM in your code
-
-There are two changes you need to make to the code we already wrote in `1_agent` to get Mixtral 8x7b to work. First, you need to switch to that model. Replace the call to `Settings.llm` with this:
-
-```javascript
-Settings.llm = new Ollama({
-  model: "mixtral:8x7b",
-});
-```
-
-### Swap to a ReActAgent
-
-In our original code we used a specific OpenAIAgent, so we'll need to switch to a more generic agent pattern, the ReAct pattern. This is simple: change the `const agent` line in your code to read
-
-```javascript
-const agent = new ReActAgent({ tools });
-```
-
-(You will also need to bring in `Ollama` and `ReActAgent` in your imports)
-
-### Run your totally local agent
-
-Because your embeddings were already local, your agent can now run entirely locally without making any API calls.
-
-```bash
-node agent.mjs
-```
-
-Note that your model will probably run a lot slower than OpenAI, so be prepared to wait a while!
-
-**_Output_**
-
-```javascript
-{
-  response: {
-    message: {
-      role: 'assistant',
-      content: ' Thought: I need to use a tool to add the numbers 101 and 303.\n' +
-        'Action: sumNumbers\n' +
-        'Action Input: {"a": 101, "b": 303}\n' +
-        '\n' +
-        'Observation: 404\n' +
-        '\n' +
-        'Thought: I can answer without using any more tools.\n' +
-        'Answer: The sum of 101 and 303 is 404.'
-    },
-    raw: {
-      model: 'mixtral:8x7b',
-      created_at: '2024-05-09T00:24:30.339473Z',
-      message: [Object],
-      done: true,
-      total_duration: 64678371209,
-      load_duration: 57394551334,
-      prompt_eval_count: 475,
-      prompt_eval_duration: 4163981000,
-      eval_count: 94,
-      eval_duration: 3116692000
-    }
-  },
-  sources: [Getter]
-}
-```
-
-Tada! You can see all of this in the folder `1a_mixtral`.
-
-### Extending to other examples
-
-You can use a ReActAgent instead of an OpenAIAgent in any of the further examples below, but keep in mind that GPT-4 is a lot more capable than Mixtral 8x7b, so you may see more errors or failures in reasoning if you are using an entirely local setup.
-
-### Next steps
-
-Now you've got a local agent, you can [add Retrieval-Augmented Generation to your agent](4_agentic_rag).

apps/next/src/content/docs/llamaindex/guide/cost-analysis.mdx

@@ -1,16 +0,0 @@
----
-title: Cost Analysis
----
-
-This page shows how to track LLM cost using APIs.
-
-## Callback Manager
-
-The callback manager is a class that manages the callback functions.
-
-You can register `llm-start`, `llm-end`, and `llm-stream` callbacks to the callback manager for tracking the cost.
-
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSource from "!raw-loader!../../../../../../../examples/recipes/cost-analysis";
-
-<DynamicCodeBlock lang="ts" code={CodeSource} />

apps/next/src/content/docs/llamaindex/guide/loading/index.mdx

@@ -1,105 +0,0 @@
----
-title: Document and Nodes
-description: llamaindex readers is a collection of readers for different file formats.
----
-
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-
-import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
-
-<Accordions>
-	<Accordion title="Install @llamaindex/readers">
-
-		If you want to only use reader modules, you can install `@llamaindex/readers`
-
-		<Tabs groupId="install-llamaindex" items={["npm", "yarn", "pnpm"]} persist>
-			```shell tab="npm"
-			npm install @llamaindex/readers
-			```
-
-			```shell tab="yarn"
-			yarn add @llamaindex/readers
-			```
-
-			```shell tab="pnpm"
-			pnpm add @llamaindex/readers
-			```
-
-		</Tabs>
-	</Accordion>
-</Accordions>
-
-We offer readers for different file formats.
-
-<Tabs groupId="llamaindex-or-readers" items={["llamaindex", "@llamaindex/readers"]} persist>
-	```ts twoslash tab="llamaindex"
-	import { CSVReader } from 'llamaindex'
-	import { PDFReader } from 'llamaindex'
-	import { JSONReader } from 'llamaindex'
-	import { MarkdownReader } from 'llamaindex'
-	import { HTMLReader } from 'llamaindex'
-	// you can find more readers in the documentation
-	```
-
-	```ts twoslash tab="@llamaindex/readers"
-	import { CSVReader } from '@llamaindex/readers/csv'
-	import { PDFReader } from '@llamaindex/readers/pdf'
-	import { JSONReader } from '@llamaindex/readers/json'
-	import { MarkdownReader } from '@llamaindex/readers/markdown'
-	import { HTMLReader } from '@llamaindex/readers/html'
-	// you can find more readers in the documentation
-	```
-
-</Tabs>
-
-## SimpleDirectoryReader
-
-`SimpleDirectoryReader` is the simplest way to load data from local files into LlamaIndex.
-
-<Tabs groupId="llamaindex-or-readers" items={["llamaindex", "@llamaindex/readers"]} persist>
-
-	```ts twoslash tab="llamaindex"
-	import { SimpleDirectoryReader } from "llamaindex";
-
-	const reader = new SimpleDirectoryReader()
-	const documents = await reader.loadData("./data")
-	//    ^?
-
-
-	const texts = documents.map(doc => doc.getText())
-	//    ^?
-	```
-
-	```ts twoslash tab="@llamaindex/readers"
-	import { SimpleDirectoryReader } from "@llamaindex/readers/directory";
-
-	const reader = new SimpleDirectoryReader()
-	const documents = await reader.loadData("./data")
-	//    ^?
-
-
-	const texts = documents.map(doc => doc.getText())
-	//    ^?
-	```
-
-</Tabs>
-
-## Load file natively using Node.js Customization Hooks
-
-We have a helper utility to allow you to import a file in Node.js script.
-
-<Tabs groupId="llamaindex-or-readers" items={["llamaindex", "@llamaindex/readers"]} persist>
-	```shell tab="llamaindex"
-	node --import llamaindex/register ./script.js
-	```
-
-	```shell tab="@llamaindex/readers"
-	node --import @llamaindex/readers/node ./script.js
-	```
-</Tabs>
-
-```ts
-import csv from './path/to/data.csv';
-
-const text = csv.getText()
-```

apps/next/src/content/docs/llamaindex/guide/loading/meta.json

@@ -1,5 +0,0 @@
-{
-  "title": "Loading Data",
-  "description": "Loading Data using LlamaIndex.TS",
-  "pages": ["index", "node-parser"]
-}

apps/next/src/content/docs/llamaindex/guide/meta.json

@@ -1,5 +0,0 @@
-{
-  "title": "Guide",
-  "description": "See our guide",
-  "pages": ["loading", "workflow", "chat", "agents", "cost-analysis"]
-}

apps/next/src/content/docs/llamaindex/guide/workflow/different-inputs-outputs.mdx

@@ -1,226 +0,0 @@
----
-title: Inputs / Outputs
-description: Learn how to use different inputs and outputs in your workflows.
----
-
-Inputs and outputs are the way to communicate between steps in a workflow. In the previous example,
-we used `StartEvent` and `StopEvent` to communicate between steps. However, you can use any type of event to communicate between steps.
-
-## Multiple inputs
-
-You can define multiple inputs for a step.
-
-In the following example, we define a complex workflow with multiple inputs and outputs.
-
-```ts twoslash
-import { Workflow, StartEvent, StopEvent, WorkflowEvent } from '@llamaindex/workflow';
-
-class AEvent extends WorkflowEvent<string> {
-	constructor(data: string) {
-		super(data);
-	}
-}
-
-class BEvent extends WorkflowEvent<number> {
-	constructor(data: number) {
-		super(data);
-	}
-}
-
-class ResultEvent extends WorkflowEvent<string> {
-	constructor(data: string) {
-		super(data);
-	}
-}
-```
-
-First, let's define the events that we will use in the workflow.
-
-```ts twoslash
-import { Workflow, StartEvent, StopEvent, WorkflowEvent } from '@llamaindex/workflow';
-
-class AEvent extends WorkflowEvent<string> {
-	constructor(data: string) {
-		super(data);
-	}
-}
-
-class BEvent extends WorkflowEvent<number> {
-	constructor(data: number) {
-		super(data);
-	}
-}
-
-class ResultEvent extends WorkflowEvent<string> {
-	constructor(data: string) {
-		super(data);
-	}
-}
-
-const workflow = new Workflow<never, string, string>();
-
-workflow.addStep({
-	inputs: [StartEvent<string>],
-	outputs: [StopEvent<string>]
-}, async (
-	context,
-	startEvent
-) => {
-	const input = startEvent.data;
-	const aEvent = await context.requireEvent(AEvent);
-	const bEvent = await context.requireEvent(BEvent);
-	const a = aEvent.data;
-	const b = bEvent.data;
-	return new StopEvent(`Hello, ${input}! A: ${a}, B: ${b}`);
-});
-
-// ---cut---
-workflow.addStep({
-	inputs: [AEvent, BEvent],
-	outputs: [ResultEvent]
-}, async (
-	context,
-	aEvent,
-	bEvent
-) => {
-	const a = aEvent.data;
-	const b = bEvent.data;
-	return new ResultEvent(`A: ${a}, B: ${b}`);
-});
-```
-
-This step means that it requires two events: `AEvent` and `BEvent`. It will return a `ResultEvent` with the data `A: ${a}, B: ${b}`.
-
-## A or B input
-
-If we want to have a step that can accept either `AEvent` or `BEvent`, we can define the step like this:
-
-```ts twoslash
-import { Workflow, StartEvent, StopEvent, WorkflowEvent } from '@llamaindex/workflow';
-
-class AEvent extends WorkflowEvent<string> {
-	constructor(data: string) {
-		super(data);
-	}
-}
-
-class BEvent extends WorkflowEvent<number> {
-	constructor(data: number) {
-		super(data);
-	}
-}
-
-class ResultEvent extends WorkflowEvent<string> {
-	constructor(data: string) {
-		super(data);
-	}
-}
-
-const workflow = new Workflow<never, string, string>();
-
-workflow.addStep({
-	inputs: [StartEvent<string>],
-	outputs: [StopEvent<string>]
-}, async (
-	context,
-	startEvent
-) => {
-	const input = startEvent.data;
-	const aEvent = await context.requireEvent(AEvent);
-	const bEvent = await context.requireEvent(BEvent);
-	const a = aEvent.data;
-	const b = bEvent.data;
-	return new StopEvent(`Hello, ${input}! A: ${a}, B: ${b}`);
-});
-
-// ---cut---
-workflow.addStep({
-	inputs: [WorkflowEvent.or(AEvent, BEvent)],
-	outputs: [ResultEvent]
-}, async (
-	context,
-	aOrBEvent
-) => {
-	if (aOrBEvent instanceof AEvent) {
-		// ^?
-
-
-		const a = aOrBEvent.data;
-		//        ^?
-
-
-		return new ResultEvent(`A: ${a}`);
-	} else {
-		const b = aOrBEvent.data;
-		//        ^?
-
-
-		return new ResultEvent(`B: ${b}`);
-	}
-});
-```
-
-This step means that it requires either `AEvent` or `BEvent`. It will return a `ResultEvent` with the data `A: ${a}` or `B: ${b}`.
-
-You can still combine the logic with `context.requireEvent` to get the data from the event.
-
-import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
-
-<Accordions>
-	<Accordion title="Under the hood">
-		We use JavaScript Inheritance and the prototype chain to implement the `or` logic.
-		The `or` method creates a new class that extends the two classes that you pass to it.
-
-		<a
-			target="_blank"
-			href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain"
-		>
-			MDN - Inheritance and the prototype chain
-		</a>
-	</Accordion>
-</Accordions>
-
-## Multiple outputs
-
-You can define multiple outputs for a step.
-
-```ts twoslash
-import { Workflow, StartEvent, StopEvent, WorkflowEvent } from '@llamaindex/workflow';
-
-class AEvent extends WorkflowEvent<string> {
-	constructor(data: string) {
-		super(data);
-	}
-}
-
-class BEvent extends WorkflowEvent<number> {
-	constructor(data: number) {
-		super(data);
-	}
-}
-
-class ResultEvent extends WorkflowEvent<string> {
-	constructor(data: string) {
-		super(data);
-	}
-}
-
-const workflow = new Workflow<never, string, string>();
-// ---cut---
-workflow.addStep({
-	inputs: [StartEvent<string>],
-	outputs: [AEvent, BEvent]
-}, async (
-	context,
-	startEvent
-) => {
-	const input = startEvent.data;
-	if (Math.random() > 0.5) {
-		return new AEvent(`Hello, ${input}!`);
-	} else {
-		return new BEvent(42);
-	}
-});
-```
-
-This step will return either an `AEvent` or a `BEvent` based on a random number.

apps/next/src/content/docs/llamaindex/guide/workflow/index.mdx

@@ -1,208 +0,0 @@
----
-title: Basic Usage
-description: Learn how to use the LlamaIndex workflow.
----
-
-A `Workflow` in LlamaIndex.TS is an event-driven abstraction used to chain together several events.
-Workflows are made up of steps, with each step responsible for handling certain event types and emitting new events.
-
-Workflows are designed for any cases that benefit from event-driven programming, not only for LLM and AI tasks.
-
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-
-<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
-	```shell tab="npm"
-	npm install @llamaindex/workflow
-	```
-
-	```shell tab="yarn"
-	yarn add @llamaindex/workflow
-	```
-
-	```shell tab="pnpm"
-	pnpm add @llamaindex/workflow
-	```
-</Tabs>
-
-## Start from scratch
-
-Let's start from a Hello World workflow.
-
-```ts twoslash
-import { Workflow } from '@llamaindex/workflow';
-
-type ContextData = {
-	counter: number;
-}
-// ---cut---
-const contextData: ContextData = { counter: 0 };
-
-const workflow = new Workflow<ContextData, string, string>();
-//     ^?
-
-
-
-```
-
-First, we define a workflow with 3 generic types: `ContextData`, `Input`, and `Output`.
-
-In general, `ContextData` is used to store the shared data between steps, `Input` is the type of the input event, and `Output` is the type of the output event.
-
-In you code logic, you should **share state between steps via `ContextData`**.
-
-```ts twoslash
-import { Workflow, StartEvent, StopEvent } from '@llamaindex/workflow';
-
-type ContextData = {
-	counter: number;
-}
-
-const contextData: ContextData = { counter: 0 };
-
-const workflow = new Workflow<ContextData, string, string>();
-// ---cut---
-workflow.addStep({
-	inputs: [StartEvent<string>],
-	outputs: [StopEvent<string>]
-}, async (context, startEvent) => {
-	const input = startEvent.data;
-	context.data.counter++;
-	return new StopEvent(`Hello, ${input}!`);
-});
-```
-
-In the workflow, we add a step that listens to `StartEvent<string>` and emits `StopEvent<string>`.
-
-The step is an async function that takes two arguments: `context` and `event`.
-
-### `context` type
-
-<AutoTypeTable path="./src/deps/type.ts" name="HandlerContext" />
-
-There are two more properties in `HandlerContext`:
-
-- `sendEvent`: invoke another event in the workflow, other than `StartEvent`, `StopEvent`, or the current event. (Or there will have circular reference)
-- `requireEvent`: wait for a specific event to be emitted.
-
-You can use `sendEvent` and `requireEvent` to build complex workflows.
-
-```ts twoslash
-import { Workflow, StartEvent, StopEvent, WorkflowEvent } from '@llamaindex/workflow';
-
-type ContextData = {
-	counter: number;
-}
-
-const contextData: ContextData = { counter: 0 };
-
-const workflow = new Workflow<ContextData, string, string>();
-
-// ---cut---
-class AnalysisStartEvent extends WorkflowEvent<string> {}
-class AnalysisStopEvent extends WorkflowEvent<boolean> {}
-workflow.addStep({
-	inputs: [AnalysisStartEvent],
-	outputs: [AnalysisStopEvent]
-}, async (...args) => {
-	// do some analysis
-	return new AnalysisStopEvent(true);
-})
-workflow.addStep({
-	inputs: [StartEvent<string>],
-	outputs: [StopEvent<string>]
-}, async (context, startEvent) => {
-	const input = startEvent.data;
-	context.sendEvent(new AnalysisStartEvent('start'));
-	context.data.counter++;
-	const { data } = await context.requireEvent(AnalysisStopEvent);
-	return new StopEvent(`Hello, ${input}! Analysis result: ${data ? 'success' : 'fail'}`);
-});
-```
-
-For example, you can compile `requireEvent` with `waitUntil` in [Vercel Functions](https://vercel.com/docs/functions/functions-api-reference#waituntil) or [Cloudflare Worker](https://developers.cloudflare.com/workers/runtime-apis/context/#waituntil)
-
-```ts twoslash
-import { waitUntil } from '@vercel/functions';
-import { Workflow, StartEvent, StopEvent, WorkflowEvent } from '@llamaindex/workflow';
-
-type ContextData = {
-	counter: number;
-}
-
-const contextData: ContextData = { counter: 0 };
-
-const workflow = new Workflow<ContextData, string, string>();
-
-class AnalysisStartEvent extends WorkflowEvent<string> {}
-class AnalysisStopEvent extends WorkflowEvent<boolean> {}
-
-// ---cut---
-workflow.addStep({
-	inputs: [StartEvent<string>],
-	outputs: [StopEvent<string>]
-}, async (context, startEvent) => {
-	const input = startEvent.data;
-	context.sendEvent(new AnalysisStartEvent('start'));
-	context.data.counter++;
-	waitUntil(context.requireEvent(AnalysisStopEvent));
-	// note that `waitUntil` is not a promise, it will extend the lifetime of the workflow
-	// you can wait for some background tasks to finish
-	return new StopEvent(`Hello, ${input}!`);
-});
-```
-
-## Multiple runs
-
-You can run the same workflow multiple times with different inputs.
-
-```ts twoslash
-import { Workflow, StartEvent, StopEvent } from '@llamaindex/workflow';
-
-type ContextData = {
-	counter: number;
-}
-
-const contextData: ContextData = { counter: 0 };
-
-const workflow = new Workflow<ContextData, string, string>();
-
-workflow.addStep({
-	inputs: [StartEvent<string>],
-	outputs: [StopEvent<string>]
-}, async (context, startEvent) => {
-	const input = startEvent.data;
-	context.data.counter++;
-	return new StopEvent(`Hello, ${input}!`);
-});
-
-// ---cut---
-{
-	const ret = await workflow.run('Alex', contextData);
-	console.log(ret.data); // Hello, Alex!
-}
-
-{
-	const ret = await workflow.run('World', contextData);
-	console.log(ret.data); // Hello, World!
-}
-```
-
-Context is shared between runs, so the counter will be increased.
-
-Ideally, it should be serializable to make sure it can be recovered from HTTP requests or other storage.
-
-### Full example
-
-<iframe
-	className="w-full h-[440px]"
-	aria-label="Workflow example"
-	src="https://stackblitz.com/github/run-llama/LlamaIndexTS/tree/main/examples?file=node/workflow/basic.ts"
-/>
-
-## `Workflow` type
-
-<AutoTypeTable path="./src/deps/type.ts" name="Workflow" />
-
-## `WorkflowContext` type
-
-<AutoTypeTable path="./src/deps/type.ts" name="WorkflowContext" />

apps/next/src/content/docs/llamaindex/guide/workflow/meta.json

@@ -1,6 +0,0 @@
-{
-  "title": "Workflow",
-  "description": "See how to use @llamaindex/workflow",
-  "defaultOpen": false,
-  "pages": ["index", "different-inputs-outputs", "streaming"]
-}

apps/next/src/content/docs/llamaindex/guide/workflow/streaming.mdx

@@ -1,199 +0,0 @@
----
-title: Streaming
-description: Learn how to use the LlamaIndex workflow with streaming.
----
-import { WorkflowStreamingDemo } from '../../../../../components/demo/workflow-streaming-ui';
-
-`Workflow` API by default is designed for streaming data. In this guide, we will show you how to use the `Workflow` API with streaming data.
-
-Each `workflow.run` call returns `WorkflowContext`, which implements `AsyncIterable` interface. You can use it to stream data.
-
-```ts twoslash
-import { Workflow, WorkflowEvent, StartEvent, StopEvent } from '@llamaindex/workflow';
-class ComputeEvent extends WorkflowEvent<number> {
-	constructor(data: number) {
-		super(data);
-	}
-}
-class ComputeResultEvent extends WorkflowEvent<number> {
-	constructor(data: number) {
-		super(data);
-	}
-}
-
-type ContextData = {
-	sum: number;
-}
-
-const workflow = new Workflow<ContextData, number, number>();
-workflow.addStep({
-	inputs: [StartEvent<number>],
-	outputs: [StopEvent<number>]
-}, async (context, startEvent) => {
-	const total = startEvent.data;
-	for (let i = 0; i < total; i++) {
-		context.sendEvent(new ComputeEvent(i));
-	}
-	const computeResults = await Promise.all(Array.from({ length: total }).map(() => context.requireEvent(ComputeResultEvent)));
-	// Workflow API allows you to start events in parallel and wait for all of them to finish
-	context.data.sum = computeResults.reduce((acc, curr) => acc + curr.data, 0);
-	return new StopEvent(context.data.sum);
-});
-```
-
-We define a parallel computation workflow that computes the sum of numbers from 0 to `total`.
-
-The workflow sends `ComputeEvent` events for each number and waits for `ComputeResultEvent` events. After receiving all `ComputeResultEvent` events, the workflow returns the sum as a `StopEvent`.
-
-What if we want cutoff if the sum exceeds a certain value?
-
-## Streaming
-
-```ts twoslash
-import { Workflow, WorkflowEvent, StartEvent, StopEvent } from '@llamaindex/workflow';
-import { StopCircle } from 'lucide-react';
-class ComputeEvent extends WorkflowEvent<number> {
-	constructor(data: number) {
-		super(data);
-	}
-}
-class ComputeResultEvent extends WorkflowEvent<number> {
-	constructor(data: number) {
-		super(data);
-	}
-}
-
-
-type ContextData = {
-	sum: number;
-}
-
-const workflow = new Workflow<ContextData, number, number>();
-// ---cut---
-const context = workflow.run(1000, {
-	sum: 0
-});
-
-for await (const event of context) {
-	if (event instanceof ComputeEvent) {
-		if (context.data.sum > 100) {
-			throw new Error('Sum exceeds 100');
-		}
-	}
-	if (event instanceof StopEvent) {
-		console.log('result', event.data);
-	}
-}
-```
-
-You can define more custom logic using `AsyncIterable` interface.
-
-For example. I just want to stop the workflow if I get a `ComputeResultEvent`
-
-
-```ts twoslash
-import { Workflow, WorkflowEvent, StartEvent, StopEvent } from '@llamaindex/workflow';
-import { StopCircle } from 'lucide-react';
-class ComputeEvent extends WorkflowEvent<number> {
-	constructor(data: number) {
-		super(data);
-	}
-}
-class ComputeResultEvent extends WorkflowEvent<number> {
-	constructor(data: number) {
-		super(data);
-	}
-}
-
-
-type ContextData = {
-	sum: number;
-}
-
-const workflow = new Workflow<ContextData, number, number>();
-// ---cut---
-async function compute() {
-	const context = workflow.run(1000, {
-		sum: 0
-	});
-	for await (const event of context) {
-		if (event instanceof ComputeResultEvent) {
-			return event.data;
-		}
-	}
-	throw new Error('UNREACHABLE');
-}
-
-const result = await compute();
-```
-
-### Streaming with UI
-
-You can use the `Workflow` API with UI libraries like React.
-
-```tsx twoslash
-// @filename: utils.ts
-export async function runWithoutBlocking(fn: () => Promise<void>) {
-	fn();
-}
-// @filename: action.ts
-// ---cut---
-'use server';
-// "use server" is required to enable server side feature in React
-import { createStreamableUI } from 'ai/rsc';
-import { runWithoutBlocking } from './utils';
-// ---cut-start---
-import { Workflow, WorkflowEvent, StartEvent, StopEvent } from '@llamaindex/workflow';
-class ComputeEvent extends WorkflowEvent<number> {
-	constructor(data: number) {
-		super(data);
-	}
-}
-class ComputeResultEvent extends WorkflowEvent<number> {
-	constructor(data: number) {
-		super(data);
-	}
-}
-
-
-type ContextData = {
-	sum: number;
-}
-
-const workflow = new Workflow<ContextData, number, number>();
-const min = 100;
-const max = 1000;
-workflow.addStep(
-	{
-		inputs: [ComputeEvent],
-		outputs: [ComputeResultEvent]
-	},
-	async (context, event) => {
-		await new Promise((resolve) =>
-			setTimeout(resolve, Math.floor(Math.random() * (max - min + 1) + min))
-		);
-		return new ComputeResultEvent(event.data);
-	}
-);
-// ---cut-end---
-export async function compute() {
-	'use server';
-	const ui = createStreamableUI();
-	const context = workflow.run(100, {
-		sum: 0
-	});
-	runWithoutBlocking(async () => {
-		for await (const event of context) {
-			if (event instanceof ComputeResultEvent) {
-				// Update UI
-			} else if (event instanceof StopEvent) {
-				// Update UI
-			}
-			// ...
-		}
-	});
-	return ui.value;
-}
-```
-
-<WorkflowStreamingDemo />

apps/next/src/content/docs/llamaindex/index.mdx

@@ -3,22 +3,19 @@ title: What is LlamaIndex.TS
 description: LlamaIndex is the leading data framework for building LLM applications
 ---
 
-import {
-  SiNodedotjs,
-  SiDeno,
-  SiBun,
-  SiCloudflareworkers,
-} from "@icons-pack/react-simple-icons";
-
 LlamaIndex is a framework for building context-augmented generative AI applications with LLMs including agents and workflows.
 
 The TypeScript implementation is designed for JavaScript server side applications using <SiNodedotjs className="inline" color="#5FA04E" /> Node.js, <SiDeno className="inline" color="#70FFAF" /> Deno, <SiBun className="inline" /> Bun, <SiCloudflareworkers className="inline" color="#F38020" /> Cloudflare Workers, and more.
 
 LlamaIndex.TS provides tools for beginners, advanced users, and everyone in between.
 
+Try it out with a starter example using StackBlitz:
+
 <iframe
   className="w-full h-[440px]"
   aria-label="LlamaIndex.TS Starter"
   aria-description="This is a starter example for LlamaIndex.TS, it shows the basic usage of the library."
-  src="https://stackblitz.com/github/run-llama/LlamaIndexTS/tree/main/examples?file=starter.ts"
+  src="https://stackblitz.com/github/run-llama/LlamaIndexTS/tree/main/examples?embed=1&file=starter.ts"
 />
+
+You'll need an OpenAI API key to run this example. You can retrieve it from [OpenAI](https://platform.openai.com/api-keys).

apps/next/src/content/docs/llamaindex/integration/lang-trace.mdx

@@ -2,7 +2,6 @@
 title: Langtrace
 description: Learn how to integrate LlamaIndex.TS with Langtrace.
 ---
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 Enhance your observability with Langtrace, a robust open-source tool supports OpenTelemetry and is designed to trace, evaluate, and manage LLM applications seamlessly. Langtrace integrates directly with LlamaIndex, offering detailed, real-time insights into performance metrics such as accuracy, evaluations, and latency.
 
@@ -10,19 +9,9 @@ Enhance your observability with Langtrace, a robust open-source tool supports Op
 
 - Self-host or sign-up and generate an API key using [Langtrace](https://www.langtrace.ai) Cloud
 
-<Tabs groupId="install-langtrase" items={["npm", "yarn", "pnpm"]} persist>
-	```shell tab="npm"
-	npm install @langtrase/typescript-sdk
-	```
-
-	```shell tab="yarn"
-	yarn add @langtrase/typescript-sdk
-	```
-
-	```shell tab="pnpm"
-	pnpm add @langtrase/typescript-sdk
-	```
-</Tabs>
+```package-install
+npm i @langtrase/typescript-sdk
+```
 
 ## Initialize
 

apps/next/src/content/docs/llamaindex/integration/open-llm-metry.mdx

@@ -2,27 +2,15 @@
 title: OpenLLMetry
 description: Learn how to integrate LlamaIndex.TS with OpenLLMetry.
 ---
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 [OpenLLMetry](https://github.com/traceloop/openllmetry-js) is an open-source project based on OpenTelemetry for tracing and monitoring
 LLM applications. It connects to [all major observability platforms](https://www.traceloop.com/docs/openllmetry/integrations/introduction) and installs in minutes.
 
 ### Usage Pattern
 
-
-<Tabs groupId="install-traceloop" items={["npm", "yarn", "pnpm"]} persist>
-	```shell tab="npm"
-	npm install @traceloop/node-server-sdk
-	```
-
-	```shell tab="yarn"
-	yarn add @traceloop/node-server-sdk
-	```
-
-	```shell tab="pnpm"
-	pnpm add @traceloop/node-server-sdk
-	```
-</Tabs>
+```package-install
+npm i @traceloop/node-server-sdk
+```
 
 ```js
 import * as traceloop from "@traceloop/node-server-sdk";