chore: update lock file

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

.github/workflows/preview.yml

@@ -25,4 +25,4 @@ jobs:
         run: pnpm run build
 
       - name: Pre Release
-        run: pnpx pkg-pr-new publish ./packages/*
+        run: pnpx pkg-pr-new publish ./packages/* ./packages/providers/*

.github/workflows/test.yml

@@ -12,6 +12,12 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
+env:
+  POSTGRES_HOST_AUTH_METHOD: trust
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+  TURBO_REMOTE_ONLY: true
+
 jobs:
   e2e:
     strategy:
@@ -22,9 +28,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-
+      - uses: ankane/setup-postgres@v1
+        with:
+          database: llamaindex_node_test
+          dev-files: true
+      - run: |
+          cd /tmp
+          git clone --branch v0.7.0 https://github.com/pgvector/pgvector.git
+          cd pgvector
+          make
+          sudo make install
       - uses: pnpm/action-setup@v4
-
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
@@ -42,7 +56,6 @@ jobs:
         node-version: [18.x, 20.x, 22.x]
     name: Test on Node.js ${{ matrix.node-version }}
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
@@ -76,13 +89,7 @@ jobs:
       - name: Run Type Check
         run: pnpm run type-check
       - name: Run Circular Dependency Check
-        run: pnpm dlx turbo run circular-check
-      - uses: actions/upload-artifact@v3
-        if: failure()
-        with:
-          name: typecheck-build-dist
-          path: ./packages/llamaindex/dist
-          if-no-files-found: error
+        run: pnpm run circular-check
   e2e-llamaindex-examples:
     strategy:
       fail-fast: false
@@ -92,7 +99,8 @@ jobs:
           - nextjs-agent
           - nextjs-edge-runtime
           - nextjs-node-runtime
-    #          - waku-query-engine
+          - waku-query-engine
+          - llama-parse-browser
     runs-on: ubuntu-latest
     name: Build LlamaIndex Example (${{ matrix.packages }})
     steps:
@@ -128,21 +136,36 @@ jobs:
         run: pnpm run build
       - name: Copy examples
         run: rsync -rv --exclude=node_modules ./examples ${{ runner.temp }}
-      - name: Pack @llamaindex/cloud
-        run: pnpm pack --pack-destination ${{ runner.temp }}
-        working-directory: packages/cloud
-      - name: Pack @llamaindex/core
-        run: pnpm pack --pack-destination ${{ runner.temp }}
-        working-directory: packages/core
-      - name: Pack @llamaindex/env
-        run: pnpm pack --pack-destination ${{ runner.temp }}
-        working-directory: packages/env
-      - name: Pack llamaindex
-        run: pnpm pack --pack-destination ${{ runner.temp }}
-        working-directory: packages/llamaindex
+      - name: Pack packages
+        run: |
+          for dir in packages/*; do
+            if [ -d "$dir" ] && [ -f "$dir/package.json" ] && [[ ! "$dir" =~ autotool ]]; then
+              echo "Packing $dir"
+              pnpm pack --pack-destination ${{ runner.temp }} -C $dir
+            else
+              echo "Skipping $dir, no package.json found"
+            fi
+          done
+      - name: Pack provider packages
+        run: |
+          for dir in packages/providers/*; do
+            if [ -d "$dir" ] && [ -f "$dir/package.json" ]; then
+              echo "Packing $dir"
+              pnpm pack --pack-destination ${{ runner.temp }} -C $dir
+            else
+              echo "Skipping $dir, no package.json found"
+            fi
+          done
       - name: Install
         run: npm add ${{ runner.temp }}/*.tgz
         working-directory: ${{ runner.temp }}/examples
       - name: Run Type Check
         run: npx tsc --project ./tsconfig.json
         working-directory: ${{ runner.temp }}/examples
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: build-dist
+          path: |
+            ${{ runner.temp }}/*.tgz
+          if-no-files-found: error

.prettierignore

@@ -4,3 +4,4 @@ pnpm-lock.yaml
 lib/
 dist/
 .docusaurus/
+.source/

.vscode/settings.json

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

README.md

@@ -7,7 +7,7 @@
 
 LlamaIndex is a data framework for your LLM application.
 
-Use your own data with large language models (LLMs, OpenAI ChatGPT and others) in Typescript and Javascript.
+Use your own data with large language models (LLMs, OpenAI ChatGPT and others) in JS runtime environments with TypeScript support.
 
 Documentation: https://ts.llamaindex.ai/
 
@@ -19,30 +19,84 @@ Try examples online:
 
 LlamaIndex.TS aims to be a lightweight, easy to use set of libraries to help you integrate large language models into your applications with your own data.
 
-## Multiple JS Environment Support
+## Compatibility
+
+### Multiple JS Environment Support
 
 LlamaIndex.TS supports multiple JS environments, including:
 
 - Node.js (18, 20, 22) ✅
 - Deno ✅
 - Bun ✅
-- React Server Components (Next.js) ✅
+- Nitro ✅
+- Vercel Edge Runtime ✅ (with some limitations)
+- Cloudflare Workers ✅ (with some limitations)
 
 For now, browser support is limited due to the lack of support for [AsyncLocalStorage-like APIs](https://github.com/tc39/proposal-async-context)
 
+### Supported LLMs:
+
+- OpenAI LLms
+- Anthropic LLms
+- Groq LLMs
+- Llama2, Llama3, Llama3.1 LLMs
+- MistralAI LLMs
+- Fireworks LLMs
+- DeepSeek LLMs
+- ReplicateAI LLMs
+- TogetherAI LLMs
+- HuggingFace LLms
+- DeepInfra LLMs
+- Gemini LLMs
+
 ## Getting started
 
 ```shell
 npm install llamaindex
 pnpm install llamaindex
 yarn add llamaindex
-jsr install @llamaindex/core
 ```
 
+### Setup TypeScript
+
+```json5
+{
+  compilerOptions: {
+    // ⬇️ add this line to your tsconfig.json
+    moduleResolution: "bundler", // or "node16"
+  },
+}
+```
+
+<details>
+   <summary>Why?</summary>
+  We are shipping both ESM and CJS module, and compatible with Vercel Edge, Cloudflare Workers, and other serverless platforms.
+
+So we are using [conditional exports](https://nodejs.org/api/packages.html#conditional-exports) to support all environments.
+
+This is a kind of modern way of shipping packages, but might cause TypeScript type check to fail because of legacy module resolution.
+
+Imaging you put output file into `/dist/openai.js` but you are importing `llamaindex/openai` in your code, and set `package.json` like this:
+
+```json
+{
+  "exports": {
+    "./openai": "./dist/openai.js"
+  }
+}
+```
+
+In old module resolution, TypeScript will not be able to find the module because it is not follow the file structure, even you run `node index.js` successfully. (on Node.js >=16)
+
+See more about [moduleResolution](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution) or
+[TypeScript 5.0 blog](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#--moduleresolution-bundler7).
+
+</details>
+
 ### Node.js
 
 ```ts
-import fs from "fs/promises";
+import fs from "node:fs/promises";
 import { Document, VectorStoreIndex } from "llamaindex";
 
 async function main() {
@@ -76,9 +130,9 @@ main();
 node --import tsx ./main.ts
 ```
 
-### React Server Component (Next.js, Waku, Redwood.JS...)
+### Next.js
 
-First, you will need to add a llamaindex plugin to your Next.js project.
+You will need to add a llamaindex plugin to your Next.js project.
 
 ```js
 // next.config.js
@@ -89,20 +143,18 @@ module.exports = withLlamaIndex({
 });
 ```
 
-You can combine `ai` with `llamaindex` in Next.js with RSC (React Server Components).
+### React Server Actions
+
+You can combine `ai` with `llamaindex` in Next.js, Waku or Redwood.js with RSC (React Server Components).
 
 ```tsx
-// src/apps/page.tsx
 "use client";
 import { chatWithAgent } from "@/actions";
 import type { JSX } from "react";
-import { useFormState } from "react-dom";
-
-// You can use the Edge runtime in Next.js by adding this line:
-// export const runtime = "edge";
+import { useActionState } from "react";
 
 export default function Home() {
-  const [ui, action] = useFormState<JSX.Element | null>(async () => {
+  const [ui, action] = useActionState<JSX.Element | null>(async () => {
     return chatWithAgent("hello!", []);
   }, null);
   return (
@@ -132,11 +184,13 @@ export async function chatWithAgent(
       // ... adding your tools here
     ],
   });
-  const responseStream = await agent.chat({
-    stream: true,
-    message: question,
-    chatHistory: prevMessages,
-  });
+  const responseStream = await agent.chat(
+    {
+      message: question,
+      chatHistory: prevMessages,
+    },
+    true,
+  );
   const uiStream = createStreamableUI(<div>loading...</div>);
   responseStream
     .pipeTo(
@@ -154,29 +208,66 @@ export async function chatWithAgent(
 }
 ```
 
-## Playground
+### Cloudflare Workers
 
-Check out our NextJS playground at https://llama-playground.vercel.app/. The source is available at https://github.com/run-llama/ts-playground
+> [!TIP]
+> Some modules are not supported in Cloudflare Workers which require Node.js APIs.
 
-## Core concepts for getting started:
+```ts
+// add `OPENAI_API_KEY` to the `.dev.vars` file
+interface Env {
+  OPENAI_API_KEY: string;
+}
 
-- [Document](/packages/llamaindex/src/Node.ts): A document represents a text file, PDF file or other contiguous piece of data.
+export default {
+  async fetch(
+    request: Request,
+    env: Env,
+    ctx: ExecutionContext,
+  ): Promise<Response> {
+    const { OpenAIAgent, OpenAI } = await import("@llamaindex/openai");
+    const text = await request.text();
+    const agent = new OpenAIAgent({
+      llm: new OpenAI({
+        apiKey: env.OPENAI_API_KEY,
+      }),
+      tools: [],
+    });
+    const responseStream = await agent.chat({
+      stream: true,
+      message: text,
+    });
+    const textEncoder = new TextEncoder();
+    const response = responseStream.pipeThrough<Uint8Array>(
+      new TransformStream({
+        transform: (chunk, controller) => {
+          controller.enqueue(textEncoder.encode(chunk.delta));
+        },
+      }),
+    );
+    return new Response(response);
+  },
+};
+```
 
-- [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.
+### Vite
 
-- [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)).
+We have some wasm dependencies for better performance. You can use `vite-plugin-wasm` to load them.
 
-- [Indices](/packages/llamaindex/src/indices/): Indices store the Nodes and the embeddings of those nodes. QueryEngines retrieve Nodes from these Indices using embedding similarity.
+```ts
+import wasm from "vite-plugin-wasm";
 
-- [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).
+export default {
+  plugins: [wasm()],
+  ssr: {
+    external: ["tiktoken"],
+  },
+};
+```
 
-- [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).
+### Tips when using in non-Node.js environments
 
-- [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.
-
-## Tips when using in non-Node.js environments
-
-When you are importing `llamaindex` in a non-Node.js environment(such as React Server Components, Cloudflare Workers, etc.)
+When you are importing `llamaindex` in a non-Node.js environment(such as Vercel Edge, Cloudflare Workers, etc.)
 Some classes are not exported from top-level entry file.
 
 The reason is that some classes are only compatible with Node.js runtime,(e.g. `PDFReader`) which uses Node.js specific APIs(like `fs`, `child_process`, `crypto`).
@@ -212,19 +303,31 @@ export async function getDocuments() {
 
 You'll find a complete example with LlamaIndexTS here: https://github.com/run-llama/create_llama_projects/tree/main/nextjs-edge-llamaparse
 
-## Supported LLMs:
+## Playground
 
-- OpenAI GPT-3.5-turbo and GPT-4
-- Anthropic Claude 3 (Opus, Sonnet, and Haiku) and the legacy models (Claude 2 and Instant)
-- Groq LLMs
-- Llama2/3 Chat LLMs (70B, 13B, and 7B parameters)
-- MistralAI Chat LLMs
-- Fireworks Chat LLMs
+Check out our NextJS playground at https://llama-playground.vercel.app/. The source is available at https://github.com/run-llama/ts-playground
+
+## 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.
 
 ## Contributing:
 
-We are in the very early days of LlamaIndex.TS. If you’re interested in hacking on it with us check out our [contributing guide](/CONTRIBUTING.md)
+Please see our [contributing guide](CONTRIBUTING.md) for more information.
+You are highly encouraged to contribute to LlamaIndex.TS!
 
-## Bugs? Questions?
+## Community
 
 Please join our Discord! https://discord.com/invite/eN6D2HQ4aX

apps/docs/CHANGELOG.md

@@ -1,5 +1,325 @@
 # docs
 
+## 0.0.99
+
+### Patch Changes
+
+- Updated dependencies [2486bd8]
+  - @llamaindex/examples@0.0.10
+  - llamaindex@0.7.7
+
+## 0.0.98
+
+### Patch Changes
+
+- Updated dependencies [534d550]
+  - llamaindex@0.7.6
+
+## 0.0.97
+
+### Patch Changes
+
+- Updated dependencies [e9a111d]
+- Updated dependencies [9f22aae]
+  - llamaindex@0.7.5
+
+## 0.0.96
+
+### Patch Changes
+
+- llamaindex@0.7.4
+
+## 0.0.95
+
+### Patch Changes
+
+- llamaindex@0.7.3
+
+## 0.0.94
+
+### Patch Changes
+
+- llamaindex@0.7.2
+
+## 0.0.93
+
+### Patch Changes
+
+- Updated dependencies [ae49ff4]
+- Updated dependencies [4c38c1b]
+- Updated dependencies [a75af83]
+- Updated dependencies [a75af83]
+  - llamaindex@0.7.1
+
+## 0.0.92
+
+### Patch Changes
+
+- Updated dependencies [1364e8e]
+- Updated dependencies [3b7736f]
+- Updated dependencies [96fc69c]
+  - llamaindex@0.7.0
+  - @llamaindex/examples@0.0.9
+
+## 0.0.91
+
+### Patch Changes
+
+- Updated dependencies [5729bd9]
+  - llamaindex@0.6.22
+
+## 0.0.90
+
+### Patch Changes
+
+- Updated dependencies [6f75306]
+- Updated dependencies [94cb4ad]
+  - llamaindex@0.6.21
+
+## 0.0.89
+
+### Patch Changes
+
+- Updated dependencies [6a9a7b1]
+  - llamaindex@0.6.20
+
+## 0.0.88
+
+### Patch Changes
+
+- Updated dependencies [62cba52]
+- Updated dependencies [d265e96]
+- Updated dependencies [d30bbf7]
+- Updated dependencies [53fd00a]
+  - llamaindex@0.6.19
+
+## 0.0.87
+
+### Patch Changes
+
+- Updated dependencies [5f67820]
+- Updated dependencies [fe08d04]
+  - llamaindex@0.6.18
+
+## 0.0.86
+
+### Patch Changes
+
+- Updated dependencies [ee697fb]
+  - llamaindex@0.6.17
+
+## 0.0.85
+
+### Patch Changes
+
+- Updated dependencies [63e9846]
+- Updated dependencies [6f3a31c]
+  - llamaindex@0.6.16
+
+## 0.0.84
+
+### Patch Changes
+
+- Updated dependencies [2a82413]
+  - llamaindex@0.6.15
+
+## 0.0.83
+
+### Patch Changes
+
+- llamaindex@0.6.14
+
+## 0.0.82
+
+### Patch Changes
+
+- llamaindex@0.6.13
+
+## 0.0.81
+
+### Patch Changes
+
+- Updated dependencies [f7b4e94]
+- Updated dependencies [78037a6]
+- Updated dependencies [1d9e3b1]
+  - llamaindex@0.6.12
+
+## 0.0.80
+
+### Patch Changes
+
+- Updated dependencies [df441e2]
+  - llamaindex@0.6.11
+
+## 0.0.79
+
+### Patch Changes
+
+- Updated dependencies [ebc5105]
+- Updated dependencies [6cce3b1]
+  - llamaindex@0.6.10
+
+## 0.0.78
+
+### Patch Changes
+
+- llamaindex@0.6.9
+
+## 0.0.77
+
+### Patch Changes
+
+- Updated dependencies [8b7fdba]
+  - llamaindex@0.6.8
+
+## 0.0.76
+
+### Patch Changes
+
+- Updated dependencies [23bcc37]
+  - llamaindex@0.6.7
+
+## 0.0.75
+
+### Patch Changes
+
+- Updated dependencies [d902cc3]
+- Updated dependencies [025ffe6]
+- Updated dependencies [a659574]
+  - llamaindex@0.6.6
+
+## 0.0.74
+
+### Patch Changes
+
+- Updated dependencies [e9714db]
+  - llamaindex@0.6.5
+
+## 0.0.73
+
+### Patch Changes
+
+- Updated dependencies [b48bcc3]
+  - llamaindex@0.6.4
+
+## 0.0.72
+
+### Patch Changes
+
+- Updated dependencies [2cd1383]
+- Updated dependencies [5c4badb]
+  - llamaindex@0.6.3
+
+## 0.0.71
+
+### Patch Changes
+
+- Updated dependencies [749b43a]
+  - llamaindex@0.6.2
+
+## 0.0.70
+
+### Patch Changes
+
+- Updated dependencies [fbd5e01]
+- Updated dependencies [6b70c54]
+- Updated dependencies [1a6137b]
+- Updated dependencies [85c2e19]
+  - llamaindex@0.6.1
+
+## 0.0.69
+
+### Patch Changes
+
+- Updated dependencies [11feef8]
+  - llamaindex@0.6.0
+  - @llamaindex/examples@0.0.8
+
+## 0.0.68
+
+### Patch Changes
+
+- Updated dependencies [7edeb1c]
+  - llamaindex@0.5.27
+
+## 0.0.67
+
+### Patch Changes
+
+- Updated dependencies [ffe0cd1]
+- Updated dependencies [ffe0cd1]
+  - llamaindex@0.5.26
+
+## 0.0.66
+
+### Patch Changes
+
+- Updated dependencies [4810364]
+- Updated dependencies [d3bc663]
+  - llamaindex@0.5.25
+
+## 0.0.65
+
+### Patch Changes
+
+- llamaindex@0.5.24
+
+## 0.0.64
+
+### Patch Changes
+
+- llamaindex@0.5.23
+
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies [4648da6]
+  - llamaindex@0.5.22
+
+## 0.0.62
+
+### Patch Changes
+
+- Updated dependencies [ae1149f]
+- Updated dependencies [2411c9f]
+- Updated dependencies [e8f229c]
+- Updated dependencies [11b3856]
+- Updated dependencies [83d7f41]
+- Updated dependencies [0148354]
+- Updated dependencies [1711f6d]
+  - llamaindex@0.5.21
+
+## 0.0.61
+
+### Patch Changes
+
+- Updated dependencies [d9d6c56]
+- Updated dependencies [22ff486]
+- Updated dependencies [eed0b04]
+  - llamaindex@0.5.20
+
+## 0.0.60
+
+### Patch Changes
+
+- Updated dependencies [fcbf183]
+  - llamaindex@0.5.19
+
+## 0.0.59
+
+### Patch Changes
+
+- Updated dependencies [8b66cf4]
+  - llamaindex@0.5.18
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies [c654398]
+  - llamaindex@0.5.17
+
 ## 0.0.57
 
 ### Patch Changes

apps/docs/docs/getting_started/environments.md

@@ -6,10 +6,17 @@ sidebar_position: 2
 
 We support Node.JS versions 18, 20 and 22, with experimental support for Deno, Bun and Vercel Edge functions.
 
-## NextJS App Router
+## NextJS
 
-If you're using NextJS App Router route handlers/serverless functions, you'll need to use the NodeJS mode:
+If you're using NextJS you'll need to add `withLlamaIndex` to your `next.config.js` file. This will add the necessary configuration for included 3rd-party libraries to your build:
 
 ```js
-export const runtime = "nodejs"; // default
+// next.config.js
+const withLlamaIndex = require("llamaindex/next");
+
+module.exports = withLlamaIndex({
+  // your next.js config
+});
 ```
+
+For details, check the latest [withLlamaIndex](https://github.com/run-llama/LlamaIndexTS/blob/main/packages/llamaindex/src/next.ts) implementation.

apps/docs/docs/guides/agents/2_create_agent.mdx

@@ -50,10 +50,10 @@ We want to see what our agent is up to, so we're going to hook into some events
 
 ```javascript
 Settings.callbackManager.on("llm-tool-call", (event) => {
-  console.log(event.detail.payload);
+  console.log(event.detail);
 });
 Settings.callbackManager.on("llm-tool-result", (event) => {
-  console.log(event.detail.payload);
+  console.log(event.detail);
 });
 ```
 

apps/docs/docs/introduction.md

@@ -21,7 +21,7 @@ LlamaIndex.TS handles several major use cases:
 
 - **Structured Data Extraction**: turning complex, unstructured and semi-structured data into uniform, programmatically accessible formats.
 - **Retrieval-Augmented Generation (RAG)**: answering queries across your internal data by providing LLMs with up-to-date, semantically relevant context including Question and Answer systems and chat bots.
-- **Autonomous Agents**: building software that is capable of intelligently selecting and using tools to accomplish tasks in an interative, unsupervised manner.
+- **Autonomous Agents**: building software that is capable of intelligently selecting and using tools to accomplish tasks in an interactive, unsupervised manner.
 
 ## 👨‍👩‍👧‍👦 Who is LlamaIndex for?
 

apps/docs/docs/modules/agent/_category_.yml

@@ -1,2 +1,2 @@
 label: "Agents"
-position: 3
+position: 10

apps/docs/docs/modules/chat_engine.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 13
 ---
 
 # ChatEngine
@@ -27,3 +27,4 @@ for await (const chunk of stream) {
 
 - [ContextChatEngine](../api/classes/ContextChatEngine.md)
 - [CondenseQuestionChatEngine](../api/classes/ContextChatEngine.md)
+- [SimpleChatEngine](../api/classes/SimpleChatEngine.md)

apps/docs/docs/modules/data_index.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 12
 ---
 
 # Index
@@ -8,6 +8,7 @@ An index is the basic container and organization for your data. LlamaIndex.TS su
 
 - `VectorStoreIndex` - will send the top-k `Node`s to the LLM when generating a response. The default top-k is 2.
 - `SummaryIndex` - will send every `Node` in the index to the LLM in order to generate a response
+- `KeywordTableIndex` extracts and provides keywords from `Node`s to the LLM
 
 ```typescript
 import { Document, VectorStoreIndex } from "llamaindex";
@@ -21,3 +22,4 @@ const index = await VectorStoreIndex.fromDocuments([document]);
 
 - [SummaryIndex](../api/classes/SummaryIndex.md)
 - [VectorStoreIndex](../api/classes/VectorStoreIndex.md)
+- [KeywordTableIndex](../api/classes/KeywordTableIndex.md)

apps/docs/docs/modules/data_loaders/index.mdx

@@ -6,6 +6,19 @@ import CodeSource2 from "!raw-loader!../../../../../examples/readers/src/custom-
 
 Before you can start indexing your documents, you need to load them into memory.
 
+All "basic" data loaders can be seen below, mapped to their respective filetypes in `SimpleDirectoryReader`. More loaders are shown in the sidebar on the left.
+Additionally the following loaders exist without separate documentation:
+
+- `AssemblyAIReader` transcribes audio using [AssemblyAI](https://www.assemblyai.com/).
+  - [AudioTranscriptReader](../../api/classes/AudioTranscriptReader.md): loads entire transcript as a single document.
+  - [AudioTranscriptParagraphsReader](../../api/classes/AudioTranscriptParagraphsReader.md): creates a document per paragraph.
+  - [AudioTranscriptSentencesReader](../../api/classes/AudioTranscriptSentencesReader.md): creates a document per sentence.
+  - [AudioSubtitlesReader](../../api/classes/AudioTranscriptParagraphsReader.md): creates a document containing the subtitles of a transcript.
+- [NotionReader](../../api/classes/NotionReader.md) loads [Notion](https://www.notion.so/) pages.
+- [SimpleMongoReader](../../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://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/run-llama/LlamaIndexTS/tree/main/examples/readers?file=src/simple-directory-reader.ts&title=Simple%20Directory%20Reader)

apps/docs/docs/modules/data_loaders/json.md

@@ -2,6 +2,7 @@
 
 A simple JSON data loader with various options.
 Either parses the entire string, cleaning it and treat each line as an embedding or performs a recursive depth-first traversal yielding JSON paths.
+Supports streaming of large JSON data using [@discoveryjs/json-ext](https://github.com/discoveryjs/json-ext)
 
 ## Usage
 
@@ -20,12 +21,16 @@ const docsFromContent = reader.loadDataAsContent(content);
 
 Basic:
 
+- `streamingThreshold?`: The threshold for using streaming mode in MB of the JSON Data. CEstimates characters by calculating bytes: `(streamingThreshold * 1024 * 1024) / 2` and comparing against `.length` of the JSON string. Set `undefined` to disable streaming or `0` to always use streaming. Default is `50` MB.
+
 - `ensureAscii?`: Wether to ensure only ASCII characters be present in the output by converting non-ASCII characters to their unicode escape sequence. Default is `false`.
 
-- `isJsonLines?`: Wether the JSON is in JSON Lines format. If true, will split into lines, remove empty one and parse each line as JSON. Default is `false`
+- `isJsonLines?`: Wether the JSON is in JSON Lines format. If true, will split into lines, remove empty one and parse each line as JSON. Note: Uses a custom streaming parser, most likely less robust than json-ext. Default is `false`
 
 - `cleanJson?`: Whether to clean the JSON by filtering out structural characters (`{}, [], and ,`). If set to false, it will just parse the JSON, not removing structural characters. Default is `true`.
 
+- `logger?`: A placeholder for a custom logger function.
+
 Depth-First-Traversal:
 
 - `levelsBack?`: Specifies how many levels up the JSON structure to include in the output. `cleanJson` will be ignored. If set to 0, all levels are included. If undefined, parses the entire JSON, treat each line as an embedding and create a document per top-level array. Default is `undefined`

apps/docs/docs/modules/data_loaders/llama_parse/index.mdx

@@ -13,7 +13,7 @@ Official documentation for LlamaParse can be found [here](https://docs.cloud.lla
 ## Usage
 
 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 [LlamaParseReader.ts](https://github.com/run-llama/LlamaIndexTS/blob/main/packages/llamaindex/src/readers/LlamaParseReader.ts) for a list of supported file types:
+See [reader.ts](https://github.com/run-llama/LlamaIndexTS/blob/main/packages/cloud/src/reader.ts) for a list of supported file types:
 
 <CodeBlock language="ts">{CodeSource}</CodeBlock>
 

apps/docs/docs/modules/data_stores/_category_.yml

@@ -0,0 +1,2 @@
+label: "Data Stores"
+position: 2

apps/docs/docs/modules/data_stores/chat_stores/_category_.yml

@@ -0,0 +1 @@
+label: "Chat Stores"

apps/docs/docs/modules/data_stores/chat_stores/index.md

@@ -0,0 +1,13 @@
+# Chat Stores
+
+Chat stores manage chat history by storing sequences of messages in a structured way, ensuring the order of messages is maintained for accurate conversation flow.
+
+## Available Chat Stores
+
+- [SimpleChatStore](../../../api/classes/SimpleChatStore.md): A simple in-memory chat store with support for [persisting](../index.md#local-storage) data to disk.
+
+Check the [LlamaIndexTS Github](https://github.com/run-llama/LlamaIndexTS) for the most up to date overview of integrations.
+
+## API Reference
+
+- [BaseChatStore](../../../api/interfaces/BaseChatStore.md)

apps/docs/docs/modules/data_stores/doc_stores/_category_.yml

@@ -0,0 +1,2 @@
+label: "Document Stores"
+position: 2

apps/docs/docs/modules/data_stores/doc_stores/index.md

@@ -0,0 +1,14 @@
+# Document Stores
+
+Document stores contain ingested document chunks, i.e. [Node](../../documents_and_nodes/index.md)s.
+
+## Available Document Stores
+
+- [SimpleDocumentStore](../../../api/classes/SimpleDocumentStore.md): A simple in-memory document store with support for [persisting](../index.md#local-storage) data to disk.
+- [PostgresDocumentStore](../../../api/classes/PostgresDocumentStore.md): A PostgreSQL document store, see [PostgreSQL Storage](../index.md#postgresql-storage).
+
+Check the [LlamaIndexTS Github](https://github.com/run-llama/LlamaIndexTS) for the most up to date overview of integrations.
+
+## API Reference
+
+- [BaseDocumentStore](../../../api/classes/BaseDocumentStore.md)

apps/docs/docs/modules/data_stores/index.md

@@ -0,0 +1,56 @@
+# Storage
+
+Storage in LlamaIndex.TS works automatically once you've configured a
+`StorageContext` object.
+
+## Local Storage
+
+You can configure the `persistDir` and attach it to an index.
+
+```typescript
+import {
+  Document,
+  VectorStoreIndex,
+  storageContextFromDefaults,
+} from "llamaindex";
+
+const storageContext = await storageContextFromDefaults({
+  persistDir: "./storage",
+});
+
+const document = new Document({ text: "Test Text" });
+const index = await VectorStoreIndex.fromDocuments([document], {
+  storageContext,
+});
+```
+
+## PostgreSQL Storage
+
+You can configure the `schemaName`, `tableName`, `namespace`, and
+`connectionString`. If a `connectionString` is not
+provided, it will use the environment variables `PGHOST`, `PGUSER`,
+`PGPASSWORD`, `PGDATABASE` and `PGPORT`.
+
+```typescript
+import {
+  Document,
+  VectorStoreIndex,
+  PostgresDocumentStore,
+  PostgresIndexStore,
+  storageContextFromDefaults,
+} from "llamaindex";
+
+const storageContext = await storageContextFromDefaults({
+  docStore: new PostgresDocumentStore(),
+  indexStore: new PostgresIndexStore(),
+});
+
+const document = new Document({ text: "Test Text" });
+const index = await VectorStoreIndex.fromDocuments([document], {
+  storageContext,
+});
+```
+
+## API Reference
+
+- [StorageContext](../../api/interfaces/StorageContext.md)

apps/docs/docs/modules/data_stores/index_stores/_category_.yml

@@ -0,0 +1,2 @@
+label: "Index Stores"
+position: 3

apps/docs/docs/modules/data_stores/index_stores/index.md

@@ -0,0 +1,14 @@
+# Index Stores
+
+Index stores are underlying storage components that contain metadata(i.e. information created when indexing) about the [index](../../data_index.md) itself.
+
+## Available Index Stores
+
+- [SimpleIndexStore](../../../api/classes/SimpleIndexStore.md): A simple in-memory index store with support for [persisting](../index.md#local-storage) data to disk.
+- [PostgresIndexStore](../../../api/classes/PostgresIndexStore.md): A PostgreSQL index store, , see [PostgreSQL Storage](../index.md#postgresql-storage).
+
+Check the [LlamaIndexTS Github](https://github.com/run-llama/LlamaIndexTS) for the most up to date overview of integrations.
+
+## API Reference
+
+- [BaseIndexStore](../../../api/classes/BaseIndexStore.md)

apps/docs/docs/modules/data_stores/kv_stores/_category_.yml

@@ -0,0 +1,2 @@
+label: "Key-Value Stores"
+position: 4

apps/docs/docs/modules/data_stores/kv_stores/index.md

@@ -0,0 +1,14 @@
+# Key-Value Stores
+
+Key-Value Stores represent underlying storage components used in [Document Stores](../doc_stores/index.md) and [Index Stores](../index_stores/index.md)
+
+## Available Key-Value Stores
+
+- [SimpleKVStore](../../../api/classes/SimpleKVStore.md): A simple Key-Value store with support of [persisting](../index.md#local-storage) data to disk.
+- [PostgresKVStore](../../../api/classes/PostgresKVStore.md): A PostgreSQL Key-Value store, see [PostgreSQL Storage](../index.md#postgresql-storage).
+
+Check the [LlamaIndexTS Github](https://github.com/run-llama/LlamaIndexTS) for the most up to date overview of integrations.
+
+## API Reference
+
+- [BaseKVStore](../../../api/classes/BaseKVStore.md)

apps/docs/docs/modules/data_stores/vector_stores/index.md

@@ -0,0 +1,22 @@
+# Vector Stores
+
+Vector stores save embedding vectors of your ingested document chunks.
+
+## Available Vector Stores
+
+Available Vector Stores are shown on the sidebar to the left. Additionally the following integrations exist without separate documentation:
+
+- [SimpleVectorStore](../../../api/classes/SimpleVectorStore.md): A simple in-memory vector store with optional [persistance](../index.md#local-storage) to disk.
+- [AstraDBVectorStore](../../../api/classes/AstraDBVectorStore.md): A cloud-native, scalable Database-as-a-Service built on Apache Cassandra, see [datastax.com](https://www.datastax.com/products/datastax-astra)
+- [ChromaVectorStore](../../../api/classes/ChromaVectorStore.md): An open-source vector database, focused on ease of use and performance, see [trychroma.com](https://www.trychroma.com/)
+- [MilvusVectorStore](../../../api/classes/MilvusVectorStore.md): An open-source, high-performance, highly scalable vector database, see [milvus.io](https://milvus.io/)
+- [MongoDBAtlasVectorSearch](../../../api/classes/MongoDBAtlasVectorSearch.md): A cloud-based vector search solution for MongoDB, see [mongodb.com](https://www.mongodb.com/products/platform/atlas-vector-search)
+- [PGVectorStore](../../../api/classes/PGVectorStore.md): An open-source vector store built on PostgreSQL, see [pgvector Github](https://github.com/pgvector/pgvector)
+- [PineconeVectorStore](../../../api/classes/PineconeVectorStore.md): A managed, cloud-native vector database, see [pinecone.io](https://www.pinecone.io/)
+- [WeaviateVectorStore](../../../api/classes/WeaviateVectorStore.md): An open-source, ai-native vector database, see [weaviate.io](https://weaviate.io/)
+
+Check the [LlamaIndexTS Github](https://github.com/run-llama/LlamaIndexTS) for the most up to date overview of integrations.
+
+## API Reference
+
+- [VectorStoreBase](../../../api/classes/VectorStoreBase.md)

apps/docs/docs/modules/data_stores/vector_stores/qdrant.md

@@ -1,5 +1,7 @@
 # Qdrant Vector Store
 
+[qdrant.tech](https://qdrant.tech/)
+
 To run this example, you need to have a Qdrant instance running. You can run it with Docker:
 
 ```bash
@@ -87,4 +89,4 @@ main().catch(console.error);
 
 ## API Reference
 
-- [QdrantVectorStore](../../api/classes/QdrantVectorStore.md)
+- [QdrantVectorStore](../../../api/classes/QdrantVectorStore.md)

apps/docs/docs/modules/documents_and_nodes/index.md

@@ -1,7 +1,3 @@
----
-sidebar_position: 1
----
-
 # Documents and Nodes
 
 `Document`s and `Node`s are the basic building blocks of any index. While the API for these objects is similar, `Document` objects represent entire files, while `Node`s are smaller pieces of that original document, that are suitable for an LLM and Q&A.

apps/docs/docs/modules/embeddings/_category_.yml

@@ -1,2 +1,2 @@
 label: "Embeddings"
-position: 3
+position: 6

apps/docs/docs/modules/embeddings/available_embeddings/mixedbreadai.md

@@ -7,7 +7,7 @@ To find out more about the latest features, updates, and available models, visit
 ## Table of Contents
 
 1. [Setup](#setup)
-2. [Usage with LlamaIndex](#integration-with-llamaindex)
+2. [Usage with LlamaIndex](#usage-with-llamaindex)
 3. [Embeddings with Custom Parameters](#embeddings-with-custom-parameters)
 
 ## Setup
@@ -98,3 +98,7 @@ Use the `embedDocuments` method to generate embeddings for the texts.
 const result = await embeddings.embedDocuments(texts);
 console.log(result); // Perfectly customized embeddings, ready to serve.
 ```
+
+## API Reference
+
+- [MixedbreadAIEmbeddings](../../../api/classes/MixedbreadAIEmbeddings.md)

apps/docs/docs/modules/embeddings/index.md

@@ -16,6 +16,16 @@ Settings.embedModel = new OpenAIEmbedding({
 
 For local embeddings, you can use the [HuggingFace](./available_embeddings/huggingface.md) embedding model.
 
+## Available Embeddings
+
+Most available embeddings are listed in the sidebar on the left.
+Additionally the following integrations exist without separate documentation:
+
+- [ClipEmbedding](../../api/classes/ClipEmbedding.md) using `@xenova/transformers`
+- [FireworksEmbedding](../../api/classes/FireworksEmbedding.md) see [fireworks.ai](https://fireworks.ai/)
+
+Check the [LlamaIndexTS Github](https://github.com/run-llama/LlamaIndexTS) for the most up to date overview of integrations.
+
 ## API Reference
 
 - [OpenAIEmbedding](../../api/classes/OpenAIEmbedding.md)

apps/docs/docs/modules/evaluation/_category_.yml

@@ -1,2 +1,2 @@
 label: "Evaluating"
-position: 3
+position: 9

apps/docs/docs/modules/evaluation/index.md

@@ -2,7 +2,7 @@
 
 ## Concept
 
-Evaluation and benchmarking are crucial concepts in LLM development. To improve the perfomance of an LLM app (RAG, agents) you must have a way to measure it.
+Evaluation and benchmarking are crucial concepts in LLM development. To improve the performance of an LLM app (RAG, agents) you must have a way to measure it.
 
 LlamaIndex offers key modules to measure the quality of generated results. We also offer key modules to measure retrieval quality.
 

apps/docs/docs/modules/ingestion_pipeline/_category_.yml

@@ -1,2 +1,2 @@
 label: "Ingestion Pipeline"
-position: 2
+position: 4

apps/docs/docs/modules/ingestion_pipeline/index.md

@@ -16,7 +16,7 @@ import {
   MetadataMode,
   OpenAIEmbedding,
   TitleExtractor,
-  SimpleNodeParser,
+  SentenceSplitter,
 } from "llamaindex";
 
 async function main() {
@@ -29,7 +29,7 @@ async function main() {
   const document = new Document({ text: essay, id_: path });
   const pipeline = new IngestionPipeline({
     transformations: [
-      new SimpleNodeParser({ chunkSize: 1024, chunkOverlap: 20 }),
+      new SentenceSplitter({ chunkSize: 1024, chunkOverlap: 20 }),
       new TitleExtractor(),
       new OpenAIEmbedding(),
     ],
@@ -62,7 +62,7 @@ import {
   MetadataMode,
   OpenAIEmbedding,
   TitleExtractor,
-  SimpleNodeParser,
+  SentenceSplitter,
   QdrantVectorStore,
   VectorStoreIndex,
 } from "llamaindex";
@@ -81,7 +81,7 @@ async function main() {
   const document = new Document({ text: essay, id_: path });
   const pipeline = new IngestionPipeline({
     transformations: [
-      new SimpleNodeParser({ chunkSize: 1024, chunkOverlap: 20 }),
+      new SentenceSplitter({ chunkSize: 1024, chunkOverlap: 20 }),
       new TitleExtractor(),
       new OpenAIEmbedding(),
     ],

apps/docs/docs/modules/ingestion_pipeline/transformations.md

@@ -4,7 +4,7 @@ A transformation is something that takes a list of nodes as an input, and return
 
 Currently, the following components are Transformation objects:
 
-- [SimpleNodeParser](../../api/classes/SimpleNodeParser.md)
+- [SentenceSplitter](../../api/classes/SentenceSplitter.md)
 - [MetadataExtractor](../documents_and_nodes/metadata_extraction.md)
 - [Embeddings](../embeddings/index.md)
 
@@ -13,10 +13,10 @@ Currently, the following components are Transformation objects:
 While transformations are best used with with an IngestionPipeline, they can also be used directly.
 
 ```ts
-import { SimpleNodeParser, TitleExtractor, Document } from "llamaindex";
+import { SentenceSplitter, TitleExtractor, Document } from "llamaindex";
 
 async function main() {
-  let nodes = new SimpleNodeParser().getNodesFromDocuments([
+  let nodes = new SentenceSplitter().getNodesFromDocuments([
     new Document({ text: "I am 10 years old. John is 20 years old." }),
   ]);
 
@@ -34,15 +34,15 @@ main().catch(console.error);
 
 ## Custom Transformations
 
-You can implement any transformation yourself by implementing the `TransformerComponent`.
+You can implement any transformation yourself by implementing the `TransformComponent`.
 
-The following custom transformation will remove any special characters or punctutaion in text.
+The following custom transformation will remove any special characters or punctuation in text.
 
 ```ts
-import { TransformerComponent, Node } from "llamaindex";
+import { TransformComponent, TextNode } from "llamaindex";
 
-class RemoveSpecialCharacters extends TransformerComponent {
-  async transform(nodes: Node[]): Promise<Node[]> {
+export class RemoveSpecialCharacters extends TransformComponent {
+  async transform(nodes: TextNode[]): Promise<TextNode[]> {
     for (const node of nodes) {
       node.text = node.text.replace(/[^\w\s]/gi, "");
     }
@@ -75,3 +75,7 @@ async function main() {
 
 main().catch(console.error);
 ```
+
+## API Reference
+
+- [TransformComponent](../../api/classes/TransformComponent.md)

apps/docs/docs/modules/llms/_category_.yml

@@ -1,2 +1,2 @@
 label: "LLMs"
-position: 3
+position: 5

apps/docs/docs/modules/llms/available_llms/bedrock.md

@@ -31,7 +31,34 @@ META_LLAMA3_8B_INSTRUCT = "meta.llama3-8b-instruct-v1:0";
 META_LLAMA3_70B_INSTRUCT = "meta.llama3-70b-instruct-v1:0";
 META_LLAMA3_1_8B_INSTRUCT = "meta.llama3-1-8b-instruct-v1:0"; // available on us-west-2
 META_LLAMA3_1_70B_INSTRUCT = "meta.llama3-1-70b-instruct-v1:0"; // available on us-west-2
-META_LLAMA3_1_405B_INSTRUCT = "meta.llama3-1-405b-instruct-v1:0"; // preview only, available on us-west-2, tool calling supported
+META_LLAMA3_1_405B_INSTRUCT = "meta.llama3-1-405b-instruct-v1:0"; // available on us-west-2, tool calling supported
+META_LLAMA3_2_1B_INSTRUCT = "meta.llama3-2-1b-instruct-v1:0"; // only available via inference endpoints (see below)
+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
+```
+
+You can also use Bedrock's Inference endpoints by using the model names:
+
+```ts
+// US
+US_ANTHROPIC_CLAUDE_3_HAIKU = "us.anthropic.claude-3-haiku-20240307-v1:0";
+US_ANTHROPIC_CLAUDE_3_OPUS = "us.anthropic.claude-3-opus-20240229-v1:0";
+US_ANTHROPIC_CLAUDE_3_SONNET = "us.anthropic.claude-3-sonnet-20240229-v1:0";
+US_ANTHROPIC_CLAUDE_3_5_SONNET = "us.anthropic.claude-3-5-sonnet-20240620-v1:0";
+US_ANTHROPIC_CLAUDE_3_5_SONNET_V2 =
+  "us.anthropic.claude-3-5-sonnet-20241022-v2:0";
+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";
+
+// EU
+EU_ANTHROPIC_CLAUDE_3_HAIKU = "eu.anthropic.claude-3-haiku-20240307-v1:0";
+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";
 ```
 
 Sonnet, Haiku and Opus are multimodal, image_url only supports base64 data url format, e.g. `data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==`

apps/docs/docs/modules/llms/available_llms/deepseek.md

@@ -1,5 +1,7 @@
 # DeepSeek LLM
 
+[DeepSeek Platform](https://platform.deepseek.com/)
+
 ## Usage
 
 ```ts
@@ -45,6 +47,6 @@ Currently does not support function calling.
 
 [Currently does not support json-output param while still is very good at json generating.](https://platform.deepseek.com/api-docs/faq#does-your-api-support-json-output)
 
-## API platform
+## API Reference
 
-- [DeepSeek platform](https://platform.deepseek.com/)
+- [DeepSeekLLM](../../../api/classes/DeepSeekLLM.md)

apps/docs/docs/modules/llms/available_llms/fireworks.md

@@ -1,6 +1,6 @@
 # Fireworks LLM
 
-Fireworks.ai focus on production use cases for open source LLMs, offering speed and quality.
+[Fireworks.ai](https://fireworks.ai/) focus on production use cases for open source LLMs, offering speed and quality.
 
 ## Usage
 

apps/docs/docs/modules/llms/index.md

@@ -1,7 +1,3 @@
----
-sidebar_position: 3
----
-
 # Large Language Models (LLMs)
 
 The LLM is responsible for reading text and generating natural language responses to queries. By default, LlamaIndex.TS uses `gpt-3.5-turbo`.
@@ -30,6 +26,15 @@ export AZURE_OPENAI_DEPLOYMENT="gpt-4" # or some other deployment name
 
 For local LLMs, currently we recommend the use of [Ollama](./available_llms/ollama.md) LLM.
 
+## Available LLMs
+
+Most available LLMs are listed in the sidebar on the left. Additionally the following integrations exist without separate documentation:
+
+- [HuggingFaceLLM](../../api/classes/HuggingFaceLLM.md) and [HuggingFaceInferenceAPI](../../api/classes/HuggingFaceInferenceAPI.md).
+- [ReplicateLLM](../../api/classes/ReplicateLLM.md) see [replicate.com](https://replicate.com/)
+
+Check the [LlamaIndexTS Github](https://github.com/run-llama/LlamaIndexTS) for the most up to date overview of integrations.
+
 ## API Reference
 
 - [OpenAI](../../api/classes/OpenAI.md)

apps/docs/docs/modules/node_parser.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 11
 ---
 
 # NodeParser
@@ -7,9 +7,9 @@ sidebar_position: 4
 The `NodeParser` in LlamaIndex is responsible for splitting `Document` objects into more manageable `Node` objects. When you call `.fromDocuments()`, the `NodeParser` from the `Settings` is used to do this automatically for you. Alternatively, you can use it to split documents ahead of time.
 
 ```typescript
-import { Document, SimpleNodeParser } from "llamaindex";
+import { Document, SentenceSplitter } from "llamaindex";
 
-const nodeParser = new SimpleNodeParser();
+const nodeParser = new SentenceSplitter();
 
 Settings.nodeParser = nodeParser;
 ```
@@ -93,6 +93,5 @@ The output metadata will be something like:
 
 ## API Reference
 
-- [SimpleNodeParser](../api/classes/SimpleNodeParser.md)
 - [SentenceSplitter](../api/classes/SentenceSplitter.md)
 - [MarkdownNodeParser](../api/classes/MarkdownNodeParser.md)

apps/docs/docs/modules/node_postprocessors/index.md

@@ -107,3 +107,4 @@ const filteredNodes = processor.postprocessNodes(nodes);
 ## API Reference
 
 - [SimilarityPostprocessor](../../api/classes/SimilarityPostprocessor.md)
+- [MetadataReplacementPostProcessor](../../api/classes/MetadataReplacementPostProcessor.md)

apps/docs/docs/modules/node_postprocessors/mixedbreadiai_reranker.md

@@ -7,7 +7,7 @@ To find out more about the latest features and updates, visit the [mixedbread.ai
 ## Table of Contents
 
 1. [Setup](#setup)
-2. [Usage with LlamaIndex](#integration-with-llamaindex)
+2. [Usage with LlamaIndex](#usage-with-llamaindex)
 3. [Simple Reranking Guide](#simple-reranking-guide)
 4. [Reranking with Objects](#reranking-with-objects)
 
@@ -163,3 +163,7 @@ Use the `rerank` method to reorder the documents based on the query.
 const result = await reranker.rerank(documents, query);
 console.log(result); // Perfectly customized results, ready to serve.
 ```
+
+## API Reference
+
+- [MixedbreadAIReranker](../../api/classes/MixedbreadAIReranker.md)

apps/docs/docs/modules/prompt/_category_.yml

@@ -1,2 +1,2 @@
 label: "Prompts"
-position: 0
+position: 7

apps/docs/docs/modules/prompt/index.md

@@ -73,6 +73,5 @@ const response = await queryEngine.query({
 
 ## API Reference
 
-- [TextQaPrompt](../../api/type-aliases/TextQaPrompt.md)
 - [ResponseSynthesizer](../../api/classes/ResponseSynthesizer.md)
 - [CompactAndRefine](../../api/classes/CompactAndRefine.md)

apps/docs/docs/modules/query_engines/_category_.yml

@@ -1,2 +1,2 @@
 label: "Query Engines"
-position: 2
+position: 8

apps/docs/docs/modules/query_engines/index.md

@@ -1,6 +1,6 @@
 # QueryEngine
 
-A query engine wraps a `Retriever` and a `ResponseSynthesizer` into a pipeline, that will use the query string to fetech nodes and then send them to the LLM to generate a response.
+A query engine wraps a `Retriever` and a `ResponseSynthesizer` into a pipeline, that will use the query string to fetch nodes and then send them to the LLM to generate a response.
 
 ```typescript
 const queryEngine = index.asQueryEngine();

apps/docs/docs/modules/query_engines/router_query_engine.md

@@ -15,7 +15,7 @@ import {
   OpenAI,
   RouterQueryEngine,
   SimpleDirectoryReader,
-  SimpleNodeParser,
+  SentenceSplitter,
   SummaryIndex,
   VectorStoreIndex,
   Settings,
@@ -34,11 +34,11 @@ const documents = await new SimpleDirectoryReader().loadData({
 
 ## Service Context
 
-Next, we need to define some basic rules and parse the documents into nodes. We will use the `SimpleNodeParser` to parse the documents into nodes and `Settings` to define the rules (eg. LLM API key, chunk size, etc.):
+Next, we need to define some basic rules and parse the documents into nodes. We will use the `SentenceSplitter` to parse the documents into nodes and `Settings` to define the rules (eg. LLM API key, chunk size, etc.):
 
 ```ts
 Settings.llm = new OpenAI();
-Settings.nodeParser = new SimpleNodeParser({
+Settings.nodeParser = new SentenceSplitter({
   chunkSize: 1024,
 });
 ```
@@ -104,14 +104,14 @@ import {
   OpenAI,
   RouterQueryEngine,
   SimpleDirectoryReader,
-  SimpleNodeParser,
+  SentenceSplitter,
   SummaryIndex,
   VectorStoreIndex,
   Settings,
 } from "llamaindex";
 
 Settings.llm = new OpenAI();
-Settings.nodeParser = new SimpleNodeParser({
+Settings.nodeParser = new SentenceSplitter({
   chunkSize: 1024,
 });
 

apps/docs/docs/modules/response_synthesizer.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 15
 ---
 
 # ResponseSynthesizer

apps/docs/docs/modules/retriever.md

@@ -1,10 +1,17 @@
 ---
-sidebar_position: 5
+sidebar_position: 14
 ---
 
 # Retriever
 
-A retriever in LlamaIndex is what is used to fetch `Node`s from an index using a query string. Aa `VectorIndexRetriever` will fetch the top-k most similar nodes. Meanwhile, a `SummaryIndexRetriever` will fetch all nodes no matter the query.
+A retriever in LlamaIndex is what is used to fetch `Node`s from an index using a query string.
+
+- [VectorIndexRetriever](../api/classes/VectorIndexRetriever.md) will fetch the top-k most similar nodes. Ideal for dense retrieval to find most relevant nodes.
+- [SummaryIndexRetriever](../api/classes/SummaryIndexRetriever.md) will fetch all nodes no matter the query. Ideal when complete context is necessary, e.g. analyzing large datasets.
+- [SummaryIndexLLMRetriever](../api/classes/SummaryIndexLLMRetriever.md) utilizes an LLM to score and filter nodes based on relevancy to the query.
+- [KeywordTableLLMRetriever](../api/classes/KeywordTableLLMRetriever.md) uses an LLM to extract keywords from the query and retrieve relevant nodes based on keyword matches.
+- [KeywordTableSimpleRetriever](../api/classes/KeywordTableSimpleRetriever.md) uses a basic frequency-based approach to extract keywords and retrieve nodes.
+- [KeywordTableRAKERetriever](../api/classes/KeywordTableRAKERetriever.md) uses the RAKE (Rapid Automatic Keyword Extraction) algorithm to extract keywords from the query, focusing on co-occurrence and context for keyword-based retrieval.
 
 ```typescript
 const retriever = vectorIndex.asRetriever({
@@ -14,9 +21,3 @@ const retriever = vectorIndex.asRetriever({
 // Fetch nodes!
 const nodesWithScore = await retriever.retrieve({ query: "query string" });
 ```
-
-## API Reference
-
-- [SummaryIndexRetriever](../api/classes/SummaryIndexRetriever.md)
-- [SummaryIndexLLMRetriever](../api/classes/SummaryIndexLLMRetriever.md)
-- [VectorIndexRetriever](../api/classes/VectorIndexRetriever.md)

apps/docs/docs/modules/storage.md

@@ -1,26 +0,0 @@
----
-sidebar_position: 7
----
-
-# Storage
-
-Storage in LlamaIndex.TS works automatically once you've configured a `StorageContext` object. Just configure the `persistDir` and attach it to an index.
-
-Right now, only saving and loading from disk is supported, with future integrations planned!
-
-```typescript
-import { Document, VectorStoreIndex, storageContextFromDefaults } from "./src";
-
-const storageContext = await storageContextFromDefaults({
-  persistDir: "./storage",
-});
-
-const document = new Document({ text: "Test Text" });
-const index = await VectorStoreIndex.fromDocuments([document], {
-  storageContext,
-});
-```
-
-## API Reference
-
-- [StorageContext](../api/interfaces/StorageContext.md)

apps/docs/docs/modules/workflows.mdx

@@ -0,0 +1,168 @@
+import CodeBlock from "@theme/CodeBlock";
+import CodeSource from "!raw-loader!../../../../examples/workflow/joke.ts";
+
+# Workflows
+
+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 in LlamaIndexTS work by defining step functions that handle specific event types and emit new events.
+
+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.
+
+## Getting Started
+
+As an illustrative example, let's consider a naive workflow where a joke is generated and then critiqued.
+
+<CodeBlock language="ts">{CodeSource}</CodeBlock>
+
+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 }> {}
+```
+
+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`.
+
+### Setting up the Workflow Class
+
+```typescript
+const llm = new OpenAI();
+...
+const jokeFlow = new Workflow({ verbose: true });
+```
+
+Our workflow is implemented by initiating the `Workflow` class. For simplicity, we created a `OpenAI` llm instance.
+
+### Workflow Entry Points
+
+```typescript
+const generateJoke = async (_context: Context, ev: StartEvent) => {
+  const prompt = `Write your best joke about ${ev.data.input}.`;
+  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`. Here, the `StartEvent` signifies where to send the initial workflow input.
+
+The `StartEvent` is a bit of a special object since it can hold arbitrary attributes. Here, we accessed the topic with `ev.data.input`.
+
+At this point, you may have noticed that we haven't explicitly told the workflow what events are handled by which steps.
+
+To do so, we use the `addStep` method which adds a step to the workflow. The first argument is the event type that the step will handle, and the second argument is the previously defined step function:
+
+```typescript
+jokeFlow.addStep(StartEvent, generateJoke);
+```
+
+### Workflow Exit Points
+
+```typescript
+const critiqueJoke = async (_context: Context, ev: JokeEvent) => {
+  const prompt = `Give a thorough critique of the following joke: ${ev.data.joke}`;
+  const response = await llm.complete({ prompt });
+  return new StopEvent({ result: response.text });
+};
+```
+
+Here, we have our second, and last step, in the workflow. We know its the last step because the special `StopEvent` is returned. When the workflow encounters a returned `StopEvent`, it immediately stops the workflow and returns whatever the result was.
+
+In this case, the result is a string, but it could be a map, array, or any other object.
+
+Don't forget to add the step to the workflow:
+
+```typescript
+jokeFlow.addStep(JokeEvent, 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.
+
+### Validating Workflows
+
+To tell the workflow what events are produced by each step, you can optionally provide a third argument to `addStep` to specify the output event type:
+
+```typescript
+jokeFlow.addStep(StartEvent, generateJoke, { outputs: JokeEvent });
+jokeFlow.addStep(JokeEvent, critiqueJoke, { outputs: StopEvent });
+```
+
+To validate a workflow, you need to call the `validate` method:
+
+```typescript
+jokeFlow.validate();
+```
+
+To automatically validate a workflow when you run it, you can set the `validate` flag to `true` at initialization:
+
+```typescript
+const jokeFlow = new Workflow({ verbose: true, validate: true });
+```
+
+## Working with Global Context/State
+
+Optionally, you can choose to use global context between steps. For example, maybe multiple steps access the original `query` input from the user. You can store this in global context so that every step has access.
+
+```typescript
+import { Context } from "@llamaindex/core/workflow";
+
+const query = async (context: Context, ev: MyEvent) => {
+  // get the query from the context
+  const query = context.get("query");
+  // do something with context and event
+  const val = ...
+  const result = ...
+  // store in context
+  context.set("key", 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, ev: QueryEvent | RetrieveEvent) => {
+  const events = context.collectEvents(ev, [QueryEvent | RetrieveEvent]);
+  if (!events) {
+    return;
+  }
+  const prompt = events
+    .map((event) => {
+      if (event instanceof QueryEvent) {
+        return `Answer this query using the context provided: ${event.data.query}`;
+      } else if (event instanceof RetrieveEvent) {
+        return `Context: ${event.data.context}`;
+      }
+      return "";
+    })
+    .join("\n");
+
+  const response = await llm.complete({ prompt });
+  return new StopEvent({ result: response.text });
+};
+```
+
+Using `ctx.collectEvents()` we can buffer and wait for ALL expected events to arrive. This function will only return events (in the requested order) 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/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "0.0.57",
+  "version": "0.0.99",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -15,29 +15,29 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.4.0",
-    "@docusaurus/remark-plugin-npm2yarn": "3.4.0",
+    "@docusaurus/core": "3.5.2",
+    "@docusaurus/remark-plugin-npm2yarn": "3.5.2",
     "@llamaindex/examples": "workspace:*",
     "@mdx-js/react": "3.0.1",
     "clsx": "2.1.1",
     "llamaindex": "workspace:*",
-    "postcss": "8.4.39",
-    "prism-react-renderer": "2.3.1",
+    "postcss": "8.4.41",
+    "prism-react-renderer": "2.4.0",
     "raw-loader": "4.0.2",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.4.0",
-    "@docusaurus/preset-classic": "3.4.0",
-    "@docusaurus/theme-classic": "3.4.0",
-    "@docusaurus/types": "3.4.0",
+    "@docusaurus/module-type-aliases": "3.5.2",
+    "@docusaurus/preset-classic": "3.5.2",
+    "@docusaurus/theme-classic": "3.5.2",
+    "@docusaurus/types": "3.5.2",
     "@tsconfig/docusaurus": "2.0.3",
-    "@types/node": "^20.12.11",
-    "docusaurus-plugin-typedoc": "1.0.3",
-    "typedoc": "0.26.4",
-    "typedoc-plugin-markdown": "4.1.2",
-    "typescript": "^5.5.3"
+    "@types/node": "^22.5.1",
+    "docusaurus-plugin-typedoc": "1.0.5",
+    "typedoc": "0.26.6",
+    "typedoc-plugin-markdown": "4.2.6",
+    "typescript": "^5.6.2"
   },
   "browserslist": {
     "production": [

apps/docs/turbo.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "outputs": ["build/**", ".docusaurus/**"]
+    }
+  }
+}

apps/next/.gitignore

@@ -0,0 +1,31 @@
+# deps
+/node_modules
+
+# generated content
+.contentlayer
+.content-collections
+.source
+
+# test & build
+/coverage
+/.next/
+/out/
+/build
+*.tsbuildinfo
+
+# misc
+.DS_Store
+*.pem
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# others
+.env*.local
+.vercel
+next-env.d.ts
+
+# build
+/src/content/docs/cloud/api

apps/next/README.md

@@ -0,0 +1,26 @@
+# next
+
+This is a Next.js application generated with
+[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
+
+Run development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```
+
+Open http://localhost:3000 with your browser to see the result.
+
+## Learn More
+
+To learn more about Next.js and Fumadocs, take a look at the following
+resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Fumadocs](https://fumadocs.vercel.app) - learn about Fumadocs

apps/next/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

apps/next/next.config.mjs

@@ -0,0 +1,10 @@
+import { createMDX } from "fumadocs-mdx/next";
+
+const withMDX = createMDX();
+
+/** @type {import('next').NextConfig} */
+const config = {
+  reactStrictMode: true,
+};
+
+export default withMDX(config);

apps/next/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@llamaindex/doc",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "pnpm run build:docs && next build",
+    "dev": "next dev",
+    "start": "next start",
+    "postinstall": "fumadocs-mdx",
+    "build:docs": "node ./scripts/generate-docs.mjs"
+  },
+  "dependencies": {
+    "@icons-pack/react-simple-icons": "^10.1.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "2.1.1",
+    "foxact": "^0.2.39",
+    "fumadocs-core": "14.0.2",
+    "fumadocs-mdx": "11.0.0",
+    "fumadocs-openapi": "^5.5.3",
+    "fumadocs-ui": "14.0.2",
+    "hast-util-to-jsx-runtime": "^2.3.2",
+    "lucide-react": "^0.436.0",
+    "next": "15.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
+    "react-text-transition": "^3.1.0",
+    "rimraf": "^6.0.1",
+    "shiki": "^1.22.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/mdx": "^2.0.13",
+    "@types/node": "22.7.8",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3"
+  }
+}

apps/next/postcss.config.js

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

apps/next/scripts/generate-docs.mjs

@@ -0,0 +1,22 @@
+import * as OpenAPI from "fumadocs-openapi";
+import { fileURLToPath } from "node:url";
+import { rimrafSync } from "rimraf";
+
+const out = "./src/content/docs/cloud/api";
+
+// clean generated files
+rimrafSync(out, {
+  filter(v) {
+    return !v.endsWith("index.mdx") && !v.endsWith("meta.json");
+  },
+});
+
+void OpenAPI.generateFiles({
+  input: [
+    fileURLToPath(
+      new URL("../../../packages/cloud/openapi.json", import.meta.url),
+    ),
+  ],
+  output: out,
+  groupBy: "tag",
+});

apps/next/source.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig, defineDocs } from "fumadocs-mdx/config";
+
+export const { docs, meta } = defineDocs({
+  dir: "./src/content/docs",
+});
+
+export default defineConfig();

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

@@ -0,0 +1,19 @@
+import { baseOptions } from "@/app/layout.config";
+import { Footer } from "@/components/website/Footer";
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import type { ReactNode } from "react";
+
+export default function Layout({
+  children,
+}: {
+  children: ReactNode;
+}): React.ReactElement {
+  return (
+    <HomeLayout {...baseOptions}>
+      {children}
+      <div className="container">
+        <Footer />
+      </div>
+    </HomeLayout>
+  );
+}

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

@@ -0,0 +1,85 @@
+import { CodeBlock } from "@/components/code-block";
+import { Contributing } from "@/components/contribution";
+import { CreateAppAnimation } from "@/components/create-app-animation";
+import { Feature } from "@/components/feature";
+import { NpmInstall } from "@/components/npm-install";
+import { TextEffect } from "@/components/text-effect";
+import { Button } from "@/components/ui/button";
+import { SiStackblitz } from "@icons-pack/react-simple-icons";
+import { Bot, Terminal } from "lucide-react";
+import Link from "next/link";
+
+export default function HomePage() {
+  return (
+    <main className="container mx-auto px-4 py-12">
+      <h1 className="text-4xl md:text-6xl font-bold text-center mb-4">
+        Build RAG Web App using
+        <br /> <span className="text-blue-500">LlamaIndex.TS</span>
+      </h1>
+      <p className="text-xl text-center text-fd-muted-foreground mb-12 ">
+        LlamaIndex.TS is the JS/TS library from our popular Python library
+        llama-index for building LLM applications
+      </p>
+      <div className="text-center text-lg text-fd-muted-foreground mb-12">
+        <span>Designed for building web applications under </span>
+        <TextEffect />
+      </div>
+
+      <div className="flex flex-wrap justify-center gap-4">
+        <Link href="/docs/llamaindex">
+          <Button variant="outline">Get Started</Button>
+        </Link>
+        <NpmInstall />
+        <Link
+          href="https://stackblitz.com/github/run-llama/LlamaIndexTS/tree/main/examples"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <Button className="bg-blue-500 text-white hover:bg-blue-600">
+            <SiStackblitz />
+            Playground
+          </Button>
+        </Link>
+      </div>
+      <div className="mt-4" />
+      <div className="grid grid-cols-1 border-r md:grid-cols-2">
+        <Feature
+          icon={Bot}
+          subheading="Agent"
+          heading="Build agent for RAG"
+          description="Build agents for RAG using LlamaIndex.TS. Agents are the core building blocks of RAG applications."
+        >
+          <CodeBlock
+            code={`
+import { FunctionTool } from "llamaindex";
+import { OpenAIAgent } from "@llamaindex/openai";
+
+const interpreterTool = FunctionTool.from(...);
+const systemPrompt = \`...\`;
+
+const agent = new OpenAIAgent({
+  llm,
+  tools: [interpreterTool],
+  systemPrompt,
+});
+
+await agent.chat('...');`}
+            lang="ts"
+          />
+        </Feature>
+        <Feature
+          icon={Terminal}
+          subheading="Create Llama CLI"
+          heading="CLI for starting RAG app with one line"
+          description="A command line tool to generate LlamaIndex apps, the easiest way to get started with LlamaIndex."
+        >
+          <div className="my-6">
+            <CreateAppAnimation />
+          </div>
+        </Feature>
+      </div>
+      <Contributing />
+      <div className="border-b" />
+    </main>
+  );
+}

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

@@ -0,0 +1,4 @@
+import { source } from "@/lib/source";
+import { createFromSource } from "fumadocs-core/search/server";
+
+export const { GET } = createFromSource(source);

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

@@ -0,0 +1,51 @@
+import { openapi, source } from "@/lib/source";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import {
+  DocsBody,
+  DocsDescription,
+  DocsPage,
+  DocsTitle,
+} from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  const MDX = page.data.body;
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDX
+          components={{
+            ...defaultMdxComponents,
+            APIPage: openapi.APIPage,
+          }}
+        />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  };
+}

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

@@ -0,0 +1,12 @@
+import { baseOptions } from "@/app/layout.config";
+import { source } from "@/lib/source";
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import type { ReactNode } from "react";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <DocsLayout tree={source.pageTree} {...baseOptions}>
+      {children}
+    </DocsLayout>
+  );
+}

apps/next/src/app/global.css

@@ -0,0 +1,97 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --page-max-width: 1840px;
+    --plus-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxMSAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03IDFDNyAwLjQ0NzcxNSA2LjU1MjI4IDAgNiAwSDVDNC40NDc3MiAwIDQgMC40NDc3MTUgNCAxVjNDNCAzLjU1MjI5IDMuNTUyMjggNCAzIDRIMUMwLjQ0NzcxNSA0IDAgNC40NDc3MiAwIDVWNkMwIDYuNTUyMjggMC40NDc3MTUgNyAxIDdIM0MzLjU1MjI4IDcgNCA3LjQ0NzcyIDQgOFYxMEM0IDEwLjU1MjMgNC40NDc3MiAxMSA1IDExSDZDNi41NTIyOCAxMSA3IDEwLjU1MjMgNyAxMFY4QzcgNy40NDc3MSA3LjQ0NzcyIDcgOCA3SDEwQzEwLjU1MjMgNyAxMSA2LjU1MjI4IDExIDZWNUMxMSA0LjQ0NzcyIDEwLjU1MjMgNCAxMCA0SDhDNy40NDc3MiA0IDcgMy41NTIyOCA3IDNWMVoiIGZpbGw9IiNBREE4QzQiLz4KPC9zdmc+Cg==");
+
+    --color-neutral-000: #ffffff;
+    --color-neutral-100: #f7f6fc;
+    --color-neutral-200: #cac6dd;
+    --color-neutral-400: #757185;
+    --color-neutral-800: #252134;
+    --color-neutral-900: #0e0c15;
+
+    --color-purple-400: #858dff;
+    --color-red-400: #ff776f;
+    --color-green-400: #7adb78;
+    --color-yellow-400: #ffc876;
+    --color-violet-400: #ac6aff;
+    --color-pink-400: #ff98e2;
+
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --color-neutral-000: #0e0c15;
+    --color-neutral-100: #252134;
+    --color-neutral-200: #757185;
+    --color-neutral-400: #cac6dd;
+    --color-neutral-800: #f7f6fc;
+    --color-neutral-900: #ffffff;
+
+    --color-purple-400: #858dff;
+    --color-red-400: #ff776f;
+    --color-green-400: #7adb78;
+    --color-yellow-400: #ffc876;
+    --color-violet-400: #ac6aff;
+    --color-pink-400: #ff98e2;
+
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

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

@@ -0,0 +1,21 @@
+import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+
+/**
+ * Shared layout configurations
+ *
+ * you can configure layouts individually from:
+ * Home Layout: app/(home)/layout.tsx
+ * Docs Layout: app/docs/layout.tsx
+ */
+export const baseOptions: BaseLayoutProps = {
+  nav: {
+    title: "LlamaIndex.TS",
+  },
+  links: [
+    {
+      text: "Documentation",
+      url: "/docs/llamaindex",
+      active: "nested-url",
+    },
+  ],
+};

apps/next/src/app/layout.tsx

@@ -0,0 +1,37 @@
+import { RootProvider } from "fumadocs-ui/provider";
+import { Inter } from "next/font/google";
+import type { ReactNode } from "react";
+import "./global.css";
+
+const inter = Inter({
+  subsets: ["latin"],
+});
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" className={inter.className} suppressHydrationWarning>
+      <head>
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
+      </head>
+      <body className="flex flex-col min-h-screen">
+        <RootProvider>{children}</RootProvider>
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,53 @@
+import * as Base from "fumadocs-ui/components/codeblock";
+import { toJsxRuntime, type Jsx } from "hast-util-to-jsx-runtime";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { codeToHast } from "shiki";
+
+export interface CodeBlockProps {
+  code: string;
+  wrapper?: Base.CodeBlockProps;
+  lang: "bash" | "ts" | "tsx";
+}
+
+export async function CodeBlock({
+  code,
+  lang,
+  wrapper,
+}: CodeBlockProps): Promise<React.ReactElement> {
+  const hast = await codeToHast(code, {
+    lang,
+    defaultColor: false,
+    themes: {
+      light: "github-light",
+      dark: "vesper",
+    },
+    transformers: [
+      {
+        name: "rehype-code:pre-process",
+        line(node) {
+          if (node.children.length === 0) {
+            // Keep the empty lines when using grid layout
+            node.children.push({
+              type: "text",
+              value: " ",
+            });
+          }
+        },
+      },
+    ],
+  });
+
+  const rendered = toJsxRuntime(hast, {
+    jsx: jsx as Jsx,
+    jsxs: jsxs as Jsx,
+    Fragment,
+    development: false,
+    components: {
+      // @ts-expect-error -- JSX component
+      pre: Base.Pre,
+    },
+  });
+
+  return <Base.CodeBlock {...wrapper}>{rendered}</Base.CodeBlock>;
+}

apps/next/src/components/contribution.tsx

@@ -0,0 +1,29 @@
+import ContributorCounter from "@/components/contributor-count";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { Heart } from "lucide-react";
+import { ReactElement } from "react";
+
+export function Contributing(): ReactElement {
+  return (
+    <div className="flex flex-col items-center border-x border-t px-4 py-16 text-center">
+      <Heart className="mb-4" />
+      <h2 className="mb-4 text-xl font-semibold sm:text-2xl">
+        Made Possible by You.
+      </h2>
+      <p className="mb-4 text-fd-muted-foreground">
+        LlamaIndex.TS is powered by the open source community.
+      </p>
+      <div className="mb-8 flex flex-row items-center gap-2">
+        <a
+          href="https://github.com/run-llama/LlamaIndexTS/graphs/contributors"
+          rel="noreferrer noopener"
+          className={cn(buttonVariants({ variant: "ghost" }))}
+        >
+          See Contributors
+        </a>
+      </div>
+      <ContributorCounter repoOwner="run-llama" repoName="LlamaIndexTS" />
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { fetchContributors } from "@/lib/get-contributors";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import type { HTMLAttributes, ReactElement } from "react";
+
+export interface ContributorCounterProps
+  extends HTMLAttributes<HTMLDivElement> {
+  repoOwner: string;
+  repoName: string;
+  displayCount?: number;
+}
+
+export default async function ContributorCounter({
+  repoOwner,
+  repoName,
+  displayCount = 20,
+  ...props
+}: ContributorCounterProps): Promise<ReactElement> {
+  const contributors = await fetchContributors(repoOwner, repoName);
+  const topContributors = contributors
+    .filter((contributor) => contributor.login !== repoOwner)
+    .slice(0, displayCount);
+
+  return (
+    <div
+      {...props}
+      className={cn("flex flex-col items-center gap-4", props.className)}
+    >
+      <div className="flex flex-row flex-wrap items-center justify-center md:pe-4">
+        {topContributors.map((contributor, i) => (
+          <a
+            key={contributor.login}
+            href={`https://github.com/${contributor.login}`}
+            rel="noreferrer noopener"
+            target="_blank"
+            className="size-10 overflow-hidden rounded-full border-4 border-fd-background bg-fd-background md:-mr-4 md:size-12"
+            style={{
+              zIndex: topContributors.length - i,
+            }}
+          >
+            <Image
+              src={contributor.avatar_url}
+              alt={`${contributor.login}'s avatar`}
+              unoptimized
+              width={48}
+              height={48}
+            />
+          </a>
+        ))}
+        {displayCount < contributors.length ? (
+          <div className="size-12 content-center rounded-full bg-fd-secondary text-center">
+            +{contributors.length - displayCount}
+          </div>
+        ) : null}
+      </div>
+      <div className="text-center text-sm text-fd-muted-foreground">
+        Some of our best contributors.
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,248 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { TerminalIcon } from "lucide-react";
+import {
+  Fragment,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useState,
+} from "react";
+import { Input } from "./ui/input";
+
+export function CreateAppAnimation(): React.ReactElement {
+  const installCmd = "npx create-llama@latest";
+  const tickTime = 100;
+  const timeCommandEnter = installCmd.length;
+  const timeCommandRun = timeCommandEnter + 3;
+  const timeCommandEnd = timeCommandRun + 3;
+  const timeWindowOpen = timeCommandEnd + 1;
+  const timeEnd = timeWindowOpen + 1;
+
+  const [tick, setTick] = useState(timeEnd);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTick((prev) => (prev >= timeEnd ? prev : prev + 1));
+    }, tickTime);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [timeEnd]);
+
+  const lines: ReactElement[] = [];
+
+  lines.push(
+    <span key="command_type">
+      {installCmd.substring(0, tick)}
+      {tick < timeCommandEnter && (
+        <div className="inline-block h-3 w-1 animate-pulse bg-white" />
+      )}
+    </span>,
+  );
+
+  if (tick >= timeCommandEnter) {
+    lines.push(<span key="space"> </span>);
+  }
+
+  if (tick > timeCommandRun)
+    lines.push(
+      <Fragment key="command_response">
+        <span className="font-bold">┌ Create Llama</span>
+        <span>│</span>
+        {tick > timeCommandRun + 1 && (
+          <>
+            <span className="font-bold">◇ What is your project named?</span>
+            <span>│ my-app</span>
+          </>
+        )}
+        {tick > timeCommandRun + 2 && (
+          <>
+            <span>│</span>
+            <span className="font-bold">◆ What app do you want to build?</span>
+          </>
+        )}
+        {tick > timeCommandRun + 3 && (
+          <>
+            <span>│ ● Agentic RAG</span>
+            <span>│ ○ Data Scientist</span>
+          </>
+        )}
+      </Fragment>,
+    );
+
+  return (
+    <div
+      className="relative"
+      onMouseEnter={() => {
+        if (tick >= timeEnd) {
+          setTick(0);
+        }
+      }}
+    >
+      {tick > timeWindowOpen && (
+        <LaunchAppWindow className="absolute bottom-5 right-4 z-10 animate-in fade-in slide-in-from-top-10" />
+      )}
+      <pre className="overflow-hidden rounded-xl border text-xs">
+        <div className="flex flex-row items-center gap-2 border-b px-4 py-2">
+          <TerminalIcon className="size-4" />{" "}
+          <span className="font-bold">Terminal</span>
+          <div className="grow" />
+          <div className="size-2 rounded-full bg-red-400" />
+        </div>
+        <div className="min-h-[200px] bg-gradient-to-b from-fd-secondary [mask-image:linear-gradient(to_bottom,white,transparent)]">
+          <code className="grid p-4">{lines}</code>
+        </div>
+      </pre>
+    </div>
+  );
+}
+
+function UserMessage({ children }: { children: ReactNode }) {
+  return (
+    <div className="group relative flex items-start">
+      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-background">
+        <IconUser />
+      </div>
+      <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function BotMessage({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("group relative flex items-start", className)}>
+      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground">
+        <IconAI />
+      </div>
+      <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function ChatExample() {
+  const userMessageFull =
+    "Hello, please summarize the article on the file I uploaded.";
+  const botMessageFull = "Processing...";
+
+  const tickTime = 100;
+  const userMessageDuration = userMessageFull.length;
+  const botMessageDelay = userMessageDuration + 10;
+  const botMessageDuration = botMessageDelay + botMessageFull.length;
+  const totalDuration = botMessageDuration + 10;
+
+  const [tick, setTick] = useState(0);
+
+  useEffect(() => {
+    // Increment tick every tickTime milliseconds
+    const timer = setInterval(() => {
+      setTick((prev) => (prev >= totalDuration ? prev : prev + 1));
+    }, tickTime);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [totalDuration]);
+
+  const userMessageLength = Math.min(tick, userMessageFull.length);
+  const botMessageLength = Math.max(
+    0,
+    Math.min(tick - botMessageDelay, botMessageFull.length),
+  );
+
+  return (
+    <div className="max-w-64">
+      <div className="flex flex-col px-4 gap-2">
+        {userMessageLength === userMessageFull.length && (
+          <UserMessage>
+            <span>{userMessageFull}</span>
+          </UserMessage>
+        )}
+        {tick > botMessageDelay && (
+          <BotMessage>
+            <div>
+              <p>
+                {botMessageFull.substring(0, botMessageLength)}
+                {tick - botMessageDelay < botMessageFull.length && (
+                  <span className="inline-block h-3 w-1 animate-pulse bg-white" />
+                )}
+              </p>
+            </div>
+          </BotMessage>
+        )}
+      </div>
+      <Input
+        className="mt-4"
+        value={
+          userMessageFull.substring(0, userMessageLength) === userMessageFull
+            ? ""
+            : userMessageFull.substring(0, userMessageLength)
+        }
+        readOnly
+        placeholder="Input message..."
+      />
+    </div>
+  );
+}
+
+function LaunchAppWindow(
+  props: HTMLAttributes<HTMLDivElement>,
+): React.ReactElement {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "overflow-hidden rounded-md border bg-fd-background shadow-xl",
+        props.className,
+      )}
+    >
+      <div className="relative flex h-6 flex-row items-center border-b bg-fd-muted px-4 text-xs text-fd-muted-foreground">
+        <p className="absolute inset-x-0 text-center">localhost:8080</p>
+      </div>
+      <div className="p-4 text-sm">
+        <ChatExample />
+      </div>
+    </div>
+  );
+}
+
+function IconUser({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn("h-4 w-4", className)}
+      {...props}
+    >
+      <path d="M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8ZM72 96a56 56 0 1 1 56 56 56.06 56.06 0 0 1-56-56Z" />
+    </svg>
+  );
+}
+
+function IconAI({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 256 256"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("h-4 w-4", className)}
+      {...props}
+    >
+      <path d="M197.58,129.06l-51.61-19-19-51.65a15.92,15.92,0,0,0-29.88,0L78.07,110l-51.65,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0l19-51.61,51.65-19a15.92,15.92,0,0,0,0-29.88ZM140.39,163a15.87,15.87,0,0,0-9.43,9.43l-19,51.46L93,172.39A15.87,15.87,0,0,0,83.61,163h0L32.15,144l51.46-19A15.87,15.87,0,0,0,93,115.61l19-51.46,19,51.46a15.87,15.87,0,0,0,9.43,9.43l51.46,19ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path>
+    </svg>
+  );
+}

apps/next/src/components/feature.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
+import { HTMLAttributes, ReactElement, ReactNode } from "react";
+
+export function Feature({
+  className,
+  icon: Icon,
+  heading,
+  subheading,
+  description,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & {
+  icon: LucideIcon;
+  subheading: ReactNode;
+  heading: ReactNode;
+  description: ReactNode;
+}): ReactElement {
+  return (
+    <div
+      className={cn("border-l border-t px-6 py-12 md:py-16", className)}
+      {...props}
+    >
+      <div className="mb-4 inline-flex items-center gap-2 text-sm font-medium text-fd-muted-foreground">
+        <Icon className="size-4" />
+        <p>{subheading}</p>
+      </div>
+      <h2 className="mb-2 text-lg font-semibold">{heading}</h2>
+      <p className="text-fd-muted-foreground">{description}</p>
+
+      {props.children}
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { useClipboard } from "foxact/use-clipboard";
+import { Check, Copy } from "lucide-react";
+import { useCallback, useState } from "react";
+
+export const NpmInstall = () => {
+  const { copy } = useClipboard();
+  const [hasCheckIcon, setHasCheckIcon] = useState(false);
+
+  return (
+    <Button
+      onClick={useCallback(() => {
+        copy("npm i llamaindex")
+          .then(() => {
+            setHasCheckIcon(true);
+
+            setTimeout(() => {
+              setHasCheckIcon(false);
+            }, 1000);
+          })
+          .catch(console.error);
+      }, [copy])}
+      variant="outline"
+      className="flex flex-row items-center justify-center"
+    >
+      <code className="mr-2">$ npm i llamaindex</code>
+      <div className="relative cursor-pointer bg-transparent w-4 h-4">
+        <div
+          className={`absolute inset-0 transform transition-all duration-300 ${
+            hasCheckIcon ? "scale-0 opacity-0" : "scale-100 opacity-100"
+          }`}
+        >
+          <Copy className="h-4 w-4 text-zinc-800 dark:text-zinc-200" />
+        </div>
+        <div
+          className={`absolute inset-0 transform transition-all duration-300 ${
+            hasCheckIcon ? "scale-100 opacity-100" : "scale-0 opacity-0"
+          }`}
+        >
+          <Check className="h-4 w-4 text-zinc-800 dark:text-zinc-200" />
+        </div>
+      </div>
+    </Button>
+  );
+};

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

@@ -0,0 +1,28 @@
+"use client";
+import { useEffect, useState } from "react";
+import ReactTextTransition from "react-text-transition";
+
+const supports = [
+  "Next.js",
+  "Node.js",
+  "Hono",
+  "Express.js",
+  "Deno",
+  "Nest.js",
+  "Waku",
+];
+
+export const TextEffect = () => {
+  const [counter, setCounter] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCounter(
+        (Math.floor(Math.random() * supports.length) + 1) % supports.length,
+      );
+    }, 4000);
+    return () => {
+      clearInterval(id);
+    };
+  }, []);
+  return <ReactTextTransition inline>{supports[counter]}</ReactTextTransition>;
+};

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

@@ -0,0 +1,57 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

apps/next/src/components/website/Footer.module.css

@@ -0,0 +1,151 @@
+.footer {
+  width: 100%;
+  max-width: var(--page-max-width);
+  margin-inline: auto;
+  margin-top: 6em;
+  position: relative;
+}
+
+.navContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+  row-gap: 3em;
+  border-bottom: 1px var(--color-neutral-200) solid;
+  margin-bottom: 2em;
+  padding-bottom: 2em;
+}
+
+.logoContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.nav {
+  display: flex;
+  gap: 5em;
+  margin-bottom: 2em;
+  flex-wrap: wrap;
+  gap: 3em;
+  row-gap: 2em;
+  text-align: center;
+  flex-direction: column;
+}
+
+.nav ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  list-style: none;
+}
+
+.nav ul a {
+  color: var(--color-neutral-400);
+  text-decoration: none;
+}
+
+.nav ul a:hover {
+  color: var(--color-neutral-900);
+}
+
+.nav ul a:hover span {
+  color: var(--color-neutral-900);
+}
+
+.nav ul a span {
+  transition: color 300ms cubic-bezier(0.72, 0, 0.12, 1);
+}
+
+.navHeader,
+.navHeader a {
+  color: var(--color-neutral-900);
+  text-decoration: none;
+  letter-spacing: -0.03em;
+}
+
+.navHeader a {
+  transition: color 300ms cubic-bezier(0.72, 0, 0.12, 1);
+}
+
+.navHeader a:hover {
+  color: var(--color-neutral-800);
+}
+
+.navHeader {
+  margin-bottom: 0.5em;
+}
+
+.socialContainer {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2em;
+}
+
+.copyright {
+  text-align: center;
+  color: var(--color-neutral-400);
+  letter-spacing: -0.01em;
+}
+
+.copyright a {
+  color: currentColor;
+  text-decoration: none;
+  transition: color 300ms cubic-bezier(0.72, 0, 0.12, 1);
+}
+
+.copyright a:hover {
+  color: var(--color-neutral-800);
+}
+
+.copyrightContainer {
+  display: flex;
+  justify-content: space-between;
+  column-gap: 2em;
+  row-gap: 1em;
+  flex-wrap: wrap;
+  margin-bottom: 3em;
+}
+
+.legalNav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+}
+
+@media (max-width: 600px) {
+  .footer {
+    padding: 0 2em;
+  }
+
+  .footer::before,
+  .footer::after {
+    display: none;
+  }
+}
+
+@media (min-width: 450px) {
+  .navContainer {
+    align-items: flex-start;
+  }
+
+  .nav {
+    text-align: left;
+    flex-direction: row;
+  }
+
+  .logoContainer {
+    align-items: flex-start;
+  }
+
+  .copyright {
+    text-align: left;
+  }
+}
+
+@media (min-width: 1300px) {
+  .navContainer {
+    flex-direction: row;
+  }
+}

apps/next/src/components/website/Footer.tsx

@@ -0,0 +1,214 @@
+import Image from "next/image";
+
+import { Text } from "@/components/website/Text";
+
+import { Socials } from "@/components/website/Socials";
+import styles from "./Footer.module.css";
+
+const Footer = () => {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.navContainer}>
+        <div className={styles.logoContainer}>
+          <Image
+            src="/llamaindex.svg"
+            alt="LlamaIndex"
+            width={213}
+            height={42}
+          />
+          <div className={styles.socialContainer}>
+            <Socials />
+          </div>
+        </div>
+        <div className={styles.nav}>
+          <div>
+            <Text size={20} weight={600} as="h3" className={styles.navHeader}>
+              <a href="https://llamaindex.ai">LlamaIndex</a>
+            </Text>
+            <ul>
+              <li>
+                <a href="https://llamaindex.ai/blog">
+                  <Text as="span">Blog</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://llamaindex.ai/partners">
+                  <Text as="span">Partners</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://llamaindex.ai/careers">
+                  <Text as="span">Careers</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://llamaindex.ai/contact">
+                  <Text as="span">Contact</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://llamaindex.statuspage.io" target="_blank">
+                  <Text as="span">Status</Text>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <Text size={20} weight={600} as="h3" className={styles.navHeader}>
+              <a href="https://llamaindex.ai/enterprise">Enterprise</a>
+            </Text>
+            <ul>
+              <li>
+                <a
+                  href="https://cloud.llamaindex.ai"
+                  data-tracking-variant="link"
+                  data-tracking-section="footer"
+                >
+                  <Text as="span">LlamaCloud</Text>
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://cloud.llamaindex.ai/parse"
+                  data-tracking-variant="link"
+                  data-tracking-section="footer"
+                >
+                  <Text as="span">LlamaParse</Text>
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://llamaindex.ai/llamacloud-sharepoint-data-loading-for-generative-ai"
+                  data-tracking-variant="link"
+                  data-tracking-section="footer"
+                >
+                  <Text as="span">SharePoint</Text>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <Text size={20} weight={600} as="h3" className={styles.navHeader}>
+              <a href="https://llamaindex.ai/open-source">Open Source</a>
+            </Text>
+            <ul>
+              <li>
+                <a href="https://pypi.org/project/llama-index/">
+                  <Text as="span">Python package</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://docs.llamaindex.ai">
+                  <Text as="span">Python docs</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://www.npmjs.com/package/llamaindex">
+                  <Text as="span">TypeScript package</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://ts.llamaindex.ai">
+                  <Text as="span">TypeScript docs</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://llamahub.ai">
+                  <Text as="span">LlamaHub</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://github.com/run-llama">
+                  <Text as="span">GitHub</Text>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <Text size={20} weight={600} as="h3" className={styles.navHeader}>
+              <a href="https://llamaindex.ai/community">Community</a>
+            </Text>
+            <ul>
+              <li>
+                <a href="https://llamaindex.ai/community#newsletter">
+                  <Text as="span">Newsletter</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://discord.com/invite/eN6D2HQ4aX">
+                  <Text as="span">Discord</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://twitter.com/llama_index">
+                  <Text as="span">Twitter/X</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://www.linkedin.com/company/91154103/">
+                  <Text as="span">LinkedIn</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://www.youtube.com/@LlamaIndex">
+                  <Text as="span">YouTube</Text>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <Text size={20} weight={600} as="h3" className={styles.navHeader}>
+              Starter projects
+            </Text>
+            <ul>
+              <li>
+                <a href="https://www.npmjs.com/package/create-llama">
+                  <Text as="span">create-llama</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://secinsights.ai">
+                  <Text as="span">SEC Insights</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://chat.llamaindex.ai/">
+                  <Text as="span">Chat LlamaIndex</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://github.com/run-llama/llamabot">
+                  <Text as="span">LlamaBot</Text>
+                </a>
+              </li>
+              <li>
+                <a href="https://docs.llamaindex.ai/en/stable/use_cases/q_and_a/rag_cli.html">
+                  <Text as="span">RAG CLI</Text>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div className={styles.copyrightContainer}>
+        <Text className={styles.copyright} size={14}>
+          &copy; {new Date().getFullYear()} LlamaIndex
+        </Text>
+        <div className={styles.legalNav}>
+          <Text className={styles.copyright} size={14}>
+            <a href="https://llamaindex.ai/files/privacy-notice.pdf">
+              Privacy Notice
+            </a>
+          </Text>
+          <Text className={styles.copyright} size={14}>
+            <a href="https://llamaindex.ai/files/terms-of-service.pdf">
+              Terms of Service
+            </a>
+          </Text>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export { Footer };

apps/next/src/components/website/HeadingUnderline.module.css

@@ -0,0 +1,4 @@
+.underline {
+  display: inline-grid;
+  gap: 0.25rem;
+}

apps/next/src/components/website/HeadingUnderline.tsx

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+
+import styles from "./HeadingUnderline.module.css";
+
+interface HeadingUnderlineProps {
+  children: ReactNode;
+}
+
+const HeadingUnderline = ({ children }: HeadingUnderlineProps) => (
+  <span className={styles.underline}>
+    {children}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 352 16"
+      fill="none"
+      preserveAspectRatio="none"
+    >
+      <path
+        fill="url(#paint0_angular_57_743)"
+        fillRule="evenodd"
+        d="M350.974 15.007C216.288-1.307 61.29 8.211.669 15.01L0 9.048C60.879 2.22 216.381-7.34 351.695 9.05l-.721 5.956Z"
+        clipRule="evenodd"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_angular_57_743"
+          x1={172}
+          x2={180.5}
+          y1={32.5}
+          y2={-24.5}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#BB8DEB" />
+          <stop offset={0.291} stopColor="#F8DFD8" />
+          <stop offset={0.632} stopColor="#FFA6EA" />
+          <stop offset={0.881} stopColor="#45DFF8" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </span>
+);
+
+export { HeadingUnderline };

apps/next/src/components/website/Socials.module.css

@@ -0,0 +1,53 @@
+.socials {
+  --background-color: var(--color-neutral-100);
+  --icon-color: var(--color-neutral-400);
+
+  list-style: none;
+  display: flex;
+  gap: 2em;
+}
+
+.socials a {
+  width: 2.5em;
+  height: 2.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--background-color);
+  color: var(--icon-color);
+  transition:
+    color 300ms cubic-bezier(0.72, 0, 0.12, 1),
+    background 300ms cubic-bezier(0.72, 0, 0.12, 1);
+}
+
+.socials a:hover {
+  background-color: var(--icon-color);
+  color: var(--background-color);
+}
+
+.socials-theme-dark {
+  --background-color: #dedceb;
+}
+
+.socialsWithDescription {
+  flex-direction: column;
+}
+
+.socialsWithDescription li {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+
+.icons {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+@media (max-width: 600px) {
+  .socials {
+    gap: 1em;
+  }
+}

apps/next/src/components/website/Socials.tsx

@@ -0,0 +1,119 @@
+import clsx from "clsx";
+
+import {
+  FaDiscord,
+  FaGithub,
+  FaLinkedin,
+  FaPython,
+  FaYoutube,
+} from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+import { SiTypescript } from "react-icons/si";
+
+import { Text } from "@/components/website/Text";
+
+import styles from "./Socials.module.css";
+
+interface SocialsProps {
+  className?: string;
+  showDescription?: boolean;
+  theme?: "light" | "dark";
+}
+
+const Socials = ({
+  theme = "light",
+  showDescription = false,
+  className,
+}: SocialsProps) => (
+  <>
+    {!showDescription && <IconsList theme={theme} className={className} />}
+    {showDescription && (
+      <IconsWithDescription theme={theme} className={className} />
+    )}
+  </>
+);
+
+const IconsList = ({ theme, className }: SocialsProps) => (
+  <ul
+    className={clsx(
+      styles.socials,
+      styles[`socials-theme-${theme}`],
+      className,
+    )}
+  >
+    <li>
+      <a href="https://github.com/run-llama/llama_index">
+        <FaGithub />
+      </a>
+    </li>
+    <li>
+      <a href="https://discord.com/invite/eN6D2HQ4aX">
+        <FaDiscord />
+      </a>
+    </li>
+    <li>
+      <a href="https://twitter.com/llama_index">
+        <FaXTwitter />
+      </a>
+    </li>
+    <li>
+      <a href="https://www.linkedin.com/company/91154103/">
+        <FaLinkedin />
+      </a>
+    </li>
+    <li>
+      <a href="https://www.youtube.com/@LlamaIndex">
+        <FaYoutube />
+      </a>
+    </li>
+  </ul>
+);
+
+const IconsWithDescription = ({ theme, className }: SocialsProps) => (
+  <ul
+    className={clsx(
+      styles.socials,
+      styles.socialsWithDescription,
+      styles[`socials-theme-${theme}`],
+      className,
+    )}
+  >
+    <li>
+      <div className={styles.icons}>
+        <a href="https://github.com/run-llama/llama_index">
+          <FaPython />
+        </a>
+        <a href="https://github.com/run-llama/LlamaIndexTS">
+          <SiTypescript />
+        </a>
+      </div>
+      <Text>File issues and contribute patches</Text>
+    </li>
+    <li>
+      <div className={styles.icons}>
+        <a href="https://twitter.com/llama_index">
+          <FaXTwitter />
+        </a>
+        <a href="https://www.linkedin.com/company/91154103/">
+          <FaLinkedin />
+        </a>
+      </div>
+      <Text>Follow us on social media for the latest updates</Text>
+    </li>
+    <li>
+      <a href="https://discord.com/invite/eN6D2HQ4aX">
+        <FaDiscord />
+      </a>
+      <Text>Get help from LlamaIndex and your peers</Text>
+    </li>
+
+    <li>
+      <a href="https://www.youtube.com/@LlamaIndex">
+        <FaYoutube />
+      </a>
+      <Text>Dive in to our tutorials and webinars</Text>
+    </li>
+  </ul>
+);
+
+export { Socials };

apps/next/src/components/website/Text.module.css

@@ -0,0 +1,96 @@
+.text {
+  font-family: var(--font-inter);
+  font-size: clamp(0.875rem, -0.4286rem + 4.5714vw, 1rem); /* 14px -> 16px */
+  line-height: 1.6;
+  letter-spacing: -0.04em;
+}
+
+.text-size-12,
+.text-size-16,
+.text-size-18,
+.text-size-20 {
+  color: var(--color-neutral-400);
+  letter-spacing: 0;
+}
+
+.text-size-32,
+.text-size-36,
+.text-size-40,
+.text-size-48,
+.text-size-60 {
+  font-weight: 600;
+}
+
+.text-weight-400 {
+  font-weight: 400;
+}
+
+.text-weight-500 {
+  font-weight: 500;
+}
+
+.text-weight-600 {
+  font-weight: 600;
+}
+
+.text-align-center {
+  text-align: center;
+}
+
+.text-size-12 {
+  font-size: 0.75em;
+}
+
+.text-size-14 {
+  font-size: 0.875em;
+}
+
+.text-size-18 {
+  font-size: clamp(1rem, -0.4286rem + 4.5714vw, 1.125rem); /* 16px -> 18px */
+}
+
+.text-size-20 {
+  font-size: clamp(1rem, -0.4286rem + 4.5714vw, 1.25rem); /* 16px -> 20px */
+}
+
+.text-size-24 {
+  font-size: clamp(1.25rem, -0.4286rem + 4.5714vw, 1.5rem); /* 20px -> 24px */
+  line-height: 1.5;
+}
+
+.text-size-28 {
+  font-size: clamp(1.25rem, -0.4286rem + 4.5714vw, 1.75rem);
+  line-height: 1.4;
+}
+
+.text-size-32 {
+  font-size: clamp(1.25rem, -0.4286rem + 4.5714vw, 2rem); /* 20px -> 32px */
+}
+
+.text-size-36 {
+  font-size: clamp(1.5rem, -0.4286rem + 4.5714vw, 2.25rem); /* 24px -> 36px */
+}
+
+.text-size-40 {
+  line-height: 1.2;
+  font-size: clamp(1.75rem, -0.4286rem + 4.5714vw, 2.5rem); /* 28px -> 40px */
+}
+
+.text-size-48 {
+  font-size: 3em;
+  font-size: clamp(1.75rem, -0.4286rem + 4.5714vw, 3rem); /* 28px -> 48px */
+  line-height: 1.25;
+}
+
+.text-size-60 {
+  line-height: 1.2;
+  font-size: clamp(1.75rem, -0.4286rem + 4.5714vw, 3.75rem); /* 28px -> 60px */
+}
+
+.text-family-sourceCodePro {
+  font-family: var(--font-source-code-pro);
+}
+
+.text-family-spaceGrotesk {
+  font-family: var(--font-space-grotesk);
+}

apps/next/src/components/website/Text.tsx

@@ -0,0 +1,70 @@
+import clsx from "clsx";
+import { Fragment, ReactNode } from "react";
+
+import { HeadingUnderline } from "@/components/website/HeadingUnderline";
+
+import styles from "./Text.module.css";
+
+export interface TextProps {
+  align?: "left" | "center" | "right";
+  size?: 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 60;
+  family?: "inter" | "spaceGrotesk" | "sourceCodePro";
+  weight?: 400 | 500 | 600;
+  children?: ReactNode;
+  className?: string;
+  as?: any;
+  maximumWidth?: any;
+}
+
+const Text = ({
+  align = "left",
+  weight,
+  children,
+  className,
+  size = 16,
+  family,
+  maximumWidth,
+  as = "p",
+}: TextProps) => {
+  const Component = as;
+
+  const renderTextWithComponent = (substring: string) => {
+    if (substring.startsWith("|") && substring.endsWith("|")) {
+      const content = substring.slice(1, -1);
+
+      return <HeadingUnderline>{content}</HeadingUnderline>;
+    }
+
+    return substring;
+  };
+
+  const renderedString =
+    children &&
+    typeof children === "string" &&
+    children
+      .toString()
+      .split(/(\|.*?\|)/g)
+      .map((substring: string) => (
+        <Fragment key={substring}>
+          {renderTextWithComponent(substring)}
+        </Fragment>
+      ));
+
+  return (
+    <Component
+      className={clsx(
+        styles.text,
+        align && styles[`text-align-${align}`],
+        size && styles[`text-size-${size}`],
+        weight && styles[`text-weight-${weight}`],
+        family && styles[`text-family-${family}`],
+        className,
+      )}
+      style={{ maxWidth: maximumWidth ? `${maximumWidth}px` : undefined }}
+    >
+      {renderedString || children}
+    </Component>
+  );
+};
+
+export { Text };

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

@@ -0,0 +1,8 @@
+---
+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

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