Release 0.9.10 (#1728)

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

.github/workflows/preview.yml

@@ -25,4 +25,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

@@ -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
 
@@ -150,7 +170,7 @@ jobs:
           done
       - name: Pack provider packages
         run: |
-          for dir in packages/providers/*; do
+          for dir in packages/providers/* packages/providers/storage/*; do
             if [ -d "$dir" ] && [ -f "$dir/package.json" ]; then
               echo "Packing $dir"
               pnpm pack --pack-destination ${{ runner.temp }} -C $dir

.husky/pre-commit

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

.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

@@ -41,8 +41,15 @@ pnpm install
 
 ### Build the packages
 
+You'll need Turbo to build the packages. If you don't have it, you can run it with `pnpx`.
+
+To build all packages, run:
+
 ```shell
 # Build all packages
+pnpx turbo build --filter "./packages/*"
+
+# Or if you have turbo installed, you can run:
 turbo build --filter "./packages/*"
 ```
 

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/storage/vectorStore/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,222 @@
 # @llamaindex/doc
 
+## 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
+
+- f02621e: Fix internal links between chapters
+- Updated dependencies [34faf48]
+- Updated dependencies [4df1fe6]
+- Updated dependencies [9456616]
+- Updated dependencies [d6c270e]
+- Updated dependencies [1892e1c]
+- Updated dependencies [1931bbc]
+  - llamaindex@0.8.32
+  - @llamaindex/core@0.4.21
+  - @llamaindex/cloud@2.0.22
+  - @llamaindex/openai@0.1.46
+  - @llamaindex/node-parser@0.0.22
+  - @llamaindex/readers@1.0.23
+
 ## 0.0.35
 
 ### Patch Changes

apps/next/next.config.mjs

@@ -5,8 +5,15 @@ const withMDX = createMDX();
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: true,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
   transpilePackages: ["monaco-editor"],
-  serverExternalPackages: ["@huggingface/transformers"],
+  serverExternalPackages: [
+    "@huggingface/transformers",
+    "twoslash",
+    "typescript",
+  ],
   webpack: (config, { isServer }) => {
     if (Array.isArray(config.target) && config.target.includes("web")) {
       config.target = ["web", "es2020"];

apps/next/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@llamaindex/doc",
-  "version": "0.0.35",
+  "version": "0.1.10",
   "private": true,
   "scripts": {
-    "build": "pnpm run build:docs && next build",
+    "postinstall": "fumadocs-mdx",
+    "prebuild": "pnpm run build:docs",
+    "build": "next build",
     "dev": "next dev",
     "start": "next start",
-    "postdev": "fumadocs-mdx",
-    "postbuild": "fumadocs-mdx && tsx scripts/post-build.mts",
-    "build:docs": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" typedoc && node ./scripts/generate-docs.mjs"
+    "postbuild": "tsx scripts/post-build.mts",
+    "build:docs": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" typedoc && tsx scripts/generate-docs.mts"
   },
   "dependencies": {
     "@icons-pack/react-simple-icons": "^10.1.0",
-    "@llamaindex/chat-ui": "0.0.9",
+    "@llamaindex/chat-ui": "0.2.0",
     "@llamaindex/cloud": "workspace:*",
     "@llamaindex/core": "workspace:*",
     "@llamaindex/node-parser": "workspace:*",
@@ -27,35 +28,35 @@
     "@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.0.15",
+    "fumadocs-docgen": "^2.0.0",
+    "fumadocs-mdx": "^11.5.6",
+    "fumadocs-openapi": "^6.3.0",
+    "fumadocs-twoslash": "^3.1.0",
+    "fumadocs-typescript": "^3.1.0",
+    "fumadocs-ui": "^15.0.15",
     "hast-util-to-jsx-runtime": "^2.3.2",
     "llamaindex": "workspace:*",
     "lucide-react": "^0.460.0",
-    "next": "15.0.3",
+    "next": "^15.2.1",
     "next-themes": "^0.4.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-icons": "^5.3.0",
     "react-monaco-editor": "^0.56.2",
-    "react-text-transition": "^3.1.0",
     "react-use-measure": "^2.1.1",
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
     "rimraf": "^6.0.1",
-    "shiki": "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",
@@ -66,27 +67,28 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@next/env": "^15.0.3",
+    "@next/env": "^15.2.1",
+    "@tailwindcss/postcss": "^4.0.9",
     "@types/mdx": "^2.0.13",
     "@types/node": "22.9.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
     "fast-glob": "^3.3.2",
     "gray-matter": "^4.0.3",
     "monaco-editor-webpack-plugin": "^7.1.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.3",
     "raw-loader": "^4.0.2",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.1.0",
     "remark-stringify": "^11.0.0",
-    "tailwindcss": "^3.4.15",
-    "tsx": "^4.19.2",
+    "tailwindcss": "^4.0.9",
+    "tsx": "^4.19.3",
     "typedoc": "0.27.4",
     "typedoc-plugin-markdown": "^4.3.1",
     "typedoc-plugin-merge-modules": "^6.1.0",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
   }
 }

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.mts

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

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/source.config.ts

@@ -2,10 +2,11 @@ import { rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
 import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
 import { defineConfig, defineDocs } from "fumadocs-mdx/config";
 import { transformerTwoslash } from "fumadocs-twoslash";
+import { createFileSystemTypesCache } from "fumadocs-twoslash/cache-fs";
 import rehypeKatex from "rehype-katex";
 import remarkMath from "remark-math";
 
-export const { docs, meta } = defineDocs({
+export const docs = defineDocs({
   dir: "./src/content/docs",
 });
 
@@ -20,7 +21,11 @@ export default defineConfig({
       },
       transformers: [
         ...(rehypeCodeDefaultOptions.transformers ?? []),
-        transformerTwoslash(),
+        transformerTwoslash({
+          typesCache: createFileSystemTypesCache({
+            dir: ".next/cache/twoslash",
+          }),
+        }),
         {
           name: "transformers:remove-notation-escape",
           code(hast) {

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

@@ -8,7 +8,7 @@ import {
 } from "@/components/infinite-providers";
 import { MagicMove } from "@/components/magic-move";
 import { NpmInstall } from "@/components/npm-install";
-import { TextEffect } from "@/components/text-effect";
+import { Supports } from "@/components/supports";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { LEGACY_DOCUMENT_URL } from "@/lib/const";
@@ -24,18 +24,18 @@ import { Suspense } from "react";
 export default function HomePage() {
   return (
     <main className="container mx-auto px-4 py-12">
-      <h1 className="text-4xl md:text-6xl font-bold text-center mb-4">
+      <h1 className="mb-4 text-center text-4xl font-bold md:text-6xl">
         Build context-augmented web apps using
         <br /> <span className="text-blue-500">LlamaIndex.TS</span>
       </h1>
-      <p className="text-xl text-center text-fd-muted-foreground mb-12 ">
+      <p className="text-fd-muted-foreground mb-12 text-center text-xl">
         LlamaIndex.TS is the JS/TS version of{" "}
         <a href="https://llamaindex.ai">LlamaIndex</a>, the framework for
         building agentic generative AI applications connected to your data.
       </p>
-      <div className="text-center text-lg text-fd-muted-foreground mb-12">
+      <div className="text-fd-muted-foreground mb-12 text-center text-lg">
         <span>Designed for building web applications in </span>
-        <TextEffect />
+        <Supports />
       </div>
 
       <div className="flex flex-wrap justify-center gap-4">
@@ -76,15 +76,19 @@ export default function HomePage() {
           >
             <MagicMove
               code={[
-                `import { OpenAI } from "llamaindex";
+                `import { OpenAI } from "@llamaindex/openai";
+
 const llm = new OpenAI();
 const response = await llm.complete({ prompt: "How are you?" });`,
-                `import { OpenAI } from "llamaindex";
+                `import { OpenAI } from "@llamaindex/openai";
+
 const llm = new OpenAI();
 const response = await llm.chat({
   messages: [{ content: "Tell me a joke.", role: "user" }],
 });`,
-                `import { OpenAI, ChatMemoryBuffer } from "llamaindex";
+                `import { ChatMemoryBuffer } from "llamaindex";
+import { OpenAI } from "@llamaindex/openai";
+
 const llm = new OpenAI({ model: 'gpt4o-turbo' });
 const buffer = new ChatMemoryBuffer({
   tokenLimit: 128_000,
@@ -94,7 +98,9 @@ const response = await llm.chat({
   messages: buffer.getMessages(),
   stream: true
 });`,
-                `import { OpenAIAgent, ChatMemoryBuffer } from "llamaindex";
+                `import { ChatMemoryBuffer } from "llamaindex";
+import { OpenAIAgent } from "@llamaindex/openai";
+
 const agent = new OpenAIAgent({
   llm,
   tools: [...myTools]
@@ -119,19 +125,20 @@ 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 { agent } from "llamaindex";
+import { OpenAI } from "@llamaindex/openai";
 
-const interpreterTool = FunctionTool.from(...);
-const systemPrompt = \`...\`;
+// using a previously created LlamaIndex index to query information from
+const queryTool = index.queryTool();
 
-const agent = new OpenAIAgent({
-  llm,
-  tools: [interpreterTool],
-  systemPrompt,
+const agent = agent({
+  llm: new OpenAI({
+    model: "gpt-4o",
+  }),
+  tools: [queryTool],
 });
 
-await agent.chat('...');`}
+await agent.run('...');`}
             lang="ts"
           />
         </Feature>
@@ -143,13 +150,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/docs/[[...slug]]/page.tsx

@@ -13,6 +13,8 @@ import { notFound } from "next/navigation";
 
 const { AutoTypeTable } = createTypeTable();
 
+export const revalidate = false;
+
 export default async function Page(props: {
   params: Promise<{ slug?: string[] }>;
 }) {
@@ -26,10 +28,10 @@ export default async function Page(props: {
     <DocsPage
       toc={page.data.toc}
       full={page.data.full}
+      lastUpdate={page.data.lastModified}
       editOnGithub={{
         owner: "run-llama",
         repo: "LlamaIndexTS",
-        sha: "main",
         path: `apps/next/src/content/docs/${page.file.path}`,
       }}
     >
@@ -64,6 +66,7 @@ export async function generateMetadata(props: {
 
   return createMetadata(
     metadataImage.withImage(page.slugs, {
+      metadataBase: new URL("https://ts.llamaindex.ai"),
       title: page.data.title,
       description: page.data.description,
       openGraph: {

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

@@ -22,7 +22,7 @@ export default function Layout({ children }: { children: ReactNode }) {
                 variant: "secondary",
                 size: "xs",
                 className:
-                  "md:flex-1 px-2 ms-2 gap-1.5 text-fd-muted-foreground rounded-full",
+                  "text-fd-muted-foreground ms-2 gap-1.5 rounded-full px-2 md:flex-1",
               }),
             )}
           >

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

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,62 @@
+import fg from "fast-glob";
+import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
+import { remarkInclude } from "fumadocs-mdx/config";
+import { remarkAutoTypeTable } from "fumadocs-typescript";
+import matter from "gray-matter";
+import * as fs from "node:fs/promises";
+import path from "node:path";
+import { remark } from "remark";
+import remarkGfm from "remark-gfm";
+import remarkMdx from "remark-mdx";
+import remarkStringify from "remark-stringify";
+
+export const revalidate = false;
+
+export async function GET() {
+  const files = await fg([
+    "./src/content/docs/**/*.mdx",
+    // remove generated openapi files
+    "!./src/content/docs/cloud/api/**/*",
+  ]);
+
+  const scan = files.map(async (file) => {
+    const fileContent = await fs.readFile(file);
+    const { content, data } = matter(fileContent.toString());
+
+    const dir = path.dirname(file).split(path.sep).at(4);
+    const category = {
+      llamaindex: "LlamaIndexTS Framework",
+      api: "LlamaIndexTS API",
+      cloud: "LlamaCloud Service",
+    }[dir ?? ""];
+
+    const processed = await processContent(file, content);
+    return `file: ${file}
+# ${category}: ${data.title}
+
+${data.description}
+        
+${processed}`;
+  });
+
+  const scanned = await Promise.all(scan);
+
+  return new Response(scanned.join("\n\n"));
+}
+
+async function processContent(path: string, content: string): Promise<string> {
+  const file = await remark()
+    .use(remarkMdx)
+    .use(remarkInclude)
+    .use(remarkGfm)
+    .use(remarkAutoTypeTable)
+    .use(remarkDocGen, { generators: [fileGenerator()] })
+    .use(remarkInstall, { persist: { id: "package-manager" } })
+    .use(remarkStringify)
+    .process({
+      path,
+      value: content,
+    });
+
+  return String(file);
+}

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

@@ -57,7 +57,7 @@ export const IDE = () => {
   const maxChars = useSlider();
   const useSetMaxChars = useSetSlider();
   return (
-    <div className="flex flex-col p-4 border-r max-h-96 overflow-scroll">
+    <div className="flex max-h-96 flex-col overflow-scroll border-r p-4">
       <div>
         <Label>Max Chars {maxChars}</Label>
         <Slider
@@ -113,7 +113,7 @@ const Preview = ({ text }: { text: string }) => {
       },
     },
   });
-  return <CodeBlock className="py-0 m-2">{rendered}</CodeBlock>;
+  return <CodeBlock className="m-2 py-0">{rendered}</CodeBlock>;
 };
 
 function ScrollToBottom() {
@@ -122,7 +122,7 @@ function ScrollToBottom() {
   return (
     !isAtBottom && (
       <button
-        className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
+        className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
         onClick={() => scrollToBottom()}
       />
     )
@@ -136,7 +136,7 @@ export const NodePreview = () => {
   const textChunks = useMemo(() => parser.splitText(code), [code, maxChars]);
   return (
     <StickToBottom
-      className="block relative max-h-96 overflow-scroll"
+      className="relative block max-h-96 overflow-scroll"
       resize="smooth"
       initial="smooth"
     >
@@ -154,7 +154,7 @@ export const CodeNodeParserDemo = () => {
   const isClient = useIsClient();
   if (!isClient) {
     return (
-      <div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
+      <div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
         <Skeleton className="h-96" />
         <Skeleton className="h-96" />
       </div>
@@ -165,13 +165,13 @@ export const CodeNodeParserDemo = () => {
       <CodeProvider>
         <Suspense
           fallback={
-            <div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
+            <div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
               <Skeleton className="h-96" />
               <Skeleton className="h-96" />
             </div>
           }
         >
-          <div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
+          <div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
             <IDE />
             <NodePreview />
           </div>

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

@@ -75,7 +75,7 @@ function ScrollToBottom() {
   return (
     !isAtBottom && (
       <button
-        className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
+        className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
         onClick={() => scrollToBottom()}
       />
     )
@@ -91,9 +91,9 @@ export function WorkflowStreamingDemo() {
   const [total, setTotal] = useState<number>(10);
 
   return (
-    <div className="flex flex-col items-start w-full gap-2">
-      <div className="flex flex-row justify-center items-center">
-        <div className="text-lg mr-2">Compute total</div>{" "}
+    <div className="flex w-full flex-col items-start gap-2">
+      <div className="flex flex-row items-center justify-center">
+        <div className="mr-2 text-lg">Compute total</div>{" "}
         <FlowInput value={total} onChange={(value) => setTotal(value)} />
       </div>
       <Button
@@ -141,7 +141,7 @@ export function WorkflowStreamingDemo() {
       >
         Start Workflow
       </Button>
-      <StickToBottom className="w-full flex flex-col gap-2 p-2 border border-gray-200 rounded-lg max-h-96 overflow-y-auto">
+      <StickToBottom className="flex max-h-96 w-full flex-col gap-2 overflow-y-auto rounded-lg border border-gray-200 p-2">
         <StickToBottom.Content className="flex flex-col gap-2">
           {ui}
         </StickToBottom.Content>

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/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/meta.json

@@ -2,5 +2,5 @@
   "title": "LlamaCloud",
   "description": "The Cloud framework for LLM",
   "root": true,
-  "pages": ["---Guide---", "index", "api"]
+  "pages": ["---Guide---", "index", "..."]
 }

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

@@ -5,4 +5,24 @@ title: Gemini Agent
 import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
 import CodeSourceGemini from "!raw-loader!../../../../../../../examples/gemini/agent.ts";
 
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/google
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/google
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/google
+	```
+</Tabs>
+
+## Source 
+
 <DynamicCodeBlock lang="ts" code={CodeSourceGemini} />

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

@@ -12,9 +12,8 @@ Here's a simple example of how to use the Context-Aware Agent:
 import {
   Document,
   VectorStoreIndex,
-  OpenAIContextAwareAgent,
-  OpenAI,
 } from "llamaindex";
+import { OpenAI, OpenAIContextAwareAgent } from "@llamaindex/openai";
 
 async function createContextAwareAgent() {
   // Create and index some documents
@@ -58,4 +57,3 @@ In this example, the Context-Aware Agent uses the retriever to fetch relevant co
 ## 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/local_llm.mdx

@@ -2,6 +2,8 @@
 title: Local LLMs
 ---
 
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
 LlamaIndex.TS supports OpenAI and [other remote LLM APIs](other_llms). You can also run a local LLM on your machine!
 
 ## Using a local model via Ollama
@@ -24,7 +26,23 @@ The first time you run it will also automatically download and install the model
 
 ### Switch the LLM in your code
 
-To tell LlamaIndex to use a local LLM, use the `Settings` object:
+To switch the LLM in your code, you first need to make sure to install the package for the Ollama model provider:
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install @llamaindex/ollama
+	```
+
+	```shell tab="yarn"
+	yarn add @llamaindex/ollama
+	```
+
+	```shell tab="pnpm"
+	pnpm add @llamaindex/ollama
+	```
+</Tabs>
+
+Then, to tell LlamaIndex to use a local LLM, use the `Settings` object:
 
 ```javascript
 Settings.llm = new Ollama({
@@ -34,7 +52,25 @@ Settings.llm = new Ollama({
 
 ### Use local embeddings
 
-If you're doing retrieval-augmented generation, LlamaIndex.TS will also call out to OpenAI to index and embed your data. To be entirely local, you can use a local embedding model like this:
+If you're doing retrieval-augmented generation, LlamaIndex.TS will also call out to OpenAI to index and embed your data. To be entirely local, you can use a local embedding model from Huggingface like this:
+
+First install the Huggingface model provider package: 
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install @llamaindex/huggingface
+	```
+
+	```shell tab="yarn"
+	yarn add @llamaindex/huggingface
+	```
+
+	```shell tab="pnpm"
+	pnpm add @llamaindex/huggingface
+	```
+</Tabs>
+
+And then set the embedding model in your code:
 
 ```javascript
 Settings.embedModel = new HuggingFaceEmbedding({

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

@@ -7,14 +7,36 @@ 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)
+If you don't want to use an API at all you can [run a local model](../../examples/local_llm).
+
+This example runs you through the process of setting up a Mistral model:
+
+
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/mistral
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/mistral
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/mistral
+	```
+</Tabs>
 
 ## Using another LLM
 
 You can specify what LLM LlamaIndex.TS will use on the `Settings` object, like this:
 
 ```typescript
-import { MistralAI, Settings } from "llamaindex";
+import { MistralAI } from "@llamaindex/mistral";
+import { Settings } from "llamaindex";
 
 Settings.llm = new MistralAI({
   model: "mistral-tiny",
@@ -29,7 +51,8 @@ You can see examples of other APIs we support by checking out "Available LLMs" i
 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";
+import { MistralAIEmbedding } from "@llamaindex/mistral";
+import { Settings } from "llamaindex";
 
 Settings.embedModel = new MistralAIEmbedding();
 ```

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

@@ -1,10 +1,12 @@
 ---
 title: Installation
-description: Install llamaindex by running a single command.
+description: How to install llamaindex packages.
 ---
 
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
+To install llamaindex, run the following command:
+
 <Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
 	```shell tab="npm"
 	npm install llamaindex
@@ -19,6 +21,25 @@ import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 	```
 </Tabs>
 
+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:
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install @llamaindex/openai
+	```
+
+	```shell tab="yarn"
+	yarn add @llamaindex/openai
+	```
+
+	```shell tab="pnpm"
+	pnpm add @llamaindex/openai
+	```
+</Tabs>
+
+Go to [Using other LLM APIs](/docs/llamaindex/examples/other_llms) to find out how to use other LLMs.
+
+
 ## What's next?
 
 <Cards>

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

@@ -70,10 +70,8 @@ In Cloudflare Worker and similar serverless JS environment, you need to be aware
 
 - 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.
+- 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/setup/node.mdx

@@ -3,6 +3,8 @@ title: With Node.js/Bun/Deno
 description: In this guide, you'll learn how to use LlamaIndex with Node.js, Bun, and Deno.
 ---
 
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
 ## Adding environment variables
 
 By default, LlamaIndex uses OpenAI provider, which requires an API key. You can set the `OPENAI_API_KEY` environment variable to authenticate with OpenAI.
@@ -22,6 +24,26 @@ 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:
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install gpt-tokenizer
+	```
+
+	```shell tab="yarn"
+	yarn add gpt-tokenizer
+	```
+
+	```shell tab="pnpm"
+	pnpm add gpt-tokenizer
+	```
+</Tabs>
+
+> Note: This only works for Node.js
+
 ## TypeScript support
 
 <Card

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

@@ -9,7 +9,7 @@ LlamaIndex.TS is written in TypeScript and designed to be used in TypeScript pro
 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'
+import { PromptTemplate } from 'llamaindex'
 const promptTemplate = new PromptTemplate({
   template: `Context information from multiple sources is below.
 ---------------------
@@ -29,7 +29,7 @@ promptTemplate.format({
 ```
 
 ```ts twoslash
-import { FunctionTool } from '@llamaindex/core/tools'
+import { FunctionTool } from 'llamaindex'
 import { z } from 'zod'
 
 // ---cut-before---

apps/next/src/content/docs/llamaindex/guide/agents/1_setup.mdx

@@ -15,12 +15,12 @@ In LlamaIndex, an agent is a semi-autonomous piece of software powered by an LLM
 You'll need to have a recent version of [Node.js](https://nodejs.org/en) installed. Then you can install LlamaIndex.TS by running
 
 ```bash
-npm install llamaindex
+npm install llamaindex @llamaindex/openai @llamaindex/readers @llamaindex/huggingface
 ```
 
 ## Choose your model
 
-By default we'll be using OpenAI with GPT-4, as it's a powerful model and easy to get started with. If you'd prefer to run a local model, see [using a local model](local_model).
+By default we'll be using OpenAI with GPT-4, as it's a powerful model and easy to get started with. If you'd prefer to run a local model, see [using a local model](3_local_model).
 
 ## Get an OpenAI API key
 
@@ -36,4 +36,4 @@ We'll use `dotenv` to pull the API key out of that .env file, so also run:
 npm install dotenv
 ```
 
-Now you're ready to [create your agent](create_agent).
+Now you're ready to [create your agent](2_create_agent).

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

@@ -31,8 +31,10 @@ First we'll need to pull in our dependencies. These are:
 - Dotenv to load our API key from the .env file
 
 ```javascript
-import { OpenAI, FunctionTool, OpenAIAgent, Settings } from "llamaindex";
+import { FunctionTool, Settings } from "llamaindex";
+import { OpenAI, OpenAIAgent } from "@llamaindex/openai";
 import "dotenv/config";
+import { z } from "zod";
 ```
 
 ### Initialize your LLM
@@ -85,20 +87,14 @@ This is the most complicated part of creating an agent. We need to define a `Fun
 const tool = FunctionTool.from(sumNumbers, {
   name: "sumNumbers",
   description: "Use this function to sum two numbers",
-  parameters: {
-    type: "object",
-    properties: {
-      a: {
-        type: "number",
-        description: "First number to sum",
-      },
-      b: {
-        type: "number",
-        description: "Second number to sum",
-      },
-    },
-    required: ["a", "b"],
-  },
+  parameters: z.object({
+    a: z.number({
+      description: "First number to sum",
+    }),
+    b: z.number({
+      description: "Second number to sum",
+    }),
+  }),
 });
 ```
 
@@ -177,5 +173,5 @@ The second piece of output is the response from the LLM itself, where the `messa
 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](local_model)
-- Move on to [add Retrieval-Augmented Generation to your agent](agentic_rag)
+- [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

@@ -89,4 +89,4 @@ You can use a ReActAgent instead of an OpenAIAgent in any of the further example
 
 ### Next steps
 
-Now you've got a local agent, you can [add Retrieval-Augmented Generation to your agent](agentic_rag).
+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/agents/4_agentic_rag.mdx

@@ -13,22 +13,34 @@ To learn more about RAG, we recommend this [introduction](https://docs.llamainde
 
 We're going to start with the same agent we [built in step 1](https://github.com/run-llama/ts-agents/blob/main/1_agent/agent.ts), but make a few changes. You can find the finished version [in the repository](https://github.com/run-llama/ts-agents/blob/main/2_agentic_rag/agent.ts).
 
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/openai @llamaindex/huggingface 
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/openai @llamaindex/huggingface 
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/openai @llamaindex/huggingface 
+	```
+</Tabs>
+
+
 ### New dependencies
 
 We'll be bringing in `SimpleDirectoryReader`, `HuggingFaceEmbedding`, `VectorStoreIndex`, and `QueryEngineTool`, `OpenAIContextAwareAgent` from LlamaIndex.TS, as well as the dependencies we previously used.
 
 ```javascript
-import {
-  OpenAI,
-  FunctionTool,
-  OpenAIAgent,
-  OpenAIContextAwareAgent,
-  Settings,
-  SimpleDirectoryReader,
-  HuggingFaceEmbedding,
-  VectorStoreIndex,
-  QueryEngineTool,
-} from "llamaindex";
+import { FunctionTool, QueryEngineTool, Settings, VectorStoreIndex } from "llamaindex";
+import { OpenAI, OpenAIAgent } from "@llamaindex/openai";
+import { HuggingFaceEmbedding } from "@llamaindex/huggingface";
+import { SimpleDirectoryReader } from "@llamaindex/readers/directory";
 ```
 
 ### Add an embedding model
@@ -153,4 +165,4 @@ The `OpenAIContextAwareAgent` approach simplifies the setup by allowing you to d
 
 On the other hand, using the `QueryEngineTool` offers more flexibility and power. This method allows for customization in how queries are constructed and executed, enabling you to query data from various storages and process them in different ways. However, this added flexibility comes with increased complexity and response time due to the separate tool call and queryEngine generating tool output by LLM that is then passed to the agent.
 
-So now we have an agent that can index complicated documents and answer questions about them. Let's [combine our math agent and our RAG agent](rag_and_tools)!
+So now we have an agent that can index complicated documents and answer questions about them. Let's [combine our math agent and our RAG agent](5_rag_and_tools)!

apps/next/src/content/docs/llamaindex/guide/agents/5_rag_and_tools.mdx

@@ -2,7 +2,7 @@
 title: A RAG agent that does math
 ---
 
-In [our third iteration of the agent](https://github.com/run-llama/ts-agents/blob/main/3_rag_and_tools/agent.ts) we've combined the two previous agents, so we've defined both `sumNumbers` and a `QueryEngineTool` and created an array of two tools:
+In [our third iteration of the agent](https://github.com/run-llama/ts-agents/blob/main/3_rag_and_tools/agent.ts) we've combined the two previous agents, so we've defined both `sumNumbers` and a `QueryEngineTool` and created an array of two tools. The tools support both Zod and JSON Schema for parameter definition:
 
 ```javascript
 // define the query engine as a tool
@@ -17,24 +17,42 @@ const tools = [
   FunctionTool.from(sumNumbers, {
     name: "sumNumbers",
     description: "Use this function to sum two numbers",
-    parameters: {
-      type: "object",
-      properties: {
-        a: {
-          type: "number",
-          description: "First number to sum",
-        },
-        b: {
-          type: "number",
-          description: "Second number to sum",
-        },
-      },
-      required: ["a", "b"],
-    },
+    parameters: z.object({
+      a: z.number({
+        description: "First number to sum",
+      }),
+      b: z.number({
+        description: "Second number to sum",
+      }),
+    }),
   }),
 ];
 ```
 
+You can also use JSON Schema to define the tool parameters as an alternative to Zod.
+
+```javascript
+FunctionTool.from(sumNumbers, {
+  name: "sumNumbers",
+  description: "Use this function to sum two numbers",
+  parameters: {
+    type: "object",
+    properties: {
+      a: {
+        type: "number",
+        description: "First number to sum",
+      },
+      b: {
+        type: "number",
+        description: "Second number to sum",
+      },
+    },
+    required: ["a", "b"],
+  },
+}),
+```
+
+
 These tool descriptions are identical to the ones we previously defined. Now let's ask it 3 questions in a row:
 
 ```javascript
@@ -127,4 +145,4 @@ In the final tool call, it used the `sumNumbers` function to add the two budgets
 }
 ```
 
-Great! Now let's improve accuracy by improving our parsing with [LlamaParse](llamaparse).
+Great! Now let's improve accuracy by improving our parsing with [LlamaParse](6_llamaparse).

apps/next/src/content/docs/llamaindex/guide/agents/6_llamaparse.mdx

@@ -17,4 +17,4 @@ const documents = await reader.loadData("../data/sf_budget_2023_2024.pdf");
 
 Now you will be able to ask more complicated questions of the same PDF and get better results. You can find this code [in our repo](https://github.com/run-llama/ts-agents/blob/main/4_llamaparse/agent.ts).
 
-Next up, let's persist our embedded data so we don't have to re-parse every time by [using a vector store](qdrant).
+Next up, let's persist our embedded data so we don't have to re-parse every time by [using a vector store](7_qdrant).

apps/next/src/content/docs/llamaindex/guide/agents/7_qdrant.mdx

@@ -65,13 +65,13 @@ Since parsing a PDF can be slow, especially a large one, using the pre-parsed ch
 
 In this guide you've learned how to
 
-- [Create an agent](create_agent)
+- [Create an agent](2_create_agent)
 - Use remote LLMs like GPT-4
-- [Use local LLMs like Mixtral](local_model)
-- [Create a RAG query engine](agentic_rag)
-- [Turn functions and query engines into agent tools](rag_and_tools)
+- [Use local LLMs like Mixtral](3_local_model)
+- [Create a RAG query engine](4_agentic_rag)
+- [Turn functions and query engines into agent tools](5_rag_and_tools)
 - Combine those tools
-- [Enhance your parsing with LlamaParse](llamaparse)
+- [Enhance your parsing with LlamaParse](6_llamaparse)
 - Persist your data in a vector store
 
 The next steps are up to you! Try creating more complex functions and query engines, and set your agent loose on the world.

apps/next/src/content/docs/llamaindex/guide/chat/chat.mdx

@@ -3,8 +3,6 @@ title: Using API Route
 description: Chat interface for your LlamaIndexTS application using API Route
 ---
 import { ChatDemo } from '../../../../../components/demo/chat/api/demo';
-import "@llamaindex/chat-ui/styles/code.css";
-import "@llamaindex/chat-ui/styles/katex.css";
 
 Using [chat-ui](https://github.com/run-llama/chat-ui), it's easy to add a chat interface to your LlamaIndexTS application.
 You just need to create an API route that provides an `api/chat` endpoint and a chat component to consume the API.

apps/next/src/content/docs/llamaindex/guide/chat/install.mdx

@@ -0,0 +1,22 @@
+---
+title: Install @llamaindex/chat
+description: Chat interface for your LlamaIndexTS application
+---
+
+## Quick Start
+
+You can quickly add a chatbot to your project by using Shadcn CLI command:
+
+```sh
+npx shadcn@latest add https://ui.llamaindex.ai/r/chat.json
+```
+
+## Manual Installation
+
+To install the package, run the following command in your project directory:
+
+```sh
+npm install @llamaindex/chat-ui
+```
+
+For more information, check out the [github.comrun-llama/chat-ui](https://github.com/run-llama/chat-ui)

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

@@ -1,6 +1,6 @@
 {
-  "title": "Chat-UI",
+  "title": "Chat UI",
   "description": "Use chat-ui to add a chat interface to your LlamaIndexTS application.",
   "defaultOpen": false,
-  "pages": ["chat", "rsc"]
+  "pages": ["install", "chat", "rsc"]
 }

apps/next/src/content/docs/llamaindex/guide/chat/rsc.mdx

@@ -3,8 +3,6 @@ title: Using Next.js RSC
 description: Chat interface for your LlamaIndexTS application using Next.js RSC
 ---
 import { ChatDemoRSC } from '../../../../../components/demo/chat/rsc/demo';
-import "@llamaindex/chat-ui/styles/code.css";
-import "@llamaindex/chat-ui/styles/katex.css";
 
 Using [chat-ui](https://github.com/run-llama/chat-ui), it's easy to add a chat interface to your LlamaIndexTS application using [Next.js RSC](https://nextjs.org/docs/app/building-your-application/rendering/server-components) and [Vercel AI RSC](https://sdk.vercel.ai/docs/ai-sdk-rsc/overview).
 

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

@@ -10,7 +10,7 @@ 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`
+		If you want to use the reader module, you need to install `@llamaindex/readers`
 
 		<Tabs groupId="install-llamaindex" items={["npm", "yarn", "pnpm"]} persist>
 			```shell tab="npm"
@@ -31,72 +31,73 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
 
 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>
+```ts twoslash 
+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
+```
 
 ## 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 
+import { SimpleDirectoryReader } from "@llamaindex/readers/directory";
 
-	```ts twoslash tab="llamaindex"
-	import { SimpleDirectoryReader } from "llamaindex";
-
-	const reader = new SimpleDirectoryReader()
-	const documents = await reader.loadData("./data")
-	//    ^?
+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())
+//    ^?
+```
 
 
-	const texts = documents.map(doc => doc.getText())
-	//    ^?
-	```
+## Tips when using in non-Node.js environments
+
+When using `@llamaindex/readers` in a non-Node.js environment (such as Vercel Edge, Cloudflare Workers, etc.)
+Some classes are not exported from top-level entry file.
+
+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`).
+
+If you need any of those classes, you have to import them instead directly through their file path in the package.
+
+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/directory";
+import { LlamaParseReader } from "@llamaindex/cloud";
+
+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 explicitly 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
 
-</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>
+```shell 
+node --import @llamaindex/readers/node ./script.js
+```
 
 ```ts
 import csv from './path/to/data.csv';

apps/next/src/content/docs/llamaindex/guide/loading/node-parser.mdx

@@ -15,7 +15,7 @@ By default, we will use `Settings.nodeParser` to split the document into nodes.
 
 ```ts twoslash
 import { TextFileReader } from '@llamaindex/readers/text'
-import { SentenceSplitter } from '@llamaindex/core/node-parser';
+import { SentenceSplitter } from 'llamaindex';
 import { Settings } from 'llamaindex';
 
 const nodeParser = new SentenceSplitter();
@@ -28,7 +28,7 @@ Settings.nodeParser = nodeParser;
 The underlying text splitter will split text by sentences. It can also be used as a standalone module for splitting raw text.
 
 ```ts twoslash
-import { SentenceSplitter } from "@llamaindex/core/node-parser";
+import { SentenceSplitter } from "llamaindex";
 
 const splitter = new SentenceSplitter({ chunkSize: 1 });
 
@@ -42,7 +42,7 @@ The `MarkdownNodeParser` is a more advanced `NodeParser` that can handle markdow
 
 <Tabs items={["with reader", "with node:fs"]}>
 	```ts twoslash tab="with reader"
-	import { MarkdownNodeParser } from "@llamaindex/core/node-parser";
+	import { MarkdownNodeParser } from "llamaindex";
 	import { MarkdownReader } from '@llamaindex/readers/markdown'
 
 	const reader = new MarkdownReader();
@@ -56,8 +56,7 @@ The `MarkdownNodeParser` is a more advanced `NodeParser` that can handle markdow
 
 	```ts twoslash tab="with node:fs"
 	import fs from 'node:fs/promises';
-	import { MarkdownNodeParser } from "@llamaindex/core/node-parser";
-	import { Document } from '@llamaindex/core/schema';
+	import { MarkdownNodeParser, Document } from "llamaindex";
 
 	const markdownNodeParser = new MarkdownNodeParser();
 	const text = await fs.readFile('path/to/file.md', 'utf-8');
@@ -82,7 +81,7 @@ It will split the code by AST nodes and then parse the nodes into a `Document` o
 	import TS from "tree-sitter-typescript";
 
 	const parser = new Parser();
-	parser.setLanguage(TS.typescript);
+	parser.setLanguage(TS.typescript as Parser.Language);
 	const codeSplitter = new CodeSplitter({
 		getParser: () => parser,
 	});
@@ -100,7 +99,7 @@ It will split the code by AST nodes and then parse the nodes into a `Document` o
 	import TS from "tree-sitter-typescript";
 
 	const parser = new Parser();
-	parser.setLanguage(TS.typescript);
+	parser.setLanguage(TS.typescript as Parser.Language);
 	const codeSplitter = new CodeSplitter({
 	  getParser: () => parser,
 	});

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

@@ -20,5 +20,5 @@ LlamaIndex.TS provides tools for beginners, advanced users, and everyone in betw
   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"
 />

apps/next/src/content/docs/llamaindex/integration/vercel.mdx

@@ -69,7 +69,7 @@ streamText({
 For production deployments, you can use LlamaCloud to store and manage your documents:
 
 ```typescript
-import { LlamaCloudIndex } from "llamaindex";
+import { LlamaCloudIndex } from "@llamaindex/cloud";
 
 // Create a LlamaCloud index
 const index = await LlamaCloudIndex.fromDocuments({

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

@@ -7,6 +7,7 @@
     "what-is-llamaindex",
     "index",
     "getting_started",
+    "migration",
     "guide",
     "examples",
     "modules",

apps/next/src/content/docs/llamaindex/migration/0.8-to-0.9.mdx

@@ -0,0 +1,97 @@
+---
+title: Migrating from v0.8 to v0.9
+---
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+Version 0.9 of LlamaIndex.TS introduces significant architectural changes to improve package size and runtime compatibility. The main goals of this release are:
+
+1. Reduce the package size of the main `llamaindex` package by moving dependencies into provider packages, making it more suitable for serverless environments
+2. Enable consistent code across different environments by using unified imports (no separate imports for Node.js and Edge runtimes)
+
+## Major Changes
+
+### Installing Provider Packages
+
+In v0.9, you need to explicitly install the provider packages you want to use. The main `llamaindex` package no longer includes these dependencies by default.
+
+### Updating Imports
+
+You'll need to update your imports to get classes directly from their respective provider packages. Here's how to migrate different components:
+
+### 1. AI Model Providers
+
+Previously:
+```typescript
+import { OpenAI } from "llamaindex";
+```
+
+Now:
+```typescript
+import { OpenAI } from "@llamaindex/openai";
+```
+
+> Note: This examples requires installing the `@llamaindex/openai` package: 
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install @llamaindex/openai
+	```
+
+	```shell tab="yarn"
+	yarn add @llamaindex/openai
+	```
+
+	```shell tab="pnpm"
+	pnpm add @llamaindex/openai
+	```
+</Tabs>
+
+For more details on available AI model providers and their configuration, see the [LLMs documentation](/docs/llamaindex/modules/llms) and the [Embedding Models documentation](/docs/llamaindex/modules/embeddings).
+
+### 2. Storage Providers
+
+Previously:
+```typescript
+import { PineconeVectorStore } from "llamaindex";
+```
+
+Now:
+```typescript
+import { PineconeVectorStore } from "@llamaindex/pinecone";
+```
+
+For more information about available storage options, refer to the [Data Stores documentation](/docs/llamaindex/modules/data_stores).
+
+### 3. Data Loaders
+
+Previously:
+```typescript
+import { SimpleDirectoryReader } from "llamaindex";
+```
+
+Now:
+```typescript
+import { SimpleDirectoryReader } from "@llamaindex/readers/directory";
+```
+
+For more details about available data loaders and their usage, check the [Loading Data](/docs/llamaindex/guide/loading).
+
+### 4. Prefer using `llamaindex` instead of `@llamaindex/core`
+
+`llamaindex` is now re-exporting most of `@llamaindex/core`. To simplify imports, just use `import { ... } from "llamaindex"` instead of `import { ... } from "@llamaindex/core"`. This is possible because `llamaindex` is now a smaller package.
+
+We might change imports internally in `@llamaindex/core` in the future. Let us know if you're missing something. 
+
+## Benefits of the Changes
+
+- **Smaller Bundle Size**: By moving dependencies to separate packages, your application only includes the features you actually use
+- **Runtime Consistency**: The same code works across different environments without environment-specific imports
+- **Improved Serverless Support**: Reduced package size makes it easier to deploy to serverless environments with size limitations
+
+## Need Help?
+
+If you encounter any issues during migration, please:
+1. Check our [GitHub repository](https://github.com/run-llama/LlamaIndexTS) for the latest updates
+2. Join our [Discord community](https://discord.gg/dGcwcsnxhU) for support
+3. Open an issue on GitHub if you find a bug or have a feature request

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

@@ -0,0 +1,5 @@
+{
+  "title": "Migration",
+  "description": "Migration between different versions",
+  "pages": ["0.8-to-0.9"]
+}

apps/next/src/content/docs/llamaindex/modules/agent_workflow.mdx

@@ -0,0 +1,121 @@
+---
+title: Agent Workflow
+---
+
+import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
+import CodeSource from "!raw-loader!../../../../../../../examples/agentworkflow/blog-writer.ts";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+Agent Workflows are a powerful system that enables you to create and orchestrate one or multiple agents with tools to perform specific tasks. It's built on top of the base `Workflow` system and provides a streamlined interface for agent interactions.
+
+## Usage
+
+### Single Agent Workflow
+
+The simplest use case is creating a single agent with specific tools. Here's an example of creating an assistant that tells jokes:
+
+```typescript
+import { agent, FunctionTool } from "llamaindex";
+import { OpenAI } from "@llamaindex/openai";
+
+// Define a joke-telling tool
+const jokeTool = FunctionTool.from(
+  () => "Baby Llama is called cria",
+  {
+    name: "joke",
+    description: "Use this tool to get a joke",
+  }
+);
+
+// Create an single agent workflow with the tool
+const workflow = agent({
+  tools: [jokeTool],
+  llm: new OpenAI({
+    model: "gpt-4o-mini",
+  }),
+});
+
+// Run the workflow
+const result = await workflow.run("Tell me something funny");
+console.log(result); // Baby Llama is called cria
+```
+
+### Event Streaming
+
+Agent Workflows provide a unified interface for event streaming, making it easy to track and respond to different events during execution:
+
+```typescript
+import { AgentToolCall, AgentStream } from "llamaindex";
+
+// Get the workflow execution context
+const context = workflow.run("Tell me something funny");
+
+// Stream and handle events
+for await (const event of context) {
+  if (event instanceof AgentToolCall) {
+    console.log(`Tool being called: ${event.data.toolName}`);
+  }
+  if (event instanceof AgentStream) {
+    process.stdout.write(event.data.delta);
+  }
+}
+```
+
+### Multi-Agent Workflow
+
+An Agent Workflow can orchestrate multiple agents, enabling complex interactions and task handoffs. Each agent in a multi-agent workflow requires:
+
+- `name`: Unique identifier for the agent
+- `description`: Purpose description used for task routing
+- `tools`: Array of tools the agent can use
+- `canHandoffTo` (optional): Array of agent names or agent instances that this agent can delegate tasks to
+
+Here's an example of a multi-agent system that combines joke-telling and weather information:
+
+```typescript
+import { multiAgent, agent, FunctionTool } from "llamaindex";
+import { OpenAI } from "@llamaindex/openai";
+import { z } from "zod";
+
+// Create a weather agent
+const weatherAgent = agent({
+  name: "WeatherAgent",
+  description: "Provides weather information for any city",
+  tools: [
+    FunctionTool.from(
+      ({ city }: { city: string }) => `The weather in ${city} is sunny`,
+      {
+        name: "fetchWeather",
+        description: "Get weather information for a city",
+        parameters: z.object({
+          city: z.string(),
+        }),
+      }
+    ),
+  ],
+  llm: new OpenAI({ model: "gpt-4o-mini" }),
+});
+
+// Create a joke-telling agent
+const jokeAgent = agent({
+  name: "JokeAgent",
+  description: "Tells jokes and funny stories",
+  tools: [jokeTool], // Using the joke tool defined earlier
+  llm: new OpenAI({ model: "gpt-4o-mini" }),
+  canHandoffTo: [weatherAgent], // Can hand off to the weather agent
+});
+
+// Create the multi-agent workflow
+const workflow = multiAgent({
+  agents: [jokeAgent, weatherAgent],
+  rootAgent: jokeAgent, // Start with the joke agent
+});
+
+// Run the workflow
+const result = await workflow.run(
+  "Give me a morning greeting with a joke and the weather in San Francisco"
+);
+```
+
+The workflow will coordinate between agents, allowing them to handle different aspects of the request and hand off tasks when appropriate.
+

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

@@ -12,9 +12,26 @@ const chatEngine = new ContextChatEngine({ retriever });
 const response = await chatEngine.chat({ message: query });
 ```
 
+In short, you can use the chat engine by calling `index.asChatEngine()`. It will return a `ContextChatEngine` to start chatting.
+
+```typescript
+const chatEngine = index.asChatEngine();
+```
+
+You can also pass in options to the chat engine.
+
+```typescript
+const chatEngine = index.asChatEngine({
+  similarityTopK: 5,
+  systemPrompt: "You are a helpful assistant.",
+});
+```
+
+
 The `chat` function also supports streaming, just add `stream: true` as an option:
 
 ```typescript
+const chatEngine = index.asChatEngine();
 const stream = await chatEngine.chat({ message: query, stream: true });
 for await (const chunk of stream) {
   process.stdout.write(chunk.response);

apps/next/src/content/docs/llamaindex/modules/data_loaders/json.mdx

@@ -6,10 +6,28 @@ A simple JSON data loader with various options.
 Either parses the entire string, cleaning it and treat each line as an embedding or performs a recursive depth-first traversal yielding JSON paths.
 Supports streaming of large JSON data using [@discoveryjs/json-ext](https://github.com/discoveryjs/json-ext)
 
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/readers
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/readers
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/readers
+	```
+</Tabs>
+
 ## Usage
 
 ```ts
-import { JSONReader } from "llamaindex";
+import { JSONReader } from "@llamaindex/readers/json";
 
 const file = "../../PATH/TO/FILE";
 const content = new TextEncoder().encode("JSON_CONTENT");

apps/next/src/content/docs/llamaindex/modules/data_loaders/llama_parse/images.mdx

@@ -4,6 +4,24 @@ title: Image Retrieval
 
 LlamaParse `json` mode supports extracting any images found in a page object by using the `getImages` function. They are downloaded to a local folder and can then be sent to a multimodal LLM for further processing.
 
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/cloud @llamaindex/openai
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/cloud @llamaindex/openai
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/cloud @llamaindex/openai
+	```
+</Tabs>
+
 ## Usage
 
 We use the `getImages` method to input our array of JSON objects, download the images to a specified folder and get a list of ImageNodes.
@@ -19,14 +37,10 @@ const imageDicts = await reader.getImages(jsonObjs, "images");
 You can create an index across both text and image nodes by requesting alternative text for the image from a multimodal LLM.
 
 ```ts
-import {
-  Document,
-  ImageNode,
-  LlamaParseReader,
-  OpenAI,
-  VectorStoreIndex,
-} from "llamaindex";
-import { createMessageContent } from "llamaindex/synthesizers/utils";
+import { Document, ImageNode, VectorStoreIndex } from "llamaindex";
+import { LlamaParseReader } from "@llamaindex/cloud";
+import { OpenAI } from "@llamaindex/openai";
+import { createMessageContent } from "llamaindex";
 
 const reader = new LlamaParseReader();
 async function main() {

apps/next/src/content/docs/llamaindex/modules/data_loaders/llama_parse/json_mode.mdx

@@ -4,12 +4,32 @@ title: JSON Mode
 
 In JSON mode, LlamaParse will return a data structure representing the parsed object.
 
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/cloud
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/cloud
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/cloud
+	```
+</Tabs>
+
 ## Usage
 
 For Json mode, you need to use `loadJson`. The `resultType` is automatically set with this method.
 More information about indexing the results on the next page.
 
 ```ts
+import { LlamaParseReader } from "@llamaindex/cloud";
+
 const reader = new LlamaParseReader();
 async function main() {
   // Load the file and return an array of json objects
@@ -59,7 +79,8 @@ All Readers share a `loadData` method with `SimpleDirectoryReader` that promises
 However, a simple work around is to create a new reader class that extends `LlamaParseReader` and adds a new method or overrides `loadData`, wrapping around JSON mode, extracting the required values, and returning a Document object.
 
 ```ts
-import { LlamaParseReader, Document } from "llamaindex";
+import { Document } from "llamaindex";
+import { LlamaParseReader } from "@llamaindex/cloud";
 
 class LlamaParseReaderWithJson extends LlamaParseReader {
   // Override the loadData method

apps/next/src/content/docs/llamaindex/modules/data_stores/doc_stores/index.mdx

@@ -11,6 +11,38 @@ Document stores contain ingested document chunks, i.e. [Node](/docs/llamaindex/m
 
 Check the [LlamaIndexTS Github](https://github.com/run-llama/LlamaIndexTS) for the most up to date overview of integrations.
 
+## Using PostgreSQL as Document Store
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/postgres
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/postgres
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/postgres
+	```
+</Tabs>
+
+You can configure the `schemaName`, `tableName`, `namespace`, and
+`connectionString`. If a `connectionString` is not
+provided, it will use the environment variables `PGHOST`, `PGUSER`,
+`PGPASSWORD`, `PGDATABASE` and `PGPORT`.
+
+```typescript
+import { Document, VectorStoreIndex, storageContextFromDefaults } from "llamaindex";
+import { PostgresDocumentStore } from "@llamaindex/postgres";
+
+const storageContext = await storageContextFromDefaults({
+  docStore: new PostgresDocumentStore(),
+});
+```
+
 ## API Reference
 
 - [BaseDocumentStore](/docs/api/classes/BaseDocumentStore)

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

@@ -5,9 +5,13 @@ title: Storage
 Storage in LlamaIndex.TS works automatically once you've configured a
 `StorageContext` object.
 
+Per default a local directory is used for storage. Depening on the storage type (i.e. doc stores, index stores or vector stores), you can configure a different persistence layer. 
+Most commonly a vector database is used as vector store. 
+
+
 ## Local Storage
 
-You can configure the `persistDir` and attach it to an index.
+You can configure the `persistDir` to define where to store the data locally.
 
 ```typescript
 import {
@@ -26,33 +30,6 @@ const index = await VectorStoreIndex.fromDocuments([document], {
 });
 ```
 
-## PostgreSQL Storage
-
-You can configure the `schemaName`, `tableName`, `namespace`, and
-`connectionString`. If a `connectionString` is not
-provided, it will use the environment variables `PGHOST`, `PGUSER`,
-`PGPASSWORD`, `PGDATABASE` and `PGPORT`.
-
-```typescript
-import {
-  Document,
-  VectorStoreIndex,
-  PostgresDocumentStore,
-  PostgresIndexStore,
-  storageContextFromDefaults,
-} from "llamaindex";
-
-const storageContext = await storageContextFromDefaults({
-  docStore: new PostgresDocumentStore(),
-  indexStore: new PostgresIndexStore(),
-});
-
-const document = new Document({ text: "Test Text" });
-const index = await VectorStoreIndex.fromDocuments([document], {
-  storageContext,
-});
-```
-
 ## API Reference
 
 - [StorageContext](/docs/api/interfaces/StorageContext)

apps/next/src/content/docs/llamaindex/modules/data_stores/index_stores/index.mdx

@@ -11,6 +11,38 @@ Index stores are underlying storage components that contain metadata(i.e. inform
 
 Check the [LlamaIndexTS Github](https://github.com/run-llama/LlamaIndexTS) for the most up to date overview of integrations.
 
+## Using PostgreSQL as Index Store
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/postgres
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/postgres
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/postgres
+	```
+</Tabs>
+
+You can configure the `schemaName`, `tableName`, `namespace`, and
+`connectionString`. If a `connectionString` is not
+provided, it will use the environment variables `PGHOST`, `PGUSER`,
+`PGPASSWORD`, `PGDATABASE` and `PGPORT`.
+
+```typescript
+import { Document, VectorStoreIndex, storageContextFromDefaults } from "llamaindex";
+import { PostgresIndexStore } from "@llamaindex/postgres";
+
+const storageContext = await storageContextFromDefaults({
+  indexStore: new PostgresIndexStore(),
+});
+```
+
 ## API Reference
 
 - [BaseIndexStore](/docs/api/classes/BaseIndexStore)

apps/next/src/content/docs/llamaindex/modules/data_stores/vector_stores/index.mdx

@@ -21,4 +21,4 @@ Check the [LlamaIndexTS Github](https://github.com/run-llama/LlamaIndexTS) for t
 
 ## API Reference
 
-- [VectorStoreBase](/docs/api/classes/VectorStoreBase)
+- [BaseVectorStore](/docs/api/classes/BaseVectorStore)

apps/next/src/content/docs/llamaindex/modules/data_stores/vector_stores/qdrant.mdx

@@ -11,11 +11,30 @@ docker pull qdrant/qdrant
 docker run -p 6333:6333 qdrant/qdrant
 ```
 
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/qdrant
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/qdrant
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/qdrant
+	```
+</Tabs>
+
 ## Importing the modules
 
 ```ts
 import fs from "node:fs/promises";
-import { Document, VectorStoreIndex, QdrantVectorStore } from "llamaindex";
+import { Document, VectorStoreIndex } from "llamaindex";
+import { QdrantVectorStore } from "@llamaindex/qdrant";
 ```
 
 ## Load the documents
@@ -60,7 +79,8 @@ console.log(response.toString());
 
 ```ts
 import fs from "node:fs/promises";
-import { Document, VectorStoreIndex, QdrantVectorStore } from "llamaindex";
+import { Document, VectorStoreIndex } from "llamaindex";
+import { QdrantVectorStore } from "@llamaindex/qdrant";
 
 async function main() {
   const path = "node_modules/llamaindex/examples/abramov.txt";

apps/next/src/content/docs/llamaindex/modules/documents_and_nodes/metadata_extraction.mdx

@@ -14,13 +14,8 @@ Our metadata extractor modules include the following "feature extractors":
 Then you can chain the `Metadata Extractors` with the `IngestionPipeline` to extract metadata from a set of documents.
 
 ```ts
-import {
-  IngestionPipeline,
-  TitleExtractor,
-  QuestionsAnsweredExtractor,
-  Document,
-  OpenAI,
-} from "llamaindex";
+import { Document, IngestionPipeline, TitleExtractor, QuestionsAnsweredExtractor } from "llamaindex";
+import { OpenAI } from "@llamaindex/openai";
 
 async function main() {
   const pipeline = new IngestionPipeline({

apps/next/src/content/docs/llamaindex/modules/embeddings/available_embeddings/deepinfra.mdx

@@ -5,13 +5,27 @@ title: DeepInfra
 To use DeepInfra embeddings, you need to import `DeepInfraEmbedding` from llamaindex.
 Check out available embedding models [here](https://deepinfra.com/models/embeddings).
 
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/deepinfra
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/deepinfra
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/deepinfra
+	```
+</Tabs>
+
 ```ts
-import {
-  DeepInfraEmbedding,
-  Settings,
-  Document,
-  VectorStoreIndex,
-} from "llamaindex";
+import { Document, Settings, VectorStoreIndex } from "llamaindex";
+import { DeepInfraEmbedding } from "@llamaindex/deepinfra";
 
 // Update Embed Model
 Settings.embedModel = new DeepInfraEmbedding();
@@ -33,7 +47,7 @@ By default, DeepInfraEmbedding is using the sentence-transformers/clip-ViT-B-32
 For example:
 
 ```ts
-import { DeepInfraEmbedding } from "llamaindex";
+import { DeepInfraEmbedding } from "@llamaindex/deepinfra";
 
 const model = "intfloat/e5-large-v2";
 Settings.embedModel = new DeepInfraEmbedding({
@@ -46,7 +60,8 @@ You can also set the `maxRetries` and `timeout` parameters when initializing `De
 For example:
 
 ```ts
-import { DeepInfraEmbedding, Settings } from "llamaindex";
+import { Settings } from "llamaindex";
+import { DeepInfraEmbedding } from "@llamaindex/deepinfra";
 
 const model = "intfloat/e5-large-v2";
 const maxRetries = 5;
@@ -62,7 +77,7 @@ Settings.embedModel = new DeepInfraEmbedding({
 Standalone usage:
 
 ```ts
-import { DeepInfraEmbedding } from "llamaindex";
+import { DeepInfraEmbedding } from "@llamaindex/deepinfra";
 import { config } from "dotenv";
 // For standalone usage, you need to configure DEEPINFRA_API_TOKEN in .env file
 config();

apps/next/src/content/docs/llamaindex/modules/embeddings/available_embeddings/gemini.mdx

@@ -2,10 +2,29 @@
 title: Gemini
 ---
 
-To use Gemini embeddings, you need to import `GeminiEmbedding` from `llamaindex`.
+To use Gemini embeddings, you need to import `GeminiEmbedding` from `@llamaindex/google`.
+
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/google
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/google
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/google
+	```
+</Tabs>
 
 ```ts
-import { GeminiEmbedding, Settings } from "llamaindex";
+import { Document, Settings, VectorStoreIndex } from "llamaindex";
+import { GeminiEmbedding, GEMINI_MODEL } from "@llamaindex/google";
 
 // Update Embed Model
 Settings.embedModel = new GeminiEmbedding();
@@ -27,7 +46,7 @@ Per default, `GeminiEmbedding` is using the `gemini-pro` model. You can change t
 For example:
 
 ```ts
-import { GEMINI_MODEL, GeminiEmbedding } from "llamaindex";
+import { GEMINI_MODEL, GeminiEmbedding } from "@llamaindex/google";
 
 Settings.embedModel = new GeminiEmbedding({
   model: GEMINI_MODEL.GEMINI_PRO_LATEST,

apps/next/src/content/docs/llamaindex/modules/embeddings/available_embeddings/huggingface.mdx

@@ -2,10 +2,29 @@
 title: HuggingFace
 ---
 
-To use HuggingFace embeddings, you need to import `HuggingFaceEmbedding` from `llamaindex`.
+To use HuggingFace embeddings, you need to import `HuggingFaceEmbedding` from `@llamaindex/huggingface`.
+
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/huggingface
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/huggingface
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/huggingface
+	```
+</Tabs>
 
 ```ts
-import { HuggingFaceEmbedding, Settings } from "llamaindex";
+import { Document, Settings, VectorStoreIndex } from "llamaindex";
+import { HuggingFaceEmbedding } from "@llamaindex/huggingface";
 
 // Update Embed Model
 Settings.embedModel = new HuggingFaceEmbedding();
@@ -29,6 +48,8 @@ If you're not using a quantized model, set the `quantized` parameter to `false`.
 For example, to use the not quantized `BAAI/bge-small-en-v1.5` model, you can use the following code:
 
 ```ts
+import { HuggingFaceEmbedding } from "@llamaindex/huggingface";
+
 Settings.embedModel = new HuggingFaceEmbedding({
   modelType: "BAAI/bge-small-en-v1.5",
   quantized: false,

apps/next/src/content/docs/llamaindex/modules/embeddings/available_embeddings/jinaai.mdx

@@ -2,10 +2,11 @@
 title: Jina AI
 ---
 
-To use Jina AI embeddings, you need to import `JinaAIEmbedding` from `llamaindex`.
+To use Jina AI embeddings, you need to import `JinaAIEmbedding` from `@llamaindex/jinaai`.
 
 ```ts
-import { JinaAIEmbedding, Settings } from "llamaindex";
+import { Settings } from "llamaindex";
+import { JinaAIEmbedding } from "@llamaindex/jinaai";
 
 Settings.embedModel = new JinaAIEmbedding();
 

apps/next/src/content/docs/llamaindex/modules/embeddings/available_embeddings/mistral.mdx

@@ -2,10 +2,29 @@
 title: MistralAI
 ---
 
-To use MistralAI embeddings, you need to import `MistralAIEmbedding` from `llamaindex`.
+To use MistralAI embeddings, you need to import `MistralAIEmbedding` from `@llamaindex/mistral`.
+
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/mistral
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/mistral
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/mistral
+	```
+</Tabs>
 
 ```ts
-import { MistralAIEmbedding, Settings } from "llamaindex";
+import { Document, Settings, VectorStoreIndex } from "llamaindex";
+import { MistralAIEmbedding } from "@llamaindex/mistral";
 
 // Update Embed Model
 Settings.embedModel = new MistralAIEmbedding({

apps/next/src/content/docs/llamaindex/modules/embeddings/available_embeddings/mixedbreadai.mdx

@@ -14,16 +14,28 @@ To find out more about the latest features, updates, and available models, visit
 
 ## Setup
 
-First, you will need to install the `llamaindex` package.
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/mixedbread
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/mixedbread
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/mixedbread
+	```
+</Tabs>
 
-```bash
-pnpm install llamaindex
-```
 
 Next, sign up for an API key at [mixedbread.ai](https://mixedbread.ai/). Once you have your API key, you can import the necessary modules and create a new instance of the `MixedbreadAIEmbeddings` class.
 
 ```ts
-import { MixedbreadAIEmbeddings, Document, Settings } from "llamaindex";
+import { MixedbreadAIEmbeddings } from "@llamaindex/mixedbread";
+import { Document, Settings } from "llamaindex";
 ```
 
 ## Usage with LlamaIndex

apps/next/src/content/docs/llamaindex/modules/embeddings/available_embeddings/ollama.mdx

@@ -2,7 +2,7 @@
 title: Ollama
 ---
 
-To use Ollama embeddings, you need to import `OllamaEmbedding` from `llamaindex`.
+To use Ollama embeddings, you need to import `OllamaEmbedding` from `@llamaindex/ollama`.
 
 Note that you need to pull the embedding model first before using it.
 
@@ -12,8 +12,27 @@ In the example below, we're using the [`nomic-embed-text`](https://ollama.com/li
 ollama pull nomic-embed-text
 ```
 
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/ollama
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/ollama
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/ollama
+	```
+</Tabs>
+
 ```ts
-import { OllamaEmbedding, Settings } from "llamaindex";
+import { OllamaEmbedding } from "@llamaindex/ollama";
+import { Document, Settings, VectorStoreIndex } from "llamaindex";
 
 Settings.embedModel = new OllamaEmbedding({ model: "nomic-embed-text" });
 

apps/next/src/content/docs/llamaindex/modules/embeddings/available_embeddings/openai.mdx

@@ -2,10 +2,29 @@
 title: OpenAI
 ---
 
-To use OpenAI embeddings, you need to import `OpenAIEmbedding` from `llamaindex`.
+To use OpenAI embeddings, you need to import `OpenAIEmbedding` from `@llamaindex/openai`.
+
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/openai
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/openai
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/openai
+	```
+</Tabs>
 
 ```ts
-import { OpenAIEmbedding, Settings } from "llamaindex";
+import { OpenAIEmbedding } from "@llamaindex/openai";
+import { Document, Settings, VectorStoreIndex } from "llamaindex";
 
 Settings.embedModel = new OpenAIEmbedding();
 

apps/next/src/content/docs/llamaindex/modules/embeddings/available_embeddings/together.mdx

@@ -2,10 +2,11 @@
 title: Together
 ---
 
-To use together embeddings, you need to import `TogetherEmbedding` from `llamaindex`.
+To use together embeddings, you need to import `TogetherEmbedding` from `@llamaindex/together`.
 
 ```ts
-import { TogetherEmbedding, Settings } from "llamaindex";
+import { Settings } from "llamaindex";
+import { TogetherEmbedding } from "@llamaindex/together";
 
 Settings.embedModel = new TogetherEmbedding({
   apiKey: "<YOUR_API_KEY>",

apps/next/src/content/docs/llamaindex/modules/embeddings/available_embeddings/voyageai.mdx

@@ -0,0 +1,46 @@
+---
+title: VoyageAI
+---
+
+To use VoyageAI embeddings, you need to import `VoyageAIEmbedding` from `@llamaindex/voyage-ai`.
+
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/voyage-ai
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/voyage-ai
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/voyage-ai
+	```
+</Tabs>
+
+```ts
+import { VoyageAIEmbedding } from "@llamaindex/voyage-ai";
+import { Document, Settings, VectorStoreIndex } from "llamaindex";
+
+Settings.embedModel = new VoyageAIEmbedding();
+
+const document = new Document({ text: essay, id_: "essay" });
+
+const index = await VectorStoreIndex.fromDocuments([document]);
+
+const queryEngine = index.asQueryEngine();
+
+const query = "What is the meaning of life?";
+
+const results = await queryEngine.query({
+  query,
+});
+```
+
+## API Reference
+
+- [VoyageAIEmbedding](/docs/api/classes/VoyageAIEmbedding)

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

@@ -6,8 +6,27 @@ The embedding model in LlamaIndex is responsible for creating numerical represen
 
 This can be explicitly updated through `Settings`
 
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/openai
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/openai
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/openai
+	```
+</Tabs>
+
 ```typescript
-import { OpenAIEmbedding, Settings } from "llamaindex";
+import { OpenAIEmbedding } from "@llamaindex/openai";
+import { Settings } from "llamaindex";
 
 Settings.embedModel = new OpenAIEmbedding({
   model: "text-embedding-ada-002",
@@ -18,6 +37,31 @@ Settings.embedModel = new OpenAIEmbedding({
 
 For local embeddings, you can use the [HuggingFace](/docs/llamaindex/modules/embeddings/available_embeddings/huggingface) embedding model.
 
+## Local Ollama Embeddings With Remote Host
+
+Ollama provides a way to run embedding models locally or connect to a remote Ollama instance. This is particularly useful when you need to:
+- Run embeddings without relying on external API services
+- Use custom embedding models
+- Connect to a shared Ollama instance in your network
+
+The ENV variable method you will find elsewhere sometimes may not work with the OllamaEmbedding class. Also note, you'll need to change the host
+in the Ollama server to `0.0.0.0` to allow connections from other machines.
+
+To use Ollama embeddings with a remote host, you need to specify the host URL in the configuration like this:
+
+```typescript
+import { OllamaEmbedding } from "@llamaindex/ollama";
+import { Settings } from "llamaindex";
+
+// Configure Ollama with a remote host
+Settings.embedModel = new OllamaEmbedding({
+  model: "nomic-embed-text",
+  config: {
+    host: "http://your-ollama-host:11434"
+  }
+});
+```
+
 ## Available Embeddings
 
 Most available embeddings are listed in the sidebar on the left.

apps/next/src/content/docs/llamaindex/modules/evaluation/modules/correctness.mdx

@@ -10,9 +10,21 @@ This is useful for measuring if the response was correct. The evaluator returns
 
 Firstly, you need to install the package:
 
-```bash
-pnpm i llamaindex
-```
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/openai
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/openai
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/openai
+	```
+</Tabs>
 
 Set the OpenAI API key:
 
@@ -23,7 +35,8 @@ export OPENAI_API_KEY=your-api-key
 Import the required modules:
 
 ```ts
-import { CorrectnessEvaluator, OpenAI, Settings, Response } from "llamaindex";
+import { OpenAI } from "@llamaindex/openai";
+import { CorrectnessEvaluator, Settings, Response } from "llamaindex";
 ```
 
 Let's setup gpt-4 for better results:

apps/next/src/content/docs/llamaindex/modules/evaluation/modules/faithfulness.mdx

@@ -12,9 +12,22 @@ This is useful for measuring if the response was hallucinated. The evaluator ret
 
 Firstly, you need to install the package:
 
-```bash
-pnpm i llamaindex
-```
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/openai
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/openai
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/openai
+	```
+</Tabs>
+
 
 Set the OpenAI API key:
 
@@ -25,12 +38,12 @@ export OPENAI_API_KEY=your-api-key
 Import the required modules:
 
 ```ts
+import { OpenAI } from "@llamaindex/openai";
 import {
   Document,
   FaithfulnessEvaluator,
-  OpenAI,
-  VectorStoreIndex,
   Settings,
+  VectorStoreIndex,
 } from "llamaindex";
 ```
 

apps/next/src/content/docs/llamaindex/modules/evaluation/modules/relevancy.mdx

@@ -10,9 +10,22 @@ It is useful for measuring if the response was relevant to the query. The evalua
 
 Firstly, you need to install the package:
 
-```bash
-pnpm i llamaindex
-```
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/openai
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/openai
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/openai
+	```
+</Tabs>
+
 
 Set the OpenAI API key:
 
@@ -23,11 +36,11 @@ export OPENAI_API_KEY=your-api-key
 Import the required modules:
 
 ```ts
+import { OpenAI } from "@llamaindex/openai";
 import {
-  RelevancyEvaluator,
-  OpenAI,
-  Settings,
   Document,
+  RelevancyEvaluator,
+  Settings,
   VectorStoreIndex,
 } from "llamaindex";
 ```

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

@@ -5,18 +5,35 @@ title: Ingestion Pipeline
 An `IngestionPipeline` uses a concept of `Transformations` that are applied to input data.
 These `Transformations` are applied to your input data, and the resulting nodes are either returned or inserted into a vector database (if given).
 
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/openai @llamaindex/qdrant
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/openai @llamaindex/qdrant
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/openai @llamaindex/qdrant
+	```
+</Tabs>
+
 ## Usage Pattern
 
 The simplest usage is to instantiate an IngestionPipeline like so:
 
 ```ts
 import fs from "node:fs/promises";
-
+import { OpenAI, OpenAIEmbedding } from "@llamaindex/openai";
 import {
   Document,
   IngestionPipeline,
   MetadataMode,
-  OpenAIEmbedding,
   TitleExtractor,
   SentenceSplitter,
 } from "llamaindex";
@@ -58,14 +75,14 @@ Then, you can construct an index from that vector store later on.
 ```ts
 import fs from "node:fs/promises";
 
+import { OpenAIEmbedding } from "@llamaindex/openai";
+import { QdrantVectorStore } from "@llamaindex/qdrant";
 import {
   Document,
   IngestionPipeline,
   MetadataMode,
-  OpenAIEmbedding,
   TitleExtractor,
   SentenceSplitter,
-  QdrantVectorStore,
   VectorStoreIndex,
 } from "llamaindex";
 

apps/next/src/content/docs/llamaindex/modules/llms/available_llms/anthropic.mdx

@@ -2,10 +2,29 @@
 title: Anthropic
 ---
 
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/anthropic
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/anthropic
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/anthropic
+	```
+</Tabs>
+
 ## Usage
 
 ```ts
-import { Anthropic, Settings } from "llamaindex";
+import { Settings } from "llamaindex";
+import { Anthropic } from "@llamaindex/anthropic";
 
 Settings.llm = new Anthropic({
   apiKey: "<YOUR_API_KEY>",
@@ -37,7 +56,8 @@ const results = await queryEngine.query({
 ## Full Example
 
 ```ts
-import { Anthropic, Document, VectorStoreIndex, Settings } from "llamaindex";
+import { Document, VectorStoreIndex, Settings } from "llamaindex";
+import { Anthropic } from "@llamaindex/anthropic";
 
 Settings.llm = new Anthropic({
   apiKey: "<YOUR_API_KEY>",

apps/next/src/content/docs/llamaindex/modules/llms/available_llms/azure.mdx

@@ -14,10 +14,29 @@ export AZURE_OPENAI_ENDPOINT="<YOUR ENDPOINT, see https://learn.microsoft.com/en
 export AZURE_OPENAI_DEPLOYMENT="gpt-4" # or some other deployment name
 ```
 
+## Installation
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
+	```shell tab="npm"
+	npm install llamaindex @llamaindex/openai
+	```
+
+	```shell tab="yarn"
+	yarn add llamaindex @llamaindex/openai
+	```
+
+	```shell tab="pnpm"
+	pnpm add llamaindex @llamaindex/openai
+	```
+</Tabs>
+
 ## Usage
 
 ```ts
-import { OpenAI, Settings } from "llamaindex";
+import { Settings } from "llamaindex";
+import { OpenAI } from "@llamaindex/openai";
 
 Settings.llm = new OpenAI({ model: "gpt-4", temperature: 0 });
 ```
@@ -47,7 +66,8 @@ const results = await queryEngine.query({
 ## Full Example
 
 ```ts
-import { OpenAI, Document, VectorStoreIndex, Settings } from "llamaindex";
+import { Document, VectorStoreIndex, Settings } from "llamaindex";
+import { OpenAI } from "@llamaindex/openai";
 
 Settings.llm = new OpenAI({ model: "gpt-4", temperature: 0 });