Release 0.7.10 (#1392)

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,46 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ""
+labels: bug
+assignees: ""
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Code to reproduce the behavior:
+
+```ts
+// paste the code here
+```
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+
+- OS: [e.g. macOS, Linux]
+- JS Runtime / Framework / Bundler (select all applicable)
+- [ ] Node.js
+- [ ] Deno
+- [ ] Bun
+- [ ] Next.js
+- [ ] ESBuild
+- [ ] Rollup
+- [ ] Webpack
+- [ ] Turbopack
+- [ ] Vite
+- [ ] Waku
+- [ ] Edge Runtime
+- [ ] AWS Lambda
+- [ ] Cloudflare Worker
+- [ ] Others (please elaborate on this)
+- Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.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

@@ -13,8 +13,10 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  POSTGRES_USER: runneradmin
   POSTGRES_HOST_AUTH_METHOD: trust
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+  TURBO_REMOTE_ONLY: true
 
 jobs:
   e2e:
@@ -87,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
@@ -104,6 +100,7 @@ jobs:
           - nextjs-edge-runtime
           - nextjs-node-runtime
           - waku-query-engine
+          - llama-parse-browser
     runs-on: ubuntu-latest
     name: Build LlamaIndex Example (${{ matrix.packages }})
     steps:
@@ -139,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,17 +19,36 @@ 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
@@ -77,7 +96,7 @@ See more about [moduleResolution](https://www.typescriptlang.org/docs/handbook/m
 ### Node.js
 
 ```ts
-import fs from "fs/promises";
+import fs from "node:fs/promises";
 import { Document, VectorStoreIndex } from "llamaindex";
 
 async function main() {
@@ -111,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
@@ -124,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 (
@@ -167,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(
@@ -189,6 +208,48 @@ export async function chatWithAgent(
 }
 ```
 
+### Cloudflare Workers
+
+> [!TIP]
+> Some modules are not supported in Cloudflare Workers which require Node.js APIs.
+
+```ts
+// add `OPENAI_API_KEY` to the `.dev.vars` file
+interface Env {
+  OPENAI_API_KEY: string;
+}
+
+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);
+  },
+};
+```
+
 ### Vite
 
 We have some wasm dependencies for better performance. You can use `vite-plugin-wasm` to load them.
@@ -204,29 +265,9 @@ export default {
 };
 ```
 
-## Playground
+### Tips when using in non-Node.js environments
 
-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.
-
-## 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`).
@@ -262,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,267 @@
 # docs
 
+## 0.0.102
+
+### Patch Changes
+
+- Updated dependencies [9df9a8f]
+  - llamaindex@0.7.10
+
+## 0.0.101
+
+### Patch Changes
+
+- Updated dependencies [691c5bc]
+  - llamaindex@0.7.9
+
+## 0.0.100
+
+### Patch Changes
+
+- llamaindex@0.7.8
+
+## 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

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

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

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

@@ -1,7 +1,3 @@
----
-sidebar_position: 7
----
-
 # Storage
 
 Storage in LlamaIndex.TS works automatically once you've configured a
@@ -57,4 +53,4 @@ const index = await VectorStoreIndex.fromDocuments([document], {
 
 ## API Reference
 
-- [StorageContext](../api/interfaces/StorageContext.md)
+- [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

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/ingestion_pipeline/_category_.yml

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

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

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)
 

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/response_synthesizer.md

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

apps/docs/docs/modules/retriever.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 14
 ---
 
 # Retriever

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.67",
+  "version": "0.0.102",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -37,7 +37,7 @@
     "docusaurus-plugin-typedoc": "1.0.5",
     "typedoc": "0.26.6",
     "typedoc-plugin-markdown": "4.2.6",
-    "typescript": "^5.5.4"
+    "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"]
+}

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

@@ -0,0 +1,95 @@
+---
+title: What is LlamaIndex?
+description: LlamaIndex is a framework for building LLM-powered applications.
+---
+
+import {
+  SiGithub,
+  SiNpm,
+  SiX,
+  SiDiscord,
+} from "@icons-pack/react-simple-icons";
+import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+LlamaIndex helps you ingest, structure, and access private or domain-specific data. It's available [as a Python package](https://docs.llamaindex.ai/en/stable/) and in TypeScript (this package).
+
+LlamaIndex.TS offers the core features of LlamaIndex for JS Runtime-agnostic (Node.js, Deno, and Bun) applications.
+
+## 🚀 Why LlamaIndex.TS?
+
+LLMs offer a natural language interface between humans and inferred data. Widely available models come pre-trained on huge amounts of publicly available data, from Wikipedia and mailing lists to textbooks and source code.
+
+Applications built on top of LLMs often require augmenting these models with private or domain-specific data. That data is often distributed across siloed applications and data stores. It's behind APIs, in SQL databases, or trapped in PDFs and slide decks.
+
+LlamaIndex.TS helps you unlock that data and then build powerful applications with it.
+
+## 🦙 What is LlamaIndex for?
+
+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 interactive, unsupervised manner.
+
+## 👨‍👩‍👧‍👦 Who is LlamaIndex for?
+
+LlamaIndex targets the "AI Engineer": developers building software in any domain that can be enhanced by LLM-powered functionality, without needing to be an expert in machine learning or natural language processing.
+
+Our high-level API allows beginner users to use LlamaIndex.TS to ingest, index, and query their data in just a few lines of code.
+
+For more complex applications, our lower-level APIs allow advanced users to customize and extend any module—data connectors, indices, retrievers, and query engines, to fit their needs.
+
+## Getting Started
+
+<Tabs items={["npm", "yarn", "pnpm"]}>
+  <Tab value="npm">
+    <CodeBlock language="shell">
+      <Pre>npm install llamaindex</Pre>
+    </CodeBlock>
+  </Tab>
+  <Tab value="yarn">
+    <CodeBlock language="shell">
+      <Pre>yarn add llamaindex</Pre>
+    </CodeBlock>
+  </Tab>
+  <Tab value="pnpm">
+    <CodeBlock language="shell">
+      <Pre>pnpm add llamaindex</Pre>
+    </CodeBlock>
+  </Tab>
+</Tabs>
+
+Our documentation includes [Installation Instructions](./getting_started/installation.mdx) and a [Starter Tutorial](./getting_started/starter_tutorial/retrieval_augmented_generation.mdx) to build your first application.
+
+Once you're up and running, [High-Level Concepts](./getting_started/concepts.md) has an overview of LlamaIndex's modular architecture. For more hands-on practical examples, look through our Examples section on the sidebar.
+
+## 🗺️ Ecosystem
+
+To download or contribute, find LlamaIndex on:
+
+<Cards>
+  <Card
+    icon={<SiGithub />}
+    title="GitHub"
+    href="https://github.com/run-llama/LlamaIndexTS"
+  />
+  <Card
+    icon={<SiNpm />}
+    title="NPM"
+    href="https://www.npmjs.com/package/llamaindex"
+  />
+</Cards>
+
+## Community
+
+Need help? Have a feature suggestion? Join the LlamaIndex community:
+
+<Cards>
+  <Card icon={<SiX />} title="Twitter" href="https://twitter.com/llama_index" />
+  <Card
+    icon={<SiDiscord />}
+    title="Discord"
+    href="https://discord.gg/dGcwcsnxhU"
+  />
+</Cards>

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

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

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

@@ -0,0 +1,3 @@
+{
+  "pages": ["llamaindex", "cloud"]
+}

apps/next/src/lib/get-contributors.ts

@@ -0,0 +1,31 @@
+export interface Contributor {
+  avatar_url: string;
+  login: string;
+  contributions: number;
+}
+
+export async function fetchContributors(
+  repoOwner: string,
+  repoName: string,
+): Promise<Contributor[]> {
+  const headers = new Headers();
+  if (process.env.GITHUB_TOKEN)
+    headers.set('Authorization', `Bearer ${process.env.GITHUB_TOKEN}`);
+
+  const response = await fetch(
+    `https://api.github.com/repos/${repoOwner}/${repoName}/contributors?per_page=50`,
+    {
+      headers,
+      next: { revalidate: 1000 * 1000 },
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch contributors: ${response.statusText}`);
+  }
+
+  const contributors = (await response.json()) as Contributor[];
+  return contributors
+    .filter((contributor) => !contributor.login.endsWith('[bot]'))
+    .sort((a, b) => b.contributions - a.contributions);
+}

apps/next/src/lib/source.ts

@@ -0,0 +1,11 @@
+import { docs, meta } from '../../.source';
+import { createMDXSource } from 'fumadocs-mdx';
+import { loader } from 'fumadocs-core/source';
+import { createOpenAPI } from "fumadocs-openapi/server";
+
+export const source = loader({
+  baseUrl: '/docs',
+  source: createMDXSource(docs, meta),
+});
+
+export const openapi = createOpenAPI();

apps/next/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

apps/next/tailwind.config.js

@@ -0,0 +1,67 @@
+import { createPreset } from "fumadocs-ui/tailwind-plugin";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: [
+    "./src/components/**/*.{ts,tsx}",
+    "./src/app/**/*.{ts,tsx}",
+    "./src/content/**/*.{md,mdx}",
+    "./src/mdx-components.{ts,tsx}",
+    "./node_modules/fumadocs-ui/dist/**/*.js",
+    "./node_modules/fumadocs-openapi/dist/**/*.js",
+  ],
+  presets: [createPreset()],
+  plugins: [require("tailwindcss-animate")],
+  theme: {
+    extend: {
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+          3: "hsl(var(--chart-3))",
+          4: "hsl(var(--chart-4))",
+          5: "hsl(var(--chart-5))",
+        },
+      },
+    },
+  },
+};

apps/next/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

examples/CHANGELOG.md

@@ -1,5 +1,34 @@
 # examples
 
+## 0.0.10
+
+### Patch Changes
+
+- 2486bd8: Add files_via_content example for LlamaCloud retrieval
+- Updated dependencies [e2a0876]
+  - @llamaindex/core@0.3.4
+  - llamaindex@0.7.7
+
+## 0.0.9
+
+### Patch Changes
+
+- Updated dependencies [1364e8e]
+- Updated dependencies [96fc69c]
+- Updated dependencies [3b7736f]
+- Updated dependencies [96fc69c]
+  - llamaindex@0.7.0
+  - @llamaindex/core@0.3.0
+
+## 0.0.8
+
+### Patch Changes
+
+- 11feef8: Add workflows
+- Updated dependencies [11feef8]
+  - @llamaindex/core@0.2.0
+  - llamaindex@0.6.0
+
 ## 0.0.7
 
 ### Patch Changes

examples/agent/large_toolcall_with_gpt4o.ts

@@ -13,7 +13,7 @@ import { FunctionTool, OpenAI, ToolCallOptions } from "llamaindex";
   }
 })();
 
-async function callLLM(init: Partial<OpenAI>) {
+async function callLLM(init: { model: string }) {
   const csvData =
     "Country,Average Height (cm)\nNetherlands,156\nDenmark,158\nNorway,160";