mirror of
https://github.com/run-llama/LlamaIndexTS.git
synced 2026-07-02 20:13:52 -04:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 thucpn
|
d751af3ba1 | ||
|
thucpn
|
6e0bf26566 |
@@ -25,4 +25,4 @@ jobs:
|
||||
run: pnpm run build
|
||||
|
||||
- name: Pre Release
|
||||
run: pnpx pkg-pr-new publish --pnpm ./packages/* ./packages/providers/* ./packages/providers/storage/*
|
||||
run: pnpx pkg-pr-new publish ./packages/* ./packages/providers/*
|
||||
|
||||
@@ -83,6 +83,11 @@ jobs:
|
||||
run: pnpm install
|
||||
- name: Build
|
||||
run: pnpm run build
|
||||
- name: Use Build For Examples
|
||||
run: |
|
||||
pnpm link ../packages/llamaindex/
|
||||
cd readers && pnpm link ../../packages/llamaindex/
|
||||
working-directory: ./examples
|
||||
- name: Run Type Check
|
||||
run: pnpm run type-check
|
||||
- name: Run Circular Dependency Check
|
||||
@@ -98,7 +103,6 @@ jobs:
|
||||
- nextjs-node-runtime
|
||||
- waku-query-engine
|
||||
- llama-parse-browser
|
||||
- vite-import-llamaindex
|
||||
runs-on: ubuntu-latest
|
||||
name: Build LlamaIndex Example (${{ matrix.packages }})
|
||||
steps:
|
||||
@@ -117,30 +121,6 @@ jobs:
|
||||
run: pnpm run build
|
||||
working-directory: e2e/examples/${{ matrix.packages }}
|
||||
|
||||
size-limit:
|
||||
runs-on: ubuntu-latest
|
||||
if: github.event_name == 'pull_request'
|
||||
name: Size Limit
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: pnpm/action-setup@v4
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version-file: ".nvmrc"
|
||||
cache: "pnpm"
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
- name: Build llamaindex
|
||||
run: pnpm run build
|
||||
- uses: andresz1/size-limit-action@94bc357df29c36c8f8d50ea497c3e225c3c95d1d
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
directory: e2e/examples/vite-import-llamaindex
|
||||
skip_step: "install"
|
||||
build_script: build
|
||||
package_manager: pnpm
|
||||
|
||||
typecheck-examples:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
@@ -170,7 +150,7 @@ jobs:
|
||||
done
|
||||
- name: Pack provider packages
|
||||
run: |
|
||||
for dir in packages/providers/* packages/providers/storage/*; do
|
||||
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
|
||||
|
||||
+3
-1
@@ -1 +1,3 @@
|
||||
pnpm run lint-staged
|
||||
pnpm format
|
||||
pnpm lint
|
||||
npx lint-staged
|
||||
|
||||
Vendored
-1
@@ -1 +0,0 @@
|
||||
LlamaIndexTS
|
||||
Vendored
+1
-2
@@ -14,6 +14,5 @@
|
||||
"[json]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"prettier.prettierPath": "./node_modules/prettier",
|
||||
"prettier.configPath": "prettier.config.mjs"
|
||||
"prettier.prettierPath": "./node_modules/prettier"
|
||||
}
|
||||
|
||||
+8
-48
@@ -14,14 +14,13 @@ There are some important folders in the repository:
|
||||
all JS runtime environments.
|
||||
- `env`: The environment package of LlamaIndex.TS, which contains the environment-specific classes and interfaces. It
|
||||
includes compatibility layers for Node.js, Deno, Vercel Edge Runtime, Cloudflare Workers...
|
||||
- `providers/*`: The providers package of LlamaIndex.TS, which contains the providers for LLM and other services.
|
||||
- `apps/*`: The applications based on LlamaIndex.TS.
|
||||
- `next`: Our documentation website based on Next.js.
|
||||
- `examples`: The code examples of LlamaIndex.TS using Node.js.
|
||||
|
||||
## Getting Started
|
||||
|
||||
Make sure you have Node.js LTS (Long-term Support) installed. You can check your Node.js version by running:
|
||||
Make sure you have Node.js LIS (Long-term Support) installed. You can check your Node.js version by running:
|
||||
|
||||
```shell
|
||||
node -v
|
||||
@@ -31,7 +30,7 @@ node -v
|
||||
### Use pnpm
|
||||
|
||||
```shell
|
||||
npm install -g pnpm
|
||||
corepack enable
|
||||
```
|
||||
|
||||
### Install dependencies
|
||||
@@ -42,65 +41,26 @@ pnpm install
|
||||
|
||||
### Build the packages
|
||||
|
||||
To build all packages, run:
|
||||
|
||||
```shell
|
||||
pnpm build
|
||||
# Build all packages
|
||||
turbo build --filter "./packages/*"
|
||||
```
|
||||
|
||||
### Run tests
|
||||
|
||||
#### Unit tests
|
||||
|
||||
After build, to run all unit tests, call:
|
||||
|
||||
```shell
|
||||
pnpm test
|
||||
```
|
||||
|
||||
Unit tests are located in the `tests` folder of each package. They are using their own package (e.g. `@llamaindex/core-tests` for `@llamaindex/core`). The tests are importing the package under test and the test package is not published.
|
||||
|
||||
#### E2E tests
|
||||
|
||||
To run all E2E tests, call:
|
||||
|
||||
```shell
|
||||
pnpm e2e
|
||||
```
|
||||
|
||||
All E2E tests are in the `e2e` folder.
|
||||
|
||||
### Docs
|
||||
|
||||
See the [docs](./apps/next/README.md) for more information.
|
||||
|
||||
## Adding a new package
|
||||
|
||||
Please follow these steps to add a new package:
|
||||
|
||||
1. Only add new packages to the `packages/providers` folder.
|
||||
2. Use the `package.json` and `tsconfig.json` of an existing packages as template.
|
||||
3. Reference your new package in the root `tsconfig.json` file
|
||||
4. Add your package to the `examples/package.json` file if you add a new example.
|
||||
|
||||
## Before sending a PR
|
||||
|
||||
Before sending a PR, make sure of the following:
|
||||
|
||||
1. Tests are all running and you added meaningful tests for your change.
|
||||
2. If you have a new feature, document it in the `apps/next` docs folder.
|
||||
3. If you have a new feature, add a new example in the `examples` folder.
|
||||
4. You have a descriptive changeset for each PR:
|
||||
|
||||
### Changesets
|
||||
## Changeset
|
||||
|
||||
We use [changesets](https://github.com/changesets/changesets) for managing versions and changelogs. To create a new
|
||||
changeset, run in the root folder:
|
||||
|
||||
```shell
|
||||
```
|
||||
pnpm changeset
|
||||
```
|
||||
|
||||
Please send a descriptive changeset for each PR.
|
||||
|
||||
## Publishing (maintainers only)
|
||||
|
||||
The [Release Github Action](.github/workflows/release.yml) is automatically generating and updating a
|
||||
|
||||
@@ -65,18 +65,44 @@ yarn add llamaindex
|
||||
|
||||
See our official document: <https://ts.llamaindex.ai/docs/llamaindex/getting_started/>
|
||||
|
||||
### Adding provider packages
|
||||
### Tips when using in non-Node.js environments
|
||||
|
||||
In most cases, you'll also need to install provider packages to use LlamaIndexTS. These are for adding AI models, file readers for ingestion or storing documents, e.g. in vector databases.
|
||||
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.
|
||||
|
||||
For example, to use the OpenAI LLM, you would install the following package:
|
||||
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`).
|
||||
|
||||
```shell
|
||||
npm install @llamaindex/openai
|
||||
pnpm install @llamaindex/openai
|
||||
yarn add @llamaindex/openai
|
||||
If you need any of those classes, you have to import them instead directly though their file path in the package.
|
||||
Here's an example for importing the `PineconeVectorStore` class:
|
||||
|
||||
```typescript
|
||||
import { PineconeVectorStore } from "llamaindex/storage/vectorStore/PineconeVectorStore";
|
||||
```
|
||||
|
||||
As the `PDFReader` is not working with the Edge runtime, here's how to use the `SimpleDirectoryReader` with the `LlamaParseReader` to load PDFs:
|
||||
|
||||
```typescript
|
||||
import { SimpleDirectoryReader } from "llamaindex/readers/SimpleDirectoryReader";
|
||||
import { LlamaParseReader } from "llamaindex/readers/LlamaParseReader";
|
||||
|
||||
export const DATA_DIR = "./data";
|
||||
|
||||
export async function getDocuments() {
|
||||
const reader = new SimpleDirectoryReader();
|
||||
// Load PDFs using LlamaParseReader
|
||||
return await reader.loadData({
|
||||
directoryPath: DATA_DIR,
|
||||
fileExtToReader: {
|
||||
pdf: new LlamaParseReader({ resultType: "markdown" }),
|
||||
},
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
> _Note_: Reader classes have to be added explictly to the `fileExtToReader` map in the Edge version of the `SimpleDirectoryReader`.
|
||||
|
||||
You'll find a complete example with LlamaIndexTS here: https://github.com/run-llama/create_llama_projects/tree/main/nextjs-edge-llamaparse
|
||||
|
||||
## Playground
|
||||
|
||||
Check out our NextJS playground at https://llama-playground.vercel.app/. The source is available at https://github.com/run-llama/ts-playground
|
||||
|
||||
@@ -1,360 +1,5 @@
|
||||
# @llamaindex/doc
|
||||
|
||||
## 0.2.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [d365eb2]
|
||||
- @llamaindex/openai@0.3.2
|
||||
- llamaindex@0.9.19
|
||||
|
||||
## 0.2.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 2ffdb27: docs: correct the CondenseQuestionChatEngine path
|
||||
- Updated dependencies [88b7046]
|
||||
- @llamaindex/openai@0.3.1
|
||||
- llamaindex@0.9.18
|
||||
|
||||
## 0.2.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 3ffee26: feat: enhance config params for LlamaIndexServer
|
||||
|
||||
## 0.2.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3534c37]
|
||||
- Updated dependencies [41191d0]
|
||||
- llamaindex@0.9.17
|
||||
- @llamaindex/workflow@1.0.3
|
||||
- @llamaindex/cloud@4.0.3
|
||||
|
||||
## 0.2.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 4999df1: bump nextjs
|
||||
- Updated dependencies [f5e4d09]
|
||||
- llamaindex@0.9.16
|
||||
|
||||
## 0.2.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 9c63f3f: Add support for openai responses api
|
||||
- Updated dependencies [9c63f3f]
|
||||
- Updated dependencies [c515a32]
|
||||
- @llamaindex/openai@0.3.0
|
||||
- @llamaindex/core@0.6.2
|
||||
- @llamaindex/workflow@1.0.2
|
||||
- llamaindex@0.9.15
|
||||
- @llamaindex/cloud@4.0.2
|
||||
- @llamaindex/node-parser@2.0.2
|
||||
- @llamaindex/readers@3.0.2
|
||||
|
||||
## 0.2.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 648cfb5: Add support for supabase vector store
|
||||
Added doc for the supbase vector store
|
||||
- Updated dependencies [1b6f368]
|
||||
- Updated dependencies [eaf326e]
|
||||
- Updated dependencies [9d951b2]
|
||||
- @llamaindex/core@0.6.1
|
||||
- llamaindex@0.9.14
|
||||
- @llamaindex/cloud@4.0.1
|
||||
- @llamaindex/node-parser@2.0.1
|
||||
- @llamaindex/openai@0.2.1
|
||||
- @llamaindex/readers@3.0.1
|
||||
- @llamaindex/workflow@1.0.1
|
||||
|
||||
## 0.2.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- e98033e: docs: correct the number of indexes
|
||||
|
||||
## 0.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [75d6e29]
|
||||
- llamaindex@0.9.13
|
||||
|
||||
## 0.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- f1db9b3: Adding an options parameter to vercel tool to tailor responses
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 21bebfc: Expose more content to fix the issue with unavailable documentation links, and adjust the documentation based on the latest code.
|
||||
- 2b39cef: Added documentation for structured output in openai and ollama
|
||||
- Updated dependencies [21bebfc]
|
||||
- Updated dependencies [93bc0ff]
|
||||
- Updated dependencies [91a18e7]
|
||||
- Updated dependencies [bf56fc0]
|
||||
- Updated dependencies [f8a86e4]
|
||||
- Updated dependencies [5189b44]
|
||||
- Updated dependencies [58a9446]
|
||||
- @llamaindex/readers@3.0.0
|
||||
- @llamaindex/core@0.6.0
|
||||
- @llamaindex/openai@0.2.0
|
||||
- @llamaindex/cloud@4.0.0
|
||||
- @llamaindex/workflow@1.0.0
|
||||
- llamaindex@0.9.12
|
||||
- @llamaindex/node-parser@2.0.0
|
||||
|
||||
## 0.1.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- a8c0637: feat: simplify to provide base URL to OpenAI
|
||||
- a654f58: Added docs for using perplexity
|
||||
- 98eebf7: Add RequestOptions parameter passing to support Gemini proxy calls.
|
||||
Add a usage example for the RequestOptions parameter.
|
||||
- Updated dependencies [a8c0637]
|
||||
- @llamaindex/openai@0.1.61
|
||||
- llamaindex@0.9.11
|
||||
|
||||
## 0.1.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [aea550a]
|
||||
- Updated dependencies [c1b5be5]
|
||||
- Updated dependencies [40ee761]
|
||||
- Updated dependencies [40ee761]
|
||||
- @llamaindex/openai@0.1.60
|
||||
- llamaindex@0.9.10
|
||||
- @llamaindex/workflow@0.0.16
|
||||
- @llamaindex/core@0.5.8
|
||||
- @llamaindex/cloud@3.0.9
|
||||
- @llamaindex/node-parser@1.0.8
|
||||
- @llamaindex/readers@2.0.8
|
||||
|
||||
## 0.1.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 4bac71d: Support binding additional argument to function tool
|
||||
- Updated dependencies [4bac71d]
|
||||
- @llamaindex/core@0.5.7
|
||||
- @llamaindex/cloud@3.0.8
|
||||
- llamaindex@0.9.9
|
||||
- @llamaindex/node-parser@1.0.7
|
||||
- @llamaindex/openai@0.1.59
|
||||
- @llamaindex/readers@2.0.7
|
||||
- @llamaindex/workflow@0.0.15
|
||||
|
||||
## 0.1.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [4b49428]
|
||||
- Updated dependencies [bbc8c87]
|
||||
- @llamaindex/workflow@0.0.14
|
||||
- llamaindex@0.9.8
|
||||
|
||||
## 0.1.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [beb922b]
|
||||
- @llamaindex/core@0.5.6
|
||||
- llamaindex@0.9.7
|
||||
- @llamaindex/cloud@3.0.7
|
||||
- @llamaindex/node-parser@1.0.6
|
||||
- @llamaindex/openai@0.1.58
|
||||
- @llamaindex/readers@2.0.6
|
||||
- @llamaindex/workflow@0.0.13
|
||||
|
||||
## 0.1.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [5668970]
|
||||
- @llamaindex/core@0.5.5
|
||||
- @llamaindex/workflow@0.0.12
|
||||
- @llamaindex/cloud@3.0.6
|
||||
- llamaindex@0.9.6
|
||||
- @llamaindex/node-parser@1.0.5
|
||||
- @llamaindex/openai@0.1.57
|
||||
- @llamaindex/readers@2.0.5
|
||||
|
||||
## 0.1.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [ad3c7f1]
|
||||
- @llamaindex/core@0.5.4
|
||||
- @llamaindex/cloud@3.0.5
|
||||
- llamaindex@0.9.5
|
||||
- @llamaindex/node-parser@1.0.4
|
||||
- @llamaindex/openai@0.1.56
|
||||
- @llamaindex/readers@2.0.4
|
||||
|
||||
## 0.1.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [cb256f2]
|
||||
- Updated dependencies [cb021e7]
|
||||
- @llamaindex/openai@0.1.55
|
||||
- @llamaindex/core@0.5.3
|
||||
- llamaindex@0.9.4
|
||||
- @llamaindex/cloud@3.0.4
|
||||
- @llamaindex/node-parser@1.0.3
|
||||
- @llamaindex/readers@2.0.3
|
||||
|
||||
## 0.1.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [d952e68]
|
||||
- @llamaindex/core@0.5.2
|
||||
- @llamaindex/cloud@3.0.3
|
||||
- llamaindex@0.9.3
|
||||
- @llamaindex/node-parser@1.0.2
|
||||
- @llamaindex/openai@0.1.54
|
||||
- @llamaindex/readers@2.0.2
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c902fcb]
|
||||
- Updated dependencies [88d776f]
|
||||
- @llamaindex/cloud@3.0.2
|
||||
- llamaindex@0.9.2
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [6d37d44]
|
||||
- llamaindex@0.9.1
|
||||
- @llamaindex/cloud@3.0.1
|
||||
- @llamaindex/core@0.5.1
|
||||
- @llamaindex/node-parser@1.0.1
|
||||
- @llamaindex/openai@0.1.53
|
||||
- @llamaindex/readers@2.0.1
|
||||
- @llamaindex/workflow@0.0.11
|
||||
|
||||
## 0.1.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 6a4a737: Remove re-exports from llamaindex main package
|
||||
- f4588bc: Remove readers package from llamaindex
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- c7c0800: fix: fumadoc build fail
|
||||
- a87efb9: docs: update chat engine docs
|
||||
- 7bd5d93: docs: update workflow doc
|
||||
- Updated dependencies [6a4a737]
|
||||
- Updated dependencies [d924c63]
|
||||
- Updated dependencies [b490376]
|
||||
- Updated dependencies [f4588bc]
|
||||
- llamaindex@0.9.0
|
||||
- @llamaindex/core@0.5.0
|
||||
- @llamaindex/cloud@3.0.0
|
||||
- @llamaindex/node-parser@1.0.0
|
||||
- @llamaindex/openai@0.1.52
|
||||
- @llamaindex/readers@2.0.0
|
||||
|
||||
## 0.0.41
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1c908fd]
|
||||
- @llamaindex/openai@0.1.51
|
||||
- @llamaindex/node-parser@0.0.24
|
||||
- @llamaindex/workflow@0.0.10
|
||||
- @llamaindex/readers@1.0.25
|
||||
- @llamaindex/cloud@2.0.24
|
||||
- @llamaindex/core@0.4.23
|
||||
- llamaindex@0.8.37
|
||||
|
||||
## 0.0.40
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [cb608b5]
|
||||
- @llamaindex/openai@0.1.50
|
||||
- @llamaindex/node-parser@0.0.23
|
||||
- @llamaindex/workflow@0.0.9
|
||||
- @llamaindex/readers@1.0.24
|
||||
- @llamaindex/cloud@2.0.23
|
||||
- @llamaindex/core@0.4.22
|
||||
- llamaindex@0.8.36
|
||||
|
||||
## 0.0.39
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 6d4d96f: chore: update examples and docs to use unified imports
|
||||
- Updated dependencies [15563a0]
|
||||
- @llamaindex/openai@0.1.49
|
||||
- llamaindex@0.8.35
|
||||
|
||||
## 0.0.38
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [9f8ad37]
|
||||
- Updated dependencies [7265f74]
|
||||
- llamaindex@0.8.34
|
||||
- @llamaindex/openai@0.1.48
|
||||
|
||||
## 0.0.37
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [2019a04]
|
||||
- @llamaindex/openai@0.1.47
|
||||
- llamaindex@0.8.33
|
||||
|
||||
## 0.0.36
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- f02621e: Fix internal links between chapters
|
||||
- Updated dependencies [34faf48]
|
||||
- Updated dependencies [4df1fe6]
|
||||
- Updated dependencies [9456616]
|
||||
- Updated dependencies [d6c270e]
|
||||
- Updated dependencies [1892e1c]
|
||||
- Updated dependencies [1931bbc]
|
||||
- llamaindex@0.8.32
|
||||
- @llamaindex/core@0.4.21
|
||||
- @llamaindex/cloud@2.0.22
|
||||
- @llamaindex/openai@0.1.46
|
||||
- @llamaindex/node-parser@0.0.22
|
||||
- @llamaindex/readers@1.0.23
|
||||
|
||||
## 0.0.35
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [5dec9f9]
|
||||
- Updated dependencies [fd9c829]
|
||||
- Updated dependencies [d211b7a]
|
||||
- Updated dependencies [0ebbfc1]
|
||||
- @llamaindex/cloud@2.0.21
|
||||
- llamaindex@0.8.31
|
||||
- @llamaindex/core@0.4.20
|
||||
- @llamaindex/node-parser@0.0.21
|
||||
- @llamaindex/openai@0.1.45
|
||||
- @llamaindex/readers@1.0.22
|
||||
|
||||
## 0.0.34
|
||||
|
||||
### Patch Changes
|
||||
|
||||
+2
-1
@@ -6,7 +6,8 @@ This is a Next.js application generated with
|
||||
Run development server:
|
||||
|
||||
```bash
|
||||
pnpm run dev
|
||||
turbo run dev
|
||||
# turbo will build all required packages before running the dev server
|
||||
```
|
||||
|
||||
## Learn More
|
||||
|
||||
@@ -4,18 +4,9 @@ const withMDX = createMDX();
|
||||
|
||||
/** @type {import('next').NextConfig} */
|
||||
const config = {
|
||||
// default timeout for static generation is 60s, but we need to increase it to 10 minutes due to the large number of document pages
|
||||
staticPageGenerationTimeout: 600,
|
||||
reactStrictMode: true,
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
},
|
||||
transpilePackages: ["monaco-editor"],
|
||||
serverExternalPackages: [
|
||||
"@huggingface/transformers",
|
||||
"twoslash",
|
||||
"typescript",
|
||||
],
|
||||
serverExternalPackages: ["@huggingface/transformers"],
|
||||
webpack: (config, { isServer }) => {
|
||||
if (Array.isArray(config.target) && config.target.includes("web")) {
|
||||
config.target = ["web", "es2020"];
|
||||
|
||||
+26
-29
@@ -1,20 +1,18 @@
|
||||
{
|
||||
"name": "@llamaindex/doc",
|
||||
"version": "0.2.9",
|
||||
"version": "0.0.34",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"postinstall": "fumadocs-mdx",
|
||||
"prebuild": "pnpm run build:docs",
|
||||
"build": "next build",
|
||||
"build": "pnpm run build:docs && next build",
|
||||
"dev": "next dev",
|
||||
"start": "next start",
|
||||
"postbuild": "tsx scripts/post-build.mts && tsx scripts/validate-links.mts",
|
||||
"build:docs": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" typedoc && tsx scripts/generate-docs.mts",
|
||||
"validate-links": "tsx scripts/validate-links.mts"
|
||||
"postdev": "fumadocs-mdx",
|
||||
"postbuild": "fumadocs-mdx && tsx scripts/post-build.mts",
|
||||
"build:docs": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" typedoc && node ./scripts/generate-docs.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@icons-pack/react-simple-icons": "^10.1.0",
|
||||
"@llamaindex/chat-ui": "0.2.0",
|
||||
"@llamaindex/chat-ui": "0.0.9",
|
||||
"@llamaindex/cloud": "workspace:*",
|
||||
"@llamaindex/core": "workspace:*",
|
||||
"@llamaindex/node-parser": "workspace:*",
|
||||
@@ -29,35 +27,35 @@
|
||||
"@radix-ui/react-slider": "^1.2.1",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@radix-ui/react-tooltip": "^1.1.4",
|
||||
"@scalar/api-client-react": "^1.1.25",
|
||||
"@vercel/functions": "^1.5.0",
|
||||
"ai": "^3.4.33",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "2.1.1",
|
||||
"foxact": "^0.2.41",
|
||||
"framer-motion": "^11.11.17",
|
||||
"fumadocs-core": "^15.0.15",
|
||||
"fumadocs-docgen": "^2.0.0",
|
||||
"fumadocs-mdx": "^11.5.6",
|
||||
"fumadocs-openapi": "^6.3.0",
|
||||
"fumadocs-twoslash": "^3.1.0",
|
||||
"fumadocs-typescript": "^3.1.0",
|
||||
"fumadocs-ui": "^15.0.15",
|
||||
"fumadocs-core": "14.6.0",
|
||||
"fumadocs-docgen": "1.3.2",
|
||||
"fumadocs-mdx": "^11.1.2",
|
||||
"fumadocs-openapi": "^5.8.2",
|
||||
"fumadocs-twoslash": "^2.0.2",
|
||||
"fumadocs-typescript": "^3.0.2",
|
||||
"fumadocs-ui": "14.6.0",
|
||||
"hast-util-to-jsx-runtime": "^2.3.2",
|
||||
"llamaindex": "workspace:*",
|
||||
"lucide-react": "^0.460.0",
|
||||
"next": "^15.2.4",
|
||||
"next": "15.0.3",
|
||||
"next-themes": "^0.4.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.3.0",
|
||||
"react-monaco-editor": "^0.56.2",
|
||||
"react-text-transition": "^3.1.0",
|
||||
"react-use-measure": "^2.1.1",
|
||||
"rehype-katex": "^7.0.1",
|
||||
"remark-math": "^6.0.0",
|
||||
"rimraf": "^6.0.1",
|
||||
"shiki": "^3.1.0",
|
||||
"shiki-magic-move": "^1.0.1",
|
||||
"shiki": "1.23.1",
|
||||
"shiki-magic-move": "^0.5.0",
|
||||
"swr": "^2.2.5",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
@@ -68,28 +66,27 @@
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@next/env": "^15.2.1",
|
||||
"@tailwindcss/postcss": "^4.0.9",
|
||||
"@next/env": "^15.0.3",
|
||||
"@types/mdx": "^2.0.13",
|
||||
"@types/node": "22.9.0",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"cross-env": "^7.0.3",
|
||||
"fast-glob": "^3.3.2",
|
||||
"gray-matter": "^4.0.3",
|
||||
"monaco-editor-webpack-plugin": "^7.1.0",
|
||||
"postcss": "^8.5.3",
|
||||
"postcss": "^8.4.49",
|
||||
"raw-loader": "^4.0.2",
|
||||
"remark": "^15.0.1",
|
||||
"remark-gfm": "^4.0.0",
|
||||
"remark-mdx": "^3.1.0",
|
||||
"remark-stringify": "^11.0.0",
|
||||
"tailwindcss": "^4.0.9",
|
||||
"tsx": "^4.19.3",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"tsx": "^4.19.2",
|
||||
"typedoc": "0.27.4",
|
||||
"typedoc-plugin-markdown": "^4.3.1",
|
||||
"typedoc-plugin-merge-modules": "^6.1.0",
|
||||
"typescript": "^5.7.3"
|
||||
"typescript": "^5.7.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@@ -1,5 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
@@ -1,7 +1,8 @@
|
||||
import { generateFiles as openapiGenerateFiles } from "fumadocs-openapi";
|
||||
import { generateFiles as typescriptGenerateFiles } from "fumadocs-typescript";
|
||||
import * as OpenAPI from "fumadocs-openapi";
|
||||
import { generateFiles } from "fumadocs-typescript";
|
||||
import fs from "node:fs";
|
||||
import * as path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { rimrafSync } from "rimraf";
|
||||
|
||||
const out = "./src/content/docs/cloud/api";
|
||||
@@ -14,23 +15,28 @@ rimrafSync(out, {
|
||||
},
|
||||
});
|
||||
|
||||
void openapiGenerateFiles({
|
||||
input: ["../../packages/cloud/openapi.json"],
|
||||
output: "./src/content/docs/cloud/api",
|
||||
void OpenAPI.generateFiles({
|
||||
input: [
|
||||
fileURLToPath(
|
||||
new URL("../../../packages/cloud/openapi.json", import.meta.url),
|
||||
),
|
||||
],
|
||||
output: out,
|
||||
groupBy: "tag",
|
||||
});
|
||||
|
||||
void typescriptGenerateFiles({
|
||||
void generateFiles({
|
||||
input: ["./src/content/docs/api/**/*.mdx"],
|
||||
output: (file) => path.resolve(path.dirname(file), path.basename(file)),
|
||||
transformOutput,
|
||||
});
|
||||
|
||||
function transformOutput(filePath: string, content: string) {
|
||||
function transformOutput(filePath, content) {
|
||||
const fileName = path.basename(filePath);
|
||||
let title = fileName.split(".")[0];
|
||||
let pageContent = content;
|
||||
if (title === "index") title = "LlamaIndex API Reference";
|
||||
return `---\ntitle: ${title}\n---\n\n${transformAbsoluteUrl(content, filePath)}`;
|
||||
return `---\ntitle: ${title}\n---\n\n${transformAbsoluteUrl(pageContent, filePath)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -40,17 +46,20 @@ function transformOutput(filePath: string, content: string) {
|
||||
* [text](BaseVectorStore.mdx#constructors) -> [text](/docs/api/classes/BaseVectorStore#constructors)
|
||||
* [text](TaskStep.mdx) -> [text](/docs/api/type-aliases/TaskStep)
|
||||
*/
|
||||
function transformAbsoluteUrl(content: string, filePath: string) {
|
||||
function transformAbsoluteUrl(content, filePath) {
|
||||
const group = path.dirname(filePath).split(path.sep).pop();
|
||||
return content.replace(/\]\(([^)]+)\.mdx([^)]*)\)/g, (_, slug, anchor) => {
|
||||
const slugParts = slug.split("/");
|
||||
const fileName = slugParts[slugParts.length - 1];
|
||||
const fileGroup = slugParts[slugParts.length - 2] ?? group;
|
||||
const result = ["/docs/api", fileGroup, fileName, anchor]
|
||||
.filter(Boolean)
|
||||
.join("/");
|
||||
return `](${result})`;
|
||||
});
|
||||
return content.replace(
|
||||
/\]\(([^)]+)\.mdx([^)]*)\)/g,
|
||||
(match, slug, anchor) => {
|
||||
const slugParts = slug.split("/");
|
||||
const fileName = slugParts[slugParts.length - 1];
|
||||
const fileGroup = slugParts[slugParts.length - 2] ?? group;
|
||||
const result = ["/docs/api", fileGroup, fileName, anchor]
|
||||
.filter(Boolean)
|
||||
.join("/");
|
||||
return `](${result})`;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// append meta.json for API page
|
||||
@@ -4,8 +4,4 @@ import { updateLlamaCloud } from "./update-llamacloud.mjs";
|
||||
|
||||
env.loadEnvConfig(process.cwd());
|
||||
|
||||
if (process.env.VERCEL_ENV === "production") {
|
||||
updateLlamaCloud().catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
await updateLlamaCloud();
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
import { upsertBatchPipelineDocumentsApiV1PipelinesPipelineIdDocumentsPut } from "@llamaindex/cloud/api";
|
||||
import fg from "fast-glob";
|
||||
import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
|
||||
import { remarkAutoTypeTable } from "fumadocs-typescript";
|
||||
import {
|
||||
fileGenerator,
|
||||
remarkDocGen,
|
||||
remarkInstall,
|
||||
typescriptGenerator,
|
||||
} from "fumadocs-docgen";
|
||||
import matter from "gray-matter";
|
||||
import * as fs from "node:fs/promises";
|
||||
import path, { relative } from "node:path";
|
||||
@@ -17,8 +21,7 @@ async function processContent(content: string): Promise<string> {
|
||||
const file = await remark()
|
||||
.use(remarkMdx)
|
||||
.use(remarkGfm)
|
||||
.use(remarkAutoTypeTable)
|
||||
.use(remarkDocGen, { generators: [fileGenerator()] })
|
||||
.use(remarkDocGen, { generators: [typescriptGenerator(), fileGenerator()] })
|
||||
.use(remarkInstall, { persist: { id: "package-manager" } })
|
||||
.use(remarkStringify)
|
||||
.process(content);
|
||||
|
||||
@@ -1,249 +0,0 @@
|
||||
import glob from "fast-glob";
|
||||
import fs from "fs";
|
||||
import matter from "gray-matter";
|
||||
import path from "path";
|
||||
|
||||
const CONTENT_DIR = path.join(process.cwd(), "src/content/docs");
|
||||
const BUILD_DIR = path.join(process.cwd(), ".next");
|
||||
|
||||
// Regular expression to find internal links
|
||||
// This captures Markdown links [text](/docs/path) and href attributes href="/docs/path"
|
||||
const INTERNAL_LINK_REGEX = /(?:(?:\]\(|\bhref=["'])\/docs\/([^")]+))/g;
|
||||
|
||||
// Regular expression to find relative links
|
||||
// This captures relative links like [text](./path) or 
|
||||
const RELATIVE_LINK_REGEX = /(?:\]\()(?:\s*)(?:\.\.?)\//g;
|
||||
|
||||
interface LinkValidationResult {
|
||||
file: string;
|
||||
invalidLinks: Array<{ link: string; line: number }>;
|
||||
}
|
||||
|
||||
interface RelativeLinkResult {
|
||||
file: string;
|
||||
relativeLinks: Array<{ line: number; lineContent: string }>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all valid documentation routes from the content directory
|
||||
*/
|
||||
async function getValidRoutes(): Promise<Set<string>> {
|
||||
const mdxFiles = await glob("**/*.mdx", { cwd: CONTENT_DIR });
|
||||
|
||||
const routes = new Set<string>();
|
||||
|
||||
// Add each MDX file as a valid route
|
||||
for (const file of mdxFiles) {
|
||||
// Remove .mdx extension and normalize to route format
|
||||
let route = file.replace(/\.mdx$/, "");
|
||||
|
||||
// Handle index files
|
||||
if (route.endsWith("/index")) {
|
||||
route = route.replace(/\/index$/, "");
|
||||
} else if (route === "index") {
|
||||
route = "";
|
||||
}
|
||||
|
||||
routes.add(route);
|
||||
}
|
||||
|
||||
return routes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract internal links from a MDX file
|
||||
*/
|
||||
function extractLinksFromFile(
|
||||
filePath: string,
|
||||
): Array<{ link: string; line: number }> {
|
||||
const content = fs.readFileSync(filePath, "utf-8");
|
||||
const { content: mdxContent } = matter(content);
|
||||
|
||||
const lines = mdxContent.split("\n");
|
||||
const links: Array<{ link: string; line: number }> = [];
|
||||
|
||||
lines.forEach((line, lineNumber) => {
|
||||
let match;
|
||||
while ((match = INTERNAL_LINK_REGEX.exec(line)) !== null) {
|
||||
if (match[1]) {
|
||||
links.push({
|
||||
link: match[1],
|
||||
line: lineNumber + 1, // 1-based line numbers
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return links;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a link is an image link
|
||||
*/
|
||||
function isImageLink(link: string): boolean {
|
||||
// Check for image extensions
|
||||
const imageExtensions = [".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp"];
|
||||
const hasImageExtension = imageExtensions.some((ext) =>
|
||||
link.toLowerCase().endsWith(ext),
|
||||
);
|
||||
|
||||
// Check for markdown image syntax: 
|
||||
const isMarkdownImage = link.trim().startsWith("!");
|
||||
|
||||
return hasImageExtension || isMarkdownImage;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract relative links from a MDX file
|
||||
*/
|
||||
function findRelativeLinksInFile(
|
||||
filePath: string,
|
||||
): Array<{ line: number; lineContent: string }> {
|
||||
const content = fs.readFileSync(filePath, "utf-8");
|
||||
const { content: mdxContent } = matter(content);
|
||||
|
||||
const lines = mdxContent.split("\n");
|
||||
const relativeLinks: Array<{ line: number; lineContent: string }> = [];
|
||||
|
||||
lines.forEach((line, lineNumber) => {
|
||||
// Check for relative links
|
||||
if (RELATIVE_LINK_REGEX.test(line)) {
|
||||
// Reset the regex lastIndex to start from the beginning of the line
|
||||
RELATIVE_LINK_REGEX.lastIndex = 0;
|
||||
|
||||
// Skip image links
|
||||
if (!isImageLink(line)) {
|
||||
relativeLinks.push({
|
||||
line: lineNumber + 1, // 1-based line numbers
|
||||
lineContent: line.trim(),
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return relativeLinks;
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate internal links in all MDX files
|
||||
*/
|
||||
/**
|
||||
* Find relative links in all MDX files
|
||||
*/
|
||||
async function findRelativeLinks(): Promise<RelativeLinkResult[]> {
|
||||
const mdxFiles = await glob("**/*.mdx", { cwd: CONTENT_DIR });
|
||||
const results: RelativeLinkResult[] = [];
|
||||
|
||||
for (const file of mdxFiles) {
|
||||
const filePath = path.join(CONTENT_DIR, file);
|
||||
const relativeLinks = findRelativeLinksInFile(filePath);
|
||||
|
||||
if (relativeLinks.length > 0) {
|
||||
results.push({
|
||||
file,
|
||||
relativeLinks,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
async function validateLinks(): Promise<LinkValidationResult[]> {
|
||||
const mdxFiles = await glob("**/*.mdx", { cwd: CONTENT_DIR });
|
||||
const validRoutes = await getValidRoutes();
|
||||
|
||||
const results: LinkValidationResult[] = [];
|
||||
|
||||
for (const file of mdxFiles) {
|
||||
const filePath = path.join(CONTENT_DIR, file);
|
||||
const links = extractLinksFromFile(filePath);
|
||||
|
||||
const invalidLinks = links.filter(({ link }) => {
|
||||
// Check if the link exists in valid routes
|
||||
// First normalize the link (remove any query string or hash)
|
||||
const baseLink = link.split("?")[0].split("#")[0];
|
||||
// Remove the trailing slash if present.
|
||||
// This works with links like "api/interfaces/MetadataFilter#operator" and "api/interfaces/MetadataFilter/#operator".
|
||||
const normalizedLink = baseLink.endsWith("/")
|
||||
? baseLink.slice(0, -1)
|
||||
: baseLink;
|
||||
|
||||
// Remove llamaindex/ prefix if it exists as it's the root of the docs
|
||||
let routePath = normalizedLink;
|
||||
if (routePath.startsWith("llamaindex/")) {
|
||||
routePath = routePath.substring("llamaindex/".length);
|
||||
}
|
||||
|
||||
return !validRoutes.has(normalizedLink) && !validRoutes.has(routePath);
|
||||
});
|
||||
|
||||
if (invalidLinks.length > 0) {
|
||||
results.push({
|
||||
file,
|
||||
invalidLinks,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
/**
|
||||
* Main function to validate links and report errors
|
||||
*/
|
||||
async function main() {
|
||||
console.log("🔍 Validating links in documentation...");
|
||||
|
||||
try {
|
||||
// Check for invalid internal links
|
||||
const validationResults: LinkValidationResult[] = await validateLinks();
|
||||
// Check for relative links
|
||||
const relativeLinksResults = await findRelativeLinks();
|
||||
|
||||
let hasErrors = false;
|
||||
|
||||
// Report invalid internal links
|
||||
if (validationResults.length > 0) {
|
||||
console.error("❌ Found invalid internal links:");
|
||||
hasErrors = true;
|
||||
|
||||
for (const result of validationResults) {
|
||||
console.error(`\nFile: ${result.file}`);
|
||||
|
||||
for (const { link, line } of result.invalidLinks) {
|
||||
console.error(` - Line ${line}: /docs/${link}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Report relative links
|
||||
if (relativeLinksResults.length > 0) {
|
||||
console.error("\n❌ Found relative links (use absolute paths instead):");
|
||||
hasErrors = true;
|
||||
|
||||
for (const result of relativeLinksResults) {
|
||||
console.error(`\nFile: ${result.file}`);
|
||||
|
||||
for (const { line, lineContent } of result.relativeLinks) {
|
||||
console.error(` - Line ${line}: ${lineContent}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (hasErrors) {
|
||||
// Exit with error code to fail the build
|
||||
process.exit(1);
|
||||
} else {
|
||||
console.log("✅ All links are valid!");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error validating links:", error);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
main().catch((error) => {
|
||||
console.error("Unhandled error:", error);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -2,11 +2,10 @@ import { rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
|
||||
import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
|
||||
import { defineConfig, defineDocs } from "fumadocs-mdx/config";
|
||||
import { transformerTwoslash } from "fumadocs-twoslash";
|
||||
import { createFileSystemTypesCache } from "fumadocs-twoslash/cache-fs";
|
||||
import rehypeKatex from "rehype-katex";
|
||||
import remarkMath from "remark-math";
|
||||
|
||||
export const docs = defineDocs({
|
||||
export const { docs, meta } = defineDocs({
|
||||
dir: "./src/content/docs",
|
||||
});
|
||||
|
||||
@@ -21,11 +20,7 @@ export default defineConfig({
|
||||
},
|
||||
transformers: [
|
||||
...(rehypeCodeDefaultOptions.transformers ?? []),
|
||||
transformerTwoslash({
|
||||
typesCache: createFileSystemTypesCache({
|
||||
dir: ".next/cache/twoslash",
|
||||
}),
|
||||
}),
|
||||
transformerTwoslash(),
|
||||
{
|
||||
name: "transformers:remove-notation-escape",
|
||||
code(hast) {
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
} from "@/components/infinite-providers";
|
||||
import { MagicMove } from "@/components/magic-move";
|
||||
import { NpmInstall } from "@/components/npm-install";
|
||||
import { Supports } from "@/components/supports";
|
||||
import { TextEffect } from "@/components/text-effect";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { LEGACY_DOCUMENT_URL } from "@/lib/const";
|
||||
@@ -24,18 +24,18 @@ import { Suspense } from "react";
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-12">
|
||||
<h1 className="mb-4 text-center text-4xl font-bold md:text-6xl">
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-center mb-4">
|
||||
Build context-augmented web apps using
|
||||
<br /> <span className="text-blue-500">LlamaIndex.TS</span>
|
||||
</h1>
|
||||
<p className="text-fd-muted-foreground mb-12 text-center text-xl">
|
||||
<p className="text-xl text-center text-fd-muted-foreground mb-12 ">
|
||||
LlamaIndex.TS is the JS/TS version of{" "}
|
||||
<a href="https://llamaindex.ai">LlamaIndex</a>, the framework for
|
||||
building agentic generative AI applications connected to your data.
|
||||
</p>
|
||||
<div className="text-fd-muted-foreground mb-12 text-center text-lg">
|
||||
<div className="text-center text-lg text-fd-muted-foreground mb-12">
|
||||
<span>Designed for building web applications in </span>
|
||||
<Supports />
|
||||
<TextEffect />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
@@ -60,7 +60,7 @@ export default function HomePage() {
|
||||
icon={Footprints}
|
||||
subheading="Progressive"
|
||||
heading="From the simplest to the most complex"
|
||||
description="LlamaIndex.TS is designed to be simple to get started, but powerful enough to build complex, agentic AI applications using multi-agents."
|
||||
description="LlamaIndex.TS is designed to be simple to get started, but powerful enough to build complex, agentic AI applications."
|
||||
>
|
||||
<Suspense
|
||||
fallback={
|
||||
@@ -76,48 +76,38 @@ export default function HomePage() {
|
||||
>
|
||||
<MagicMove
|
||||
code={[
|
||||
`import { openai } from "@llamaindex/openai";
|
||||
|
||||
const llm = openai();
|
||||
`import { OpenAI } from "llamaindex";
|
||||
const llm = new OpenAI();
|
||||
const response = await llm.complete({ prompt: "How are you?" });`,
|
||||
`import { openai } from "@llamaindex/openai";
|
||||
|
||||
const llm = openai();
|
||||
`import { OpenAI } from "llamaindex";
|
||||
const llm = new OpenAI();
|
||||
const response = await llm.chat({
|
||||
messages: [{ content: "Tell me a joke.", role: "user" }],
|
||||
});`,
|
||||
`import { agent } from "llamaindex";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
|
||||
const analyseAgent = agent({
|
||||
llm: openai({ model: "gpt-4o" }),
|
||||
tools: [analyseTools],
|
||||
`import { OpenAI, ChatMemoryBuffer } from "llamaindex";
|
||||
const llm = new OpenAI({ model: 'gpt4o-turbo' });
|
||||
const buffer = new ChatMemoryBuffer({
|
||||
tokenLimit: 128_000,
|
||||
})
|
||||
buffer.put({ content: "Tell me a joke.", role: "user" })
|
||||
const response = await llm.chat({
|
||||
messages: buffer.getMessages(),
|
||||
stream: true
|
||||
});`,
|
||||
`import { OpenAIAgent, ChatMemoryBuffer } from "llamaindex";
|
||||
const agent = new OpenAIAgent({
|
||||
llm,
|
||||
tools: [...myTools]
|
||||
systemPrompt,
|
||||
});
|
||||
const response = await analyseAgent.run(\`Analyse the given data:
|
||||
\${data}\`);`,
|
||||
`import { agent, multiAgent } from "llamaindex";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
|
||||
const analyseAgent = agent({
|
||||
name: "AnalyseAgent",
|
||||
llm: openai({ model: "gpt-4o" }),
|
||||
tools: [analyseTools],
|
||||
});
|
||||
const reporterAgent = agent({
|
||||
name: "ReporterAgent",
|
||||
llm: openai({ model: "gpt-4o" }),
|
||||
tools: [reporterTools],
|
||||
canHandoffTo: [analyseAgent],
|
||||
});
|
||||
|
||||
const agents = multiAgent({
|
||||
agents: [analyseAgent, reporterAgent],
|
||||
rootAgent: reporterAgent,
|
||||
});
|
||||
|
||||
const response = await agents.run(\`Analyse the given data:
|
||||
\${data}\`);`,
|
||||
const buffer = new ChatMemoryBuffer({
|
||||
tokenLimit: 128_000,
|
||||
})
|
||||
buffer.put({ content: "Analysis the data based on the given data.", role: "user" })
|
||||
buffer.put({ content: \`\${data}\`, role: "user" })
|
||||
const response = await agent.chat({
|
||||
message: buffer.getMessages(),
|
||||
});`,
|
||||
]}
|
||||
/>
|
||||
</Suspense>
|
||||
@@ -129,20 +119,19 @@ const response = await agents.run(\`Analyse the given data:
|
||||
description="Truly powerful retrieval-augmented generation applications use agentic techniques, and LlamaIndex.TS makes it easy to build them."
|
||||
>
|
||||
<CodeBlock
|
||||
code={`import { agent, SimpleDirectoryReader, VectorStoreIndex } from "llamaindex";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
code={`import { FunctionTool } from "llamaindex";
|
||||
import { OpenAIAgent } from "@llamaindex/openai";
|
||||
|
||||
// load documents from current directoy into an index
|
||||
const reader = new SimpleDirectoryReader();
|
||||
const documents = await reader.loadData(currentDir);
|
||||
const index = await VectorStoreIndex.fromDocuments(documents);
|
||||
const interpreterTool = FunctionTool.from(...);
|
||||
const systemPrompt = \`...\`;
|
||||
|
||||
const myAgent = agent({
|
||||
llm: openai({ model: "gpt-4o" }),
|
||||
tools: [index.queryTool()],
|
||||
const agent = new OpenAIAgent({
|
||||
llm,
|
||||
tools: [interpreterTool],
|
||||
systemPrompt,
|
||||
});
|
||||
|
||||
await myAgent.run('...');`}
|
||||
await agent.chat('...');`}
|
||||
lang="ts"
|
||||
/>
|
||||
</Feature>
|
||||
@@ -154,13 +143,13 @@ await myAgent.run('...');`}
|
||||
>
|
||||
<div className="mt-8 flex flex-col gap-8">
|
||||
<div>
|
||||
<h3 className="text-fd-muted-foreground mb-2 text-lg font-semibold">
|
||||
<h3 className="text-lg font-semibold text-fd-muted-foreground mb-2">
|
||||
LLMs
|
||||
</h3>
|
||||
<InfiniteLLMProviders />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-fd-muted-foreground mb-2 text-lg font-semibold">
|
||||
<h3 className="text-lg font-semibold text-fd-muted-foreground mb-2">
|
||||
Vector Stores
|
||||
</h3>
|
||||
<InfiniteVectorStoreProviders />
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import { LEGACY_DOCUMENT_URL } from "@/lib/const";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default async function Page(props: {
|
||||
params: Promise<{
|
||||
any: string[];
|
||||
}>;
|
||||
}) {
|
||||
const path = await props.params.then(({ any }) => any.join("/"));
|
||||
return redirect(new URL(path, LEGACY_DOCUMENT_URL).toString());
|
||||
}
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
} from "fumadocs-ui/page";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
export const revalidate = false;
|
||||
const { AutoTypeTable } = createTypeTable();
|
||||
|
||||
export default async function Page(props: {
|
||||
params: Promise<{ slug?: string[] }>;
|
||||
@@ -20,17 +20,16 @@ export default async function Page(props: {
|
||||
const page = source.getPage(params.slug);
|
||||
if (!page) notFound();
|
||||
|
||||
const { AutoTypeTable } = createTypeTable();
|
||||
const MDX = page.data.body;
|
||||
|
||||
return (
|
||||
<DocsPage
|
||||
toc={page.data.toc}
|
||||
full={page.data.full}
|
||||
lastUpdate={page.data.lastModified}
|
||||
editOnGithub={{
|
||||
owner: "run-llama",
|
||||
repo: "LlamaIndexTS",
|
||||
sha: "main",
|
||||
path: `apps/next/src/content/docs/${page.file.path}`,
|
||||
}}
|
||||
>
|
||||
@@ -65,7 +64,6 @@ export async function generateMetadata(props: {
|
||||
|
||||
return createMetadata(
|
||||
metadataImage.withImage(page.slugs, {
|
||||
metadataBase: new URL("https://ts.llamaindex.ai"),
|
||||
title: page.data.title,
|
||||
description: page.data.description,
|
||||
openGraph: {
|
||||
|
||||
@@ -22,7 +22,7 @@ export default function Layout({ children }: { children: ReactNode }) {
|
||||
variant: "secondary",
|
||||
size: "xs",
|
||||
className:
|
||||
"text-fd-muted-foreground ms-2 gap-1.5 rounded-full px-2 md:flex-1",
|
||||
"md:flex-1 px-2 ms-2 gap-1.5 text-fd-muted-foreground rounded-full",
|
||||
}),
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -1,13 +1,6 @@
|
||||
@import "tailwindcss";
|
||||
@import "fumadocs-ui/css/neutral.css";
|
||||
@import "fumadocs-ui/css/preset.css";
|
||||
@import "../../node_modules/fumadocs-twoslash/dist/twoslash.css";
|
||||
@plugin "tailwindcss-animate";
|
||||
@source '../../node_modules/fumadocs-ui/dist/**/*.js';
|
||||
@source "../../node_modules/fumadocs-openapi/dist/**/*.js",
|
||||
@source '../../node_modules/@llamaindex/chat-ui/dist/**/*.js';
|
||||
@config "../../tailwind.config.mjs";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@layer base {
|
||||
:root {
|
||||
--page-max-width: 1840px;
|
||||
@@ -53,7 +46,6 @@
|
||||
--chart-5: 27 87% 67%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-neutral-000: #0e0c15;
|
||||
--color-neutral-100: #252134;
|
||||
@@ -95,3 +87,40 @@
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
/*
|
||||
* Override default styles for Markdown
|
||||
*/
|
||||
.prose
|
||||
:where(blockquote):not(
|
||||
:where([class~="not-prose"], [class~="not-prose"] *)
|
||||
) {
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
||||
.prose
|
||||
:where(blockquote p:first-of-type):not(
|
||||
:where([class~="not-prose"], [class~="not-prose"] *)
|
||||
):before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.prose
|
||||
:where(blockquote p:first-of-type):not(
|
||||
:where([class~="not-prose"], [class~="not-prose"] *)
|
||||
):after {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.prose
|
||||
:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
@apply text-blue-600 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@ export default function Layout({ children }: { children: ReactNode }) {
|
||||
href="/favicon-16x16.png"
|
||||
/>
|
||||
</head>
|
||||
<body className="flex min-h-screen flex-col">
|
||||
<body className="flex flex-col min-h-screen">
|
||||
<TooltipProvider>
|
||||
<AIProvider>
|
||||
<RootProvider>{children}</RootProvider>
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
import fg from "fast-glob";
|
||||
import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
|
||||
import { remarkInclude } from "fumadocs-mdx/config";
|
||||
import { remarkAutoTypeTable } from "fumadocs-typescript";
|
||||
import matter from "gray-matter";
|
||||
import * as fs from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { remark } from "remark";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import remarkMdx from "remark-mdx";
|
||||
import remarkStringify from "remark-stringify";
|
||||
|
||||
export const revalidate = false;
|
||||
|
||||
export async function GET() {
|
||||
const files = await fg([
|
||||
"./src/content/docs/**/*.mdx",
|
||||
// remove generated openapi files
|
||||
"!./src/content/docs/cloud/api/**/*",
|
||||
]);
|
||||
|
||||
const scan = files.map(async (file) => {
|
||||
const fileContent = await fs.readFile(file);
|
||||
const { content, data } = matter(fileContent.toString());
|
||||
|
||||
const dir = path.dirname(file).split(path.sep).at(4);
|
||||
const category = {
|
||||
llamaindex: "LlamaIndexTS Framework",
|
||||
api: "LlamaIndexTS API",
|
||||
cloud: "LlamaCloud Service",
|
||||
}[dir ?? ""];
|
||||
|
||||
const processed = await processContent(file, content);
|
||||
return `file: ${file}
|
||||
# ${category}: ${data.title}
|
||||
|
||||
${data.description}
|
||||
|
||||
${processed}`;
|
||||
});
|
||||
|
||||
const scanned = await Promise.all(scan);
|
||||
|
||||
return new Response(scanned.join("\n\n"));
|
||||
}
|
||||
|
||||
async function processContent(path: string, content: string): Promise<string> {
|
||||
const file = await remark()
|
||||
.use(remarkMdx)
|
||||
.use(remarkInclude)
|
||||
.use(remarkGfm)
|
||||
.use(remarkAutoTypeTable)
|
||||
.use(remarkDocGen, { generators: [fileGenerator()] })
|
||||
.use(remarkInstall, { persist: { id: "package-manager" } })
|
||||
.use(remarkStringify)
|
||||
.process({
|
||||
path,
|
||||
value: content,
|
||||
});
|
||||
|
||||
return String(file);
|
||||
}
|
||||
@@ -45,13 +45,13 @@ export const AITrigger = (props: AITriggerProps) => {
|
||||
<Dialog>
|
||||
<DialogTrigger {...props} />
|
||||
<DialogPortal>
|
||||
<DialogOverlay className="bg-fd-background/50 data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in fixed inset-0 z-50 backdrop-blur-sm" />
|
||||
<DialogOverlay className="fixed inset-0 z-50 bg-fd-background/50 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" />
|
||||
<DialogContent
|
||||
onOpenAutoFocus={(e) => {
|
||||
document.getElementById("nd-ai-input")?.focus();
|
||||
e.preventDefault();
|
||||
}}
|
||||
className="bg-fd-popover text-fd-popover-foreground data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in fixed left-1/2 z-50 my-[5vh] flex max-h-[90dvh] w-[98vw] max-w-[860px] origin-left -translate-x-1/2 flex-col rounded-lg border shadow-lg focus-visible:outline-none"
|
||||
className="fixed left-1/2 z-50 my-[5vh] flex max-h-[90dvh] w-[98vw] max-w-[860px] origin-left -translate-x-1/2 flex-col rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in"
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="sr-only">Search AI</DialogTitle>
|
||||
@@ -67,11 +67,11 @@ export const AITrigger = (props: AITriggerProps) => {
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</DialogHeader>
|
||||
<div className="mt-4 flex-grow overflow-scroll">
|
||||
<div className="overflow-scroll flex-grow mt-4">
|
||||
<ChatList messages={messages} />
|
||||
</div>
|
||||
<form
|
||||
className="space-y-4 px-4 py-2"
|
||||
className="px-4 py-2 space-y-4"
|
||||
action={async () => {
|
||||
const value = inputValue.trim();
|
||||
setInputValue("");
|
||||
@@ -102,7 +102,7 @@ export const AITrigger = (props: AITriggerProps) => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex w-full flex-row items-center gap-2">
|
||||
<div className="flex flex-row w-full items-center gap-2">
|
||||
<Textarea
|
||||
tabIndex={0}
|
||||
placeholder="Ask AI about documentation."
|
||||
|
||||
@@ -1,21 +1,50 @@
|
||||
import { highlight } from "fumadocs-core/highlight";
|
||||
import * as Base from "fumadocs-ui/components/codeblock";
|
||||
import type { BundledLanguage } from "shiki";
|
||||
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: BundledLanguage;
|
||||
lang: "bash" | "ts" | "tsx";
|
||||
}
|
||||
|
||||
export async function CodeBlock({ code, lang, wrapper }: CodeBlockProps) {
|
||||
const rendered = await highlight(code, {
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -10,7 +10,7 @@ export function Contributing(): ReactElement {
|
||||
<h2 className="mb-4 text-xl font-semibold sm:text-2xl">
|
||||
Made possible by you <Heart className="inline align-middle" />
|
||||
</h2>
|
||||
<p className="text-fd-muted-foreground mb-4">
|
||||
<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">
|
||||
|
||||
@@ -33,7 +33,7 @@ export default async function ContributorCounter({
|
||||
href={`https://github.com/${contributor.login}`}
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
className="border-fd-background bg-fd-background size-10 overflow-hidden rounded-full border-4 md:-mr-4 md:size-12"
|
||||
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,
|
||||
}}
|
||||
@@ -48,7 +48,7 @@ export default async function ContributorCounter({
|
||||
</a>
|
||||
))}
|
||||
{displayCount < contributors.length ? (
|
||||
<div className="bg-fd-secondary size-12 content-center rounded-full text-center">
|
||||
<div className="size-12 content-center rounded-full bg-fd-secondary text-center">
|
||||
+{contributors.length - displayCount}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -83,7 +83,7 @@ export function CreateAppAnimation(): React.ReactElement {
|
||||
}}
|
||||
>
|
||||
{tick > timeWindowOpen && (
|
||||
<LaunchAppWindow className="animate-in fade-in slide-in-from-top-10 absolute bottom-5 right-4 z-10" />
|
||||
<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">
|
||||
@@ -92,7 +92,7 @@ export function CreateAppAnimation(): React.ReactElement {
|
||||
<div className="grow" />
|
||||
<div className="size-2 rounded-full bg-red-400" />
|
||||
</div>
|
||||
<div className="from-fd-secondary min-h-[200px] bg-gradient-to-b [mask-image:linear-gradient(to_bottom,white,transparent)]">
|
||||
<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>
|
||||
@@ -103,7 +103,7 @@ export function CreateAppAnimation(): React.ReactElement {
|
||||
function UserMessage({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="group relative flex items-start">
|
||||
<div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
|
||||
<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">
|
||||
@@ -122,7 +122,7 @@ function BotMessage({
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("group relative flex items-start", className)}>
|
||||
<div className="bg-primary text-primary-foreground flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
|
||||
<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">
|
||||
@@ -164,7 +164,7 @@ export function ChatExample() {
|
||||
|
||||
return (
|
||||
<div className="max-w-64">
|
||||
<div className="flex flex-col gap-2 px-4">
|
||||
<div className="flex flex-col px-4 gap-2">
|
||||
{userMessageLength === userMessageFull.length && (
|
||||
<UserMessage>
|
||||
<span>{userMessageFull}</span>
|
||||
@@ -204,11 +204,11 @@ function LaunchAppWindow(
|
||||
<div
|
||||
{...props}
|
||||
className={cn(
|
||||
"bg-fd-background overflow-hidden rounded-md border shadow-xl",
|
||||
"overflow-hidden rounded-md border bg-fd-background shadow-xl",
|
||||
props.className,
|
||||
)}
|
||||
>
|
||||
<div className="bg-fd-muted text-fd-muted-foreground relative flex h-6 flex-row items-center border-b px-4 text-xs">
|
||||
<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">
|
||||
|
||||
@@ -1,16 +1,11 @@
|
||||
"use client";
|
||||
import {
|
||||
ChatHandler,
|
||||
ChatInput,
|
||||
ChatMessages,
|
||||
ChatSection,
|
||||
} from "@llamaindex/chat-ui";
|
||||
import { ChatInput, ChatMessages, ChatSection } from "@llamaindex/chat-ui";
|
||||
import { useChat } from "ai/react";
|
||||
|
||||
export const ChatDemo = () => {
|
||||
const handler = useChat();
|
||||
return (
|
||||
<ChatSection handler={handler as ChatHandler}>
|
||||
<ChatSection handler={handler}>
|
||||
<ChatMessages>
|
||||
<ChatMessages.List className="h-auto max-h-[400px]" />
|
||||
<ChatMessages.Actions />
|
||||
|
||||
@@ -1,25 +1,23 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ChatHandler,
|
||||
ChatInput,
|
||||
ChatMessage,
|
||||
ChatMessages,
|
||||
ChatSection as ChatSectionUI,
|
||||
Message,
|
||||
} from "@llamaindex/chat-ui";
|
||||
import { useChatRSC } from "./use-chat-rsc";
|
||||
|
||||
export const ChatSectionRSC = () => {
|
||||
const handler = useChatRSC();
|
||||
return (
|
||||
<ChatSectionUI handler={handler as ChatHandler}>
|
||||
<ChatSectionUI handler={handler}>
|
||||
<ChatMessages>
|
||||
<ChatMessages.List className="h-auto max-h-[400px]">
|
||||
{handler.messages.map((message, index) => (
|
||||
<ChatMessage
|
||||
key={index}
|
||||
message={message as Message}
|
||||
message={message}
|
||||
isLast={index === handler.messages.length - 1}
|
||||
>
|
||||
<ChatMessage.Avatar />
|
||||
|
||||
@@ -57,7 +57,7 @@ export const IDE = () => {
|
||||
const maxChars = useSlider();
|
||||
const useSetMaxChars = useSetSlider();
|
||||
return (
|
||||
<div className="flex max-h-96 flex-col overflow-scroll border-r p-4">
|
||||
<div className="flex flex-col p-4 border-r max-h-96 overflow-scroll">
|
||||
<div>
|
||||
<Label>Max Chars {maxChars}</Label>
|
||||
<Slider
|
||||
@@ -113,7 +113,7 @@ const Preview = ({ text }: { text: string }) => {
|
||||
},
|
||||
},
|
||||
});
|
||||
return <CodeBlock className="m-2 py-0">{rendered}</CodeBlock>;
|
||||
return <CodeBlock className="py-0 m-2">{rendered}</CodeBlock>;
|
||||
};
|
||||
|
||||
function ScrollToBottom() {
|
||||
@@ -122,7 +122,7 @@ function ScrollToBottom() {
|
||||
return (
|
||||
!isAtBottom && (
|
||||
<button
|
||||
className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
|
||||
className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
|
||||
onClick={() => scrollToBottom()}
|
||||
/>
|
||||
)
|
||||
@@ -136,7 +136,7 @@ export const NodePreview = () => {
|
||||
const textChunks = useMemo(() => parser.splitText(code), [code, maxChars]);
|
||||
return (
|
||||
<StickToBottom
|
||||
className="relative block max-h-96 overflow-scroll"
|
||||
className="block relative max-h-96 overflow-scroll"
|
||||
resize="smooth"
|
||||
initial="smooth"
|
||||
>
|
||||
@@ -154,7 +154,7 @@ export const CodeNodeParserDemo = () => {
|
||||
const isClient = useIsClient();
|
||||
if (!isClient) {
|
||||
return (
|
||||
<div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
|
||||
<div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
|
||||
<Skeleton className="h-96" />
|
||||
<Skeleton className="h-96" />
|
||||
</div>
|
||||
@@ -165,13 +165,13 @@ export const CodeNodeParserDemo = () => {
|
||||
<CodeProvider>
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
|
||||
<div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
|
||||
<Skeleton className="h-96" />
|
||||
<Skeleton className="h-96" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
|
||||
<div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
|
||||
<IDE />
|
||||
<NodePreview />
|
||||
</div>
|
||||
|
||||
@@ -75,7 +75,7 @@ function ScrollToBottom() {
|
||||
return (
|
||||
!isAtBottom && (
|
||||
<button
|
||||
className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
|
||||
className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
|
||||
onClick={() => scrollToBottom()}
|
||||
/>
|
||||
)
|
||||
@@ -91,9 +91,9 @@ export function WorkflowStreamingDemo() {
|
||||
const [total, setTotal] = useState<number>(10);
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col items-start gap-2">
|
||||
<div className="flex flex-row items-center justify-center">
|
||||
<div className="mr-2 text-lg">Compute total</div>{" "}
|
||||
<div className="flex flex-col items-start w-full gap-2">
|
||||
<div className="flex flex-row justify-center items-center">
|
||||
<div className="text-lg mr-2">Compute total</div>{" "}
|
||||
<FlowInput value={total} onChange={(value) => setTotal(value)} />
|
||||
</div>
|
||||
<Button
|
||||
@@ -141,7 +141,7 @@ export function WorkflowStreamingDemo() {
|
||||
>
|
||||
Start Workflow
|
||||
</Button>
|
||||
<StickToBottom className="flex max-h-96 w-full flex-col gap-2 overflow-y-auto rounded-lg border border-gray-200 p-2">
|
||||
<StickToBottom className="w-full flex flex-col gap-2 p-2 border border-gray-200 rounded-lg max-h-96 overflow-y-auto">
|
||||
<StickToBottom.Content className="flex flex-col gap-2">
|
||||
{ui}
|
||||
</StickToBottom.Content>
|
||||
|
||||
@@ -20,7 +20,7 @@ export function Feature({
|
||||
className={cn("border-l border-t px-6 py-12 md:py-16", className)}
|
||||
{...props}
|
||||
>
|
||||
<div className="text-fd-muted-foreground mb-4 inline-flex items-center gap-2 text-sm font-medium">
|
||||
<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>
|
||||
|
||||
@@ -60,7 +60,7 @@ export default function FlowInput({
|
||||
className={clsx(
|
||||
showCaret ? "caret-primary" : "caret-transparent",
|
||||
"spin-hide w-[1.5em] bg-transparent py-2 text-center font-[inherit] text-transparent outline-none",
|
||||
"[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
|
||||
"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
|
||||
)}
|
||||
// Make sure to disable kerning, to match NumberFlow:
|
||||
style={{ fontKerning: "none" }}
|
||||
|
||||
@@ -8,7 +8,7 @@ import { IconAI, IconUser } from "./ui/icons";
|
||||
export function UserMessage({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="group relative flex items-start">
|
||||
<div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
|
||||
<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">
|
||||
@@ -54,7 +54,7 @@ export function BotCard({
|
||||
<div className="group relative flex items-start md:-ml-12">
|
||||
<div
|
||||
className={cn(
|
||||
"bg-primary text-primary-foreground flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm",
|
||||
"flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground",
|
||||
!showAvatar && "invisible",
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -25,7 +25,7 @@ export const NpmInstall = () => {
|
||||
className="flex flex-row items-center justify-center"
|
||||
>
|
||||
<code className="mr-2">$ npm i llamaindex</code>
|
||||
<div className="relative h-4 w-4 cursor-pointer bg-transparent">
|
||||
<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"
|
||||
|
||||
@@ -1,268 +0,0 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
AnimatePresence,
|
||||
motion,
|
||||
Transition,
|
||||
type AnimationControls,
|
||||
type Target,
|
||||
type TargetAndTransition,
|
||||
type VariantLabels,
|
||||
} from "framer-motion";
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
export interface RotatingTextRef {
|
||||
next: () => void;
|
||||
previous: () => void;
|
||||
jumpTo: (index: number) => void;
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
export interface RotatingTextProps
|
||||
extends Omit<
|
||||
React.ComponentPropsWithoutRef<typeof motion.span>,
|
||||
"children" | "transition" | "initial" | "animate" | "exit"
|
||||
> {
|
||||
texts: string[];
|
||||
transition?: Transition;
|
||||
initial?: boolean | Target | VariantLabels;
|
||||
animate?: boolean | VariantLabels | AnimationControls | TargetAndTransition;
|
||||
exit?: Target | VariantLabels;
|
||||
animatePresenceMode?: "sync" | "wait";
|
||||
animatePresenceInitial?: boolean;
|
||||
rotationInterval?: number;
|
||||
staggerDuration?: number;
|
||||
staggerFrom?: "first" | "last" | "center" | "random" | number;
|
||||
loop?: boolean;
|
||||
auto?: boolean;
|
||||
splitBy?: string;
|
||||
onNext?: (index: number) => void;
|
||||
mainClassName?: string;
|
||||
splitLevelClassName?: string;
|
||||
elementLevelClassName?: string;
|
||||
}
|
||||
|
||||
export const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
|
||||
(
|
||||
{
|
||||
texts,
|
||||
transition = { type: "spring", damping: 25, stiffness: 300 },
|
||||
initial = { y: "100%", opacity: 0 },
|
||||
animate = { y: 0, opacity: 1 },
|
||||
exit = { y: "-120%", opacity: 0 },
|
||||
animatePresenceMode = "wait",
|
||||
animatePresenceInitial = false,
|
||||
rotationInterval = 2000,
|
||||
staggerDuration = 0,
|
||||
staggerFrom = "first",
|
||||
loop = true,
|
||||
auto = true,
|
||||
splitBy = "characters",
|
||||
onNext,
|
||||
mainClassName,
|
||||
splitLevelClassName,
|
||||
elementLevelClassName,
|
||||
...rest
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const [currentTextIndex, setCurrentTextIndex] = useState<number>(0);
|
||||
|
||||
const splitIntoCharacters = (text: string): string[] => {
|
||||
if (typeof Intl !== "undefined" && Intl.Segmenter) {
|
||||
const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
|
||||
return Array.from(
|
||||
segmenter.segment(text),
|
||||
(segment) => segment.segment,
|
||||
);
|
||||
}
|
||||
return Array.from(text);
|
||||
};
|
||||
|
||||
const elements = useMemo(() => {
|
||||
const currentText: string = texts[currentTextIndex];
|
||||
if (splitBy === "characters") {
|
||||
const words = currentText.split(" ");
|
||||
return words.map((word, i) => ({
|
||||
characters: splitIntoCharacters(word),
|
||||
needsSpace: i !== words.length - 1,
|
||||
}));
|
||||
}
|
||||
if (splitBy === "words") {
|
||||
return currentText.split(" ").map((word, i, arr) => ({
|
||||
characters: [word],
|
||||
needsSpace: i !== arr.length - 1,
|
||||
}));
|
||||
}
|
||||
if (splitBy === "lines") {
|
||||
return currentText.split("\n").map((line, i, arr) => ({
|
||||
characters: [line],
|
||||
needsSpace: i !== arr.length - 1,
|
||||
}));
|
||||
}
|
||||
|
||||
return currentText.split(splitBy).map((part, i, arr) => ({
|
||||
characters: [part],
|
||||
needsSpace: i !== arr.length - 1,
|
||||
}));
|
||||
}, [texts, currentTextIndex, splitBy]);
|
||||
|
||||
const getStaggerDelay = useCallback(
|
||||
(index: number, totalChars: number): number => {
|
||||
const total = totalChars;
|
||||
if (staggerFrom === "first") return index * staggerDuration;
|
||||
if (staggerFrom === "last")
|
||||
return (total - 1 - index) * staggerDuration;
|
||||
if (staggerFrom === "center") {
|
||||
const center = Math.floor(total / 2);
|
||||
return Math.abs(center - index) * staggerDuration;
|
||||
}
|
||||
if (staggerFrom === "random") {
|
||||
const randomIndex = Math.floor(Math.random() * total);
|
||||
return Math.abs(randomIndex - index) * staggerDuration;
|
||||
}
|
||||
return Math.abs((staggerFrom as number) - index) * staggerDuration;
|
||||
},
|
||||
[staggerFrom, staggerDuration],
|
||||
);
|
||||
|
||||
const handleIndexChange = useCallback(
|
||||
(newIndex: number) => {
|
||||
setCurrentTextIndex(newIndex);
|
||||
if (onNext) onNext(newIndex);
|
||||
},
|
||||
[onNext],
|
||||
);
|
||||
|
||||
const next = useCallback(() => {
|
||||
const nextIndex =
|
||||
currentTextIndex === texts.length - 1
|
||||
? loop
|
||||
? 0
|
||||
: currentTextIndex
|
||||
: currentTextIndex + 1;
|
||||
if (nextIndex !== currentTextIndex) {
|
||||
handleIndexChange(nextIndex);
|
||||
}
|
||||
}, [currentTextIndex, texts.length, loop, handleIndexChange]);
|
||||
|
||||
const previous = useCallback(() => {
|
||||
const prevIndex =
|
||||
currentTextIndex === 0
|
||||
? loop
|
||||
? texts.length - 1
|
||||
: currentTextIndex
|
||||
: currentTextIndex - 1;
|
||||
if (prevIndex !== currentTextIndex) {
|
||||
handleIndexChange(prevIndex);
|
||||
}
|
||||
}, [currentTextIndex, texts.length, loop, handleIndexChange]);
|
||||
|
||||
const jumpTo = useCallback(
|
||||
(index: number) => {
|
||||
const validIndex = Math.max(0, Math.min(index, texts.length - 1));
|
||||
if (validIndex !== currentTextIndex) {
|
||||
handleIndexChange(validIndex);
|
||||
}
|
||||
},
|
||||
[texts.length, currentTextIndex, handleIndexChange],
|
||||
);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
if (currentTextIndex !== 0) {
|
||||
handleIndexChange(0);
|
||||
}
|
||||
}, [currentTextIndex, handleIndexChange]);
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
next,
|
||||
previous,
|
||||
jumpTo,
|
||||
reset,
|
||||
}),
|
||||
[next, previous, jumpTo, reset],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!auto) return;
|
||||
const intervalId = setInterval(next, rotationInterval);
|
||||
return () => clearInterval(intervalId);
|
||||
}, [next, rotationInterval, auto]);
|
||||
|
||||
return (
|
||||
<motion.span
|
||||
className={cn(
|
||||
"relative flex flex-wrap whitespace-pre-wrap",
|
||||
mainClassName,
|
||||
)}
|
||||
{...rest}
|
||||
layout
|
||||
transition={transition}
|
||||
>
|
||||
<span className="sr-only">{texts[currentTextIndex]}</span>
|
||||
<AnimatePresence
|
||||
mode={animatePresenceMode}
|
||||
initial={animatePresenceInitial}
|
||||
>
|
||||
<motion.div
|
||||
key={currentTextIndex}
|
||||
className={cn(
|
||||
splitBy === "lines"
|
||||
? "flex w-full flex-col"
|
||||
: "relative flex flex-wrap whitespace-pre-wrap",
|
||||
)}
|
||||
layout
|
||||
aria-hidden="true"
|
||||
>
|
||||
{elements.map((wordObj, wordIndex, array) => {
|
||||
const previousCharsCount = array
|
||||
.slice(0, wordIndex)
|
||||
.reduce((sum, word) => sum + word.characters.length, 0);
|
||||
return (
|
||||
<span
|
||||
key={wordIndex}
|
||||
className={cn("inline-flex", splitLevelClassName)}
|
||||
>
|
||||
{wordObj.characters.map((char, charIndex) => (
|
||||
<motion.span
|
||||
key={charIndex}
|
||||
initial={initial}
|
||||
animate={animate}
|
||||
exit={exit}
|
||||
transition={{
|
||||
...transition,
|
||||
delay: getStaggerDelay(
|
||||
previousCharsCount + charIndex,
|
||||
array.reduce(
|
||||
(sum, word) => sum + word.characters.length,
|
||||
0,
|
||||
),
|
||||
),
|
||||
}}
|
||||
className={cn("inline-block", elementLevelClassName)}
|
||||
>
|
||||
{char}
|
||||
</motion.span>
|
||||
))}
|
||||
{wordObj.needsSpace && (
|
||||
<span className="whitespace-pre"> </span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</motion.span>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
RotatingText.displayName = "RotatingText";
|
||||
@@ -1,27 +0,0 @@
|
||||
"use client";
|
||||
import { RotatingText } from "@/components/reactbits/rotating-text";
|
||||
|
||||
const supports = [
|
||||
"Next.js",
|
||||
"Node.js",
|
||||
"Hono",
|
||||
"Express.js",
|
||||
"Deno",
|
||||
"Nest.js",
|
||||
"Waku",
|
||||
];
|
||||
|
||||
export const Supports = () => {
|
||||
return (
|
||||
<RotatingText
|
||||
texts={supports}
|
||||
mainClassName="inline-flex bg-transparent overflow-hidden justify-center"
|
||||
initial={{ y: "100%" }}
|
||||
animate={{ y: 0 }}
|
||||
exit={{ y: "-120%" }}
|
||||
staggerDuration={0.025}
|
||||
transition={{ type: "spring", damping: 30, stiffness: 400 }}
|
||||
rotationInterval={2000}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -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>;
|
||||
};
|
||||
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<Cross2Icon className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
|
||||
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"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}
|
||||
|
||||
@@ -6,7 +6,7 @@ function Skeleton({
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn("bg-primary/10 animate-pulse rounded-md", className)}
|
||||
className={cn("animate-pulse rounded-md bg-primary/10", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -17,10 +17,10 @@ const Slider = React.forwardRef<
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
|
||||
<SliderPrimitive.Range className="bg-primary absolute h-full" />
|
||||
<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
|
||||
<SliderPrimitive.Range className="absolute h-full bg-primary" />
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50" />
|
||||
<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
|
||||
</SliderPrimitive.Root>
|
||||
));
|
||||
Slider.displayName = SliderPrimitive.Root.displayName;
|
||||
|
||||
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
|
||||
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
"title": "LlamaCloud",
|
||||
"description": "The Cloud framework for LLM",
|
||||
"root": true,
|
||||
"pages": ["---Guide---", "index", "..."]
|
||||
"pages": ["---Guide---", "index", "api"]
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Agents
|
||||
---
|
||||
|
||||
A built-in agent that can take decisions and reasoning based on the tools provided to it.
|
||||
|
||||
## OpenAI Agent
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!../../../../../../../examples/agent/openai";
|
||||
|
||||
<DynamicCodeBlock lang="ts" code={CodeSource} />
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Gemini Agent
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSourceGemini from "!raw-loader!../../../../../../../examples/gemini/agent.ts";
|
||||
|
||||
<DynamicCodeBlock lang="ts" code={CodeSourceGemini} />
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Chat Engine
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!../../../../../../../examples/chatEngine";
|
||||
|
||||
Chat Engine is a class that allows you to create a chatbot from a retriever. It is a wrapper around a retriever that allows you to chat with it in a conversational manner.
|
||||
|
||||
<DynamicCodeBlock lang="ts" code={CodeSource} />
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: Context-Aware Agent
|
||||
---
|
||||
|
||||
The Context-Aware Agent enhances the capabilities of standard LLM agents by incorporating relevant context from a retriever for each query. This allows the agent to provide more informed and specific responses based on the available information.
|
||||
|
||||
## Usage
|
||||
|
||||
Here's a simple example of how to use the Context-Aware Agent:
|
||||
|
||||
```typescript
|
||||
import {
|
||||
Document,
|
||||
VectorStoreIndex,
|
||||
OpenAIContextAwareAgent,
|
||||
OpenAI,
|
||||
} from "llamaindex";
|
||||
|
||||
async function createContextAwareAgent() {
|
||||
// Create and index some documents
|
||||
const documents = [
|
||||
new Document({
|
||||
text: "LlamaIndex is a data framework for LLM applications.",
|
||||
id_: "doc1",
|
||||
}),
|
||||
new Document({
|
||||
text: "The Eiffel Tower is located in Paris, France.",
|
||||
id_: "doc2",
|
||||
}),
|
||||
];
|
||||
|
||||
const index = await VectorStoreIndex.fromDocuments(documents);
|
||||
const retriever = index.asRetriever({ similarityTopK: 1 });
|
||||
|
||||
// Create the Context-Aware Agent
|
||||
const agent = new OpenAIContextAwareAgent({
|
||||
llm: new OpenAI({ model: "gpt-3.5-turbo" }),
|
||||
contextRetriever: retriever,
|
||||
});
|
||||
|
||||
// Use the agent to answer queries
|
||||
const response = await agent.chat({
|
||||
message: "What is LlamaIndex used for?",
|
||||
});
|
||||
|
||||
console.log("Agent Response:", response.response);
|
||||
}
|
||||
|
||||
createContextAwareAgent().catch(console.error);
|
||||
```
|
||||
|
||||
In this example, the Context-Aware Agent uses the retriever to fetch relevant context for each query, allowing it to provide more accurate and informed responses based on the indexed documents.
|
||||
|
||||
## Key Components
|
||||
|
||||
- `contextRetriever`: A retriever (e.g., from a VectorStoreIndex) that fetches relevant documents or passages for each query.
|
||||
|
||||
## Available Context-Aware Agents
|
||||
|
||||
- `OpenAIContextAwareAgent`: A context-aware agent using OpenAI's models.
|
||||
- `AnthropicContextAwareAgent`: A context-aware agent using Anthropic's models.
|
||||
+4
-43
@@ -2,9 +2,7 @@
|
||||
title: Local LLMs
|
||||
---
|
||||
|
||||
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
|
||||
LlamaIndex.TS supports OpenAI and [other remote LLM APIs](/docs/llamaindex/modules/models/llms). You can also run a local LLM on your machine!
|
||||
LlamaIndex.TS supports OpenAI and [other remote LLM APIs](other_llms). You can also run a local LLM on your machine!
|
||||
|
||||
## Using a local model via Ollama
|
||||
|
||||
@@ -26,54 +24,17 @@ The first time you run it will also automatically download and install the model
|
||||
|
||||
### Switch the LLM in your code
|
||||
|
||||
To switch the LLM in your code, you first need to make sure to install the package for the Ollama model provider:
|
||||
|
||||
<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
|
||||
```shell tab="npm"
|
||||
npm install @llamaindex/ollama
|
||||
```
|
||||
|
||||
```shell tab="yarn"
|
||||
yarn add @llamaindex/ollama
|
||||
```
|
||||
|
||||
```shell tab="pnpm"
|
||||
pnpm add @llamaindex/ollama
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
Then, to tell LlamaIndex to use a local LLM, use the `Settings` object:
|
||||
To tell LlamaIndex to use a local LLM, use the `Settings` object:
|
||||
|
||||
```javascript
|
||||
import { Settings } from "llamaindex";
|
||||
import { ollama } from "@llamaindex/ollama";
|
||||
|
||||
Settings.llm = ollama({
|
||||
Settings.llm = new Ollama({
|
||||
model: "mixtral:8x7b",
|
||||
});
|
||||
```
|
||||
|
||||
### Use local embeddings
|
||||
|
||||
If you're doing retrieval-augmented generation, LlamaIndex.TS will also call out to OpenAI to index and embed your data. To be entirely local, you can use a local embedding model from Huggingface like this:
|
||||
|
||||
First install the Huggingface model provider package:
|
||||
|
||||
<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
|
||||
```shell tab="npm"
|
||||
npm install @llamaindex/huggingface
|
||||
```
|
||||
|
||||
```shell tab="yarn"
|
||||
yarn add @llamaindex/huggingface
|
||||
```
|
||||
|
||||
```shell tab="pnpm"
|
||||
pnpm add @llamaindex/huggingface
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
And then set the embedding model in your code:
|
||||
If you're doing retrieval-augmented generation, LlamaIndex.TS will also call out to OpenAI to index and embed your data. To be entirely local, you can use a local embedding model like this:
|
||||
|
||||
```javascript
|
||||
Settings.embedModel = new HuggingFaceEmbedding({
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"title": "Examples",
|
||||
"pages": [
|
||||
"more_examples",
|
||||
"chat_engine",
|
||||
"vector_index",
|
||||
"summary_index",
|
||||
"save_load_index",
|
||||
"context_aware_agent",
|
||||
"agent",
|
||||
"agent_gemini",
|
||||
"local_llm",
|
||||
"other_llms"
|
||||
]
|
||||
}
|
||||
+2
-13
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Code examples
|
||||
title: See all examples
|
||||
---
|
||||
|
||||
Our GitHub repository has a wealth of examples to explore and try out. You can check out our [examples folder](https://github.com/run-llama/LlamaIndexTS/tree/main/examples) to see them all at once, or browse the pages in this section for some selected highlights.
|
||||
|
||||
## Use examples locally
|
||||
## Check out all examples
|
||||
|
||||
It may be useful to check out all the examples at once so you can try them out locally. To do this into a folder called `my-new-project`, run these commands:
|
||||
|
||||
@@ -19,14 +19,3 @@ Then you can run any example in the folder with `tsx`, e.g.:
|
||||
```bash npm2yarn
|
||||
npx tsx ./vectorIndex.ts
|
||||
```
|
||||
|
||||
## Try examples online
|
||||
|
||||
You can also try the examples online using StackBlitz:
|
||||
|
||||
<iframe
|
||||
className="w-full h-[440px]"
|
||||
aria-label="LlamaIndex.TS Examples"
|
||||
aria-description="This is a list of examples for LlamaIndex.TS."
|
||||
src="https://stackblitz.com/github/run-llama/LlamaIndexTS/tree/main/examples?file=README.md"
|
||||
/>
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Using other LLM APIs
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!../../../../../../../examples/mistral";
|
||||
|
||||
By default LlamaIndex.TS uses OpenAI's LLMs and embedding models, but we support [lots of other LLMs](../modules/llms) including models from Mistral (Mistral, Mixtral), Anthropic (Claude) and Google (Gemini).
|
||||
|
||||
If you don't want to use an API at all you can [run a local model](../../examples/local_llm)
|
||||
|
||||
## Using another LLM
|
||||
|
||||
You can specify what LLM LlamaIndex.TS will use on the `Settings` object, like this:
|
||||
|
||||
```typescript
|
||||
import { MistralAI, Settings } from "llamaindex";
|
||||
|
||||
Settings.llm = new MistralAI({
|
||||
model: "mistral-tiny",
|
||||
apiKey: "<YOUR_API_KEY>",
|
||||
});
|
||||
```
|
||||
|
||||
You can see examples of other APIs we support by checking out "Available LLMs" in the sidebar of our [LLMs section](../modules/llms).
|
||||
|
||||
## Using another embedding model
|
||||
|
||||
A frequent gotcha when trying to use a different API as your LLM is that LlamaIndex will also by default index and embed your data using OpenAI's embeddings. To completely switch away from OpenAI you will need to set your embedding model as well, for example:
|
||||
|
||||
```typescript
|
||||
import { MistralAIEmbedding, Settings } from "llamaindex";
|
||||
|
||||
Settings.embedModel = new MistralAIEmbedding();
|
||||
```
|
||||
|
||||
We support [many different embeddings](../modules/embeddings).
|
||||
|
||||
## Full example
|
||||
|
||||
This example uses Mistral's `mistral-tiny` model as the LLM and Mistral for embeddings as well.
|
||||
|
||||
<DynamicCodeBlock lang="ts" code={CodeSource} />
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Save/Load an Index
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!../../../../../../../examples/storageContext";
|
||||
|
||||
<DynamicCodeBlock lang="ts" code={CodeSource} />
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Summary Index
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!../../../../../../../examples/summaryIndex";
|
||||
|
||||
<DynamicCodeBlock lang="ts" code={CodeSource} />
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Vector Index
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!../../../../../../../examples/vectorIndex";
|
||||
|
||||
<DynamicCodeBlock lang="ts" code={CodeSource} />
|
||||
+10
-10
@@ -16,7 +16,7 @@ LlamaIndex uses a two stage method when using an LLM with your data:
|
||||
1. **indexing stage**: preparing a knowledge base, and
|
||||
2. **querying stage**: retrieving relevant context from the knowledge to assist the LLM in responding to a question
|
||||
|
||||
|
||||
|
||||
|
||||
This process is also known as Retrieval Augmented Generation (RAG).
|
||||
|
||||
@@ -28,14 +28,14 @@ Let's explore each stage in detail.
|
||||
|
||||
LlamaIndex.TS help you prepare the knowledge base with a suite of data connectors and indexes.
|
||||
|
||||
|
||||
|
||||
|
||||
[**Data Loaders**](/docs/llamaindex/modules/data/readers):
|
||||
[**Data Loaders**](/docs/llamaindex/modules/data_loaders/index):
|
||||
A data connector (i.e. `Reader`) ingest data from different data sources and data formats into a simple `Document` representation (text and simple metadata).
|
||||
|
||||
[**Documents / Nodes**](/docs/llamaindex/modules/data): A `Document` is a generic container around any data source - for instance, a PDF, an API output, or retrieved data from a database. A `Node` is the atomic unit of data in LlamaIndex and represents a "chunk" of a source `Document`. It's a rich representation that includes metadata and relationships (to other nodes) to enable accurate and expressive retrieval operations.
|
||||
[**Documents / Nodes**](/docs/llamaindex/modules/documents_and_nodes/index): A `Document` is a generic container around any data source - for instance, a PDF, an API output, or retrieved data from a database. A `Node` is the atomic unit of data in LlamaIndex and represents a "chunk" of a source `Document`. It's a rich representation that includes metadata and relationships (to other nodes) to enable accurate and expressive retrieval operations.
|
||||
|
||||
[**Data Indexes**](/docs/llamaindex/modules/data/data_index):
|
||||
[**Data Indexes**](/docs/llamaindex/modules/data_index):
|
||||
Once you've ingested your data, LlamaIndex helps you index data into a format that's easy to retrieve.
|
||||
|
||||
Under the hood, LlamaIndex parses the raw documents into intermediate representations, calculates vector embeddings, and stores your data in-memory or to disk.
|
||||
@@ -54,23 +54,23 @@ LlamaIndex provides composable modules that help you build and integrate RAG pip
|
||||
|
||||
These building blocks can be customized to reflect ranking preferences, as well as composed to reason over multiple knowledge bases in a structured way.
|
||||
|
||||
|
||||
|
||||
|
||||
#### Building Blocks
|
||||
|
||||
[**Retrievers**](/docs/llamaindex/modules/rag/retriever):
|
||||
[**Retrievers**](/docs/llamaindex/modules/retriever):
|
||||
A retriever defines how to efficiently retrieve relevant context from a knowledge base (i.e. index) when given a query.
|
||||
The specific retrieval logic differs for different indices, the most popular being dense retrieval against a vector index.
|
||||
|
||||
[**Response Synthesizers**](/docs/llamaindex/modules/rag/response_synthesizer):
|
||||
[**Response Synthesizers**](/docs/llamaindex/modules/response_synthesizer):
|
||||
A response synthesizer generates a response from an LLM, using a user query and a given set of retrieved text chunks.
|
||||
|
||||
#### Pipelines
|
||||
|
||||
[**Query Engines**](/docs/llamaindex/modules/rag/query_engines):
|
||||
[**Query Engines**](/docs/llamaindex/modules/query_engines):
|
||||
A query engine is an end-to-end pipeline that allow you to ask question over your data.
|
||||
It takes in a natural language query, and returns a response, along with reference context retrieved and passed to the LLM.
|
||||
|
||||
[**Chat Engines**](/docs/llamaindex/modules/rag/chat_engine):
|
||||
[**Chat Engines**](/docs/llamaindex/modules/chat_engine):
|
||||
A chat engine is an end-to-end pipeline for having a conversation with your data
|
||||
(multiple back-and-forth instead of a single question & answer).
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
title: Installation
|
||||
description: Install llamaindex by running a single command.
|
||||
---
|
||||
|
||||
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
|
||||
<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
|
||||
```shell tab="npm"
|
||||
npm install llamaindex
|
||||
```
|
||||
|
||||
```shell tab="yarn"
|
||||
yarn add llamaindex
|
||||
```
|
||||
|
||||
```shell tab="pnpm"
|
||||
pnpm add llamaindex
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
## What's next?
|
||||
|
||||
<Cards>
|
||||
<Card
|
||||
title="I want to try LlamaIndex.TS"
|
||||
description="Learn how to use LlamaIndex.TS with different JS runtime and frameworks."
|
||||
href="/docs/llamaindex/getting_started/setup"
|
||||
/>
|
||||
<Card
|
||||
title="Show me code examples"
|
||||
description="Explore code examples using LlamaIndex.TS."
|
||||
href="https://stackblitz.com/github/run-llama/LlamaIndexTS/tree/main/examples?file=README.md"
|
||||
/>
|
||||
</Cards>
|
||||
@@ -1,98 +0,0 @@
|
||||
---
|
||||
title: Installation
|
||||
description: How to install llamaindex packages.
|
||||
---
|
||||
|
||||
import {
|
||||
SiNodedotjs,
|
||||
SiTypescript,
|
||||
SiNextdotjs,
|
||||
SiCloudflareworkers,
|
||||
SiVite
|
||||
} from "@icons-pack/react-simple-icons";
|
||||
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
|
||||
To install llamaindex, run the following command:
|
||||
|
||||
<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
|
||||
```shell tab="npm"
|
||||
npm install llamaindex
|
||||
```
|
||||
|
||||
```shell tab="yarn"
|
||||
yarn add llamaindex
|
||||
```
|
||||
|
||||
```shell tab="pnpm"
|
||||
pnpm add llamaindex
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
In most cases, you'll also need an LLM package to use LlamaIndex. For example, to use the OpenAI LLM, you would install the following:
|
||||
|
||||
<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
|
||||
```shell tab="npm"
|
||||
npm install @llamaindex/openai
|
||||
```
|
||||
|
||||
```shell tab="yarn"
|
||||
yarn add @llamaindex/openai
|
||||
```
|
||||
|
||||
```shell tab="pnpm"
|
||||
pnpm add @llamaindex/openai
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
Go to [LLM APIs](/docs/llamaindex/modules/models/llms) to find out how to use other LLMs.
|
||||
|
||||
|
||||
## Frameworks
|
||||
|
||||
LlamaIndex supports a wide range of frameworks and runtimes. Click on the card below to learn more.
|
||||
|
||||
<Cards>
|
||||
<Card title={
|
||||
<>
|
||||
<SiNodedotjs className="inline" color="#5FA04E" /> Node.js
|
||||
</>
|
||||
} href="/docs/llamaindex/getting_started/installation/node" />
|
||||
<Card title={
|
||||
<>
|
||||
<SiTypescript className="inline" color="#3178C6" /> TypeScript
|
||||
</>
|
||||
} href="/docs/llamaindex/getting_started/installation/typescript" />
|
||||
<Card title={
|
||||
<>
|
||||
<SiVite className='inline' color='#646CFF' /> Vite
|
||||
</>
|
||||
} href="/docs/llamaindex/getting_started/installation/vite" />
|
||||
<Card
|
||||
title={
|
||||
<>
|
||||
<SiNextdotjs className='inline' /> Next.js (React Server Component)
|
||||
</>
|
||||
}
|
||||
href="/docs/llamaindex/getting_started/installation/next"
|
||||
/>
|
||||
<Card title={
|
||||
<>
|
||||
<SiCloudflareworkers className='inline' color='#F38020' /> Cloudflare Workers
|
||||
</>
|
||||
} href="/docs/llamaindex/getting_started/installation/cloudflare" />
|
||||
</Cards>
|
||||
|
||||
## What's next?
|
||||
|
||||
<Cards>
|
||||
<Card
|
||||
title="Learn LlamaIndex.TS"
|
||||
description="Learn how to use LlamaIndex.TS by starting with one of our tutorials."
|
||||
href="/docs/llamaindex/tutorials/rag"
|
||||
/>
|
||||
<Card
|
||||
title="Show me code examples"
|
||||
description="Explore code examples using LlamaIndex.TS."
|
||||
href="/docs/llamaindex/getting_started/examples"
|
||||
/>
|
||||
</Cards>
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"title": "Installation",
|
||||
"pages": ["node", "typescript", "next", "vite", "cloudflare"]
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
---
|
||||
title: With TypeScript
|
||||
description: In this guide, you'll learn how to use LlamaIndex with TypeScript
|
||||
---
|
||||
|
||||
LlamaIndex.TS is written in TypeScript and designed to be used in TypeScript projects.
|
||||
|
||||
We put a lot of work on strong typing to make sure you have a great typing experience with code completion such as:
|
||||
|
||||
```ts twoslash
|
||||
import { PromptTemplate } from 'llamaindex'
|
||||
const promptTemplate = new PromptTemplate({
|
||||
template: `Context information from multiple sources is below.
|
||||
---------------------
|
||||
{context}
|
||||
---------------------
|
||||
Given the information from multiple sources and not prior knowledge.
|
||||
Answer the query in the style of a Shakespeare play"
|
||||
Query: {query}
|
||||
Answer:`,
|
||||
templateVars: ["context", "query"],
|
||||
});
|
||||
// @noErrors
|
||||
promptTemplate.format({
|
||||
c
|
||||
//^|
|
||||
})
|
||||
```
|
||||
|
||||
## Enable TypeScript
|
||||
|
||||
Make sure to set [moduleResolution](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution) in your `tsconfig.json` file:
|
||||
|
||||
```json5
|
||||
{
|
||||
compilerOptions: {
|
||||
// ⬇️ add this line to your tsconfig.json
|
||||
moduleResolution: "bundler", // or "nodenext" | "node16" | "node"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
We recommend using `bundler` or `nodenext`, but due to popularity of `node`, we still added support for it, but with import path limitations.
|
||||
|
||||
So you may encounter type errors when importing sub paths from the `llamaindex` package like:
|
||||
|
||||
```ts
|
||||
import { Settings } from "llamaindex/Settings";
|
||||
```
|
||||
|
||||
The simplest way to fix this without changing `moduleResolution` is to import directly from `llamaindex`:
|
||||
|
||||
```ts
|
||||
import { Settings } from "llamaindex";
|
||||
```
|
||||
|
||||
## Enable AsyncIterable for `Web Stream` API
|
||||
|
||||
Some modules uses `Web Stream` API like `ReadableStream` and `WritableStream`, you need to enable `DOM.AsyncIterable` in your `tsconfig.json`.
|
||||
|
||||
```json5
|
||||
{
|
||||
compilerOptions: {
|
||||
// ⬇️ add this lib to your tsconfig.json
|
||||
lib: ["DOM.AsyncIterable"],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
```typescript
|
||||
import { agent, tool } from 'llamaindex'
|
||||
import { openai } from "@llamaindex/openai";
|
||||
|
||||
Settings.llm = openai({
|
||||
model: "gpt-4o-mini",
|
||||
});
|
||||
|
||||
const addTool = tool({
|
||||
name: "add",
|
||||
description: "Adds two numbers",
|
||||
parameters: z.object({x: z.number(), y: z.number()}),
|
||||
execute: ({ x, y }) => x + y,
|
||||
});
|
||||
|
||||
const myAgent = agent({
|
||||
tools: [addTool],
|
||||
});
|
||||
|
||||
// Chat with the agent
|
||||
const context = myAgent.run("Hello, how are you?");
|
||||
|
||||
for await (const event of context) {
|
||||
if (event instanceof AgentStream) {
|
||||
for (const chunk of event.data.delta) {
|
||||
process.stdout.write(chunk); // stream response
|
||||
}
|
||||
} else {
|
||||
console.log(event); // other events
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## Run TypeScript Script in Node.js
|
||||
|
||||
We recommend to use [tsx](https://www.npmjs.com/package/tsx) to run TypeScript script in Node.js.
|
||||
|
||||
```shell
|
||||
node --import tsx ./my-script.ts
|
||||
```
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"title": "Getting Started",
|
||||
"pages": ["installation", "create_llama", "examples"]
|
||||
"pages": ["index", "setup", "starter_tutorial", "environments", "concepts"]
|
||||
}
|
||||
|
||||
+6
-4
@@ -14,7 +14,7 @@ Before you start, make sure you have try LlamaIndex.TS in Node.js to make sure y
|
||||
|
||||
<Card
|
||||
title="Getting Started with LlamaIndex.TS in Node.js"
|
||||
href="/docs/llamaindex/getting_started/installation/node"
|
||||
href="/docs/llamaindex/getting_started/setup/node"
|
||||
/>
|
||||
|
||||
Also, you need have the basic understanding of <a href='https://developers.cloudflare.com/workers/'><SiCloudflareworkers className="inline mr-2" color="#F38020" />Cloudflare Worker</a>.
|
||||
@@ -69,9 +69,11 @@ export default {
|
||||
In Cloudflare Worker and similar serverless JS environment, you need to be aware of the following differences:
|
||||
|
||||
- Some Node.js modules are not available in Cloudflare Worker, such as `node:fs`, `node:child_process`, `node:cluster`...
|
||||
- You are recommend to design your code using network request, such as use `fetch` API to communicate with database, instead of a long-running process in Node.js.
|
||||
- Some of LlamaIndex.TS packages are not available in Cloudflare Worker, for example `@llamaindex/readers` and `@llamaindex/huggingface`.
|
||||
- The main `llamaindex` is designed to work in all JavaScript environment, including Cloudflare Worker. If you find any issue, please report to us.
|
||||
- You are recommend to design your code using network request, such as use `fetch` API to communicate with database, insteadof a long-running process in Node.js.
|
||||
- Some of LlamaIndex.TS modules are not available in Cloudflare Worker, for example `SimpleDirectoryReader` (requires `node:fs`), Some multimodal API that relies on [`onnxruntime-node`](https://www.npmjs.com/package/onnxruntime-node)(we might port to HTTP based module in the future).
|
||||
- `@llamaindex/core` is designed to work in all JavaScript environment, including Cloudflare Worker. If you find any issue, please report to us.
|
||||
- `@llamaindex/env` is a JS environment binding module, which polyfill some Node.js/Modern Web API (for example, we have a memory based `fs` module, and Crypto API polyfill). It is designed to work in all JavaScript environment, including Cloudflare Worker.
|
||||
|
||||
## Known issues
|
||||
|
||||
- `llamaindex` not work perfectly in Cloudflare Worker, bundle size will be larger than 1MB, which is the limit of Cloudflare Worker. You will need import submodule instead of the whole `llamaindex` module.
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Choose Framework
|
||||
description: We support multiple JS runtime and frameworks, bundlers.
|
||||
---
|
||||
import {
|
||||
SiNodedotjs,
|
||||
SiTypescript,
|
||||
SiNextdotjs,
|
||||
SiCloudflareworkers,
|
||||
SiVite
|
||||
} from "@icons-pack/react-simple-icons";
|
||||
|
||||
<Cards>
|
||||
<Card title={
|
||||
<>
|
||||
<SiNodedotjs className="inline" color="#5FA04E" /> Node.js
|
||||
</>
|
||||
} href="/docs/llamaindex/getting_started/setup/node" />
|
||||
<Card title={
|
||||
<>
|
||||
<SiTypescript className="inline" color="#3178C6" /> TypeScript
|
||||
</>
|
||||
} href="/docs/llamaindex/getting_started/setup/typescript" />
|
||||
<Card title={
|
||||
<>
|
||||
<SiVite className='inline' color='#646CFF' /> Vite
|
||||
</>
|
||||
} href="/docs/llamaindex/getting_started/setup/vite" />
|
||||
<Card
|
||||
title={
|
||||
<>
|
||||
<SiNextdotjs className='inline' /> Next.js (React Server Component)
|
||||
</>
|
||||
}
|
||||
href="/docs/llamaindex/getting_started/setup/next"
|
||||
/>
|
||||
<Card title={
|
||||
<>
|
||||
<SiCloudflareworkers className='inline' color='#F38020' /> Cloudflare Workers
|
||||
</>
|
||||
} href="/docs/llamaindex/getting_started/setup/cloudflare" />
|
||||
</Cards>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "Setup",
|
||||
"description": "The setup guide",
|
||||
"defaultOpen": true,
|
||||
"pages": ["index", "next", "node", "typescript", "vite", "cloudflare"]
|
||||
}
|
||||
+4
-4
@@ -7,7 +7,7 @@ Before you start, make sure you have try LlamaIndex.TS in Node.js to make sure y
|
||||
|
||||
<Card
|
||||
title="Getting Started with LlamaIndex.TS in Node.js"
|
||||
href="/docs/llamaindex/getting_started/installation/node"
|
||||
href="/docs/llamaindex/getting_started/setup/node"
|
||||
/>
|
||||
|
||||
## Differences between Node.js and Next.js
|
||||
@@ -17,9 +17,9 @@ This means that you need to be careful when using LlamaIndex.TS in Next.js.
|
||||
Don't leak the import data like API keys to the client side.
|
||||
|
||||
Also, in Next.js, there is build time and runtime. Some computations can be done at build time like Document embedding could be done at build time for better performance.
|
||||
Where as the `llamaindex` package is working with Next.js, some provider packages like `@llamaindex/huggingface` are not working well with Next.js. This is due to the upstream dependencies used by the provider package.
|
||||
LlamaIndex.TS has lots of upstream dependencies, some of them are not compatible with Next.js.
|
||||
|
||||
Make sure to use `withLlamaIndex` to make sure that LlamaIndex.TS works well with Next.js.
|
||||
You might need to use `withNext` to make sure that LlamaIndex.TS works well with Next.js.
|
||||
|
||||
```js
|
||||
// next.config.mjs / next.config.ts
|
||||
@@ -35,7 +35,7 @@ If you see any dependency issues, you are welcome to open an issue on the GitHub
|
||||
|
||||
## Edge Runtime
|
||||
|
||||
[Vercel Edge Runtime](https://edge-runtime.vercel.app/) is a subset of Node.js APIs. Similar to [Cloudflare Workers](/docs/llamaindex/getting_started/installation/cloudflare#difference-between-nodejs-and-cloudflare-worker),
|
||||
[Vercel Edge Runtime](https://edge-runtime.vercel.app/) is a subset of Node.js APIs. Similar to [Cloudflare Workers](./cloudflare#difference-between-nodejs-and-cloudflare-worker),
|
||||
it is a serverless platform that runs your code on the edge.
|
||||
|
||||
Not all features of Node.js are supported in Vercel Edge Runtime, so does LlamaIndex.TS, we are working on more compatibility with all JavaScript runtimes.
|
||||
+1
-23
@@ -3,8 +3,6 @@ title: With Node.js/Bun/Deno
|
||||
description: In this guide, you'll learn how to use LlamaIndex with Node.js, Bun, and Deno.
|
||||
---
|
||||
|
||||
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
|
||||
## Adding environment variables
|
||||
|
||||
By default, LlamaIndex uses OpenAI provider, which requires an API key. You can set the `OPENAI_API_KEY` environment variable to authenticate with OpenAI.
|
||||
@@ -24,29 +22,9 @@ node --env-file .env your-script.js
|
||||
|
||||
For more information, see the [How to read environment variables from Node.js](https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs).
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
By the default, we are using `js-tiktoken` for tokenization. You can install `gpt-tokenizer` which is then automatically used by LlamaIndex to get a 60x speedup for tokenization:
|
||||
|
||||
<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
|
||||
```shell tab="npm"
|
||||
npm install gpt-tokenizer
|
||||
```
|
||||
|
||||
```shell tab="yarn"
|
||||
yarn add gpt-tokenizer
|
||||
```
|
||||
|
||||
```shell tab="pnpm"
|
||||
pnpm add gpt-tokenizer
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
**Note**: This only works for Node.js
|
||||
|
||||
## TypeScript support
|
||||
|
||||
<Card
|
||||
title="Getting Started with LlamaIndex.TS in TypeScript"
|
||||
href="/docs/llamaindex/getting_started/installation/typescript"
|
||||
href="/docs/llamaindex/getting_started/setup/typescript"
|
||||
/>
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
title: With TypeScript
|
||||
description: In this guide, you'll learn how to use LlamaIndex with TypeScript
|
||||
---
|
||||
import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
|
||||
|
||||
LlamaIndex.TS is written in TypeScript and designed to be used in TypeScript projects.
|
||||
|
||||
We do lots of work on strong typing to make sure you have a great typing experience with LlamaIndex.TS.
|
||||
|
||||
```ts twoslash
|
||||
import { PromptTemplate } from '@llamaindex/core/prompts'
|
||||
const promptTemplate = new PromptTemplate({
|
||||
template: `Context information from multiple sources is below.
|
||||
---------------------
|
||||
{context}
|
||||
---------------------
|
||||
Given the information from multiple sources and not prior knowledge.
|
||||
Answer the query in the style of a Shakespeare play"
|
||||
Query: {query}
|
||||
Answer:`,
|
||||
templateVars: ["context", "query"],
|
||||
});
|
||||
// @noErrors
|
||||
promptTemplate.format({
|
||||
c
|
||||
//^|
|
||||
})
|
||||
```
|
||||
|
||||
```ts twoslash
|
||||
import { FunctionTool } from '@llamaindex/core/tools'
|
||||
import { z } from 'zod'
|
||||
|
||||
// ---cut-before---
|
||||
const inputSchema = z.object({
|
||||
time: z.string(),
|
||||
city: z.string(),
|
||||
})
|
||||
|
||||
type Input = z.infer<typeof inputSchema>
|
||||
|
||||
FunctionTool.from<Input>((input) => {
|
||||
// @noErrors
|
||||
input.t
|
||||
// ^|
|
||||
}, {
|
||||
name: 'getWeather',
|
||||
description: 'Get the weather information',
|
||||
parameters: inputSchema,
|
||||
})
|
||||
```
|
||||
|
||||
## Enable TypeScript
|
||||
|
||||
|
||||
```json5
|
||||
{
|
||||
compilerOptions: {
|
||||
// ⬇️ add this line to your tsconfig.json
|
||||
moduleResolution: "bundler", // or "node16"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
<Accordions>
|
||||
<Accordion
|
||||
title="Why modify tsconfig.json"
|
||||
>
|
||||
|
||||
We are shipping both ESM and CJS module, and compatible with Vercel Edge, Cloudflare Workers, and other serverless platforms.
|
||||
|
||||
So we are using [conditional exports](https://nodejs.org/api/packages.html#conditional-exports) to support all environments.
|
||||
|
||||
This is a kind of modern way of shipping packages, but might cause TypeScript type check to fail because of legacy module resolution.
|
||||
|
||||
Imaging you put output file into `/dist/openai.js` but you are importing `llamaindex/openai` in your code, and set `package.json` like this:
|
||||
|
||||
```json5
|
||||
{
|
||||
"exports": {
|
||||
"./openai": "./dist/openai.js"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In old module resolution, TypeScript will not be able to find the module because it is not following the file structure, even you run `node index.js` successfully. (on Node.js >=16)
|
||||
|
||||
See more about [moduleResolution](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution) or
|
||||
[TypeScript 5.0 blog](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#--moduleresolution-bundler7).
|
||||
|
||||
|
||||
</Accordion>
|
||||
</Accordions>
|
||||
|
||||
## Enable AsyncIterable for `Web Stream` API
|
||||
|
||||
Some modules uses `Web Stream` API like `ReadableStream` and `WritableStream`, you need to enable `DOM.AsyncIterable` in your `tsconfig.json`.
|
||||
|
||||
```json5
|
||||
{
|
||||
compilerOptions: {
|
||||
// ⬇️ add this lib to your tsconfig.json
|
||||
lib: ["DOM.AsyncIterable"],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
```ts twoslash
|
||||
import { OpenAIAgent } from '@llamaindex/openai'
|
||||
|
||||
const agent = new OpenAIAgent({
|
||||
tools: []
|
||||
})
|
||||
|
||||
const response = await agent.chat({
|
||||
message: 'Hello, how are you?',
|
||||
stream: true
|
||||
})
|
||||
for await (const _ of response) {
|
||||
//^?
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
## Run TypeScript Script in Node.js
|
||||
|
||||
We recommend to use [tsx](https://www.npmjs.com/package/tsx) to run TypeScript script in Node.js.
|
||||
|
||||
```shell
|
||||
node --import tsx ./my-script.ts
|
||||
```
|
||||
+1
-1
@@ -7,7 +7,7 @@ Before you start, make sure you have try LlamaIndex.TS in Node.js to make sure y
|
||||
|
||||
<Card
|
||||
title="Getting Started with LlamaIndex.TS in Node.js"
|
||||
href="/docs/llamaindex/getting_started/installation/node"
|
||||
href="/docs/llamaindex/getting_started/setup/node"
|
||||
/>
|
||||
|
||||
Also, make sure you have a basic understanding of [Vite](https://vitejs.dev/).
|
||||
+3
-3
@@ -1,11 +1,11 @@
|
||||
---
|
||||
title: Basic Agent
|
||||
title: Agent tutorial
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!@/examples/agent/openai";
|
||||
import CodeSource from "!raw-loader!../../../../../../../../examples/agent/openai";
|
||||
|
||||
We have a comprehensive, step-by-step [guide to building agents in LlamaIndex.TS](/docs/llamaindex/tutorials/agents/1_setup) that we recommend to learn what agents are and how to build them for production. But building a basic agent is simple:
|
||||
We have a comprehensive, step-by-step [guide to building agents in LlamaIndex.TS](../../guides/agents/setup) that we recommend to learn what agents are and how to build them for production. But building a basic agent is simple:
|
||||
|
||||
## Set up
|
||||
|
||||
+5
-1
@@ -1,7 +1,11 @@
|
||||
---
|
||||
title: Create-Llama
|
||||
title: Chatbot tutorial
|
||||
---
|
||||
|
||||
Once you've mastered basic [retrieval-augment generation](retrieval_augmented_generation) you may want to create an interface to chat with your data. You can do this step-by-step, but we recommend getting started quickly using `create-llama`.
|
||||
|
||||
## Using create-llama
|
||||
|
||||
`create-llama` is a powerful but easy to use command-line tool that generates a working, full-stack web application that allows you to chat with your data. You can learn more about it on [the `create-llama` README page](https://www.npmjs.com/package/create-llama).
|
||||
|
||||
Run it once and it will ask you a series of questions about the kind of application you want to generate. Then you can customize your application to suit your use-case. To get started, run:
|
||||
|
Before Width: | Height: | Size: 540 KiB After Width: | Height: | Size: 540 KiB |
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"title": "Starter Tutorials",
|
||||
"pages": [
|
||||
"retrieval_augmented_generation",
|
||||
"chatbot",
|
||||
"structured_data_extraction",
|
||||
"agent"
|
||||
]
|
||||
}
|
||||
+6
-6
@@ -1,12 +1,12 @@
|
||||
---
|
||||
title: Retrieval Augmented Generation (RAG)
|
||||
title: Retrieval Augmented Generation (RAG) Tutorial
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!@/examples/vectorIndex";
|
||||
import TSConfigSource from "!!raw-loader!@/examples/tsconfig.json";
|
||||
import CodeSource from "!raw-loader!../../../../../../../../examples/vectorIndex";
|
||||
import TSConfigSource from "!!raw-loader!../../../../../../../../examples/tsconfig.json";
|
||||
|
||||
One of the most common use-cases for LlamaIndex is Retrieval-Augmented Generation or RAG, in which your data is indexed and selectively retrieved to be given to an LLM as source material for responding to a query. You can learn more about the [concepts behind RAG](/docs/llamaindex/tutorials/rag/concepts).
|
||||
One of the most common use-cases for LlamaIndex is Retrieval-Augmented Generation or RAG, in which your data is indexed and selectively retrieved to be given to an LLM as source material for responding to a query. You can learn more about the [concepts behind RAG](../concepts).
|
||||
|
||||
## Set up the project
|
||||
|
||||
@@ -17,9 +17,9 @@ npm init
|
||||
npm install -D typescript @types/node
|
||||
```
|
||||
|
||||
Then, check out the [installation](/docs/llamaindex/getting_started/installation) steps to install LlamaIndex.TS and prepare an OpenAI key.
|
||||
Then, check out the [installation](../setup) steps to install LlamaIndex.TS and prepare an OpenAI key.
|
||||
|
||||
You can use [other LLMs](/docs/llamaindex/modules/models/llms) via their APIs; if you would prefer to use local models check out our [local LLM example](/docs/llamaindex/tutorials/local_llm).
|
||||
You can use [other LLMs](../../examples/other_llms) via their APIs; if you would prefer to use local models check out our [local LLM example](../../examples/local_llm).
|
||||
|
||||
## Run queries
|
||||
|
||||
+4
-4
@@ -1,13 +1,13 @@
|
||||
---
|
||||
title: Structured data extraction
|
||||
title: Structured data extraction tutorial
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!@/examples/jsonExtract";
|
||||
import CodeSource from "!raw-loader!../../../../../../../../examples/jsonExtract";
|
||||
|
||||
Make sure you have installed LlamaIndex.TS and have an OpenAI key. If you haven't, check out the [installation](/docs/llamaindex/getting_started/installation) guide.
|
||||
Make sure you have installed LlamaIndex.TS and have an OpenAI key. If you haven't, check out the [installation](../setup) guide.
|
||||
|
||||
You can use [other LLMs](/docs/llamaindex/modules/models/llms) via their APIs; if you would prefer to use local models check out our [local LLM example](/docs/llamaindex/tutorials/local_llm).
|
||||
You can use [other LLMs](../../examples/other_llms) via their APIs; if you would prefer to use local models check out our [local LLM example](../../examples/local_llm).
|
||||
|
||||
## Set up
|
||||
|
||||
+4
-4
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 1. Setup
|
||||
title: Agent tutorial
|
||||
---
|
||||
|
||||
In this guide we'll walk you through the process of building an Agent in JavaScript using the LlamaIndex.TS library, starting from nothing and adding complexity in stages.
|
||||
@@ -15,12 +15,12 @@ In LlamaIndex, an agent is a semi-autonomous piece of software powered by an LLM
|
||||
You'll need to have a recent version of [Node.js](https://nodejs.org/en) installed. Then you can install LlamaIndex.TS by running
|
||||
|
||||
```bash
|
||||
npm install llamaindex @llamaindex/openai @llamaindex/readers @llamaindex/huggingface
|
||||
npm install llamaindex
|
||||
```
|
||||
|
||||
## Choose your model
|
||||
|
||||
By default we'll be using OpenAI with GPT-4, as it's a powerful model and easy to get started with. If you'd prefer to run a local model, see [using a local model](3_local_model).
|
||||
By default we'll be using OpenAI with GPT-4, as it's a powerful model and easy to get started with. If you'd prefer to run a local model, see [using a local model](local_model).
|
||||
|
||||
## Get an OpenAI API key
|
||||
|
||||
@@ -36,4 +36,4 @@ We'll use `dotenv` to pull the API key out of that .env file, so also run:
|
||||
npm install dotenv
|
||||
```
|
||||
|
||||
Now you're ready to [create your agent](2_create_agent).
|
||||
Now you're ready to [create your agent](create_agent).
|
||||
@@ -0,0 +1,181 @@
|
||||
---
|
||||
title: Create a basic agent
|
||||
---
|
||||
|
||||
We want to use `await` so we're going to wrap all of our code in a `main` function, like this:
|
||||
|
||||
```typescript
|
||||
// Your imports go here
|
||||
|
||||
async function main() {
|
||||
// the rest of your code goes here
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
```
|
||||
|
||||
For the rest of this guide we'll assume your code is wrapped like this so we can use `await`. You can run the code this way:
|
||||
|
||||
```bash
|
||||
npx tsx example.ts
|
||||
```
|
||||
|
||||
### Load your dependencies
|
||||
|
||||
First we'll need to pull in our dependencies. These are:
|
||||
|
||||
- The OpenAI class to use the OpenAI LLM
|
||||
- FunctionTool to provide tools to our agent
|
||||
- OpenAIAgent to create the agent itself
|
||||
- Settings to define some global settings for the library
|
||||
- Dotenv to load our API key from the .env file
|
||||
|
||||
```javascript
|
||||
import { OpenAI, FunctionTool, OpenAIAgent, Settings } from "llamaindex";
|
||||
import "dotenv/config";
|
||||
```
|
||||
|
||||
### Initialize your LLM
|
||||
|
||||
We need to tell our OpenAI class where its API key is, and which of OpenAI's models to use. We'll be using `gpt-4o`, which is capable while still being pretty cheap. This is a global setting, so anywhere an LLM is needed will use the same model.
|
||||
|
||||
```javascript
|
||||
Settings.llm = new OpenAI({
|
||||
apiKey: process.env.OPENAI_API_KEY,
|
||||
model: "gpt-4o",
|
||||
});
|
||||
```
|
||||
|
||||
### Turn on logging
|
||||
|
||||
We want to see what our agent is up to, so we're going to hook into some events that the library generates and print them out. There are several events possible, but we'll specifically tune in to `llm-tool-call` (when a tool is called) and `llm-tool-result` (when it responds).
|
||||
|
||||
```javascript
|
||||
Settings.callbackManager.on("llm-tool-call", (event) => {
|
||||
console.log(event.detail);
|
||||
});
|
||||
Settings.callbackManager.on("llm-tool-result", (event) => {
|
||||
console.log(event.detail);
|
||||
});
|
||||
```
|
||||
|
||||
### Create a function
|
||||
|
||||
We're going to create a very simple function that adds two numbers together. This will be the tool we ask our agent to use.
|
||||
|
||||
```javascript
|
||||
const sumNumbers = ({ a, b }) => {
|
||||
return `${a + b}`;
|
||||
};
|
||||
```
|
||||
|
||||
Note that we're passing in an object with two named parameters, `a` and `b`. This is a little unusual, but important for defining a tool that an LLM can use.
|
||||
|
||||
### Turn the function into a tool for the agent
|
||||
|
||||
This is the most complicated part of creating an agent. We need to define a `FunctionTool`. We have to pass in:
|
||||
|
||||
- The function itself (`sumNumbers`)
|
||||
- A name for the function, which the LLM will use to call it
|
||||
- A description of the function. The LLM will read this description to figure out what the tool does, and if it needs to call it
|
||||
- A schema for function. We tell the LLM that the parameter is an `object`, and we tell it about the two named parameters we gave it, `a` and `b`. We describe each parameter as a `number`, and we say that both are required.
|
||||
- You can see [more examples of function schemas](https://cookbook.openai.com/examples/how_to_call_functions_with_chat_models).
|
||||
|
||||
```javascript
|
||||
const tool = FunctionTool.from(sumNumbers, {
|
||||
name: "sumNumbers",
|
||||
description: "Use this function to sum two numbers",
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
a: {
|
||||
type: "number",
|
||||
description: "First number to sum",
|
||||
},
|
||||
b: {
|
||||
type: "number",
|
||||
description: "Second number to sum",
|
||||
},
|
||||
},
|
||||
required: ["a", "b"],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
We then wrap up the tools into an array. We could provide lots of tools this way, but for this example we're just using the one.
|
||||
|
||||
```javascript
|
||||
const tools = [tool];
|
||||
```
|
||||
|
||||
### Create the agent
|
||||
|
||||
With your LLM already set up and your tools defined, creating an agent is simple:
|
||||
|
||||
```javascript
|
||||
const agent = new OpenAIAgent({ tools });
|
||||
```
|
||||
|
||||
### Ask the agent a question
|
||||
|
||||
We can use the `chat` interface to ask our agent a question, and it will use the tools we've defined to find an answer.
|
||||
|
||||
```javascript
|
||||
let response = await agent.chat({
|
||||
message: "Add 101 and 303",
|
||||
});
|
||||
|
||||
console.log(response);
|
||||
```
|
||||
|
||||
Let's see what running this looks like using `npx tsx agent.ts`
|
||||
|
||||
**_Output_**
|
||||
|
||||
```javascript
|
||||
{
|
||||
toolCall: {
|
||||
id: 'call_ze6A8C3mOUBG4zmXO8Z4CPB5',
|
||||
name: 'sumNumbers',
|
||||
input: { a: 101, b: 303 }
|
||||
},
|
||||
toolResult: {
|
||||
tool: FunctionTool { _fn: [Function: sumNumbers], _metadata: [Object] },
|
||||
input: { a: 101, b: 303 },
|
||||
output: '404',
|
||||
isError: false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
{
|
||||
response: {
|
||||
raw: {
|
||||
id: 'chatcmpl-9KwauZku3QOvH78MNvxJs81mDvQYK',
|
||||
object: 'chat.completion',
|
||||
created: 1714778824,
|
||||
model: 'gpt-4-turbo-2024-04-09',
|
||||
choices: [Array],
|
||||
usage: [Object],
|
||||
system_fingerprint: 'fp_ea6eb70039'
|
||||
},
|
||||
message: {
|
||||
content: 'The sum of 101 and 303 is 404.',
|
||||
role: 'assistant',
|
||||
options: {}
|
||||
}
|
||||
},
|
||||
sources: [Getter]
|
||||
}
|
||||
```
|
||||
|
||||
We're seeing two pieces of output here. The first is our callback firing when the tool is called. You can see in `toolResult` that the LLM has correctly passed `101` and `303` to our `sumNumbers` function, which adds them up and returns `404`.
|
||||
|
||||
The second piece of output is the response from the LLM itself, where the `message.content` key is giving us the answer.
|
||||
|
||||
Great! We've built an agent with tool use! Next you can:
|
||||
|
||||
- [See the full code](https://github.com/run-llama/ts-agents/blob/main/1_agent/agent.ts)
|
||||
- [Switch to a local LLM](local_model)
|
||||
- Move on to [add Retrieval-Augmented Generation to your agent](agentic_rag)
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
title: Using a local model via Ollama
|
||||
---
|
||||
|
||||
If you're happy using OpenAI, you can skip this section, but many people are interested in using models they run themselves. The easiest way to do this is via the great work of our friends at [Ollama](https://ollama.com/), who provide a simple to use client that will download, install and run a [growing range of models](https://ollama.com/library) for you.
|
||||
|
||||
### Install Ollama
|
||||
|
||||
They provide a one-click installer for Mac, Linux and Windows on their [home page](https://ollama.com/).
|
||||
|
||||
### Pick and run a model
|
||||
|
||||
Since we're going to be doing agentic work, we'll need a very capable model, but the largest models are hard to run on a laptop. We think `mixtral 8x7b` is a good balance between power and resources, but `llama3` is another great option. You can run it simply by running
|
||||
|
||||
```bash
|
||||
ollama run mixtral:8x7b
|
||||
```
|
||||
|
||||
The first time you run it will also automatically download and install the model for you.
|
||||
|
||||
### Switch the LLM in your code
|
||||
|
||||
There are two changes you need to make to the code we already wrote in `1_agent` to get Mixtral 8x7b to work. First, you need to switch to that model. Replace the call to `Settings.llm` with this:
|
||||
|
||||
```javascript
|
||||
Settings.llm = new Ollama({
|
||||
model: "mixtral:8x7b",
|
||||
});
|
||||
```
|
||||
|
||||
### Swap to a ReActAgent
|
||||
|
||||
In our original code we used a specific OpenAIAgent, so we'll need to switch to a more generic agent pattern, the ReAct pattern. This is simple: change the `const agent` line in your code to read
|
||||
|
||||
```javascript
|
||||
const agent = new ReActAgent({ tools });
|
||||
```
|
||||
|
||||
(You will also need to bring in `Ollama` and `ReActAgent` in your imports)
|
||||
|
||||
### Run your totally local agent
|
||||
|
||||
Because your embeddings were already local, your agent can now run entirely locally without making any API calls.
|
||||
|
||||
```bash
|
||||
node agent.mjs
|
||||
```
|
||||
|
||||
Note that your model will probably run a lot slower than OpenAI, so be prepared to wait a while!
|
||||
|
||||
**_Output_**
|
||||
|
||||
```javascript
|
||||
{
|
||||
response: {
|
||||
message: {
|
||||
role: 'assistant',
|
||||
content: ' Thought: I need to use a tool to add the numbers 101 and 303.\n' +
|
||||
'Action: sumNumbers\n' +
|
||||
'Action Input: {"a": 101, "b": 303}\n' +
|
||||
'\n' +
|
||||
'Observation: 404\n' +
|
||||
'\n' +
|
||||
'Thought: I can answer without using any more tools.\n' +
|
||||
'Answer: The sum of 101 and 303 is 404.'
|
||||
},
|
||||
raw: {
|
||||
model: 'mixtral:8x7b',
|
||||
created_at: '2024-05-09T00:24:30.339473Z',
|
||||
message: [Object],
|
||||
done: true,
|
||||
total_duration: 64678371209,
|
||||
load_duration: 57394551334,
|
||||
prompt_eval_count: 475,
|
||||
prompt_eval_duration: 4163981000,
|
||||
eval_count: 94,
|
||||
eval_duration: 3116692000
|
||||
}
|
||||
},
|
||||
sources: [Getter]
|
||||
}
|
||||
```
|
||||
|
||||
Tada! You can see all of this in the folder `1a_mixtral`.
|
||||
|
||||
### Extending to other examples
|
||||
|
||||
You can use a ReActAgent instead of an OpenAIAgent in any of the further examples below, but keep in mind that GPT-4 is a lot more capable than Mixtral 8x7b, so you may see more errors or failures in reasoning if you are using an entirely local setup.
|
||||
|
||||
### Next steps
|
||||
|
||||
Now you've got a local agent, you can [add Retrieval-Augmented Generation to your agent](agentic_rag).
|
||||
+51
-30
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 4. Adding Retrieval-Augmented Generation (RAG)
|
||||
title: Adding Retrieval-Augmented Generation (RAG)
|
||||
---
|
||||
|
||||
While an agent that can perform math is nifty (LLMs are usually not very good at math), LLM-based applications are always more interesting when they work with large amounts of data. In this case, we're going to use a 200-page PDF of the proposed budget of the city of San Francisco for fiscal years 2024-2024 and 2024-2025. It's a great example because it's extremely wordy and full of tables of figures, which present a challenge for humans and LLMs alike.
|
||||
@@ -13,34 +13,22 @@ To learn more about RAG, we recommend this [introduction](https://docs.llamainde
|
||||
|
||||
We're going to start with the same agent we [built in step 1](https://github.com/run-llama/ts-agents/blob/main/1_agent/agent.ts), but make a few changes. You can find the finished version [in the repository](https://github.com/run-llama/ts-agents/blob/main/2_agentic_rag/agent.ts).
|
||||
|
||||
## Installation
|
||||
|
||||
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
|
||||
<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
|
||||
```shell tab="npm"
|
||||
npm install llamaindex @llamaindex/openai @llamaindex/huggingface
|
||||
```
|
||||
|
||||
```shell tab="yarn"
|
||||
yarn add llamaindex @llamaindex/openai @llamaindex/huggingface
|
||||
```
|
||||
|
||||
```shell tab="pnpm"
|
||||
pnpm add llamaindex @llamaindex/openai @llamaindex/huggingface
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
|
||||
### New dependencies
|
||||
|
||||
We'll be bringing in `SimpleDirectoryReader`, `HuggingFaceEmbedding`, `VectorStoreIndex`, and `QueryEngineTool`, `OpenAIContextAwareAgent` from LlamaIndex.TS, as well as the dependencies we previously used.
|
||||
|
||||
```javascript
|
||||
import { QueryEngineTool, Settings, VectorStoreIndex } from "llamaindex";
|
||||
import { OpenAI, OpenAIAgent } from "@llamaindex/openai";
|
||||
import { HuggingFaceEmbedding } from "@llamaindex/huggingface";
|
||||
import { SimpleDirectoryReader } from "@llamaindex/readers/directory";
|
||||
import {
|
||||
OpenAI,
|
||||
FunctionTool,
|
||||
OpenAIAgent,
|
||||
OpenAIContextAwareAgent,
|
||||
Settings,
|
||||
SimpleDirectoryReader,
|
||||
HuggingFaceEmbedding,
|
||||
VectorStoreIndex,
|
||||
QueryEngineTool,
|
||||
} from "llamaindex";
|
||||
```
|
||||
|
||||
### Add an embedding model
|
||||
@@ -87,13 +75,38 @@ By default LlamaIndex will retrieve just the 2 most relevant chunks of text. Thi
|
||||
retriever.similarityTopK = 10;
|
||||
```
|
||||
|
||||
### Use index.queryTool
|
||||
### Approach 1: Create a Context-Aware Agent
|
||||
|
||||
`index.queryTool` creates a `QueryEngineTool` that can be used be an agent to query data from the index.
|
||||
With the retriever ready, you can create a **context-aware agent**.
|
||||
|
||||
```javascript
|
||||
const agent = new OpenAIContextAwareAgent({
|
||||
contextRetriever: retriever,
|
||||
});
|
||||
|
||||
// Example query to the context-aware agent
|
||||
let response = await agent.chat({
|
||||
message: `What's the budget of San Francisco in 2023-2024?`,
|
||||
});
|
||||
|
||||
console.log(response);
|
||||
```
|
||||
|
||||
**Expected Output:**
|
||||
|
||||
```md
|
||||
The total budget for the City and County of San Francisco for the fiscal year 2023-2024 is $14.6 billion. This represents a $611.8 million, or 4.4 percent, increase over the previous fiscal year's budget. The budget covers various expenditures across different departments and services, including significant allocations to public works, transportation, commerce, public protection, and health services.
|
||||
```
|
||||
|
||||
### Approach 2: Using QueryEngineTool (Alternative Approach)
|
||||
|
||||
If you prefer more flexibility and don't mind additional complexity, you can create a `QueryEngineTool`. This approach allows you to define the query logic, providing a more tailored way to interact with the data, but note that it introduces a delay due to the extra tool call.
|
||||
|
||||
```javascript
|
||||
const queryEngine = await index.asQueryEngine({ retriever });
|
||||
const tools = [
|
||||
index.queryTool({
|
||||
new QueryEngineTool({
|
||||
queryEngine: queryEngine,
|
||||
metadata: {
|
||||
name: "san_francisco_budget_tool",
|
||||
description: `This tool can answer detailed questions about the individual components of the budget of San Francisco in 2023-2024.`,
|
||||
@@ -102,9 +115,11 @@ const tools = [
|
||||
];
|
||||
|
||||
// Create an agent using the tools array
|
||||
const ragAgent = agent({ tools });
|
||||
const agent = new OpenAIAgent({ tools });
|
||||
|
||||
let toolResponse = await ragAgent.run("What's the budget of San Francisco in 2023-2024?");
|
||||
let toolResponse = await agent.chat({
|
||||
message: "What's the budget of San Francisco in 2023-2024?",
|
||||
});
|
||||
|
||||
console.log(toolResponse);
|
||||
```
|
||||
@@ -132,4 +147,10 @@ console.log(toolResponse);
|
||||
|
||||
Once again we see a `toolResult`. You can see the query the LLM decided to send to the query engine ("total budget"), and the output the engine returned. In `response.message` you see that the LLM has returned the output from the tool almost verbatim, although it trimmed out the bit about 2024-2025 since we didn't ask about that year.
|
||||
|
||||
So now we have an agent that can index complicated documents and answer questions about them. Let's [combine our math agent and our RAG agent](5_rag_and_tools)!
|
||||
### Comparison of Approaches
|
||||
|
||||
The `OpenAIContextAwareAgent` approach simplifies the setup by allowing you to directly link the retriever to the agent, making it straightforward to access relevant context for your queries. This is ideal for situations where you want easy integration with existing data sources, like a context chat engine.
|
||||
|
||||
On the other hand, using the `QueryEngineTool` offers more flexibility and power. This method allows for customization in how queries are constructed and executed, enabling you to query data from various storages and process them in different ways. However, this added flexibility comes with increased complexity and response time due to the separate tool call and queryEngine generating tool output by LLM that is then passed to the agent.
|
||||
|
||||
So now we have an agent that can index complicated documents and answer questions about them. Let's [combine our math agent and our RAG agent](rag_and_tools)!
|
||||
+32
-41
@@ -1,68 +1,59 @@
|
||||
---
|
||||
title: 5. A RAG agent that does math
|
||||
title: A RAG agent that does math
|
||||
---
|
||||
|
||||
In [our third iteration of the agent](https://github.com/run-llama/ts-agents/blob/main/3_rag_and_tools/agent.ts) we've combined the two previous agents, so we've defined both `sumNumbers` and a `QueryEngineTool` and created an array of two tools. The tools support both Zod and JSON Schema for parameter definition:
|
||||
In [our third iteration of the agent](https://github.com/run-llama/ts-agents/blob/main/3_rag_and_tools/agent.ts) we've combined the two previous agents, so we've defined both `sumNumbers` and a `QueryEngineTool` and created an array of two tools:
|
||||
|
||||
```javascript
|
||||
// define the query engine as a tool
|
||||
const tools = [
|
||||
index.queryTool({
|
||||
new QueryEngineTool({
|
||||
queryEngine: queryEngine,
|
||||
metadata: {
|
||||
name: "san_francisco_budget_tool",
|
||||
description: `This tool can answer detailed questions about the individual components of the budget of San Francisco in 2023-2024.`,
|
||||
},
|
||||
}),
|
||||
tool({
|
||||
FunctionTool.from(sumNumbers, {
|
||||
name: "sumNumbers",
|
||||
description: "Use this function to sum two numbers",
|
||||
parameters: z.object({
|
||||
a: z.number({
|
||||
description: "First number to sum",
|
||||
}),
|
||||
b: z.number({
|
||||
description: "Second number to sum",
|
||||
}),
|
||||
}),
|
||||
execute: ({ a, b }) => `${a + b}`,
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
a: {
|
||||
type: "number",
|
||||
description: "First number to sum",
|
||||
},
|
||||
b: {
|
||||
type: "number",
|
||||
description: "Second number to sum",
|
||||
},
|
||||
},
|
||||
required: ["a", "b"],
|
||||
},
|
||||
}),
|
||||
];
|
||||
```
|
||||
|
||||
You can also use JSON Schema to define the tool parameters as an alternative to Zod.
|
||||
|
||||
```javascript
|
||||
tool(sumNumbers, {
|
||||
name: "sumNumbers",
|
||||
description: "Use this function to sum two numbers",
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
a: {
|
||||
type: "number",
|
||||
description: "First number to sum",
|
||||
},
|
||||
b: {
|
||||
type: "number",
|
||||
description: "Second number to sum",
|
||||
},
|
||||
},
|
||||
required: ["a", "b"],
|
||||
},
|
||||
}),
|
||||
```
|
||||
|
||||
|
||||
These tool descriptions are identical to the ones we previously defined. Now let's ask it 3 questions in a row:
|
||||
|
||||
```javascript
|
||||
let response = await agent.run("What's the budget of San Francisco for community health in 2023-24?");
|
||||
let response = await agent.chat({
|
||||
message:
|
||||
"What's the budget of San Francisco for community health in 2023-24?",
|
||||
});
|
||||
console.log(response);
|
||||
|
||||
let response2 = await agent.run("What's the budget of San Francisco for public protection in 2023-24?");
|
||||
let response2 = await agent.chat({
|
||||
message:
|
||||
"What's the budget of San Francisco for public protection in 2023-24?",
|
||||
});
|
||||
console.log(response2);
|
||||
|
||||
let response3 = await agent.run("What's the combined budget of San Francisco for community health and public protection in 2023-24?");
|
||||
let response3 = await agent.chat({
|
||||
message:
|
||||
"What's the combined budget of San Francisco for community health and public protection in 2023-24?",
|
||||
});
|
||||
console.log(response3);
|
||||
```
|
||||
|
||||
@@ -136,4 +127,4 @@ In the final tool call, it used the `sumNumbers` function to add the two budgets
|
||||
}
|
||||
```
|
||||
|
||||
Great! Now let's improve accuracy by improving our parsing with [LlamaParse](6_llamaparse).
|
||||
Great! Now let's improve accuracy by improving our parsing with [LlamaParse](llamaparse).
|
||||
+2
-2
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 6. Adding LlamaParse
|
||||
title: Adding LlamaParse
|
||||
---
|
||||
|
||||
Complicated PDFs can be very tricky for LLMs to understand. To help with this, LlamaIndex provides LlamaParse, a hosted service that parses complex documents including PDFs. To use it, get a `LLAMA_CLOUD_API_KEY` by [signing up for LlamaCloud](https://cloud.llamaindex.ai/) (it's free for up to 1000 pages/day) and adding it to your `.env` file just as you did for your OpenAI key:
|
||||
@@ -17,4 +17,4 @@ const documents = await reader.loadData("../data/sf_budget_2023_2024.pdf");
|
||||
|
||||
Now you will be able to ask more complicated questions of the same PDF and get better results. You can find this code [in our repo](https://github.com/run-llama/ts-agents/blob/main/4_llamaparse/agent.ts).
|
||||
|
||||
Next up, let's persist our embedded data so we don't have to re-parse every time by [using a vector store](7_qdrant).
|
||||
Next up, let's persist our embedded data so we don't have to re-parse every time by [using a vector store](qdrant).
|
||||
+6
-6
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 7. Adding persistent vector storage
|
||||
title: Adding persistent vector storage
|
||||
---
|
||||
|
||||
In the previous examples, we've been loading our data into memory each time we run the agent. This is fine for small datasets, but for larger datasets you'll want to store your embeddings in a database. LlamaIndex.TS provides a `VectorStore` class that can store your embeddings in a variety of databases. We're going to use [Qdrant](https://qdrant.tech/), a popular vector store, for this example.
|
||||
@@ -65,13 +65,13 @@ Since parsing a PDF can be slow, especially a large one, using the pre-parsed ch
|
||||
|
||||
In this guide you've learned how to
|
||||
|
||||
- [Create an agent](2_create_agent)
|
||||
- [Create an agent](create_agent)
|
||||
- Use remote LLMs like GPT-4
|
||||
- [Use local LLMs like Mixtral](3_local_model)
|
||||
- [Create a RAG query engine](4_agentic_rag)
|
||||
- [Turn functions and query engines into agent tools](5_rag_and_tools)
|
||||
- [Use local LLMs like Mixtral](local_model)
|
||||
- [Create a RAG query engine](agentic_rag)
|
||||
- [Turn functions and query engines into agent tools](rag_and_tools)
|
||||
- Combine those tools
|
||||
- [Enhance your parsing with LlamaParse](6_llamaparse)
|
||||
- [Enhance your parsing with LlamaParse](llamaparse)
|
||||
- Persist your data in a vector store
|
||||
|
||||
The next steps are up to you! Try creating more complex functions and query engines, and set your agent loose on the world.
|
||||
|
Before Width: | Height: | Size: 236 KiB After Width: | Height: | Size: 236 KiB |
+1
-1
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"title": "Agent with RAG",
|
||||
"title": "Agents",
|
||||
"pages": [
|
||||
"1_setup",
|
||||
"2_create_agent",
|
||||
+2
@@ -3,6 +3,8 @@ title: Using API Route
|
||||
description: Chat interface for your LlamaIndexTS application using API Route
|
||||
---
|
||||
import { ChatDemo } from '../../../../../components/demo/chat/api/demo';
|
||||
import "@llamaindex/chat-ui/styles/code.css";
|
||||
import "@llamaindex/chat-ui/styles/katex.css";
|
||||
|
||||
Using [chat-ui](https://github.com/run-llama/chat-ui), it's easy to add a chat interface to your LlamaIndexTS application.
|
||||
You just need to create an API route that provides an `api/chat` endpoint and a chat component to consume the API.
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"title": "Chat UI",
|
||||
"title": "Chat-UI",
|
||||
"description": "Use chat-ui to add a chat interface to your LlamaIndexTS application.",
|
||||
"defaultOpen": false,
|
||||
"pages": ["install", "chat", "rsc", "llamaindex-server"]
|
||||
"pages": ["chat", "rsc"]
|
||||
}
|
||||
+3
-1
@@ -3,10 +3,12 @@ title: Using Next.js RSC
|
||||
description: Chat interface for your LlamaIndexTS application using Next.js RSC
|
||||
---
|
||||
import { ChatDemoRSC } from '../../../../../components/demo/chat/rsc/demo';
|
||||
import "@llamaindex/chat-ui/styles/code.css";
|
||||
import "@llamaindex/chat-ui/styles/katex.css";
|
||||
|
||||
Using [chat-ui](https://github.com/run-llama/chat-ui), it's easy to add a chat interface to your LlamaIndexTS application using [Next.js RSC](https://nextjs.org/docs/app/building-your-application/rendering/server-components) and [Vercel AI RSC](https://sdk.vercel.ai/docs/ai-sdk-rsc/overview).
|
||||
|
||||
With RSC, the chat messages are not returned as JSON from the server (like when using an [API route](/docs/llamaindex/modules/ui/chat)), instead the chat message components are rendered on the server side.
|
||||
With RSC, the chat messages are not returned as JSON from the server (like when using an [API route](./chat)), instead the chat message components are rendered on the server side.
|
||||
This is for example useful for rendering a whole chat history on the server before sending it to the client. [Check here](https://sdk.vercel.ai/docs/getting-started/navigating-the-library#when-to-use-ai-sdk-rsc), for a discussion of when to use use RSC.
|
||||
|
||||
For implementing a chat interface with RSC, you need to create an AI action and then connect the chat interface to use it.
|
||||
@@ -0,0 +1,16 @@
|
||||
---
|
||||
title: Cost Analysis
|
||||
---
|
||||
|
||||
This page shows how to track LLM cost using APIs.
|
||||
|
||||
## Callback Manager
|
||||
|
||||
The callback manager is a class that manages the callback functions.
|
||||
|
||||
You can register `llm-start`, `llm-end`, and `llm-stream` callbacks to the callback manager for tracking the cost.
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!../../../../../../../examples/recipes/cost-analysis";
|
||||
|
||||
<DynamicCodeBlock lang="ts" code={CodeSource} />
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
title: Document and Nodes
|
||||
description: llamaindex readers is a collection of readers for different file formats.
|
||||
---
|
||||
|
||||
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
|
||||
import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
|
||||
|
||||
<Accordions>
|
||||
<Accordion title="Install @llamaindex/readers">
|
||||
|
||||
If you want to only use reader modules, you can install `@llamaindex/readers`
|
||||
|
||||
<Tabs groupId="install-llamaindex" items={["npm", "yarn", "pnpm"]} persist>
|
||||
```shell tab="npm"
|
||||
npm install @llamaindex/readers
|
||||
```
|
||||
|
||||
```shell tab="yarn"
|
||||
yarn add @llamaindex/readers
|
||||
```
|
||||
|
||||
```shell tab="pnpm"
|
||||
pnpm add @llamaindex/readers
|
||||
```
|
||||
|
||||
</Tabs>
|
||||
</Accordion>
|
||||
</Accordions>
|
||||
|
||||
We offer readers for different file formats.
|
||||
|
||||
<Tabs groupId="llamaindex-or-readers" items={["llamaindex", "@llamaindex/readers"]} persist>
|
||||
```ts twoslash tab="llamaindex"
|
||||
import { CSVReader } from 'llamaindex'
|
||||
import { PDFReader } from 'llamaindex'
|
||||
import { JSONReader } from 'llamaindex'
|
||||
import { MarkdownReader } from 'llamaindex'
|
||||
import { HTMLReader } from 'llamaindex'
|
||||
// you can find more readers in the documentation
|
||||
```
|
||||
|
||||
```ts twoslash tab="@llamaindex/readers"
|
||||
import { CSVReader } from '@llamaindex/readers/csv'
|
||||
import { PDFReader } from '@llamaindex/readers/pdf'
|
||||
import { JSONReader } from '@llamaindex/readers/json'
|
||||
import { MarkdownReader } from '@llamaindex/readers/markdown'
|
||||
import { HTMLReader } from '@llamaindex/readers/html'
|
||||
// you can find more readers in the documentation
|
||||
```
|
||||
|
||||
</Tabs>
|
||||
|
||||
## SimpleDirectoryReader
|
||||
|
||||
`SimpleDirectoryReader` is the simplest way to load data from local files into LlamaIndex.
|
||||
|
||||
<Tabs groupId="llamaindex-or-readers" items={["llamaindex", "@llamaindex/readers"]} persist>
|
||||
|
||||
```ts twoslash tab="llamaindex"
|
||||
import { SimpleDirectoryReader } from "llamaindex";
|
||||
|
||||
const reader = new SimpleDirectoryReader()
|
||||
const documents = await reader.loadData("./data")
|
||||
// ^?
|
||||
|
||||
|
||||
const texts = documents.map(doc => doc.getText())
|
||||
// ^?
|
||||
```
|
||||
|
||||
```ts twoslash tab="@llamaindex/readers"
|
||||
import { SimpleDirectoryReader } from "@llamaindex/readers/directory";
|
||||
|
||||
const reader = new SimpleDirectoryReader()
|
||||
const documents = await reader.loadData("./data")
|
||||
// ^?
|
||||
|
||||
|
||||
const texts = documents.map(doc => doc.getText())
|
||||
// ^?
|
||||
```
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Load file natively using Node.js Customization Hooks
|
||||
|
||||
We have a helper utility to allow you to import a file in Node.js script.
|
||||
|
||||
<Tabs groupId="llamaindex-or-readers" items={["llamaindex", "@llamaindex/readers"]} persist>
|
||||
```shell tab="llamaindex"
|
||||
node --import llamaindex/register ./script.js
|
||||
```
|
||||
|
||||
```shell tab="@llamaindex/readers"
|
||||
node --import @llamaindex/readers/node ./script.js
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
```ts
|
||||
import csv from './path/to/data.csv';
|
||||
|
||||
const text = csv.getText()
|
||||
```
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "Loading Data",
|
||||
"description": "Loading Data using LlamaIndex.TS",
|
||||
"pages": ["index", "node-parser"]
|
||||
}
|
||||
+15
-58
@@ -2,20 +2,20 @@
|
||||
title: Node Parsers / Text Splitters
|
||||
description: Learn how to use Node Parsers and Text Splitters to extract data from documents.
|
||||
---
|
||||
import { CodeNodeParserDemo } from '@/components/demo/code-node-parser.tsx';
|
||||
import { CodeNodeParserDemo } from '../../../../../components/demo/code-node-parser.tsx';
|
||||
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
|
||||
Node parsers are a simple abstraction that take a list of `Document` objects, and chunk them into `Node` objects, such that each node is a specific chunk of the parent document. When a document is broken into nodes, all of it's attributes are inherited to the children nodes (i.e. `metadata`, text and metadata templates, etc.). You can read more about `Node` and `Document` properties [here](/docs/llamaindex/modules/data).
|
||||
Node parsers are a simple abstraction that take a list of documents, and chunk them into `Node` objects, such that each node is a specific chunk of the parent document. When a document is broken into nodes, all of it's attributes are inherited to the children nodes (i.e. `metadata`, text and metadata templates, etc.). You can read more about `Node` and `Document` properties [here](./).
|
||||
|
||||
## NodeParser
|
||||
|
||||
The `NodeParser` in LlamaIndex is responsible for splitting `Document` objects into more manageable `Node` objects.
|
||||
|
||||
By default, we will use `Settings.nodeParser` to split the document into nodes. You can also assign a custom `NodeParser` to the `Settings` object.
|
||||
|
||||
## SentenceSplitter
|
||||
|
||||
The `SentenceSplitter` is the default `NodeParser` in LlamaIndex. It will split the text from a `Document` into sentences.
|
||||
|
||||
```ts twoslash
|
||||
import { TextFileReader } from '@llamaindex/readers/text'
|
||||
import { SentenceSplitter } from 'llamaindex';
|
||||
import { SentenceSplitter } from '@llamaindex/core/node-parser';
|
||||
import { Settings } from 'llamaindex';
|
||||
|
||||
const nodeParser = new SentenceSplitter();
|
||||
@@ -23,10 +23,12 @@ Settings.nodeParser = nodeParser;
|
||||
// ^?
|
||||
```
|
||||
|
||||
## TextSplitter
|
||||
|
||||
The underlying text splitter will split text by sentences. It can also be used as a standalone module for splitting raw text.
|
||||
|
||||
```ts twoslash
|
||||
import { SentenceSplitter } from "llamaindex";
|
||||
import { SentenceSplitter } from "@llamaindex/core/node-parser";
|
||||
|
||||
const splitter = new SentenceSplitter({ chunkSize: 1 });
|
||||
|
||||
@@ -40,7 +42,7 @@ The `MarkdownNodeParser` is a more advanced `NodeParser` that can handle markdow
|
||||
|
||||
<Tabs items={["with reader", "with node:fs"]}>
|
||||
```ts twoslash tab="with reader"
|
||||
import { MarkdownNodeParser } from "llamaindex";
|
||||
import { MarkdownNodeParser } from "@llamaindex/core/node-parser";
|
||||
import { MarkdownReader } from '@llamaindex/readers/markdown'
|
||||
|
||||
const reader = new MarkdownReader();
|
||||
@@ -54,7 +56,8 @@ The `MarkdownNodeParser` is a more advanced `NodeParser` that can handle markdow
|
||||
|
||||
```ts twoslash tab="with node:fs"
|
||||
import fs from 'node:fs/promises';
|
||||
import { MarkdownNodeParser, Document } from "llamaindex";
|
||||
import { MarkdownNodeParser } from "@llamaindex/core/node-parser";
|
||||
import { Document } from '@llamaindex/core/schema';
|
||||
|
||||
const markdownNodeParser = new MarkdownNodeParser();
|
||||
const text = await fs.readFile('path/to/file.md', 'utf-8');
|
||||
@@ -66,46 +69,6 @@ The `MarkdownNodeParser` is a more advanced `NodeParser` that can handle markdow
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
The output metadata will be something like:
|
||||
|
||||
```bash
|
||||
[
|
||||
TextNode {
|
||||
id_: '008e41a8-b097-487c-bee8-bd88b9455844',
|
||||
metadata: { 'Header 1': 'Main Header' },
|
||||
excludedEmbedMetadataKeys: [],
|
||||
excludedLlmMetadataKeys: [],
|
||||
relationships: { PARENT: [Array] },
|
||||
hash: 'KJ5e/um/RkHaNR6bonj9ormtZY7I8i4XBPVYHXv1A5M=',
|
||||
text: 'Main Header\nMain content',
|
||||
textTemplate: '',
|
||||
metadataSeparator: '\n'
|
||||
},
|
||||
TextNode {
|
||||
id_: '0f5679b3-ba63-4aff-aedc-830c4208d0b5',
|
||||
metadata: { 'Header 1': 'Header 2' },
|
||||
excludedEmbedMetadataKeys: [],
|
||||
excludedLlmMetadataKeys: [],
|
||||
relationships: { PARENT: [Array] },
|
||||
hash: 'IP/g/dIld3DcbK+uHzDpyeZ9IdOXY4brxhOIe7wc488=',
|
||||
text: 'Header 2\nHeader 2 content',
|
||||
textTemplate: '',
|
||||
metadataSeparator: '\n'
|
||||
},
|
||||
TextNode {
|
||||
id_: 'e81e9bd0-121c-4ead-8ca7-1639d65fdf90',
|
||||
metadata: { 'Header 1': 'Header 2', 'Header 2': 'Sub-header' },
|
||||
excludedEmbedMetadataKeys: [],
|
||||
excludedLlmMetadataKeys: [],
|
||||
relationships: { PARENT: [Array] },
|
||||
hash: 'B3kYNnxaYi9ghtAgwza0ZEVKF4MozobkNUlcekDL7JQ=',
|
||||
text: 'Sub-header\nSub-header content',
|
||||
textTemplate: '',
|
||||
metadataSeparator: '\n'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## CodeSplitter
|
||||
|
||||
The `CodeSplitter` is a more advanced `NodeParser` that can handle code documents.
|
||||
@@ -119,7 +82,7 @@ It will split the code by AST nodes and then parse the nodes into a `Document` o
|
||||
import TS from "tree-sitter-typescript";
|
||||
|
||||
const parser = new Parser();
|
||||
parser.setLanguage(TS.typescript as Parser.Language);
|
||||
parser.setLanguage(TS.typescript);
|
||||
const codeSplitter = new CodeSplitter({
|
||||
getParser: () => parser,
|
||||
});
|
||||
@@ -137,7 +100,7 @@ It will split the code by AST nodes and then parse the nodes into a `Document` o
|
||||
import TS from "tree-sitter-typescript";
|
||||
|
||||
const parser = new Parser();
|
||||
parser.setLanguage(TS.typescript as Parser.Language);
|
||||
parser.setLanguage(TS.typescript);
|
||||
const codeSplitter = new CodeSplitter({
|
||||
getParser: () => parser,
|
||||
});
|
||||
@@ -193,9 +156,3 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
|
||||
```
|
||||
</Accordion>
|
||||
</Accordions>
|
||||
|
||||
## API Reference
|
||||
|
||||
- [SentenceSplitter](/docs/api/classes/SentenceSplitter)
|
||||
- [MarkdownNodeParser](/docs/api/classes/MarkdownNodeParser)
|
||||
- [CodeSplitter](/docs/api/classes/CodeSplitter)
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "Guide",
|
||||
"description": "See our guide",
|
||||
"pages": ["loading", "workflow", "chat", "agents", "cost-analysis"]
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user