Release 0.11.0 (#1950)

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/lint_on_push_or_pull.yml

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

.github/workflows/preview.yml

@@ -1,6 +1,11 @@
 name: Publish Preview
 on: [pull_request]
 
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+  TURBO_REMOTE_ONLY: true
+
 jobs:
   pre_release:
     name: Pre Release

.github/workflows/test.yml

@@ -23,7 +23,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [18.x, 20.x, 22.x, 23.x]
+        node-version: [20.x, 22.x, 23.x]
     name: E2E on Node.js ${{ matrix.node-version }}
     runs-on: ubuntu-latest
     steps:
@@ -53,7 +53,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [18.x, 20.x, 22.x, 23.x]
+        node-version: [20.x, 22.x, 23.x]
     name: Test on Node.js ${{ matrix.node-version }}
     runs-on: ubuntu-latest
     steps:
@@ -87,6 +87,30 @@ jobs:
         run: pnpm run type-check
       - name: Run Circular Dependency Check
         run: pnpm run circular-check
+  e2e-npm:
+    runs-on: ubuntu-latest
+    name: Test using packages with npm
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build packages
+        run: pnpm run build
+      - name: Pack packages
+        run: |
+          pnpm pack --pack-destination ${{ runner.temp }} -C packages/llamaindex
+          pnpm pack --pack-destination ${{ runner.temp }} -C packages/workflow
+      - name: Install packed packages
+        run: npm add ${{ runner.temp }}/*.tgz
+        working-directory: e2e/npm
+      - name: Run tests
+        run: npm test
+        working-directory: e2e/npm
   e2e-llamaindex-examples:
     strategy:
       fail-fast: false

.nvmrc

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

.prettierignore

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

README.md

@@ -7,9 +7,10 @@
 </h3>
 
 [![NPM Version](https://img.shields.io/npm/v/llamaindex)](https://www.npmjs.com/package/llamaindex)
-[![NPM License](https://img.shields.io/npm/l/llamaindex)](https://www.npmjs.com/package/llamaindex)
+[![NPM License](https://img.shields.io/npm/l/llamaindex)](https://github.com/run-llama/LlamaIndexTS/blob/main/LICENSE)
 [![NPM Downloads](https://img.shields.io/npm/dm/llamaindex)](https://www.npmjs.com/package/llamaindex)
 [![Discord](https://img.shields.io/discord/1059199217496772688)](https://discord.com/invite/eN6D2HQ4aX)
+[![Twitter](https://img.shields.io/twitter/follow/llama_index)](https://x.com/llama_index)
 
 Use your own data with large language models (LLMs, OpenAI ChatGPT and others) in JS runtime environments with TypeScript support.
 
@@ -63,7 +64,7 @@ yarn add llamaindex
 
 ### Setup in Node.js, Deno, Bun, TypeScript...?
 
-See our official document: <https://ts.llamaindex.ai/docs/llamaindex/getting_started/>
+See our official document: https://ts.llamaindex.ai/docs/llamaindex/getting_started
 
 ### Adding provider packages
 
@@ -83,19 +84,7 @@ Check out our NextJS playground at https://llama-playground.vercel.app/. The sou
 
 ## Core concepts for getting started:
 
-- [Document](/packages/llamaindex/src/Node.ts): A document represents a text file, PDF file or other contiguous piece of data.
-
-- [Node](/packages/llamaindex/src/Node.ts): The basic data building block. Most commonly, these are parts of the document split into manageable pieces that are small enough to be fed into an embedding model and LLM.
-
-- [Embedding](/packages/llamaindex/src/embeddings/OpenAIEmbedding.ts): Embeddings are sets of floating point numbers which represent the data in a Node. By comparing the similarity of embeddings, we can derive an understanding of the similarity of two pieces of data. One use case is to compare the embedding of a question with the embeddings of our Nodes to see which Nodes may contain the data needed to answer that question. Because the default service context is OpenAI, the default embedding is `OpenAIEmbedding`. If using different models, say through Ollama, use this [Embedding](/packages/llamaindex/src/embeddings/OllamaEmbedding.ts) (see all [here](/packages/llamaindex/src/embeddings)).
-
-- [Indices](/packages/llamaindex/src/indices/): Indices store the Nodes and the embeddings of those nodes. QueryEngines retrieve Nodes from these Indices using embedding similarity.
-
-- [QueryEngine](/packages/llamaindex/src/engines/query/RetrieverQueryEngine.ts): Query engines are what generate the query you put in and give you back the result. Query engines generally combine a pre-built prompt with selected Nodes from your Index to give the LLM the context it needs to answer your query. To build a query engine from your Index (recommended), use the [`asQueryEngine`](/packages/llamaindex/src/indices/BaseIndex.ts) method on your Index. See all query engines [here](/packages/llamaindex/src/engines/query).
-
-- [ChatEngine](/packages/llamaindex/src/engines/chat/SimpleChatEngine.ts): A ChatEngine helps you build a chatbot that will interact with your Indices. See all chat engines [here](/packages/llamaindex/src/engines/chat).
-
-- [SimplePrompt](/packages/llamaindex/src/Prompt.ts): A simple standardized function call definition that takes in inputs and formats them in a template literal. SimplePrompts can be specialized using currying and combined using other SimplePrompt functions.
+See our documentation: https://ts.llamaindex.ai/docs/llamaindex/getting_started/concepts
 
 ## Contributing:
 

apps/next/CHANGELOG.md

@@ -1,5 +1,122 @@
 # @llamaindex/doc
 
+## 0.2.19
+
+### Patch Changes
+
+- Updated dependencies [680b529]
+- Updated dependencies [b0cd530]
+- Updated dependencies [361a685]
+- Updated dependencies [3e66ddc]
+  - @llamaindex/workflow@1.1.3
+  - @llamaindex/core@0.6.6
+  - llamaindex@0.11.0
+  - @llamaindex/openai@0.4.0
+  - @llamaindex/cloud@4.0.8
+  - @llamaindex/node-parser@2.0.6
+  - @llamaindex/readers@3.1.4
+
+## 0.2.18
+
+### Patch Changes
+
+- d671ed6: Add functionality for search params when querying Qdrant vector store.
+- Updated dependencies [76c9a80]
+- Updated dependencies [168d11f]
+- Updated dependencies [d671ed6]
+- Updated dependencies [40f5f41]
+  - @llamaindex/openai@0.3.7
+  - @llamaindex/workflow@1.1.2
+  - @llamaindex/core@0.6.5
+  - @llamaindex/cloud@4.0.7
+  - llamaindex@0.10.6
+  - @llamaindex/node-parser@2.0.5
+  - @llamaindex/readers@3.1.3
+
+## 0.2.17
+
+### Patch Changes
+
+- Updated dependencies [9b2e25a]
+  - @llamaindex/openai@0.3.6
+  - @llamaindex/core@0.6.4
+  - llamaindex@0.10.5
+  - @llamaindex/cloud@4.0.6
+  - @llamaindex/node-parser@2.0.4
+  - @llamaindex/readers@3.1.2
+  - @llamaindex/workflow@1.1.1
+
+## 0.2.16
+
+### Patch Changes
+
+- Updated dependencies [7e8e454]
+- Updated dependencies [2225ffd]
+- Updated dependencies [6ddf1c1]
+- Updated dependencies [bc53342]
+- Updated dependencies [41953a3]
+  - @llamaindex/workflow@1.1.0
+  - @llamaindex/cloud@4.0.5
+  - llamaindex@0.10.4
+
+## 0.2.15
+
+### Patch Changes
+
+- Updated dependencies [3ee8c83]
+  - @llamaindex/core@0.6.3
+  - llamaindex@0.10.3
+  - @llamaindex/openai@0.3.5
+  - @llamaindex/cloud@4.0.4
+  - @llamaindex/node-parser@2.0.3
+  - @llamaindex/readers@3.1.1
+  - @llamaindex/workflow@1.0.4
+
+## 0.2.14
+
+### Patch Changes
+
+- Updated dependencies [1e59695]
+  - @llamaindex/readers@3.1.0
+
+## 0.2.13
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+  - llamaindex@0.10.2
+
+## 0.2.12
+
+### Patch Changes
+
+- Updated dependencies [96dd798]
+  - @llamaindex/openai@0.3.3
+  - llamaindex@0.10.1
+
+## 0.2.11
+
+### Patch Changes
+
+- 6cf928f: chore: use bunchee for llamaindex
+- Updated dependencies [6cf928f]
+  - llamaindex@0.10.0
+
+## 0.2.10
+
+### Patch Changes
+
+- 411dcea: Add Nova Premier to AWS Nova models. Add EU endpoints
+
+## 0.2.9
+
+### Patch Changes
+
+- Updated dependencies [d365eb2]
+  - @llamaindex/openai@0.3.2
+  - llamaindex@0.9.19
+
 ## 0.2.8
 
 ### Patch Changes

apps/next/fallback.js

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

apps/next/next.config.mjs

@@ -1,5 +1,4 @@
 import { createMDX } from "fumadocs-mdx/next";
-import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
 const withMDX = createMDX();
 
 /** @type {import('next').NextConfig} */
@@ -16,7 +15,12 @@ const config = {
     "twoslash",
     "typescript",
   ],
-  webpack: (config, { isServer }) => {
+  turbopack: {
+    resolveAlias: {
+      fs: { browser: "./fallback.js" },
+    },
+  },
+  webpack: (config) => {
     if (Array.isArray(config.target) && config.target.includes("web")) {
       config.target = ["web", "es2020"];
     }
@@ -28,14 +32,6 @@ const config = {
     };
     config.resolve.fallback ??= {};
     config.resolve.fallback.fs = false;
-    if (!isServer) {
-      config.plugins.push(
-        new MonacoWebpackPlugin({
-          languages: ["typescript"],
-          filename: "static/[name].worker.js",
-        }),
-      );
-    }
     config.resolve.alias["replicate"] = false;
     return config;
   },

apps/next/package.json

@@ -1,19 +1,21 @@
 {
   "name": "@llamaindex/doc",
-  "version": "0.2.8",
+  "version": "0.2.19",
   "private": true,
   "scripts": {
     "postinstall": "fumadocs-mdx",
     "prebuild": "pnpm run build:docs",
     "build": "next build",
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "start": "next start",
     "postbuild": "tsx scripts/post-build.mts && tsx scripts/validate-links.mts",
     "build:docs": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" typedoc && tsx scripts/generate-docs.mts",
     "validate-links": "tsx scripts/validate-links.mts"
   },
   "dependencies": {
+    "@huggingface/transformers": "^3.5.0",
     "@icons-pack/react-simple-icons": "^10.1.0",
+    "@llama-flow/docs": "0.0.8",
     "@llamaindex/chat-ui": "0.2.0",
     "@llamaindex/cloud": "workspace:*",
     "@llamaindex/core": "workspace:*",
@@ -22,6 +24,7 @@
     "@llamaindex/readers": "workspace:*",
     "@llamaindex/workflow": "workspace:*",
     "@mdx-js/mdx": "^3.1.0",
+    "@monaco-editor/react": "^4.7.0",
     "@number-flow/react": "^0.3.4",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.2",
@@ -36,22 +39,21 @@
     "clsx": "2.1.1",
     "foxact": "^0.2.41",
     "framer-motion": "^11.11.17",
-    "fumadocs-core": "^15.0.15",
+    "fumadocs-core": "^15.2.7",
     "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",
+    "fumadocs-mdx": "^11.6.0",
+    "fumadocs-openapi": "^8.0.1",
+    "fumadocs-twoslash": "^3.1.1",
+    "fumadocs-typescript": "^4.0.2",
+    "fumadocs-ui": "^15.2.7",
     "hast-util-to-jsx-runtime": "^2.3.2",
     "llamaindex": "workspace:*",
     "lucide-react": "^0.460.0",
-    "next": "^15.2.4",
+    "next": "^15.3.0",
     "next-themes": "^0.4.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-icons": "^5.3.0",
-    "react-monaco-editor": "^0.56.2",
     "react-use-measure": "^2.1.1",
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
@@ -63,12 +65,14 @@
     "tailwindcss-animate": "^1.0.7",
     "tree-sitter": "^0.22.1",
     "tree-sitter-typescript": "^0.23.2",
+    "ts-morph": "^25.0.1",
+    "twoslash": "^0.3.1",
     "use-stick-to-bottom": "^1.0.42",
     "web-tree-sitter": "^0.24.4",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@next/env": "^15.2.1",
+    "@next/env": "^15.3.0",
     "@tailwindcss/postcss": "^4.0.9",
     "@types/mdx": "^2.0.13",
     "@types/node": "22.9.0",
@@ -78,7 +82,6 @@
     "cross-env": "^7.0.3",
     "fast-glob": "^3.3.2",
     "gray-matter": "^4.0.3",
-    "monaco-editor-webpack-plugin": "^7.1.0",
     "postcss": "^8.5.3",
     "raw-loader": "^4.0.2",
     "remark": "^15.0.1",
@@ -87,9 +90,9 @@
     "remark-stringify": "^11.0.0",
     "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",
+    "typedoc": "0.28.3",
+    "typedoc-plugin-markdown": "^4.6.2",
+    "typedoc-plugin-merge-modules": " ^7.0.0",
     "typescript": "^5.7.3"
   }
 }

apps/next/scripts/generate-docs.mts

@@ -1,27 +1,24 @@
-import { generateFiles as openapiGenerateFiles } from "fumadocs-openapi";
-import { generateFiles as typescriptGenerateFiles } from "fumadocs-typescript";
+import {
+  createGenerator,
+  generateFiles as typescriptGenerateFiles,
+} from "fumadocs-typescript";
 import fs from "node:fs";
 import * as path from "node:path";
 import { rimrafSync } from "rimraf";
 
+const generator = createGenerator();
 const out = "./src/content/docs/cloud/api";
 const apiRefOut = "./src/content/docs/api";
 
 // clean generated files
 rimrafSync(out, {
   filter(v) {
-    return !v.endsWith("index.mdx") && !v.endsWith("meta.json");
+    return !v.endsWith("index.md") && !v.endsWith("meta.json");
   },
 });
 
-void openapiGenerateFiles({
-  input: ["../../packages/cloud/openapi.json"],
-  output: "./src/content/docs/cloud/api",
-  groupBy: "tag",
-});
-
-void typescriptGenerateFiles({
-  input: ["./src/content/docs/api/**/*.mdx"],
+void typescriptGenerateFiles(generator, {
+  input: ["./src/content/docs/api/**/*.md"],
   output: (file) => path.resolve(path.dirname(file), path.basename(file)),
   transformOutput,
 });
@@ -30,19 +27,22 @@ function transformOutput(filePath: string, content: string) {
   const fileName = path.basename(filePath);
   let title = fileName.split(".")[0];
   if (title === "index") title = "LlamaIndex API Reference";
-  return `---\ntitle: ${title}\n---\n\n${transformAbsoluteUrl(content, filePath)}`;
+  return `---\ntitle: ${title}\n---\n\n${transformAbsoluteUrl(
+    content.replace(/(?<!\\)\{([^}]+)(?<!\\)}/g, "\\{$1\\}"),
+    filePath,
+  )}`;
 }
 
 /**
- * Transforms the content by converting relative MDX links to absolute docs API links
- * Example: [text](../type-aliases/TaskHandler.mdx) -> [text](/docs/api/type-aliases/TaskHandler)
- * [text](BaseChatEngine.mdx) -> [text](/docs/api/classes/BaseChatEngine)
- * [text](BaseVectorStore.mdx#constructors) -> [text](/docs/api/classes/BaseVectorStore#constructors)
- * [text](TaskStep.mdx) -> [text](/docs/api/type-aliases/TaskStep)
+ * Transforms the content by converting relative MD links to absolute docs API links
+ * Example: [text](../type-aliases/TaskHandler.md) -> [text](/docs/api/type-aliases/TaskHandler)
+ * [text](BaseChatEngine.md) -> [text](/docs/api/classes/BaseChatEngine)
+ * [text](BaseVectorStore.md#constructors) -> [text](/docs/api/classes/BaseVectorStore#constructors)
+ * [text](TaskStep.md) -> [text](/docs/api/type-aliases/TaskStep)
  */
 function transformAbsoluteUrl(content: string, filePath: string) {
   const group = path.dirname(filePath).split(path.sep).pop();
-  return content.replace(/\]\(([^)]+)\.mdx([^)]*)\)/g, (_, slug, anchor) => {
+  return content.replace(/\]\(([^)]+)\.md([^)]*)\)/g, (_, slug, anchor) => {
     const slugParts = slug.split("/");
     const fileName = slugParts[slugParts.length - 1];
     const fileGroup = slugParts[slugParts.length - 2] ?? group;

apps/next/scripts/validate-links.mts

@@ -4,7 +4,6 @@ import matter from "gray-matter";
 import path from "path";
 
 const CONTENT_DIR = path.join(process.cwd(), "src/content/docs");
-const BUILD_DIR = path.join(process.cwd(), ".next");
 
 // Regular expression to find internal links
 // This captures Markdown links [text](/docs/path) and href attributes href="/docs/path"
@@ -14,6 +13,8 @@ const INTERNAL_LINK_REGEX = /(?:(?:\]\(|\bhref=["'])\/docs\/([^")]+))/g;
 // This captures relative links like [text](./path) or ![alt](../images/image.png)
 const RELATIVE_LINK_REGEX = /(?:\]\()(?:\s*)(?:\.\.?)\//g;
 
+const ALLOWED_LINKS = ["/docs/llamaflow"];
+
 interface LinkValidationResult {
   file: string;
   invalidLinks: Array<{ link: string; line: number }>;
@@ -28,14 +29,14 @@ interface RelativeLinkResult {
  * Get all valid documentation routes from the content directory
  */
 async function getValidRoutes(): Promise<Set<string>> {
-  const mdxFiles = await glob("**/*.mdx", { cwd: CONTENT_DIR });
+  const mdxFiles = await glob("**/*.{md,mdx}", { cwd: CONTENT_DIR });
 
   const routes = new Set<string>();
 
   // Add each MDX file as a valid route
   for (const file of mdxFiles) {
     // Remove .mdx extension and normalize to route format
-    let route = file.replace(/\.mdx$/, "");
+    let route = file.replace(/\.mdx?$/, "");
 
     // Handle index files
     if (route.endsWith("/index")) {
@@ -124,9 +125,6 @@ function findRelativeLinksInFile(
   return relativeLinks;
 }
 
-/**
- * Validate internal links in all MDX files
- */
 /**
  * Find relative links in all MDX files
  */
@@ -160,6 +158,11 @@ async function validateLinks(): Promise<LinkValidationResult[]> {
     const links = extractLinksFromFile(filePath);
 
     const invalidLinks = links.filter(({ link }) => {
+      // Check if the link is in the allowed list
+      if (ALLOWED_LINKS.includes(`/docs/${link}`)) {
+        return false;
+      }
+
       // Check if the link exists in valid routes
       // First normalize the link (remove any query string or hash)
       const baseLink = link.split("?")[0].split("#")[0];

apps/next/source.config.ts

@@ -1,13 +1,18 @@
-import { rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
+import {
+  rehypeCodeDefaultOptions,
+  remarkStructure,
+} from "fumadocs-core/mdx-plugins";
 import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
 import { defineConfig, defineDocs } from "fumadocs-mdx/config";
 import { transformerTwoslash } from "fumadocs-twoslash";
-import { createFileSystemTypesCache } from "fumadocs-twoslash/cache-fs";
 import rehypeKatex from "rehype-katex";
 import remarkMath from "remark-math";
 
 export const docs = defineDocs({
-  dir: "./src/content/docs",
+  dir: ["./src/content/docs", "./node_modules/@llama-flow/docs"],
+  docs: {
+    async: true,
+  },
 });
 
 export default defineConfig({
@@ -21,11 +26,7 @@ export default defineConfig({
       },
       transformers: [
         ...(rehypeCodeDefaultOptions.transformers ?? []),
-        transformerTwoslash({
-          typesCache: createFileSystemTypesCache({
-            dir: ".next/cache/twoslash",
-          }),
-        }),
+        transformerTwoslash(),
         {
           name: "transformers:remove-notation-escape",
           code(hast) {
@@ -46,6 +47,7 @@ export default defineConfig({
       ],
     },
     remarkPlugins: [
+      remarkStructure,
       remarkMath,
       [remarkInstall, { persist: { id: "package-manager" } }],
       [remarkDocGen, { generators: [fileGenerator()] }],

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

@@ -10,16 +10,55 @@ import { MagicMove } from "@/components/magic-move";
 import { NpmInstall } from "@/components/npm-install";
 import { Supports } from "@/components/supports";
 import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
-import { LEGACY_DOCUMENT_URL } from "@/lib/const";
+import { DOCUMENT_URL } from "@/lib/const";
 import { SiStackblitz } from "@icons-pack/react-simple-icons";
-import {
-  CodeBlock as FumaCodeBlock,
-  Pre,
-} from "fumadocs-ui/components/codeblock";
 import { Blocks, Bot, Footprints, Terminal } from "lucide-react";
 import Link from "next/link";
-import { Suspense } from "react";
+
+const codes = [
+  `import { openai } from "@llamaindex/openai";
+
+const llm = openai();
+const response = await llm.complete({ prompt: "How are you?" });`,
+  `import { openai } from "@llamaindex/openai";
+
+const llm = openai();
+const response = await llm.chat({
+  messages: [{ content: "Tell me a joke.", role: "user" }],
+});`,
+  `import { agent } from "@llamaindex/workflow";
+import { openai } from "@llamaindex/openai";
+
+const analyseAgent = agent({
+  llm: openai({ model: "gpt-4o" }),
+  tools: [analyseTools],
+  systemPrompt,
+});
+const response = await analyseAgent.run(\`Analyse the given data:
+\${data}\`);`,
+  `import { agent, multiAgent } from "@llamaindex/workflow";
+import { openai } from "@llamaindex/openai";
+
+const analyseAgent = agent({
+  name: "AnalyseAgent",
+  llm: openai({ model: "gpt-4o" }),
+  tools: [analyseTools],
+});
+const reporterAgent = agent({
+  name: "ReporterAgent",
+  llm: openai({ model: "gpt-4o" }),
+  tools: [reporterTools],
+  canHandoffTo: [analyseAgent],
+});
+
+const agents = multiAgent({
+  agents: [analyseAgent, reporterAgent],
+  rootAgent: reporterAgent,
+});
+
+const response = await agents.run(\`Analyse the given data:
+\${data}\`);`,
+];
 
 export default function HomePage() {
   return (
@@ -39,7 +78,7 @@ export default function HomePage() {
       </div>
 
       <div className="flex flex-wrap justify-center gap-4">
-        <Link href={LEGACY_DOCUMENT_URL}>
+        <Link href={DOCUMENT_URL}>
           <Button variant="outline">Get Started</Button>
         </Link>
         <NpmInstall />
@@ -62,65 +101,10 @@ export default function HomePage() {
           heading="From the simplest to the most complex"
           description="LlamaIndex.TS is designed to be simple to get started, but powerful enough to build complex, agentic AI applications using multi-agents."
         >
-          <Suspense
-            fallback={
-              <FumaCodeBlock allowCopy={false}>
-                <Pre>
-                  <div className="space-y-2">
-                    <Skeleton className="h-4 w-[250px]" />
-                    <Skeleton className="h-4 w-[200px]" />
-                  </div>
-                </Pre>
-              </FumaCodeBlock>
-            }
-          >
-            <MagicMove
-              code={[
-                `import { openai } from "@llamaindex/openai";
-
-const llm = openai();
-const response = await llm.complete({ prompt: "How are you?" });`,
-                `import { openai } from "@llamaindex/openai";
-
-const llm = openai();
-const response = await llm.chat({
-  messages: [{ content: "Tell me a joke.", role: "user" }],
-});`,
-                `import { agent } from "llamaindex";
-import { openai } from "@llamaindex/openai";
-
-const analyseAgent = agent({
-  llm: openai({ model: "gpt-4o" }),
-  tools: [analyseTools],
-  systemPrompt,
-});
-const response = await analyseAgent.run(\`Analyse the given data:
-\${data}\`);`,
-                `import { agent, multiAgent } from "llamaindex";
-import { openai } from "@llamaindex/openai";
-
-const analyseAgent = agent({
-  name: "AnalyseAgent",
-  llm: openai({ model: "gpt-4o" }),
-  tools: [analyseTools],
-});
-const reporterAgent = agent({
-  name: "ReporterAgent",
-  llm: openai({ model: "gpt-4o" }),
-  tools: [reporterTools],
-  canHandoffTo: [analyseAgent],
-});
-
-const agents = multiAgent({
-  agents: [analyseAgent, reporterAgent],
-  rootAgent: reporterAgent,
-});
-
-const response = await agents.run(\`Analyse the given data:
-\${data}\`);`,
-              ]}
-            />
-          </Suspense>
+          <MagicMove
+            placeholder={<CodeBlock lang="ts" code={codes[0]} />}
+            code={codes}
+          />
         </Feature>
         <Feature
           icon={Bot}
@@ -129,8 +113,9 @@ const response = await agents.run(\`Analyse the given data:
           description="Truly powerful retrieval-augmented generation applications use agentic techniques, and LlamaIndex.TS makes it easy to build them."
         >
           <CodeBlock
-            code={`import { agent, SimpleDirectoryReader, VectorStoreIndex } from "llamaindex";
+            code={`import { SimpleDirectoryReader, VectorStoreIndex } from "llamaindex";
 import { openai } from "@llamaindex/openai";
+import { agent } from "@llamaindex/workflow";
 
 // load documents from current directoy into an index
 const reader = new SimpleDirectoryReader();

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

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

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

@@ -1,7 +1,14 @@
+import { ChatDemoRSC } from "@/components/demo/chat/rsc/demo";
+import * as demos from "@/components/demo/lazy";
 import { createMetadata, metadataImage } from "@/lib/metadata";
 import { openapi, source } from "@/lib/source";
+import * as Icons from "@icons-pack/react-simple-icons";
+import { APIPage } from "fumadocs-openapi/ui";
 import { Popup, PopupContent, PopupTrigger } from "fumadocs-twoslash/ui";
-import { createTypeTable } from "fumadocs-typescript/ui";
+import { createGenerator } from "fumadocs-typescript";
+import { AutoTypeTable } from "fumadocs-typescript/ui";
+import { Accordion, Accordions } from "fumadocs-ui/components/accordion";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import {
   DocsBody,
@@ -11,6 +18,8 @@ import {
 } from "fumadocs-ui/page";
 import { notFound } from "next/navigation";
 
+const generator = createGenerator();
+
 export const revalidate = false;
 
 export default async function Page(props: {
@@ -20,17 +29,17 @@ export default async function Page(props: {
   const page = source.getPage(params.slug);
   if (!page) notFound();
 
-  const { AutoTypeTable } = createTypeTable();
-  const MDX = page.data.body;
+  const { body: MDX, toc, lastModified } = await page.data.load();
 
   return (
     <DocsPage
-      toc={page.data.toc}
+      toc={toc}
       full={page.data.full}
-      lastUpdate={page.data.lastModified}
+      lastUpdate={lastModified}
       editOnGithub={{
         owner: "run-llama",
         repo: "LlamaIndexTS",
+        sha: "main",
         path: `apps/next/src/content/docs/${page.file.path}`,
       }}
     >
@@ -39,12 +48,21 @@ export default async function Page(props: {
       <DocsBody>
         <MDX
           components={{
+            ...Icons,
             ...defaultMdxComponents,
-            APIPage: openapi.APIPage,
+            ...demos,
+            ChatDemoRSC,
+            Accordion,
+            Accordions,
+            APIPage: (props) => <APIPage {...openapi.getAPIPageProps(props)} />,
+            Tab,
+            Tabs,
             Popup,
             PopupContent,
             PopupTrigger,
-            AutoTypeTable,
+            AutoTypeTable: (props) => (
+              <AutoTypeTable generator={generator} {...props} />
+            ),
           }}
         />
       </DocsBody>

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

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

apps/next/src/app/global.css

@@ -1,7 +1,7 @@
 @import "tailwindcss";
 @import "fumadocs-ui/css/neutral.css";
 @import "fumadocs-ui/css/preset.css";
-@import "../../node_modules/fumadocs-twoslash/dist/twoslash.css";
+@import "../../node_modules/fumadocs-twoslash/styles/twoslash.css";
 @plugin "tailwindcss-animate";
 @source '../../node_modules/fumadocs-ui/dist/**/*.js';
 @source "../../node_modules/fumadocs-openapi/dist/**/*.js",

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

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

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

@@ -13,11 +13,7 @@ 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 files = await fg(["./src/content/docs/**/*.mdx"]);
 
   const scan = files.map(async (file) => {
     const fileContent = await fs.readFile(file);

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+---
+title: High-Level Concepts
+---
+
+This is a quick guide to the high-level concepts you'll encounter frequently when building LLM applications.
+
+## Large Language Models (LLMs)
+
+LLMs are the fundamental innovation that launched LlamaIndex. They are an artificial intelligence (AI) computer system that can understand, generate, and manipulate natural language, including answering questions based on their training data or data provided to them at query time. 
+
+## Agentic Applications
+
+When an LLM is used within an application, it is often used to make decisions, take actions, and/or interact with the world. This is the core definition of an **agentic application**.
+
+While the definition of an agentic application is broad, there are several key characteristics that define an agentic application:
+
+- **LLM Augmentation**: The LLM is augmented with tools (i.e. arbitrary callable functions in code), memory, and/or dynamic prompts.
+- **Prompt Chaining**: Several LLM calls are used that build on each other, with the output of one LLM call being used as the input to the next.
+- **Routing**: The LLM is used to route the application to the next appropriate step or state in the application.
+- **Parallelism**: The application can perform multiple steps or actions in parallel.
+- **Orchestration**: A hierarchical structure of LLMs is used to orchestrate lower-level actions and LLMs.
+- **Reflection**: The LLM is used to reflect and validate outputs of previous steps or LLM calls, which can be used to guide the application to the next appropriate step or state.
+
+In LlamaIndex, you can build agentic applications by using the workflows to orchestrate a sequence of steps and LLMs. You can [learn more about workflows](/docs/llamaindex/tutorials/workflows).
+
+## Agents
+
+We define an agent as a specific instance of an "agentic application". An agent is a piece of software that semi-autonomously performs tasks by combining LLMs with other tools and memory, orchestrated in a reasoning loop that decides which tool to use next (if any).
+
+What this means in practice, is something like:
+- An agent receives a user message
+- The agent uses an LLM to determine the next appropriate action to take using the previous chat history, tools, and the latest user message
+- The agent may invoke one or more tools to assist in the users request
+- If tools are used, the agent will then interpret the tool outputs and use them to inform the next action
+- Once the agent stops taking actions, it returns the final output to the user
+
+You can [learn more about agents](/docs/llamaindex/tutorials/basic_agent).
+
+## Retrieval Augmented Generation (RAG)
+
+Retrieval-Augmented Generation (RAG) is a core technique for building data-backed LLM applications with LlamaIndex. It allows LLMs to answer questions about your private data by providing it to the LLM at query time, rather than training the LLM on your data. To avoid sending **all** of your data to the LLM every time, RAG indexes your data and selectively sends only the relevant parts along with your query. You can [learn more about RAG](/docs/llamaindex/tutorials/rag).
+
+## Use cases
+
+There are endless use cases for data-backed LLM applications but they can be roughly grouped into four categories:
+
+[**Agents**](/docs/llamaindex/tutorials/basic_agent):
+An agent is an automated decision-maker powered by an LLM that interacts with the world via a set of [tools](/docs/llamaindex/modules/agents/tool). Agents can take an arbitrary number of steps to complete a given task, dynamically deciding on the best course of action rather than following pre-determined steps. This gives it additional flexibility to tackle more complex tasks.
+
+[**Workflows**](/docs/llamaindex/tutorials/workflows):
+A Workflow in LlamaIndex is a specific event-driven abstraction that allows you to orchestrate a sequence of steps and LLMs calls. Workflows can be used to implement any agentic application, and are a core component of LlamaIndex.
+
+[**Structured Data Extraction**](/docs/llamaindex/tutorials/structured_data_extraction):
+Pydantic extractors allow you to specify a precise data structure to extract from your data and use LLMs to fill in the missing pieces in a type-safe way. This is useful for extracting structured data from unstructured sources like PDFs, websites, and more, and is key to automating workflows.
+
+[**Query Engines**](/docs/llamaindex/modules/rag/query_engines):
+A query engine is an end-to-end flow that allows you to ask questions over your data. It takes in a natural language query, and returns a response, along with reference context retrieved and passed to the LLM.
+
+[**Chat Engines**](/docs/llamaindex/modules/rag/chat_engine):
+A chat engine is an end-to-end flow for having a conversation with your data (multiple back-and-forth instead of a single question-and-answer).

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

@@ -18,4 +18,4 @@ npm run dev
 
 to start the development server. You can then visit [http://localhost:3000](http://localhost:3000) to see your app, which should look something like this:
 
-![create-llama interface](./images/create_llama.png)
+![create-llama interface](/images/create_llama.png)

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

@@ -11,7 +11,7 @@ It may be useful to check out all the examples at once so you can try them out l
 ```bash npm2yarn
 npx degit run-llama/LlamaIndexTS/examples my-new-project
 cd my-new-project
-npm install
+npm i
 ```
 
 Then you can run any example in the folder with `tsx`, e.g.:

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

@@ -3,13 +3,6 @@ title: With Cloudflare Worker
 description: In this guide, you'll learn how to use LlamaIndex with CloudFlare Worker
 ---
 
-import {
-  SiNodedotjs,
-  SiDeno,
-  SiBun,
-  SiCloudflareworkers,
-} from "@icons-pack/react-simple-icons";
-
 Before you start, make sure you have try LlamaIndex.TS in Node.js to make sure you understand the basics.
 
 <Card

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

@@ -3,46 +3,17 @@ title: Installation
 description: How to install llamaindex packages.
 ---
 
-import {
-	SiNodedotjs,
-	SiTypescript,
-	SiNextdotjs,
-	SiCloudflareworkers,
-	SiVite
-} from "@icons-pack/react-simple-icons";
-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
-	```
+```package-install
+npm i llamaindex
+```
 
-	```shell tab="yarn"
-	yarn add llamaindex
-	```
+In most cases, you'll also need an LLM package and the Workflow package to use LlamaIndex. For example, to use the OpenAI LLM with agents, you would install the following:
 
-	```shell tab="pnpm"
-	pnpm add llamaindex
-	```
-</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>
+```package-install
+npm i @llamaindex/openai @llamaindex/workflow
+```
 
 Go to [LLM APIs](/docs/llamaindex/modules/models/llms) to find out how to use other LLMs.
 

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

@@ -3,8 +3,6 @@ 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.
@@ -28,19 +26,9 @@ For more information, see the [How to read environment variables from Node.js](h
 
 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>
+```package-install
+npm i gpt-tokenizer
+```
 
 **Note**: This only works for Node.js
 

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

@@ -40,19 +40,7 @@ Make sure to set [moduleResolution](https://www.typescriptlang.org/docs/handbook
 }
 ```
 
-We recommend using `bundler` or `nodenext`, but due to popularity of `node`, we still added support for it, but with import path limitations.
-
-So you may encounter type errors when importing sub paths from the `llamaindex` package like:
-
-```ts
-import { Settings } from "llamaindex/Settings";
-```
-
-The simplest way to fix this without changing `moduleResolution` is to import directly from `llamaindex`:
-
-```ts
-import { Settings } from "llamaindex";
-```
+We recommend using `bundler` or `nodenext`, but due to popularity of `node`, we still added support for it.
 
 ## Enable AsyncIterable for `Web Stream` API
 
@@ -68,7 +56,8 @@ Some modules uses `Web Stream` API like `ReadableStream` and `WritableStream`, y
 ```
 
 ```typescript
-import { agent, tool } from 'llamaindex'
+import { tool } from 'llamaindex'
+import { agent } from "@llamaindex/workflow";
 import { openai } from "@llamaindex/openai";
 
 Settings.llm = openai({

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

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

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

@@ -3,13 +3,6 @@ title: What is LlamaIndex.TS
 description: LlamaIndex is the leading data framework for building LLM applications
 ---
 
-import {
-  SiNodedotjs,
-  SiDeno,
-  SiBun,
-  SiCloudflareworkers,
-} from "@icons-pack/react-simple-icons";
-
 LlamaIndex is a framework for building context-augmented generative AI applications with LLMs including agents and workflows.
 
 The TypeScript implementation is designed for JavaScript server side applications using <SiNodedotjs className="inline" color="#5FA04E" /> Node.js, <SiDeno className="inline" color="#70FFAF" /> Deno, <SiBun className="inline" /> Bun, <SiCloudflareworkers className="inline" color="#F38020" /> Cloudflare Workers, and more.

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

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

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

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

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

@@ -11,8 +11,8 @@ LlamaIndex provides integration with Vercel's AI SDK, allowing you to create pow
 
 First, install the required dependencies:
 
-```bash
-npm install @llamaindex/vercel ai
+```package-install
+npm i @llamaindex/vercel ai
 ```
 
 ## Using Vercel AI's Model Providers 

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

@@ -2,8 +2,6 @@
 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
@@ -33,19 +31,9 @@ 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>
+```package-install
+npm i @llamaindex/openai
+```
 
 For more details on available AI model providers and their configuration, see the [LLMs documentation](/docs/llamaindex/modules/models/llms) and the [Embedding Models documentation](/docs/llamaindex/modules/models/embeddings).
 

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

@@ -12,7 +12,8 @@ Agent Workflows are a powerful system that enables you to create and orchestrate
 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, tool } from "llamaindex";
+import { tool } from "llamaindex";
+import { agent } from "@llamaindex/workflow";
 import { openai } from "@llamaindex/openai";
 
 // Define a joke-telling tool
@@ -40,17 +41,17 @@ console.log(result); // Baby Llama is called cria
 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";
+import { agentToolCallEvent, agentStreamEvent } from "@llamaindex/workflow";
 
 // Get the workflow execution context
-const context = workflow.run("Tell me something funny");
+const events = workflow.runStream("Tell me something funny");
 
 // Stream and handle events
-for await (const event of context) {
-  if (event instanceof AgentToolCall) {
+for await (const event of events) {
+  if (agentToolCallEvent.include(event)) {
     console.log(`Tool being called: ${event.data.toolName}`);
   }
-  if (event instanceof AgentStream) {
+  if (agentStreamEvent.include(event)) {
     process.stdout.write(event.data.delta);
   }
 }
@@ -68,7 +69,8 @@ An Agent Workflow can orchestrate multiple agents, enabling complex interactions
 Here's an example of a multi-agent system that combines joke-telling and weather information:
 
 ```typescript
-import { multiAgent, agent, tool } from "llamaindex";
+import { tool } from "llamaindex";
+import { multiAgent, agent } from "@llamaindex/workflow";
 import { openai } from "@llamaindex/openai";
 import { z } from "zod";
 

apps/next/src/content/docs/llamaindex/modules/agents/tool/index.mdx

@@ -17,7 +17,8 @@ The `parameters` field in the tool configuration is defined using `zod`, a TypeS
 
 Example:
 ```ts
-import { agent, tool } from "llamaindex";
+import { tool } from "llamaindex";
+import { agent } from "@llamaindex/workflow";
 import { z } from "zod";
 
 // first arg is LLM input, second is bound arg
@@ -46,7 +47,7 @@ In this example, `z.object` is used to define a schema for the `parameters` wher
 You can import built-in tools from the `@llamaindex/tools` package.
 
 ```ts
-import { agent } from "llamaindex";
+import { agent } from "@llamaindex/workflow";
 import { wiki } from "@llamaindex/tools";
 
 const researchAgent = agent({
@@ -57,6 +58,41 @@ const researchAgent = agent({
 });
 ```
 
+## MCP tools
+
+If you have a MCP server running, you can fetch tools from the server and use them in your agents.
+
+```ts
+// 1. Import MCP tools adapter
+import { mcp } from "@llamaindex/tools";
+import { agent } from "@llamaindex/workflow";
+
+// 2. Initialize a MCP client
+// by npx
+const server = mcp({
+  command: "npx",
+  args: ["-y", "@modelcontextprotocol/server-filesystem", "."],
+  verbose: true,
+});
+// or by SSE
+const server = mcp({
+  url: "http://localhost:8000/mcp",
+  verbose: true,
+});
+
+// 3. Get tools from MCP server
+const tools = await server.tools();
+
+// Now you can create an agent with the tools
+const agent = agent({
+  name: "My Agent",
+  systemPrompt: "You are a helpful assistant that can use the provided tools to answer questions.",
+  llm: openai({ model: "gpt-4o" }),
+  tools: tools,
+});
+```
+
+
 ## Function tool
 
 You can still use the `FunctionTool` class to define a tool.
@@ -79,7 +115,8 @@ Note: calling the `bind` method will return a new `FunctionTool` instance, witho
 
 Example to pass a `userToken` as additional argument:
 ```ts
-import { agent, tool } from "llamaindex";
+import { tool } from "llamaindex";
+import { agent } from "@llamaindex/workflow";
 
 // first arg is LLM input, second is bound arg
 const queryKnowledgeBase = async ({ question }, { userToken }) => {

apps/next/src/content/docs/llamaindex/modules/agents/workflows.mdx

@@ -2,163 +2,17 @@
 title: Workflows
 ---
 
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSource from "!raw-loader!@/examples/workflow/joke.ts";
+A `Workflow` in LlamaIndex is a lightweight, event-driven abstraction used to chain together several events. Workflows are made up of `handlers`, with each one responsible for processing specific event types and emitting new events.
 
-A `Workflow` in LlamaIndexTS is an event-driven abstraction used to chain together several events. Workflows are made up of `steps`, with each step responsible for handling certain event types and emitting new events.
+Workflows are designed to be flexible and can be used to build agents, RAG flows, extraction flows, or anything else you want to implement.
 
-Workflows in LlamaIndexTS work by defining step functions that handle specific event types and emit new events.
+To use workflows install this package:
 
-When a step function is added to a workflow, you need to specify the input and optionally the output event types (used for validation). The specification of the input events ensures each step only runs when an accepted event is ready.
-
-You can create a `Workflow` to do anything! Build an agent, a RAG flow, an extraction flow, or anything else you want.
-
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-
-<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
-	```shell tab="npm"
-	npm install @llamaindex/workflow
-	```
-
-	```shell tab="yarn"
-	yarn add @llamaindex/workflow
-	```
-
-	```shell tab="pnpm"
-	pnpm add @llamaindex/workflow
-	```
-</Tabs>
-
-## Getting Started
-
-As an illustrative example, let's consider a naive workflow where a joke is generated and then critiqued.
-
-<DynamicCodeBlock lang="ts" code={CodeSource} />
-
-There's a few moving pieces here, so let's go through this piece by piece.
-
-### Defining Workflow Events
-
-```typescript
-export class JokeEvent extends WorkflowEvent<{ joke: string }> {}
+```package-install
+npm i @llamaindex/workflow
 ```
 
-Events are user-defined classes that extend `WorkflowEvent` and contain arbitrary data provided as template argument. In this case, our workflow relies on a single user-defined event, the `JokeEvent` with a `joke` attribute of type `string`.
+This package is a stable, production-ready version of our [llama-flow](/docs/llamaflow) project. 
 
-### Setting up the Workflow Class
+While you can still reference the llama-flow documentation for detailed information about the underlying concepts, we recommend using the `@llamaindex/workflow` package for all new projects to ensure stability and long-term availability.
 
-```typescript
-const llm = new OpenAI();
-...
-const jokeFlow = new Workflow<unknown, string, string>();
-```
-
-Our workflow is implemented by initiating the `Workflow` class with three generic types: the context type (unknown), input type (string), and output type (string). The context type is `unknown`, as we're not using a shared context in this example.
-
-For simplicity, we created an `OpenAI` llm instance that we're using for inference in our workflow.
-
-### Workflow Entry Points
-
-```typescript
-const generateJoke = async (_: unknown, ev: StartEvent<string>) => {
-  const prompt = `Write your best joke about ${ev.data}.`;
-  const response = await llm.complete({ prompt });
-  return new JokeEvent({ joke: response.text });
-};
-```
-
-Here, we come to the entry-point of our workflow. While events are user-defined, there are two special-case events, the `StartEvent` and the `StopEvent`. These events are predefined, but we can specify the payload type using generic types. We're using `StartEvent<string>` to indicate that we're going to send an input of type string.
-
-To add this step to the workflow, we use the `addStep` method with an object specifying the input and output event types:
-
-```typescript
-jokeFlow.addStep(
-  {
-    inputs: [StartEvent<string>],
-    outputs: [JokeEvent],
-  },
-  generateJoke
-);
-```
-
-### Workflow Exit Points
-
-```typescript
-const critiqueJoke = async (_: unknown, ev: JokeEvent) => {
-  const prompt = `Give a thorough critique of the following joke: ${ev.data.joke}`;
-  const response = await llm.complete({ prompt });
-  return new StopEvent(response.text);
-};
-```
-
-Here, we have our second and last step in the workflow. We know it's the last step because the special `StopEvent` is returned. When the workflow encounters a returned `StopEvent`, it immediately stops the workflow and returns the result. Note that we're using the generic type `StopEvent<string>` to indicate that we're returning a string.
-
-Add this step to the workflow:
-
-```typescript
-jokeFlow.addStep(
-  {
-    inputs: [JokeEvent],
-    outputs: [StopEvent<string>],
-  },
-  critiqueJoke
-);
-```
-
-### Running the Workflow
-
-```typescript
-const result = await jokeFlow.run("pirates");
-console.log(result.data.result);
-```
-
-Lastly, we run the workflow. The `.run()` method is async, so we use await here to wait for the result.
-
-## Working with Shared Context/State
-
-Optionally, you can choose to use a shared context between steps by specifying a context type when creating the workflow. Here's an example where multiple steps access a shared state:
-
-```typescript
-import { HandlerContext } from "llamaindex";
-
-type MyContextData = {
-  query: string;
-  intermediateResults: any[];
-}
-
-const query = async (context: HandlerContext<MyContextData>, ev: MyEvent) => {
-  // get the query from the context
-  const query = context.data.query;
-  // do something with context and event
-  const val = ...
-  // store in context
-  context.data.intermediateResults.push(val);
-
-  return new StopEvent({ result });
-};
-```
-
-## Waiting for Multiple Events
-
-The context does more than just hold data, it also provides utilities to buffer and wait for multiple events.
-
-For example, you might have a step that waits for a query and retrieved nodes before synthesizing a response:
-
-```typescript
-const synthesize = async (context: Context, ev1: QueryEvent, ev2: RetrieveEvent) => {
-  const subPrompts = [`Answer this query using the context provided: ${ev1.data.query}`, `Context: ${ev2.data.context}`];
-  const prompt = subPrompts.join("\n");
-  const response = await llm.complete({ prompt });
-  return new StopEvent({ result: response.text });
-};
-```
-
-Passing multiple events, we can buffer and wait for ALL expected events to arrive. The receiving step function will only be called once all events have arrived.
-
-## Manually Triggering Events
-
-Normally, events are triggered by returning another event during a step. However, events can also be manually dispatched using the `ctx.sendEvent(event)` method within a workflow.
-
-## Examples
-
-You can find many useful examples of using workflows in the [examples folder](https://github.com/run-llama/LlamaIndexTS/blob/main/examples/workflow).

apps/next/src/content/docs/llamaindex/modules/data/data_index/managed.mdx

@@ -3,10 +3,6 @@ title: Managed Index
 description: Managed index using LlamaCloud
 ---
 
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSource from "!raw-loader!@/examples/cloud/chat.ts";
-import CodeSource2 from "!raw-loader!@/examples/cloud/from-documents.ts";
-
 LlamaCloud is a new generation of managed parsing, ingestion, and retrieval services, designed to bring production-grade context-augmentation to your LLM and RAG applications.
 
 LlamaCloud supports
@@ -22,13 +18,13 @@ Visit [LlamaCloud](https://cloud.llamaindex.ai) to sign in and get an API key.
 
 Here's an example of how to create a managed index by ingesting a couple of documents:
 
-<DynamicCodeBlock lang="ts" code={CodeSource2} />
+<include cwd>../../examples/cloud/chat.ts</include>
 
 ## Use a Managed Index
 
 Here's an example of how to use a managed index together with a chat engine:
 
-<DynamicCodeBlock lang="ts" code={CodeSource} />
+<include cwd>../../examples/cloud/from-documents.ts</include>
 
 ## API Reference
 

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

@@ -7,21 +7,9 @@ These `Transformations` are applied to your input data, and the resulting nodes
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/openai @llamaindex/qdrant
+```
 
 ## Usage Pattern
 

apps/next/src/content/docs/llamaindex/modules/data/ingestion_pipeline/transformations/node-parser.mdx

@@ -2,8 +2,6 @@
 title: Node Parsers / Text Splitters
 description: Learn how to use Node Parsers and Text Splitters to extract data from documents.
 ---
-import { CodeNodeParserDemo } from '@/components/demo/code-node-parser.tsx';
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 Node parsers are a simple abstraction that take a list of `Document` objects, and chunk them into `Node` objects, such that each node is a specific chunk of the parent document. When a document is broken into nodes, all of it's attributes are inherited to the children nodes (i.e. `metadata`, text and metadata templates, etc.). You can read more about `Node` and `Document` properties [here](/docs/llamaindex/modules/data).
 
@@ -151,8 +149,6 @@ Try it out ⬇️
 
 <CodeNodeParserDemo/>
 
-import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
-
 <Accordions>
 	<Accordion title="Use it in browser">
 		You might setup WASM files for `web-tree-sitter` and use it in the browser.

apps/next/src/content/docs/llamaindex/modules/data/readers/discord.mdx

@@ -2,12 +2,15 @@
 title: DiscordReader
 ---
 
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSource from "!raw-loader!@/examples/readers/src/discord";
-
 DiscordReader is a simple data loader that reads all messages in a given Discord channel and returns them as Document objects.
 It uses the [@discordjs/rest](https://github.com/discordjs/discord.js/tree/main/packages/rest) library to fetch the messages.
 
+## Installation
+
+```package-install
+npm install @llamaindex/discord
+```
+
 ## Usage
 
 First step is to create a Discord Application and generating a bot token [here](https://discord.com/developers/applications).
@@ -15,7 +18,7 @@ In your Discord Application, go to the `OAuth2` tab and generate an invite URL b
 This will invite the bot with the necessary permissions to read messages.
 Copy the URL in your browser and select the server you want your bot to join.
 
-<DynamicCodeBlock lang="ts" code={CodeSource} />
+<include cwd>../../examples/readers/discord/reader.ts</include>
 
 ### Params
 

apps/next/src/content/docs/llamaindex/modules/data/readers/index.mdx

@@ -3,12 +3,6 @@ title: Loading Data
 description: Loading data using Readers into Documents
 ---
 
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSource from "!raw-loader!@/examples/readers/src/simple-directory-reader";
-import CodeSource2 from "!raw-loader!@/examples/readers/src/custom-simple-directory-reader";
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
-
 Before you can start indexing your documents, you need to load them into memory.
 A reader is a module that loads data from a file into a `Document` object.
 
@@ -19,46 +13,26 @@ To install readers call:
 
 		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"
-			npm install @llamaindex/readers
-			```
-
-			```shell tab="yarn"
-			yarn add @llamaindex/readers
-			```
-
-			```shell tab="pnpm"
-			pnpm add @llamaindex/readers
-			```
-
-		</Tabs>
+    ```package-install
+    npm i @llamaindex/readers
+    ```
 	</Accordion>
 </Accordions>
 
 We offer readers for different file formats.
 
-```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
+```ts twoslash
+import { CSVReader } from '@llamaindex/readers/csv';
+import { DocxReader } from '@llamaindex/readers/docx';
+import { HTMLReader } from '@llamaindex/readers/html';
+import { ImageReader } from '@llamaindex/readers/image';
+import { JSONReader } from '@llamaindex/readers/json';
+import { MarkdownReader } from '@llamaindex/readers/markdown';
+import { ObsidianReader } from '@llamaindex/readers/obsidian';
+import { PDFReader } from '@llamaindex/readers/pdf';
+import { TextFileReader } from '@llamaindex/readers/text';
 ```
 
-Additionally the following loaders exist without separate documentation:
-
-- `AssemblyAIReader` transcribes audio using [AssemblyAI](https://www.assemblyai.com/).
-  - [AudioTranscriptReader](/docs/api/classes/AudioTranscriptReader): loads entire transcript as a single document.
-  - [AudioTranscriptParagraphsReader](/docs/api/classes/AudioTranscriptParagraphsReader): creates a document per paragraph.
-  - [AudioTranscriptSentencesReader](/docs/api/classes/AudioTranscriptSentencesReader): creates a document per sentence.
-  - [AudioSubtitlesReader](/docs/api/classes/AudioTranscriptParagraphsReader): creates a document containing the subtitles of a transcript.
-- [NotionReader](/docs/api/classes/NotionReader) loads [Notion](https://www.notion.so/) pages.
-- [SimpleMongoReader](/docs/api/classes/SimpleMongoReader) loads data from a [MongoDB](https://www.mongodb.com/).
-
-Check the [LlamaIndexTS Github](https://github.com/run-llama/LlamaIndexTS) for the most up to date overview of integrations.
-
 ## SimpleDirectoryReader
 
 [Open in StackBlitz](https://stackblitz.com/github/run-llama/LlamaIndexTS/tree/main/examples/readers?file=src/simple-directory-reader.ts&title=Simple%20Directory%20Reader)
@@ -67,7 +41,7 @@ LlamaIndex.TS supports easy loading of files from folders using the `SimpleDirec
 
 It is a simple reader that reads all files from a directory and its subdirectories and delegates the actual reading to the reader specified in the `fileExtToReader` map.
 
-<DynamicCodeBlock lang="ts" code={CodeSource} />
+<include cwd>../../examples/readers/src/simple-directory-reader.ts</include>
 
 Currently, the following readers are mapped to specific file types:
 
@@ -89,7 +63,7 @@ SimpleDirectoryReader supports up to 9 concurrent requests. Use the `numWorkers`
 
 ### Example
 
-<DynamicCodeBlock lang="ts" code={CodeSource2} />
+<include cwd>../../examples/readers/src/custom-simple-directory-reader.ts</include>
 
 ## Tips when using in non-Node.js environments
 

apps/next/src/content/docs/llamaindex/modules/data/readers/json.mdx

@@ -8,21 +8,9 @@ Supports streaming of large JSON data using [@discoveryjs/json-ext](https://gith
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/readers
+```
 
 ## Usage
 

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

@@ -6,21 +6,9 @@ LlamaParse `json` mode supports extracting any images found in a page object by
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/cloud @llamaindex/openai
+```
 
 ## Usage
 
@@ -124,6 +112,3 @@ The returned `imageDocs` have the alt text assigned as text and the image path a
 
 You can see the full example file [here](https://github.com/run-llama/LlamaIndexTS/blob/main/examples/readers/src/llamaparse-json.ts).
 
-## API Reference
-
-- [LlamaParseReader](/docs/api/classes/LlamaParseReader)

apps/next/src/content/docs/llamaindex/modules/data/readers/llama_parse/index.mdx

@@ -2,10 +2,6 @@
 title: LlamaParse
 ---
 
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSource from "!raw-loader!@/examples/readers/src/llamaparse";
-import CodeSource2 from "!raw-loader!@/examples/readers/src/simple-directory-reader-with-llamaparse.ts";
-
 LlamaParse is an API created by LlamaIndex to efficiently parse files, e.g. it's great at converting PDF tables into markdown.
 
 To use it, first login and get an API key from https://cloud.llamaindex.ai. Make sure to store the key as `apiKey` parameter or in the environment variable `LLAMA_CLOUD_API_KEY`.
@@ -17,7 +13,7 @@ Official documentation for LlamaParse can be found [here](https://docs.cloud.lla
 You can then use the `LlamaParseReader` class to load local files and convert them into a parsed document that can be used by LlamaIndex.
 See [reader.ts](https://github.com/run-llama/LlamaIndexTS/blob/main/packages/cloud/src/reader.ts) for a list of supported file types:
 
-<DynamicCodeBlock lang="ts" code={CodeSource} />
+<include cwd>../../examples/readers/src/llamaparse.ts</include>
 
 ### Params
 
@@ -36,7 +32,7 @@ They can be divided into two groups.
 #### Advanced params:
 
 - `resultType` can be set to `markdown`, `text` or `json`. Defaults to `text`. More information about `json` mode on the next pages.
-- `language` primarily helps with OCR recognition. Defaults to `en`. Click [here](/docs/api/type-aliases/Language) for a list of supported languages.
+- `language` primarily helps with OCR recognition. Defaults to `en`.
 - `parsingInstructions?` Optional. Can help with complicated document structures. See this [LlamaIndex Blog Post](https://www.llamaindex.ai/blog/launching-the-first-genai-native-document-parsing-platform) for an example.
 - `skipDiagonalText?` Optional. Set to true to ignore diagonal text. (Text that is not rotated 0, 90, 180 or 270 degrees)
 - `invalidateCache?` Optional. Set to true to ignore the LlamaCloud cache. All document are kept in cache for 48hours after the job was completed to avoid processing the same document twice. Can be useful for testing when trying to re-parse the same document with, e.g. different `parsingInstructions`.
@@ -60,9 +56,8 @@ They can be divided into two groups.
 
 Below a full example of `LlamaParse` integrated in `SimpleDirectoryReader` with additional options.
 
-<DynamicCodeBlock lang="ts" code={CodeSource2} />
+<include cwd>../../examples/readers/src/simple-directory-reader-with-llamaparse.ts</include>
 
 ## API Reference
 
 - [SimpleDirectoryReader](/docs/api/classes/SimpleDirectoryReader)
-- [LlamaParseReader](/docs/api/classes/LlamaParseReader)

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

@@ -6,21 +6,9 @@ In JSON mode, LlamaParse will return a data structure representing the parsed ob
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/cloud
+```
 
 ## Usage
 
@@ -110,5 +98,4 @@ You can assign any other values of the JSON response to the Document as needed.
 
 ## API Reference
 
-- [LlamaParseReader](/docs/api/classes/LlamaParseReader)
 - [SimpleDirectoryReader](/docs/api/classes/SimpleDirectoryReader)

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

@@ -13,21 +13,9 @@ Check the [LlamaIndexTS Github](https://github.com/run-llama/LlamaIndexTS) for t
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/postgres
+```
 
 You can configure the `schemaName`, `tableName`, `namespace`, and
 `connectionString`. If a `connectionString` is not

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

@@ -13,21 +13,9 @@ Check the [LlamaIndexTS Github](https://github.com/run-llama/LlamaIndexTS) for t
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/postgres
+```
 
 You can configure the `schemaName`, `tableName`, `namespace`, and
 `connectionString`. If a `connectionString` is not

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

@@ -13,21 +13,9 @@ 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>
+```package-install
+npm i llamaindex @llamaindex/qdrant
+```
 
 ## Importing the modules
 
@@ -100,7 +88,7 @@ async function main() {
 
   const response = await queryEngine.query({
     query: "What did the author do in college?",
-  });
+  }); // Additional filters and params can be passed as options
 
   // Output response
   console.log(response.toString());

apps/next/src/content/docs/llamaindex/modules/data/stores/vector_stores/supabase.mdx

@@ -8,21 +8,9 @@ To use this vector store, you need a Supabase project. You can create one at [su
 
 ## Installation
 
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-
-<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
-  ```shell tab="npm"
-  npm install llamaindex @llamaindex/supabase
-  ```
-
-  ```shell tab="yarn"
-  yarn add llamaindex @llamaindex/supabase
-  ```
-
-  ```shell tab="pnpm"
-  pnpm add llamaindex @llamaindex/supabase
-  ```
-</Tabs>
+```package-install
+npm i llamaindex @llamaindex/supabase
+```
 
 ## Database Setup
 

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

@@ -10,21 +10,9 @@ This is useful for measuring if the response was correct. The evaluator returns
 
 Firstly, you need to install the package:
 
-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>
+```package-install
+npm i llamaindex @llamaindex/openai
+```
 
 Set the OpenAI API key:
 

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

@@ -12,22 +12,9 @@ This is useful for measuring if the response was hallucinated. The evaluator ret
 
 Firstly, you need to install the package:
 
-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>
-
+```package-install
+npm i llamaindex @llamaindex/openai
+```
 
 Set the OpenAI API key:
 

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

@@ -10,22 +10,9 @@ It is useful for measuring if the response was relevant to the query. The evalua
 
 Firstly, you need to install the package:
 
-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>
-
+```package-install
+npm i llamaindex @llamaindex/openai
+```
 
 Set the OpenAI API key:
 

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

@@ -7,21 +7,9 @@ Check out available embedding models [here](https://deepinfra.com/models/embeddi
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/deepinfra
+```
 
 ```ts
 import { Document, Settings, VectorStoreIndex } from "llamaindex";

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

@@ -6,21 +6,9 @@ To use Gemini embeddings, you need to import `GeminiEmbedding` from `@llamaindex
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/google
+```
 
 ```ts
 import { Document, Settings, VectorStoreIndex } from "llamaindex";

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

@@ -6,21 +6,9 @@ To use HuggingFace embeddings, you need to import `HuggingFaceEmbedding` from `@
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/huggingface
+```
 
 ```ts
 import { Document, Settings, VectorStoreIndex } from "llamaindex";

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

@@ -8,21 +8,9 @@ This can be explicitly updated through `Settings.embedModel`.
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/openai
+```
 
 ```typescript
 import { OpenAIEmbedding } from "@llamaindex/openai";

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

@@ -6,21 +6,9 @@ To use MistralAI embeddings, you need to import `MistralAIEmbedding` from `@llam
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/mistral
+```
 
 ```ts
 import { Document, Settings, VectorStoreIndex } from "llamaindex";

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

@@ -14,22 +14,9 @@ To find out more about the latest features, updates, and available models, visit
 
 ## Setup
 
-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>
-
+```package-install
+npm i llamaindex @llamaindex/mixedbread
+```
 
 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.
 

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

@@ -14,21 +14,9 @@ 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>
+```package-install
+npm i llamaindex @llamaindex/ollama
+```
 
 ```ts
 import { OllamaEmbedding } from "@llamaindex/ollama";

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

@@ -6,21 +6,9 @@ To use OpenAI embeddings, you need to import `OpenAIEmbedding` from `@llamaindex
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/openai
+```
 
 ```ts
 import { OpenAIEmbedding } from "@llamaindex/openai";

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

@@ -6,21 +6,9 @@ To use VoyageAI embeddings, you need to import `VoyageAIEmbedding` from `@llamai
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/voyage-ai
+```
 
 ```ts
 import { VoyageAIEmbedding } from "@llamaindex/voyage-ai";

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

@@ -4,21 +4,9 @@ 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>
+```shell tab="npm"
+npm i llamaindex @llamaindex/anthropic
+```
 
 ## Usage
 

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

@@ -2,101 +2,43 @@
 title: Azure OpenAI
 ---
 
-To use Azure OpenAI, you only need to set a few environment variables together with the `OpenAI` class.
-
-For example:
-
-## Environment Variables
-
-```
-export AZURE_OPENAI_KEY="<YOUR KEY HERE>"
-export AZURE_OPENAI_ENDPOINT="<YOUR ENDPOINT, see https://learn.microsoft.com/en-us/azure/ai-services/openai/quickstart?tabs=command-line%2Cpython&pivots=rest-api>"
-export AZURE_OPENAI_DEPLOYMENT="gpt-4" # or some other deployment name
-```
+To use Azure OpenAI, you only need to install the `@llamaindex/azure` package:
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/azure
+```
 
 ## Usage
 
+The class `AzureOpenAI` is used for setting the LLM and `AzureOpenAIEmbedding` is used for setting the embedding model, e.g.:
+
 ```ts
 import { Settings } from "llamaindex";
-import { OpenAI } from "@llamaindex/openai";
+import { AzureOpenAI, AzureOpenAIEmbedding } from "@llamaindex/azure";
 
-Settings.llm = new OpenAI({ model: "gpt-4", temperature: 0 });
-```
-
-## Load and index documents
-
-For this example, we will use a single document. In a real-world scenario, you would have multiple documents to index.
-
-```ts
-const document = new Document({ text: essay, id_: "essay" });
-
-const index = await VectorStoreIndex.fromDocuments([document]);
-```
-
-## Query
-
-```ts
-const queryEngine = index.asQueryEngine();
-
-const query = "What is the meaning of life?";
-
-const results = await queryEngine.query({
-  query,
+Settings.llm = new AzureOpenAI({ 
+  apiKey: '[key]',
+  deployment: '[model]',
+  apiVersion: '[version]',
+  endpoint: `https://[deployment].openai.azure.com/`, 
+});
+Settings.embedModel = new AzureOpenAIEmbedding({
+  apiKey: '[key]',
+  deployment: '[embedding-model]',
+  apiVersion: '[version]',
+  endpoint: `https://[deployment].openai.azure.com/`, 
 });
 ```
 
-## Full Example
+Instead of explicitly setting the API key, deployment, version, and endpoint in the constructor, you can use the following environment variables: `AZURE_OPENAI_DEPLOYMENT` for the model deployment name, `AZURE_OPENAI_KEY` for your API key, `AZURE_OPENAI_ENDPOINT` for your Azure endpoint URL, and `AZURE_OPENAI_API_VERSION` for the API version.
 
-```ts
-import { Document, VectorStoreIndex, Settings } from "llamaindex";
-import { OpenAI } from "@llamaindex/openai";
+## Examples
 
-Settings.llm = new OpenAI({ model: "gpt-4", temperature: 0 });
-
-async function main() {
-  const document = new Document({ text: essay, id_: "essay" });
-
-  // Load and index documents
-  const index = await VectorStoreIndex.fromDocuments([document]);
-
-  // get retriever
-  const retriever = index.asRetriever();
-
-  // Create a query engine
-  const queryEngine = index.asQueryEngine({
-    retriever,
-  });
-
-  const query = "What is the meaning of life?";
-
-  // Query
-  const response = await queryEngine.query({
-    query,
-  });
-
-  // Log the response
-  console.log(response.response);
-}
-```
+See the [Azure examples](https://github.com/run-llama/LlamaIndexTS/tree/main/examples/storage/azure) for more examples of how to use Azure OpenAI.
 
 ## API Reference
 
-- [OpenAI](/docs/api/classes/OpenAI)
+- [AzureOpenAI](/docs/api/classes/AzureOpenAI)
+- [AzureOpenAIEmbedding](/docs/api/classes/AzureOpenAIEmbedding)

apps/next/src/content/docs/llamaindex/modules/models/llms/bedrock.mdx

@@ -4,21 +4,9 @@ title: Bedrock
 
 ## Installation
 
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-
-<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
-	```shell tab="npm"
-	npm install llamaindex @llamaindex/community
-	```
-
-	```shell tab="yarn"
-	yarn add llamaindex @llamaindex/community
-	```
-
-	```shell tab="pnpm"
-	pnpm add llamaindex @llamaindex/community
-	```
-</Tabs>
+```package-install
+npm i llamaindex @llamaindex/community
+```
 
 ## Usage
 
@@ -57,6 +45,7 @@ META_LLAMA3_2_1B_INSTRUCT = "meta.llama3-2-1b-instruct-v1:0"; // only available
 META_LLAMA3_2_3B_INSTRUCT = "meta.llama3-2-3b-instruct-v1:0"; // only available via inference endpoints (see below)
 META_LLAMA3_2_11B_INSTRUCT = "meta.llama3-2-11b-instruct-v1:0"; // only available via inference endpoints (see below), multimodal and function call supported
 META_LLAMA3_2_90B_INSTRUCT = "meta.llama3-2-90b-instruct-v1:0"; // only available via inference endpoints (see below), multimodal and function call supported
+AMAZON_NOVA_PREMIER_1 = "amazon.nova-premier-v1:0";
 AMAZON_NOVA_PRO_1 = "amazon.nova-pro-v1:0";
 AMAZON_NOVA_LITE_1 = "amazon.nova-lite-v1:0";
 AMAZON_NOVA_MICRO_1 = "amazon.nova-micro-v1:0";
@@ -76,6 +65,7 @@ US_META_LLAMA_3_2_1B_INSTRUCT = "us.meta.llama3-2-1b-instruct-v1:0";
 US_META_LLAMA_3_2_3B_INSTRUCT = "us.meta.llama3-2-3b-instruct-v1:0";
 US_META_LLAMA_3_2_11B_INSTRUCT = "us.meta.llama3-2-11b-instruct-v1:0";
 US_META_LLAMA_3_2_90B_INSTRUCT = "us.meta.llama3-2-90b-instruct-v1:0";
+US_AMAZON_NOVA_PRO_1 = "us.amazon.nova-premier-v1:0";
 US_AMAZON_NOVA_PRO_1 = "us.amazon.nova-pro-v1:0";
 US_AMAZON_NOVA_LITE_1 = "us.amazon.nova-lite-v1:0";
 US_AMAZON_NOVA_MICRO_1 = "us.amazon.nova-micro-v1:0";
@@ -86,6 +76,10 @@ EU_ANTHROPIC_CLAUDE_3_SONNET = "eu.anthropic.claude-3-sonnet-20240229-v1:0";
 EU_ANTHROPIC_CLAUDE_3_5_SONNET = "eu.anthropic.claude-3-5-sonnet-20240620-v1:0";
 EU_META_LLAMA_3_2_1B_INSTRUCT = "eu.meta.llama3-2-1b-instruct-v1:0";
 EU_META_LLAMA_3_2_3B_INSTRUCT = "eu.meta.llama3-2-3b-instruct-v1:0";
+EU_AMAZON_NOVA_PRO_1 = "eu.amazon.nova-premier-v1:0";
+EU_AMAZON_NOVA_PRO_1 = "eu.amazon.nova-pro-v1:0";
+EU_AMAZON_NOVA_LITE_1 = "eu.amazon.nova-lite-v1:0";
+EU_AMAZON_NOVA_MICRO_1 = "eu.amazon.nova-micro-v1:0";
 ```
 
 Sonnet, Haiku and Opus are multimodal, image_url only supports base64 data url format, e.g. `data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==`
@@ -126,11 +120,11 @@ async function main() {
 
 ```ts
 import { BEDROCK_MODELS, Bedrock } from "@llamaindex/community";
-import { FunctionTool, LLMAgent } from "llamaindex";
+import { tool } from "llamaindex";
+import { agent } from "@llamaindex/workflow";
 import { z } from "zod";
 
-const sumNumbers = FunctionTool.from(
-  ({ a, b }: { a: number; b: number }) => `${a + b}`,
+const sumNumbers = tool(
   {
     name: "sumNumbers",
     description: "Use this function to sum two numbers",
@@ -142,11 +136,11 @@ const sumNumbers = FunctionTool.from(
         description: "The second number",
       }),
     }),
+    execute: ({ a, b }: { a: number; b: number }) => `${a + b}`,
   },
 );
 
-const divideNumbers = FunctionTool.from(
-  ({ a, b }: { a: number; b: number }) => `${a / b}`,
+const divideNumbers = tool(
   {
     name: "divideNumbers",
     description: "Use this function to divide two numbers",
@@ -158,6 +152,7 @@ const divideNumbers = FunctionTool.from(
         description: "The divisor b to divide by",
       }),
     }),
+    execute: ({ a, b }: { a: number; b: number }) => `${a / b}`,
   },
 );
 
@@ -167,15 +162,15 @@ const bedrock = new Bedrock({
 });
 
 async function main() {
-  const agent = new LLMAgent({
+  const myAgent = agent({
     llm: bedrock,
     tools: [sumNumbers, divideNumbers],
   });
 
-  const response = await agent.chat({
-    message: "How much is 5 + 5? then divide by 2",
-  });
+  const response = await myAgent.run(
+    "How much is 5 + 5? then divide by 2",
+  );
 
-  console.log(response.message);
+  console.log(response);
 }
 ```

apps/next/src/content/docs/llamaindex/modules/models/llms/deepinfra.mdx

@@ -6,21 +6,9 @@ Check out available LLMs [here](https://deepinfra.com/models/text-generation).
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/deepinfra
+```
 
 ```ts
 import { DeepInfra } from "@llamaindex/deepinfra";

apps/next/src/content/docs/llamaindex/modules/models/llms/gemini.mdx

@@ -4,21 +4,9 @@ title: Gemini
 
 ## 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>
+```package-install
+npm i llamaindex @llamaindex/google
+```
 
 ## Usage
 
@@ -69,7 +57,7 @@ const gemini = new Gemini({
 To authenticate for local development:
 
 ```bash
-npm install @google-cloud/vertexai
+npm i @google-cloud/vertexai
 gcloud auth application-default login
 ```
 

apps/next/src/content/docs/llamaindex/modules/models/llms/groq.mdx

@@ -2,26 +2,11 @@
 title: Groq
 ---
 
-import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import CodeSource from "!raw-loader!@/examples/groq.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/groq
-	```
-
-	```shell tab="yarn"
-	yarn add llamaindex @llamaindex/groq
-	```
-
-	```shell tab="pnpm"
-	pnpm add llamaindex @llamaindex/groq
-	```
-</Tabs>
+```package-install
+npm i llamaindex @llamaindex/groq
+```
 
 ## Usage
 
@@ -70,7 +55,7 @@ const results = await queryEngine.query({
 
 ## Full Example
 
-<DynamicCodeBlock lang="ts" code={CodeSource} />
+<include cwd>../../examples/models/groq.ts</include>
 
 ## API Reference
 

apps/next/src/content/docs/llamaindex/modules/models/llms/index.mdx

@@ -8,21 +8,9 @@ The LLM 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>
+```package-install
+npm i llamaindex @llamaindex/openai
+```
 
 ```typescript
 import { OpenAI } from "@llamaindex/openai";

apps/next/src/content/docs/llamaindex/modules/models/llms/llama2.mdx

@@ -4,21 +4,9 @@ title: LLama2
 
 ## Installation
 
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-
-<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
-	```shell tab="npm"
-	npm install llamaindex @llamaindex/replicate
-	```
-
-	```shell tab="yarn"
-	yarn add llamaindex @llamaindex/replicate
-	```
-
-	```shell tab="pnpm"
-	pnpm add llamaindex @llamaindex/replicate
-	```
-</Tabs>
+```package-install
+npm i llamaindex @llamaindex/replicate
+```
 
 ## Usage
 

apps/next/src/content/docs/llamaindex/modules/models/llms/mistral.mdx

@@ -4,21 +4,9 @@ title: 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>
+```package-install
+npm i llamaindex @llamaindex/mistral
+```
 
 ## Usage
 

apps/next/src/content/docs/llamaindex/modules/models/llms/ollama.mdx

@@ -4,22 +4,9 @@ title: Ollama
 
 ## 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>
-
+```package-install
+npm i llamaindex @llamaindex/ollama
+```
 
 ## Usage
 

apps/next/src/content/docs/llamaindex/modules/models/llms/openai.mdx

@@ -4,22 +4,9 @@ title: 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>
-
+```package-install
+npm i llamaindex @llamaindex/openai
+```
 
 ```ts
 import { OpenAI } from "@llamaindex/openai";

apps/next/src/content/docs/llamaindex/modules/models/llms/perplexity.mdx

@@ -4,21 +4,9 @@ title: Perplexity LLM
 
 ## Installation
 
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-
-<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
-	```shell tab="npm"
-	npm install @llamaindex/perplexity
-	```
-
-	```shell tab="yarn"
-	yarn add @llamaindex/perplexity
-	```
-
-	```shell tab="pnpm"
-	pnpm add @llamaindex/perplexity
-	```
-</Tabs>
+```package-install
+npm i @llamaindex/perplexity
+```
 
 ## Usage
 

apps/next/src/content/docs/llamaindex/modules/models/llms/portkey.mdx

@@ -4,22 +4,9 @@ title: Portkey LLM
 
 ## Installation
 
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-
-<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
-	```shell tab="npm"
-	npm install llamaindex @llamaindex/portkey-ai
-	```
-
-	```shell tab="yarn"
-	yarn add llamaindex @llamaindex/portkey-ai
-	```
-
-	```shell tab="pnpm"
-	pnpm add llamaindex @llamaindex/portkey-ai
-	```
-</Tabs>
-
+```package-install
+npm i llamaindex @llamaindex/portkey-ai
+```
 
 ## Usage
 

apps/next/src/content/docs/llamaindex/modules/models/llms/together.mdx

@@ -4,21 +4,9 @@ title: Together LLM
 
 ## Installation
 
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-
-<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
-	```shell tab="npm"
-	npm install @llamaindex/together
-	```
-
-	```shell tab="yarn"
-	yarn add @llamaindex/together
-	```
-
-	```shell tab="pnpm"
-	pnpm add @llamaindex/together
-	```
-</Tabs>
+```package-install
+npm i @llamaindex/together
+```
 
 ## Usage
 

apps/next/src/content/docs/llamaindex/modules/rag/node_postprocessors/cohere_reranker.mdx

@@ -8,21 +8,9 @@ The Cohere Reranker is a postprocessor that uses the Cohere API to rerank the re
 
 Firstly, 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/cohere @llamaindex/openai
-	```
-
-	```shell tab="yarn"
-	yarn add llamaindex @llamaindex/cohere @llamaindex/openai
-	```
-
-	```shell tab="pnpm"
-	pnpm add llamaindex @llamaindex/cohere @llamaindex/openai
-	```
-</Tabs>
+```package-install
+npm i llamaindex @llamaindex/cohere @llamaindex/openai
+```
 
 Now, you will need to sign up for an API key at [Cohere](https://cohere.ai/). Once you have your API key you can import the necessary modules and create a new instance of the `CohereRerank` class.
 

apps/next/src/content/docs/llamaindex/modules/rag/node_postprocessors/index.mdx

@@ -4,21 +4,9 @@ title: Node Postprocessors
 
 ## Installation
 
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-
-<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
-	```shell tab="npm"
-	npm install llamaindex @llamaindex/cohere @llamaindex/openai
-	```
-
-	```shell tab="yarn"
-	yarn add llamaindex @llamaindex/cohere @llamaindex/openai
-	```
-
-	```shell tab="pnpm"
-	pnpm add llamaindex @llamaindex/cohere @llamaindex/openai
-	```
-</Tabs>
+```package-install
+npm i llamaindex @llamaindex/cohere @llamaindex/openai
+```
 
 ## Concept
 

apps/next/src/content/docs/llamaindex/modules/rag/node_postprocessors/jinaai_reranker.mdx

@@ -8,22 +8,9 @@ The Jina AI Reranker is a postprocessor that uses the Jina AI Reranker API to re
 
 Firstly, 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/openai
-	```
-
-	```shell tab="yarn"
-	yarn add llamaindex @llamaindex/openai
-	```
-
-	```shell tab="pnpm"
-	pnpm add llamaindex @llamaindex/openai
-	```
-</Tabs>
-
+```package-install
+npm i llamaindex @llamaindex/openai
+```
 
 Now, you will need to sign up for an API key at [Jina AI](https://jina.ai/reranker). Once you have your API key you can import the necessary modules and create a new instance of the `JinaAIReranker` class.
 

apps/next/src/content/docs/llamaindex/modules/rag/node_postprocessors/mixedbreadiai_reranker.mdx

@@ -17,22 +17,9 @@ To find out more about the latest features and updates, visit the [mixedbread.ai
 
 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/openai @llamaindex/mixedbread
-	```
-
-	```shell tab="yarn"
-	yarn add llamaindex @llamaindex/openai @llamaindex/mixedbread
-	```
-
-	```shell tab="pnpm"
-	pnpm add llamaindex @llamaindex/openai @llamaindex/mixedbread
-	```
-</Tabs>
-
+```package-install
+npm i llamaindex @llamaindex/openai @llamaindex/mixedbread
+```
 
 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 `MixedbreadAIReranker` class.
 

apps/next/src/content/docs/llamaindex/modules/rag/query_engines/metadata_filtering.mdx

@@ -10,21 +10,9 @@ You can also check our multi-tenancy blog post to see how metadata filtering can
 
 Firstly if you haven't already, you 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/openai @llamaindex/chroma
-	```
-
-	```shell tab="yarn"
-	yarn add llamaindex @llamaindex/openai @llamaindex/chroma
-	```
-
-	```shell tab="pnpm"
-	pnpm add llamaindex @llamaindex/openai @llamaindex/chroma
-	```
-</Tabs>
+```package-install
+npm i llamaindex @llamaindex/openai @llamaindex/chroma
+```
 
 Then you can import the necessary modules from `llamaindex`:
 

apps/next/src/content/docs/llamaindex/modules/rag/query_engines/router_query_engine.mdx

@@ -8,21 +8,9 @@ In this tutorial, we define a custom router query engine that selects one out of
 
 First, we need to install import the necessary modules from `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 @llamaindex/readers
-	```
-
-	```shell tab="yarn"
-	yarn add llamaindex @llamaindex/openai @llamaindex/readers
-	```
-
-	```shell tab="pnpm"
-	pnpm add llamaindex @llamaindex/openai @llamaindex/readers
-	```
-</Tabs>
+```package-install
+npm i llamaindex @llamaindex/openai @llamaindex/readers
+```
 
 ```ts
 import {

apps/next/src/content/docs/llamaindex/modules/ui/chat.mdx

@@ -2,7 +2,6 @@
 title: Using API Route
 description: Chat interface for your LlamaIndexTS application using API Route
 ---
-import { ChatDemo } from '../../../../../components/demo/chat/api/demo';
 
 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/modules/ui/install.mdx

@@ -16,7 +16,7 @@ npx shadcn@latest add https://ui.llamaindex.ai/r/chat.json
 To install the package, run the following command in your project directory:
 
 ```sh
-npm install @llamaindex/chat-ui
+npm i @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/modules/ui/llamaindex-server.mdx

@@ -3,8 +3,6 @@ title: Using LlamaIndex Server
 description: Running LlamaIndex workflows with both API endpoints and a user interface for interaction
 ---
 
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-
 # LlamaIndex Server
 
 LlamaIndexServer is a Next.js-based application that allows you to quickly launch your [LlamaIndex Workflows](https://ts.llamaindex.ai/docs/llamaindex/modules/agents/workflows) and [Agent Workflows](https://ts.llamaindex.ai/docs/llamaindex/modules/agents/agent_workflow) as an API server with an optional chat UI. It provides a complete environment for running LlamaIndex workflows with both API endpoints and a user interface for interaction.
@@ -18,23 +16,13 @@ LlamaIndexServer is a Next.js-based application that allows you to quickly launc
 
 ## Installation
 
-<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
-	```shell tab="npm"
-	npm install @llamaindex/server
-	```
-
-	```shell tab="yarn"
-	yarn add @llamaindex/server
-	```
-
-	```shell tab="pnpm"
-	pnpm add @llamaindex/server
-	```
-</Tabs>
+```package-install
+npm i @llamaindex/server
+```
 
 ## Quick Start
 
-Create index.ts file and add the following code:
+Create an `index.ts` file and add the following code:
 
 ```ts
 import { LlamaIndexServer } from "@llamaindex/server";
@@ -55,20 +43,20 @@ new LlamaIndexServer({
 
 In the same directory as `index.ts`, run the following command to start the server:
 
-  ```bash
-  tsx index.ts
-  ```
+```bash
+tsx index.ts
+```
 The server will start at `http://localhost:3000`
 
 You can also make a request to the server:
 
-  ```bash
-  curl -X POST "http://localhost:3000/api/chat" -H "Content-Type: application/json" -d '{"message": "Who is the first president of the United States?"}'
-  ```
+```bash
+curl -X POST "http://localhost:3000/api/chat" -H "Content-Type: application/json" -d '{"message": "Who is the first president of the United States?"}'
+```
 
 ## Configuration Options
 
-The LlamaIndexServer accepts the following configuration
+The `LlamaIndexServer` accepts the following configuration options:
 
 - `workflow`: A callable function that creates a workflow instance for each request
 - `uiConfig`: An object to configure the chat UI containing the following properties:
@@ -80,6 +68,72 @@ The LlamaIndexServer accepts the following configuration
 LlamaIndexServer accepts all the configuration options from Nextjs Custom Server such as `port`, `hostname`, `dev`, etc.
 See all Nextjs Custom Server options [here](https://nextjs.org/docs/app/building-your-application/configuring/custom-server).
 
+## AI-generated UI Components
+
+The LlamaIndex server provides support for rendering workflow events using custom UI components, allowing you to extend and customize the chat interface. 
+These components can be auto-generated using an LLM by providing a JSON schema of the workflow event. 
+
+### UI Event Schema 
+
+To display custom UI components, your workflow needs to emit UI events that have an event type for identification and a data object:
+
+```typescript
+class UIEvent extends WorkflowEvent<{
+  type: "ui_event";
+  data: UIEventData;
+}> {}
+```
+
+The `data` object can be any JSON object. To enable AI generation of the UI component, you need to provide a schema for that data (here we're using Zod):
+
+```typescript
+const MyEventDataSchema = z.object({
+  stage: z.enum(["retrieve", "analyze", "answer"]).describe("The current stage the workflow process is in."),
+  progress: z.number().min(0).max(1).describe("The progress in percent of the current stage"),
+}).describe("WorkflowStageProgress");
+
+type UIEventData = z.infer<typeof MyEventDataSchema>;
+```
+
+### Generate UI Components
+
+The `generateEventComponent` function uses an LLM to generate a custom UI component based on the JSON schema of a workflow event. The schema should contain accurate descriptions of each field so that the LLM can generate matching components for your use case. We've done this for you in the example above using the `describe` function from Zod:
+
+```typescript
+import { OpenAI } from "llamaindex";
+import { generateEventComponent } from "@llamaindex/server";
+import { MyEventDataSchema } from "./your-workflow";
+
+// Also works well with Claude 3.5 Sonnet and Google Gemini 2.5 Pro
+const llm = new OpenAI({ model: "gpt-4.1" });
+const code = generateEventComponent(MyEventDataSchema, llm);
+```
+
+After generating the code, we need to save it to a file. The file name must match the event type from your workflow (e.g., `ui_event.jsx` for handling events with `ui_event` type):
+
+```ts
+fs.writeFileSync("components/ui_event.jsx", code);
+```
+
+Feel free to modify the generated code to match your needs. If you're not satisfied with the generated code, we suggest improving the provided JSON schema first or trying another LLM.
+
+> Note that `generateEventComponent` is generating JSX code, but you can also provide a TSX file.
+
+
+### Server Setup
+
+To use the generated UI components, you need to initialize the LlamaIndex server with the `componentsDir` that contains your custom UI components:
+
+```ts
+new LlamaIndexServer({
+  workflow: createWorkflow,
+  uiConfig: {
+    appTitle: "LlamaIndex App",
+    componentsDir: "components",
+  },
+}).start();
+```
+
 ## Default Endpoints and Features
 
 ### Chat Endpoint
@@ -97,69 +151,19 @@ The server always provides a chat interface at the root path (`/`) with:
 ### Static File Serving
 
 - The server automatically mounts the `data` and `output` folders at `{server_url}{api_prefix}/files/data` (default: `/api/files/data`) and `{server_url}{api_prefix}/files/output` (default: `/api/files/output`) respectively.
-- Your workflows can use both folders to store and access files. As a convention, the `data` folder is used for documents that are ingested and the `output` folder is used for documents that are generated by the workflow.
+- Your workflows can use both folders to store and access files. By convention, the `data` folder is used for documents that are ingested, and the `output` folder is used for documents generated by the workflow.
 
 
-## Custom UI Components
-
-The LlamaIndex server provides support for rendering workflow events using custom UI components, allowing you to extend and customize the chat interface.
-
-### Overview
-
-Custom UI components are a powerful feature that enables you to:
-
-- Add custom interface elements to the chat UI using React JSX or TSX files
-- Extend the default chat interface functionality
-- Create specialized visualizations or interactions
-
-### Configuration
-
-Your workflow must emit events that fit this structure, allowing the LlamaIndex server to display the right UI components based on the event type.
-
-```json
-{
-    "type": "<event_name>",
-    "data": <data model>
-}
-```
-
-### Server Setup
-
-1. Initialize the LlamaIndex server with a component directory:
-
-```ts
-new LlamaIndexServer({
-  workflow: createWorkflow,
-  uiConfig: {
-    appTitle: "LlamaIndex App",
-    componentsDir: "components",
-  },
-}).start();
-```
-
-2. Add the custom component code to the directory following the naming pattern:
-
-   - File Extension: `.jsx` and `.tsx` for React components
-   - File Name: Should match the event type from your workflow (e.g., `deep_research_event.jsx` for handling `deep_research_event` type that you defined in your workflow). If there are TSX and JSX files with the same name, the TSX file will be used.
-   - Component Name: Export a default React component named `Component` that receives props from the event data
-
-   Example component structure:
-
-   ```jsx
-   function Component({ events }) {
-       // Your component logic here
-       return (
-           // Your UI code here
-       );
-   }
-   ```
-
 ## Best Practices
 
-1. Always provide a workflow factory that creates fresh workflow instances
-2. Use environment variables for sensitive configuration
-3. Use starter questions to guide users in the chat UI
+1. Always provide a workflow factory that creates a fresh workflow instance for each request.
+2. Use environment variables for sensitive configuration (e.g., API keys).
+3. Use starter questions to guide users in the chat UI.
 
 ## Getting Started with a New Project
 
-Want to start a new project with LlamaIndexServer? Check out our [create-llama](https://github.com/run-llama/create-llama) tool to quickly generate a new project with LlamaIndexServer.
+Want to start a new project with LlamaIndexServer? Check out our [create-llama](https://github.com/run-llama/create-llama) tool to quickly generate a new project with LlamaIndexServer.
+
+## API Reference
+
+- [LlamaIndexServer](https://github.com/run-llama/create-llama/blob/main/packages/server)

apps/next/src/content/docs/llamaindex/modules/ui/rsc.mdx

@@ -2,7 +2,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';
 
 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/more.mdx

@@ -3,13 +3,6 @@ title: More
 description: More
 ---
 
-import {
-  SiGithub,
-  SiNpm,
-  SiX,
-  SiDiscord,
-} from "@icons-pack/react-simple-icons";
-
 ## 🗺️ Ecosystem
 
 To download or contribute, find LlamaIndex on:

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

@@ -8,14 +8,14 @@ In this guide we'll walk you through the process of building an Agent in JavaScr
 
 In LlamaIndex, an agent is a semi-autonomous piece of software powered by an LLM that is given a task and executes a series of steps towards solving that task. It is given a set of tools, which can be anything from arbitrary functions up to full LlamaIndex query engines, and it selects the best available tool to complete each step. When each step is completed, the agent judges whether the task is now complete, in which case it returns a result to the user, or whether it needs to take another step, in which case it loops back to the start.
 
-![agent flow](./images/agent_flow.png)
+![agent flow](/images/agent_flow.png)
 
 ## Install LlamaIndex.TS
 
 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 @llamaindex/openai @llamaindex/readers @llamaindex/huggingface
+```package-install
+npm i llamaindex @llamaindex/openai @llamaindex/readers @llamaindex/huggingface @llamaindex/workflow
 ```
 
 ## Choose your model
@@ -33,7 +33,7 @@ OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXXXX
 We'll use `dotenv` to pull the API key out of that .env file, so also run:
 
 ```bash
-npm install dotenv
+npm i dotenv
 ```
 
 Now you're ready to [create your agent](2_create_agent).

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

@@ -35,11 +35,16 @@ First we'll need to pull in our dependencies. These are:
 import "dotenv/config";
 import {
   agent,
-  AgentStream,
-  tool,
+  agentStreamEvent,
   openai,
+} from "@llamaindex/workflow";
+import {
+  tool,
   Settings,
 } from "llamaindex";
+import {
+  openai,
+} from "@llamaindex/openai";
 import { z } from "zod";
 ```
 
@@ -108,11 +113,10 @@ const myAgent = agent({ tools });
 
 ### Ask the agent a question
 
-We can use the `chat` interface to ask our agent a question, and it will use the tools we've defined to find an answer.
+We can use the `run` method to ask our agent a question, and it will use the tools we've defined to find an answer.
 
 ```javascript
-const context = myAgent.run("Sum 101 and 303");
-const result = await context;
+const result = await myAgent.run("Sum 101 and 303");
 console.log(result.data);
 ```
 You will see the following output:
@@ -123,12 +127,13 @@ You will see the following output:
 { result: 'The sum of 101 and 303 is 404.' }
 ```
 
-To stream the response, you can use the `AgentStream` event which provides chunks of the response as they become available. This allows you to display the response incrementally rather than waiting for the full response:
+To stream the response, you need to call `runStream`, which returns a stream of events. 
+The `agentStreamEvent` provides chunks of the response as they become available. This allows you to display the response incrementally rather than waiting for the full response:
 
 ```javascript
-const context = myAgent.run("Add 101 and 303");
-for await (const event of context) {
-  if (event instanceof AgentStream) {
+const events = myAgent.runStream("Add 101 and 303");
+for await (const event of events) {
+  if (agentStreamEvent.include(event)) {
     process.stdout.write(event.data.delta);
   }
 }
@@ -140,18 +145,18 @@ for await (const event of context) {
 The sum of 101 and 303 is 404.
 ```
 
+Note that we're filtering for `agentStreamEvent` as an agent might return other events - more about that in the following section.
+
 ### Logging workflow events
 
 To log the workflow events, you can check the event type and log the event data.
 
 ```javascript
-const context = myAgent.run("Sum 202 and 404");
-for await (const event of context) {
-  if (event instanceof AgentStream) {
+const events = myAgent.runStream("Sum 202 and 404");
+for await (const event of events) {
+  if (agentStreamEvent.include(event)) {
     // Stream the response
-    for (const chunk of event.data.delta) {
-      process.stdout.write(chunk);
-    }
+    process.stdout.write(event.data.delta);
   } else {
     // Log other events
     console.log("\nWorkflow event:", JSON.stringify(event, null, 2));

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

@@ -30,16 +30,16 @@ Settings.llm = ollama({
 
 ### Run local agent
 
-You can also create local agent by importing `agent` from `llamaindex`.
+You can also create local agent by importing `agent` from `@llamaindex/workflow`.
 
 ```javascript
-import { agent } from "llamaindex";
+import { agent } from "@llamaindex/workflow";
 
 const workflow = agent({
   tools: [getWeatherTool],
 });
 
-const workflowContext = workflow.run(
+const resutl = workflow.run(
   "What's the weather like in San Francisco?",
 );
 ```