mirror of
https://github.com/run-llama/LlamaIndexTS.git
synced 2026-07-15 14:55:41 -04:00
Compare commits
48 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e80029a39a | |||
| d04cf437f2 | |||
| 2b1b35b897 | |||
| fa40b36516 | |||
| da8068e9e0 | |||
| 37dcf37625 | |||
| a8c0637d11 | |||
| 387a19284d | |||
| a654f580cf | |||
| 68ea7ec6a5 | |||
| 2d11ffbaea | |||
| 1587e48a14 | |||
| bd239aaf2d | |||
| 98eebf7277 | |||
| 5478ba88b1 | |||
| aea550aff4 | |||
| e66c6e25fb | |||
| 40ee7610b2 | |||
| c14a21bc0b | |||
| 33f98565ab | |||
| b5cb35a732 | |||
| c1b5be5182 | |||
| 6f8b68ac5f | |||
| e075643b50 | |||
| f71b143ceb | |||
| ead4a80a3a | |||
| da78689e24 | |||
| f24a9dfe00 | |||
| e31d6ba472 | |||
| d212240d64 | |||
| cb73f77bb8 | |||
| 8bf1ca1701 | |||
| 58b3ee52e0 | |||
| 4bac71d6a2 | |||
| a3cbcb31a2 | |||
| bbc8c8787d | |||
| 4b49428f57 | |||
| 7ee4968b06 | |||
| 0111f5c8b0 | |||
| beb922b743 | |||
| e28c29d1f5 | |||
| 008cccd9f1 | |||
| 081698d68c | |||
| ab5fe5d7a0 | |||
| 56689707d3 | |||
| fd74ba4bf1 | |||
| b2634e47ca | |||
| ad3c7f1ec1 |
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@llamaindex/cloud": patch
|
||||
---
|
||||
|
||||
chore: bump sdk openapi.json
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@llamaindex/azure": patch
|
||||
---
|
||||
|
||||
Add `fromConnectionString` method to azure storage libs to track the usage vCore.
|
||||
+46
-13
@@ -14,13 +14,14 @@ 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 LIS (Long-term Support) installed. You can check your Node.js version by running:
|
||||
Make sure you have Node.js LTS (Long-term Support) installed. You can check your Node.js version by running:
|
||||
|
||||
```shell
|
||||
node -v
|
||||
@@ -30,7 +31,7 @@ node -v
|
||||
### Use pnpm
|
||||
|
||||
```shell
|
||||
corepack enable
|
||||
npm install -g pnpm
|
||||
```
|
||||
|
||||
### Install dependencies
|
||||
@@ -41,33 +42,65 @@ pnpm install
|
||||
|
||||
### Build the packages
|
||||
|
||||
You'll need Turbo to build the packages. If you don't have it, you can run it with `pnpx`.
|
||||
|
||||
To build all packages, run:
|
||||
|
||||
```shell
|
||||
# Build all packages
|
||||
pnpx turbo build --filter "./packages/*"
|
||||
|
||||
# Or if you have turbo installed, you can run:
|
||||
turbo build --filter "./packages/*"
|
||||
pnpm build
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
## Changeset
|
||||
## 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
|
||||
|
||||
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
|
||||
|
||||
@@ -1,5 +1,94 @@
|
||||
# @llamaindex/doc
|
||||
|
||||
## 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
|
||||
|
||||
+1
-2
@@ -6,8 +6,7 @@ This is a Next.js application generated with
|
||||
Run development server:
|
||||
|
||||
```bash
|
||||
turbo run dev
|
||||
# turbo will build all required packages before running the dev server
|
||||
pnpm run dev
|
||||
```
|
||||
|
||||
## Learn More
|
||||
|
||||
@@ -5,8 +5,15 @@ const withMDX = createMDX();
|
||||
/** @type {import('next').NextConfig} */
|
||||
const config = {
|
||||
reactStrictMode: true,
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
},
|
||||
transpilePackages: ["monaco-editor"],
|
||||
serverExternalPackages: ["@huggingface/transformers"],
|
||||
serverExternalPackages: [
|
||||
"@huggingface/transformers",
|
||||
"twoslash",
|
||||
"typescript",
|
||||
],
|
||||
webpack: (config, { isServer }) => {
|
||||
if (Array.isArray(config.target) && config.target.includes("web")) {
|
||||
config.target = ["web", "es2020"];
|
||||
|
||||
+26
-25
@@ -1,18 +1,19 @@
|
||||
{
|
||||
"name": "@llamaindex/doc",
|
||||
"version": "0.1.4",
|
||||
"version": "0.1.11",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "pnpm run build:docs && next build",
|
||||
"postinstall": "fumadocs-mdx",
|
||||
"prebuild": "pnpm run build:docs",
|
||||
"build": "next build",
|
||||
"dev": "next dev",
|
||||
"start": "next start",
|
||||
"postdev": "fumadocs-mdx",
|
||||
"postbuild": "fumadocs-mdx && tsx scripts/post-build.mts",
|
||||
"build:docs": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" typedoc && node ./scripts/generate-docs.mjs"
|
||||
"postbuild": "tsx scripts/post-build.mts",
|
||||
"build:docs": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" typedoc && tsx scripts/generate-docs.mts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@icons-pack/react-simple-icons": "^10.1.0",
|
||||
"@llamaindex/chat-ui": "0.0.9",
|
||||
"@llamaindex/chat-ui": "0.2.0",
|
||||
"@llamaindex/cloud": "workspace:*",
|
||||
"@llamaindex/core": "workspace:*",
|
||||
"@llamaindex/node-parser": "workspace:*",
|
||||
@@ -27,36 +28,35 @@
|
||||
"@radix-ui/react-slider": "^1.2.1",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@radix-ui/react-tooltip": "^1.1.4",
|
||||
"@vercel/functions": "^1.5.0",
|
||||
"@scalar/api-client-react": "^1.1.25",
|
||||
"@vercel/functions": "^1.5.0",
|
||||
"ai": "^3.4.33",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "2.1.1",
|
||||
"foxact": "^0.2.41",
|
||||
"framer-motion": "^11.11.17",
|
||||
"fumadocs-core": "^14.7.7",
|
||||
"fumadocs-docgen": "^1.3.7",
|
||||
"fumadocs-mdx": "^11.5.3",
|
||||
"fumadocs-openapi": "^5.12.0",
|
||||
"fumadocs-twoslash": "^2.0.3",
|
||||
"fumadocs-typescript": "^3.0.3",
|
||||
"fumadocs-ui": "^14.7.7",
|
||||
"fumadocs-core": "^15.0.15",
|
||||
"fumadocs-docgen": "^2.0.0",
|
||||
"fumadocs-mdx": "^11.5.6",
|
||||
"fumadocs-openapi": "^6.3.0",
|
||||
"fumadocs-twoslash": "^3.1.0",
|
||||
"fumadocs-typescript": "^3.1.0",
|
||||
"fumadocs-ui": "^15.0.15",
|
||||
"hast-util-to-jsx-runtime": "^2.3.2",
|
||||
"llamaindex": "workspace:*",
|
||||
"lucide-react": "^0.460.0",
|
||||
"next": "15.1.7",
|
||||
"next": "^15.2.1",
|
||||
"next-themes": "^0.4.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-icons": "^5.3.0",
|
||||
"react-monaco-editor": "^0.56.2",
|
||||
"react-text-transition": "^3.1.0",
|
||||
"react-use-measure": "^2.1.1",
|
||||
"rehype-katex": "^7.0.1",
|
||||
"remark-math": "^6.0.0",
|
||||
"rimraf": "^6.0.1",
|
||||
"shiki": "^2.3.2",
|
||||
"shiki-magic-move": "^1.0.0",
|
||||
"shiki": "^3.1.0",
|
||||
"shiki-magic-move": "^1.0.1",
|
||||
"swr": "^2.2.5",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
@@ -67,27 +67,28 @@
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@next/env": "^15.0.3",
|
||||
"@next/env": "^15.2.1",
|
||||
"@tailwindcss/postcss": "^4.0.9",
|
||||
"@types/mdx": "^2.0.13",
|
||||
"@types/node": "22.9.0",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"cross-env": "^7.0.3",
|
||||
"fast-glob": "^3.3.2",
|
||||
"gray-matter": "^4.0.3",
|
||||
"monaco-editor-webpack-plugin": "^7.1.0",
|
||||
"postcss": "^8.4.49",
|
||||
"postcss": "^8.5.3",
|
||||
"raw-loader": "^4.0.2",
|
||||
"remark": "^15.0.1",
|
||||
"remark-gfm": "^4.0.0",
|
||||
"remark-mdx": "^3.1.0",
|
||||
"remark-stringify": "^11.0.0",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"tsx": "^4.19.2",
|
||||
"tailwindcss": "^4.0.9",
|
||||
"tsx": "^4.19.3",
|
||||
"typedoc": "0.27.4",
|
||||
"typedoc-plugin-markdown": "^4.3.1",
|
||||
"typedoc-plugin-merge-modules": "^6.1.0",
|
||||
"typescript": "^5.7.2"
|
||||
"typescript": "^5.7.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
export default {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
@@ -1,8 +1,7 @@
|
||||
import * as OpenAPI from "fumadocs-openapi";
|
||||
import { generateFiles } from "fumadocs-typescript";
|
||||
import { generateFiles as openapiGenerateFiles } from "fumadocs-openapi";
|
||||
import { generateFiles as typescriptGenerateFiles } from "fumadocs-typescript";
|
||||
import fs from "node:fs";
|
||||
import * as path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { rimrafSync } from "rimraf";
|
||||
|
||||
const out = "./src/content/docs/cloud/api";
|
||||
@@ -15,28 +14,23 @@ rimrafSync(out, {
|
||||
},
|
||||
});
|
||||
|
||||
void OpenAPI.generateFiles({
|
||||
input: [
|
||||
fileURLToPath(
|
||||
new URL("../../../packages/cloud/openapi.json", import.meta.url),
|
||||
),
|
||||
],
|
||||
output: out,
|
||||
void openapiGenerateFiles({
|
||||
input: ["../../packages/cloud/openapi.json"],
|
||||
output: "./src/content/docs/cloud/api",
|
||||
groupBy: "tag",
|
||||
});
|
||||
|
||||
void generateFiles({
|
||||
void typescriptGenerateFiles({
|
||||
input: ["./src/content/docs/api/**/*.mdx"],
|
||||
output: (file) => path.resolve(path.dirname(file), path.basename(file)),
|
||||
transformOutput,
|
||||
});
|
||||
|
||||
function transformOutput(filePath, content) {
|
||||
function transformOutput(filePath: string, content: string) {
|
||||
const fileName = path.basename(filePath);
|
||||
let title = fileName.split(".")[0];
|
||||
let pageContent = content;
|
||||
if (title === "index") title = "LlamaIndex API Reference";
|
||||
return `---\ntitle: ${title}\n---\n\n${transformAbsoluteUrl(pageContent, filePath)}`;
|
||||
return `---\ntitle: ${title}\n---\n\n${transformAbsoluteUrl(content, filePath)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -46,20 +40,17 @@ function transformOutput(filePath, content) {
|
||||
* [text](BaseVectorStore.mdx#constructors) -> [text](/docs/api/classes/BaseVectorStore#constructors)
|
||||
* [text](TaskStep.mdx) -> [text](/docs/api/type-aliases/TaskStep)
|
||||
*/
|
||||
function transformAbsoluteUrl(content, filePath) {
|
||||
function transformAbsoluteUrl(content: string, filePath: string) {
|
||||
const group = path.dirname(filePath).split(path.sep).pop();
|
||||
return content.replace(
|
||||
/\]\(([^)]+)\.mdx([^)]*)\)/g,
|
||||
(match, slug, anchor) => {
|
||||
const slugParts = slug.split("/");
|
||||
const fileName = slugParts[slugParts.length - 1];
|
||||
const fileGroup = slugParts[slugParts.length - 2] ?? group;
|
||||
const result = ["/docs/api", fileGroup, fileName, anchor]
|
||||
.filter(Boolean)
|
||||
.join("/");
|
||||
return `](${result})`;
|
||||
},
|
||||
);
|
||||
return content.replace(/\]\(([^)]+)\.mdx([^)]*)\)/g, (_, slug, anchor) => {
|
||||
const slugParts = slug.split("/");
|
||||
const fileName = slugParts[slugParts.length - 1];
|
||||
const fileGroup = slugParts[slugParts.length - 2] ?? group;
|
||||
const result = ["/docs/api", fileGroup, fileName, anchor]
|
||||
.filter(Boolean)
|
||||
.join("/");
|
||||
return `](${result})`;
|
||||
});
|
||||
}
|
||||
|
||||
// append meta.json for API page
|
||||
@@ -4,4 +4,8 @@ import { updateLlamaCloud } from "./update-llamacloud.mjs";
|
||||
|
||||
env.loadEnvConfig(process.cwd());
|
||||
|
||||
await updateLlamaCloud();
|
||||
if (process.env.VERCEL_ENV === "production") {
|
||||
updateLlamaCloud().catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
import { upsertBatchPipelineDocumentsApiV1PipelinesPipelineIdDocumentsPut } from "@llamaindex/cloud/api";
|
||||
import fg from "fast-glob";
|
||||
import {
|
||||
fileGenerator,
|
||||
remarkDocGen,
|
||||
remarkInstall,
|
||||
typescriptGenerator,
|
||||
} from "fumadocs-docgen";
|
||||
import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
|
||||
import { remarkAutoTypeTable } from "fumadocs-typescript";
|
||||
import matter from "gray-matter";
|
||||
import * as fs from "node:fs/promises";
|
||||
import path, { relative } from "node:path";
|
||||
@@ -21,7 +17,8 @@ async function processContent(content: string): Promise<string> {
|
||||
const file = await remark()
|
||||
.use(remarkMdx)
|
||||
.use(remarkGfm)
|
||||
.use(remarkDocGen, { generators: [typescriptGenerator(), fileGenerator()] })
|
||||
.use(remarkAutoTypeTable)
|
||||
.use(remarkDocGen, { generators: [fileGenerator()] })
|
||||
.use(remarkInstall, { persist: { id: "package-manager" } })
|
||||
.use(remarkStringify)
|
||||
.process(content);
|
||||
|
||||
@@ -2,10 +2,11 @@ import { rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
|
||||
import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
|
||||
import { defineConfig, defineDocs } from "fumadocs-mdx/config";
|
||||
import { transformerTwoslash } from "fumadocs-twoslash";
|
||||
import { createFileSystemTypesCache } from "fumadocs-twoslash/cache-fs";
|
||||
import rehypeKatex from "rehype-katex";
|
||||
import remarkMath from "remark-math";
|
||||
|
||||
export const { docs, meta } = defineDocs({
|
||||
export const docs = defineDocs({
|
||||
dir: "./src/content/docs",
|
||||
});
|
||||
|
||||
@@ -20,7 +21,11 @@ export default defineConfig({
|
||||
},
|
||||
transformers: [
|
||||
...(rehypeCodeDefaultOptions.transformers ?? []),
|
||||
transformerTwoslash(),
|
||||
transformerTwoslash({
|
||||
typesCache: createFileSystemTypesCache({
|
||||
dir: ".next/cache/twoslash",
|
||||
}),
|
||||
}),
|
||||
{
|
||||
name: "transformers:remove-notation-escape",
|
||||
code(hast) {
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
} from "@/components/infinite-providers";
|
||||
import { MagicMove } from "@/components/magic-move";
|
||||
import { NpmInstall } from "@/components/npm-install";
|
||||
import { TextEffect } from "@/components/text-effect";
|
||||
import { Supports } from "@/components/supports";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { LEGACY_DOCUMENT_URL } from "@/lib/const";
|
||||
@@ -24,18 +24,18 @@ import { Suspense } from "react";
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-12">
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-center mb-4">
|
||||
<h1 className="mb-4 text-center text-4xl font-bold md:text-6xl">
|
||||
Build context-augmented web apps using
|
||||
<br /> <span className="text-blue-500">LlamaIndex.TS</span>
|
||||
</h1>
|
||||
<p className="text-xl text-center text-fd-muted-foreground mb-12 ">
|
||||
<p className="text-fd-muted-foreground mb-12 text-center text-xl">
|
||||
LlamaIndex.TS is the JS/TS version of{" "}
|
||||
<a href="https://llamaindex.ai">LlamaIndex</a>, the framework for
|
||||
building agentic generative AI applications connected to your data.
|
||||
</p>
|
||||
<div className="text-center text-lg text-fd-muted-foreground mb-12">
|
||||
<div className="text-fd-muted-foreground mb-12 text-center text-lg">
|
||||
<span>Designed for building web applications in </span>
|
||||
<TextEffect />
|
||||
<Supports />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
@@ -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."
|
||||
description="LlamaIndex.TS is designed to be simple to get started, but powerful enough to build complex, agentic AI applications using multi-agents."
|
||||
>
|
||||
<Suspense
|
||||
fallback={
|
||||
@@ -76,44 +76,48 @@ export default function HomePage() {
|
||||
>
|
||||
<MagicMove
|
||||
code={[
|
||||
`import { OpenAI } from "@llamaindex/openai";
|
||||
`import { openai } from "@llamaindex/openai";
|
||||
|
||||
const llm = new OpenAI();
|
||||
const llm = openai();
|
||||
const response = await llm.complete({ prompt: "How are you?" });`,
|
||||
`import { OpenAI } from "@llamaindex/openai";
|
||||
`import { openai } from "@llamaindex/openai";
|
||||
|
||||
const llm = new OpenAI();
|
||||
const llm = openai();
|
||||
const response = await llm.chat({
|
||||
messages: [{ content: "Tell me a joke.", role: "user" }],
|
||||
});`,
|
||||
`import { ChatMemoryBuffer } from "llamaindex";
|
||||
import { OpenAI } from "@llamaindex/openai";
|
||||
`import { agent } from "llamaindex";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
|
||||
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 { ChatMemoryBuffer } from "llamaindex";
|
||||
import { OpenAIAgent } from "@llamaindex/openai";
|
||||
|
||||
const agent = new OpenAIAgent({
|
||||
llm,
|
||||
tools: [...myTools]
|
||||
const analyseAgent = agent({
|
||||
llm: openai({ model: "gpt-4o" }),
|
||||
tools: [analyseTools],
|
||||
systemPrompt,
|
||||
});
|
||||
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(),
|
||||
});`,
|
||||
const response = await analyseAgent.run(\`Analyse the given data:
|
||||
\${data}\`);`,
|
||||
`import { agent, multiAgent } from "llamaindex";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
|
||||
const analyseAgent = agent({
|
||||
name: "AnalyseAgent",
|
||||
llm: openai({ model: "gpt-4o" }),
|
||||
tools: [analyseTools],
|
||||
});
|
||||
const reporterAgent = agent({
|
||||
name: "ReporterAgent",
|
||||
llm: openai({ model: "gpt-4o" }),
|
||||
tools: [reporterTools],
|
||||
canHandoffTo: [analyseAgent],
|
||||
});
|
||||
|
||||
const agents = multiAgent({
|
||||
agents: [analyseAgent, reporterAgent],
|
||||
rootAgent: reporterAgent,
|
||||
});
|
||||
|
||||
const response = await agents.run(\`Analyse the given data:
|
||||
\${data}\`);`,
|
||||
]}
|
||||
/>
|
||||
</Suspense>
|
||||
@@ -125,19 +129,20 @@ const response = await agent.chat({
|
||||
description="Truly powerful retrieval-augmented generation applications use agentic techniques, and LlamaIndex.TS makes it easy to build them."
|
||||
>
|
||||
<CodeBlock
|
||||
code={`import { FunctionTool } from "llamaindex";
|
||||
import { OpenAIAgent } from "@llamaindex/openai";
|
||||
code={`import { agent, SimpleDirectoryReader, VectorStoreIndex } from "llamaindex";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
|
||||
const interpreterTool = FunctionTool.from(...);
|
||||
const systemPrompt = \`...\`;
|
||||
// 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 agent = new OpenAIAgent({
|
||||
llm,
|
||||
tools: [interpreterTool],
|
||||
systemPrompt,
|
||||
const myAgent = agent({
|
||||
llm: openai({ model: "gpt-4o" }),
|
||||
tools: [index.queryTool()],
|
||||
});
|
||||
|
||||
await agent.chat('...');`}
|
||||
await myAgent.run('...');`}
|
||||
lang="ts"
|
||||
/>
|
||||
</Feature>
|
||||
@@ -149,13 +154,13 @@ await agent.chat('...');`}
|
||||
>
|
||||
<div className="mt-8 flex flex-col gap-8">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-fd-muted-foreground mb-2">
|
||||
<h3 className="text-fd-muted-foreground mb-2 text-lg font-semibold">
|
||||
LLMs
|
||||
</h3>
|
||||
<InfiniteLLMProviders />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-fd-muted-foreground mb-2">
|
||||
<h3 className="text-fd-muted-foreground mb-2 text-lg font-semibold">
|
||||
Vector Stores
|
||||
</h3>
|
||||
<InfiniteVectorStoreProviders />
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import { LEGACY_DOCUMENT_URL } from "@/lib/const";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default async function Page(props: {
|
||||
params: Promise<{
|
||||
any: string[];
|
||||
}>;
|
||||
}) {
|
||||
const path = await props.params.then(({ any }) => any.join("/"));
|
||||
return redirect(new URL(path, LEGACY_DOCUMENT_URL).toString());
|
||||
}
|
||||
@@ -13,6 +13,8 @@ import { notFound } from "next/navigation";
|
||||
|
||||
const { AutoTypeTable } = createTypeTable();
|
||||
|
||||
export const revalidate = false;
|
||||
|
||||
export default async function Page(props: {
|
||||
params: Promise<{ slug?: string[] }>;
|
||||
}) {
|
||||
@@ -26,10 +28,10 @@ export default async function Page(props: {
|
||||
<DocsPage
|
||||
toc={page.data.toc}
|
||||
full={page.data.full}
|
||||
lastUpdate={page.data.lastModified}
|
||||
editOnGithub={{
|
||||
owner: "run-llama",
|
||||
repo: "LlamaIndexTS",
|
||||
sha: "main",
|
||||
path: `apps/next/src/content/docs/${page.file.path}`,
|
||||
}}
|
||||
>
|
||||
@@ -64,6 +66,7 @@ export async function generateMetadata(props: {
|
||||
|
||||
return createMetadata(
|
||||
metadataImage.withImage(page.slugs, {
|
||||
metadataBase: new URL("https://ts.llamaindex.ai"),
|
||||
title: page.data.title,
|
||||
description: page.data.description,
|
||||
openGraph: {
|
||||
|
||||
@@ -22,7 +22,7 @@ export default function Layout({ children }: { children: ReactNode }) {
|
||||
variant: "secondary",
|
||||
size: "xs",
|
||||
className:
|
||||
"md:flex-1 px-2 ms-2 gap-1.5 text-fd-muted-foreground rounded-full",
|
||||
"text-fd-muted-foreground ms-2 gap-1.5 rounded-full px-2 md:flex-1",
|
||||
}),
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import "tailwindcss";
|
||||
@import "fumadocs-ui/css/neutral.css";
|
||||
@import "fumadocs-ui/css/preset.css";
|
||||
@import "../../node_modules/fumadocs-twoslash/dist/twoslash.css";
|
||||
@plugin "tailwindcss-animate";
|
||||
@source '../../node_modules/fumadocs-ui/dist/**/*.js';
|
||||
@source "../../node_modules/fumadocs-openapi/dist/**/*.js",
|
||||
@source '../../node_modules/@llamaindex/chat-ui/dist/**/*.js';
|
||||
@config "../../tailwind.config.mjs";
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--page-max-width: 1840px;
|
||||
@@ -46,6 +53,7 @@
|
||||
--chart-5: 27 87% 67%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-neutral-000: #0e0c15;
|
||||
--color-neutral-100: #252134;
|
||||
@@ -87,40 +95,3 @@
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
/*
|
||||
* Override default styles for Markdown
|
||||
*/
|
||||
.prose
|
||||
:where(blockquote):not(
|
||||
:where([class~="not-prose"], [class~="not-prose"] *)
|
||||
) {
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
||||
.prose
|
||||
:where(blockquote p:first-of-type):not(
|
||||
:where([class~="not-prose"], [class~="not-prose"] *)
|
||||
):before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.prose
|
||||
:where(blockquote p:first-of-type):not(
|
||||
:where([class~="not-prose"], [class~="not-prose"] *)
|
||||
):after {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.prose
|
||||
:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
@apply text-blue-600 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@ export default function Layout({ children }: { children: ReactNode }) {
|
||||
href="/favicon-16x16.png"
|
||||
/>
|
||||
</head>
|
||||
<body className="flex flex-col min-h-screen">
|
||||
<body className="flex min-h-screen flex-col">
|
||||
<TooltipProvider>
|
||||
<AIProvider>
|
||||
<RootProvider>{children}</RootProvider>
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
import fg from "fast-glob";
|
||||
import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
|
||||
import { remarkInclude } from "fumadocs-mdx/config";
|
||||
import { remarkAutoTypeTable } from "fumadocs-typescript";
|
||||
import matter from "gray-matter";
|
||||
import * as fs from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { remark } from "remark";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import remarkMdx from "remark-mdx";
|
||||
import remarkStringify from "remark-stringify";
|
||||
|
||||
export const revalidate = false;
|
||||
|
||||
export async function GET() {
|
||||
const files = await fg([
|
||||
"./src/content/docs/**/*.mdx",
|
||||
// remove generated openapi files
|
||||
"!./src/content/docs/cloud/api/**/*",
|
||||
]);
|
||||
|
||||
const scan = files.map(async (file) => {
|
||||
const fileContent = await fs.readFile(file);
|
||||
const { content, data } = matter(fileContent.toString());
|
||||
|
||||
const dir = path.dirname(file).split(path.sep).at(4);
|
||||
const category = {
|
||||
llamaindex: "LlamaIndexTS Framework",
|
||||
api: "LlamaIndexTS API",
|
||||
cloud: "LlamaCloud Service",
|
||||
}[dir ?? ""];
|
||||
|
||||
const processed = await processContent(file, content);
|
||||
return `file: ${file}
|
||||
# ${category}: ${data.title}
|
||||
|
||||
${data.description}
|
||||
|
||||
${processed}`;
|
||||
});
|
||||
|
||||
const scanned = await Promise.all(scan);
|
||||
|
||||
return new Response(scanned.join("\n\n"));
|
||||
}
|
||||
|
||||
async function processContent(path: string, content: string): Promise<string> {
|
||||
const file = await remark()
|
||||
.use(remarkMdx)
|
||||
.use(remarkInclude)
|
||||
.use(remarkGfm)
|
||||
.use(remarkAutoTypeTable)
|
||||
.use(remarkDocGen, { generators: [fileGenerator()] })
|
||||
.use(remarkInstall, { persist: { id: "package-manager" } })
|
||||
.use(remarkStringify)
|
||||
.process({
|
||||
path,
|
||||
value: content,
|
||||
});
|
||||
|
||||
return String(file);
|
||||
}
|
||||
@@ -45,13 +45,13 @@ export const AITrigger = (props: AITriggerProps) => {
|
||||
<Dialog>
|
||||
<DialogTrigger {...props} />
|
||||
<DialogPortal>
|
||||
<DialogOverlay className="fixed inset-0 z-50 bg-fd-background/50 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" />
|
||||
<DialogOverlay className="bg-fd-background/50 data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in fixed inset-0 z-50 backdrop-blur-sm" />
|
||||
<DialogContent
|
||||
onOpenAutoFocus={(e) => {
|
||||
document.getElementById("nd-ai-input")?.focus();
|
||||
e.preventDefault();
|
||||
}}
|
||||
className="fixed left-1/2 z-50 my-[5vh] flex max-h-[90dvh] w-[98vw] max-w-[860px] origin-left -translate-x-1/2 flex-col rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in"
|
||||
className="bg-fd-popover text-fd-popover-foreground data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in fixed left-1/2 z-50 my-[5vh] flex max-h-[90dvh] w-[98vw] max-w-[860px] origin-left -translate-x-1/2 flex-col rounded-lg border shadow-lg focus-visible:outline-none"
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="sr-only">Search AI</DialogTitle>
|
||||
@@ -67,11 +67,11 @@ export const AITrigger = (props: AITriggerProps) => {
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</DialogHeader>
|
||||
<div className="overflow-scroll flex-grow mt-4">
|
||||
<div className="mt-4 flex-grow overflow-scroll">
|
||||
<ChatList messages={messages} />
|
||||
</div>
|
||||
<form
|
||||
className="px-4 py-2 space-y-4"
|
||||
className="space-y-4 px-4 py-2"
|
||||
action={async () => {
|
||||
const value = inputValue.trim();
|
||||
setInputValue("");
|
||||
@@ -102,7 +102,7 @@ export const AITrigger = (props: AITriggerProps) => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row w-full items-center gap-2">
|
||||
<div className="flex w-full flex-row items-center gap-2">
|
||||
<Textarea
|
||||
tabIndex={0}
|
||||
placeholder="Ask AI about documentation."
|
||||
|
||||
@@ -1,50 +1,21 @@
|
||||
import { highlight } from "fumadocs-core/highlight";
|
||||
import * as Base from "fumadocs-ui/components/codeblock";
|
||||
import { toJsxRuntime, type Jsx } from "hast-util-to-jsx-runtime";
|
||||
import { Fragment } from "react";
|
||||
import { jsx, jsxs } from "react/jsx-runtime";
|
||||
import { codeToHast } from "shiki";
|
||||
import type { BundledLanguage } from "shiki";
|
||||
|
||||
export interface CodeBlockProps {
|
||||
code: string;
|
||||
wrapper?: Base.CodeBlockProps;
|
||||
lang: "bash" | "ts" | "tsx";
|
||||
lang: BundledLanguage;
|
||||
}
|
||||
|
||||
export async function CodeBlock({
|
||||
code,
|
||||
lang,
|
||||
wrapper,
|
||||
}: CodeBlockProps): Promise<React.ReactElement> {
|
||||
const hast = await codeToHast(code, {
|
||||
export async function CodeBlock({ code, lang, wrapper }: CodeBlockProps) {
|
||||
const rendered = await highlight(code, {
|
||||
lang,
|
||||
defaultColor: false,
|
||||
themes: {
|
||||
light: "github-light",
|
||||
dark: "vesper",
|
||||
},
|
||||
transformers: [
|
||||
{
|
||||
name: "rehype-code:pre-process",
|
||||
line(node) {
|
||||
if (node.children.length === 0) {
|
||||
// Keep the empty lines when using grid layout
|
||||
node.children.push({
|
||||
type: "text",
|
||||
value: " ",
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const rendered = toJsxRuntime(hast, {
|
||||
jsx: jsx as Jsx,
|
||||
jsxs: jsxs as Jsx,
|
||||
Fragment,
|
||||
development: false,
|
||||
components: {
|
||||
// @ts-expect-error -- JSX component
|
||||
pre: Base.Pre,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -10,7 +10,7 @@ export function Contributing(): ReactElement {
|
||||
<h2 className="mb-4 text-xl font-semibold sm:text-2xl">
|
||||
Made possible by you <Heart className="inline align-middle" />
|
||||
</h2>
|
||||
<p className="mb-4 text-fd-muted-foreground">
|
||||
<p className="text-fd-muted-foreground mb-4">
|
||||
LlamaIndex.TS is powered by the open source community.
|
||||
</p>
|
||||
<div className="mb-8 flex flex-row items-center gap-2">
|
||||
|
||||
@@ -33,7 +33,7 @@ export default async function ContributorCounter({
|
||||
href={`https://github.com/${contributor.login}`}
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
className="size-10 overflow-hidden rounded-full border-4 border-fd-background bg-fd-background md:-mr-4 md:size-12"
|
||||
className="border-fd-background bg-fd-background size-10 overflow-hidden rounded-full border-4 md:-mr-4 md:size-12"
|
||||
style={{
|
||||
zIndex: topContributors.length - i,
|
||||
}}
|
||||
@@ -48,7 +48,7 @@ export default async function ContributorCounter({
|
||||
</a>
|
||||
))}
|
||||
{displayCount < contributors.length ? (
|
||||
<div className="size-12 content-center rounded-full bg-fd-secondary text-center">
|
||||
<div className="bg-fd-secondary size-12 content-center rounded-full text-center">
|
||||
+{contributors.length - displayCount}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -83,7 +83,7 @@ export function CreateAppAnimation(): React.ReactElement {
|
||||
}}
|
||||
>
|
||||
{tick > timeWindowOpen && (
|
||||
<LaunchAppWindow className="absolute bottom-5 right-4 z-10 animate-in fade-in slide-in-from-top-10" />
|
||||
<LaunchAppWindow className="animate-in fade-in slide-in-from-top-10 absolute bottom-5 right-4 z-10" />
|
||||
)}
|
||||
<pre className="overflow-hidden rounded-xl border text-xs">
|
||||
<div className="flex flex-row items-center gap-2 border-b px-4 py-2">
|
||||
@@ -92,7 +92,7 @@ export function CreateAppAnimation(): React.ReactElement {
|
||||
<div className="grow" />
|
||||
<div className="size-2 rounded-full bg-red-400" />
|
||||
</div>
|
||||
<div className="min-h-[200px] bg-gradient-to-b from-fd-secondary [mask-image:linear-gradient(to_bottom,white,transparent)]">
|
||||
<div className="from-fd-secondary min-h-[200px] bg-gradient-to-b [mask-image:linear-gradient(to_bottom,white,transparent)]">
|
||||
<code className="grid p-4">{lines}</code>
|
||||
</div>
|
||||
</pre>
|
||||
@@ -103,7 +103,7 @@ export function CreateAppAnimation(): React.ReactElement {
|
||||
function UserMessage({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="group relative flex items-start">
|
||||
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-background">
|
||||
<div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
|
||||
<IconUser />
|
||||
</div>
|
||||
<div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
|
||||
@@ -122,7 +122,7 @@ function BotMessage({
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("group relative flex items-start", className)}>
|
||||
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground">
|
||||
<div className="bg-primary text-primary-foreground flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
|
||||
<IconAI />
|
||||
</div>
|
||||
<div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
|
||||
@@ -164,7 +164,7 @@ export function ChatExample() {
|
||||
|
||||
return (
|
||||
<div className="max-w-64">
|
||||
<div className="flex flex-col px-4 gap-2">
|
||||
<div className="flex flex-col gap-2 px-4">
|
||||
{userMessageLength === userMessageFull.length && (
|
||||
<UserMessage>
|
||||
<span>{userMessageFull}</span>
|
||||
@@ -204,11 +204,11 @@ function LaunchAppWindow(
|
||||
<div
|
||||
{...props}
|
||||
className={cn(
|
||||
"overflow-hidden rounded-md border bg-fd-background shadow-xl",
|
||||
"bg-fd-background overflow-hidden rounded-md border shadow-xl",
|
||||
props.className,
|
||||
)}
|
||||
>
|
||||
<div className="relative flex h-6 flex-row items-center border-b bg-fd-muted px-4 text-xs text-fd-muted-foreground">
|
||||
<div className="bg-fd-muted text-fd-muted-foreground relative flex h-6 flex-row items-center border-b px-4 text-xs">
|
||||
<p className="absolute inset-x-0 text-center">localhost:8080</p>
|
||||
</div>
|
||||
<div className="p-4 text-sm">
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
"use client";
|
||||
import { ChatInput, ChatMessages, ChatSection } from "@llamaindex/chat-ui";
|
||||
import {
|
||||
ChatHandler,
|
||||
ChatInput,
|
||||
ChatMessages,
|
||||
ChatSection,
|
||||
} from "@llamaindex/chat-ui";
|
||||
import { useChat } from "ai/react";
|
||||
|
||||
export const ChatDemo = () => {
|
||||
const handler = useChat();
|
||||
return (
|
||||
<ChatSection handler={handler}>
|
||||
<ChatSection handler={handler as ChatHandler}>
|
||||
<ChatMessages>
|
||||
<ChatMessages.List className="h-auto max-h-[400px]" />
|
||||
<ChatMessages.Actions />
|
||||
|
||||
@@ -1,23 +1,25 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ChatHandler,
|
||||
ChatInput,
|
||||
ChatMessage,
|
||||
ChatMessages,
|
||||
ChatSection as ChatSectionUI,
|
||||
Message,
|
||||
} from "@llamaindex/chat-ui";
|
||||
import { useChatRSC } from "./use-chat-rsc";
|
||||
|
||||
export const ChatSectionRSC = () => {
|
||||
const handler = useChatRSC();
|
||||
return (
|
||||
<ChatSectionUI handler={handler}>
|
||||
<ChatSectionUI handler={handler as ChatHandler}>
|
||||
<ChatMessages>
|
||||
<ChatMessages.List className="h-auto max-h-[400px]">
|
||||
{handler.messages.map((message, index) => (
|
||||
<ChatMessage
|
||||
key={index}
|
||||
message={message}
|
||||
message={message as Message}
|
||||
isLast={index === handler.messages.length - 1}
|
||||
>
|
||||
<ChatMessage.Avatar />
|
||||
|
||||
@@ -57,7 +57,7 @@ export const IDE = () => {
|
||||
const maxChars = useSlider();
|
||||
const useSetMaxChars = useSetSlider();
|
||||
return (
|
||||
<div className="flex flex-col p-4 border-r max-h-96 overflow-scroll">
|
||||
<div className="flex max-h-96 flex-col overflow-scroll border-r p-4">
|
||||
<div>
|
||||
<Label>Max Chars {maxChars}</Label>
|
||||
<Slider
|
||||
@@ -113,7 +113,7 @@ const Preview = ({ text }: { text: string }) => {
|
||||
},
|
||||
},
|
||||
});
|
||||
return <CodeBlock className="py-0 m-2">{rendered}</CodeBlock>;
|
||||
return <CodeBlock className="m-2 py-0">{rendered}</CodeBlock>;
|
||||
};
|
||||
|
||||
function ScrollToBottom() {
|
||||
@@ -122,7 +122,7 @@ function ScrollToBottom() {
|
||||
return (
|
||||
!isAtBottom && (
|
||||
<button
|
||||
className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
|
||||
className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
|
||||
onClick={() => scrollToBottom()}
|
||||
/>
|
||||
)
|
||||
@@ -136,7 +136,7 @@ export const NodePreview = () => {
|
||||
const textChunks = useMemo(() => parser.splitText(code), [code, maxChars]);
|
||||
return (
|
||||
<StickToBottom
|
||||
className="block relative max-h-96 overflow-scroll"
|
||||
className="relative block max-h-96 overflow-scroll"
|
||||
resize="smooth"
|
||||
initial="smooth"
|
||||
>
|
||||
@@ -154,7 +154,7 @@ export const CodeNodeParserDemo = () => {
|
||||
const isClient = useIsClient();
|
||||
if (!isClient) {
|
||||
return (
|
||||
<div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
|
||||
<div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
|
||||
<Skeleton className="h-96" />
|
||||
<Skeleton className="h-96" />
|
||||
</div>
|
||||
@@ -165,13 +165,13 @@ export const CodeNodeParserDemo = () => {
|
||||
<CodeProvider>
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
|
||||
<div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
|
||||
<Skeleton className="h-96" />
|
||||
<Skeleton className="h-96" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
|
||||
<div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
|
||||
<IDE />
|
||||
<NodePreview />
|
||||
</div>
|
||||
|
||||
@@ -75,7 +75,7 @@ function ScrollToBottom() {
|
||||
return (
|
||||
!isAtBottom && (
|
||||
<button
|
||||
className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
|
||||
className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
|
||||
onClick={() => scrollToBottom()}
|
||||
/>
|
||||
)
|
||||
@@ -91,9 +91,9 @@ export function WorkflowStreamingDemo() {
|
||||
const [total, setTotal] = useState<number>(10);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-start w-full gap-2">
|
||||
<div className="flex flex-row justify-center items-center">
|
||||
<div className="text-lg mr-2">Compute total</div>{" "}
|
||||
<div className="flex w-full flex-col items-start gap-2">
|
||||
<div className="flex flex-row items-center justify-center">
|
||||
<div className="mr-2 text-lg">Compute total</div>{" "}
|
||||
<FlowInput value={total} onChange={(value) => setTotal(value)} />
|
||||
</div>
|
||||
<Button
|
||||
@@ -141,7 +141,7 @@ export function WorkflowStreamingDemo() {
|
||||
>
|
||||
Start Workflow
|
||||
</Button>
|
||||
<StickToBottom className="w-full flex flex-col gap-2 p-2 border border-gray-200 rounded-lg max-h-96 overflow-y-auto">
|
||||
<StickToBottom className="flex max-h-96 w-full flex-col gap-2 overflow-y-auto rounded-lg border border-gray-200 p-2">
|
||||
<StickToBottom.Content className="flex flex-col gap-2">
|
||||
{ui}
|
||||
</StickToBottom.Content>
|
||||
|
||||
@@ -20,7 +20,7 @@ export function Feature({
|
||||
className={cn("border-l border-t px-6 py-12 md:py-16", className)}
|
||||
{...props}
|
||||
>
|
||||
<div className="mb-4 inline-flex items-center gap-2 text-sm font-medium text-fd-muted-foreground">
|
||||
<div className="text-fd-muted-foreground mb-4 inline-flex items-center gap-2 text-sm font-medium">
|
||||
<Icon className="size-4" />
|
||||
<p>{subheading}</p>
|
||||
</div>
|
||||
|
||||
@@ -60,7 +60,7 @@ export default function FlowInput({
|
||||
className={clsx(
|
||||
showCaret ? "caret-primary" : "caret-transparent",
|
||||
"spin-hide w-[1.5em] bg-transparent py-2 text-center font-[inherit] text-transparent outline-none",
|
||||
"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
|
||||
"[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
|
||||
)}
|
||||
// Make sure to disable kerning, to match NumberFlow:
|
||||
style={{ fontKerning: "none" }}
|
||||
|
||||
@@ -8,7 +8,7 @@ import { IconAI, IconUser } from "./ui/icons";
|
||||
export function UserMessage({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="group relative flex items-start">
|
||||
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-background">
|
||||
<div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
|
||||
<IconUser />
|
||||
</div>
|
||||
<div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
|
||||
@@ -54,7 +54,7 @@ export function BotCard({
|
||||
<div className="group relative flex items-start md:-ml-12">
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground",
|
||||
"bg-primary text-primary-foreground flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm",
|
||||
!showAvatar && "invisible",
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -25,7 +25,7 @@ export const NpmInstall = () => {
|
||||
className="flex flex-row items-center justify-center"
|
||||
>
|
||||
<code className="mr-2">$ npm i llamaindex</code>
|
||||
<div className="relative cursor-pointer bg-transparent w-4 h-4">
|
||||
<div className="relative h-4 w-4 cursor-pointer bg-transparent">
|
||||
<div
|
||||
className={`absolute inset-0 transform transition-all duration-300 ${
|
||||
hasCheckIcon ? "scale-0 opacity-0" : "scale-100 opacity-100"
|
||||
|
||||
@@ -0,0 +1,268 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
AnimatePresence,
|
||||
motion,
|
||||
Transition,
|
||||
type AnimationControls,
|
||||
type Target,
|
||||
type TargetAndTransition,
|
||||
type VariantLabels,
|
||||
} from "framer-motion";
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
export interface RotatingTextRef {
|
||||
next: () => void;
|
||||
previous: () => void;
|
||||
jumpTo: (index: number) => void;
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
export interface RotatingTextProps
|
||||
extends Omit<
|
||||
React.ComponentPropsWithoutRef<typeof motion.span>,
|
||||
"children" | "transition" | "initial" | "animate" | "exit"
|
||||
> {
|
||||
texts: string[];
|
||||
transition?: Transition;
|
||||
initial?: boolean | Target | VariantLabels;
|
||||
animate?: boolean | VariantLabels | AnimationControls | TargetAndTransition;
|
||||
exit?: Target | VariantLabels;
|
||||
animatePresenceMode?: "sync" | "wait";
|
||||
animatePresenceInitial?: boolean;
|
||||
rotationInterval?: number;
|
||||
staggerDuration?: number;
|
||||
staggerFrom?: "first" | "last" | "center" | "random" | number;
|
||||
loop?: boolean;
|
||||
auto?: boolean;
|
||||
splitBy?: string;
|
||||
onNext?: (index: number) => void;
|
||||
mainClassName?: string;
|
||||
splitLevelClassName?: string;
|
||||
elementLevelClassName?: string;
|
||||
}
|
||||
|
||||
export const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
|
||||
(
|
||||
{
|
||||
texts,
|
||||
transition = { type: "spring", damping: 25, stiffness: 300 },
|
||||
initial = { y: "100%", opacity: 0 },
|
||||
animate = { y: 0, opacity: 1 },
|
||||
exit = { y: "-120%", opacity: 0 },
|
||||
animatePresenceMode = "wait",
|
||||
animatePresenceInitial = false,
|
||||
rotationInterval = 2000,
|
||||
staggerDuration = 0,
|
||||
staggerFrom = "first",
|
||||
loop = true,
|
||||
auto = true,
|
||||
splitBy = "characters",
|
||||
onNext,
|
||||
mainClassName,
|
||||
splitLevelClassName,
|
||||
elementLevelClassName,
|
||||
...rest
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const [currentTextIndex, setCurrentTextIndex] = useState<number>(0);
|
||||
|
||||
const splitIntoCharacters = (text: string): string[] => {
|
||||
if (typeof Intl !== "undefined" && Intl.Segmenter) {
|
||||
const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
|
||||
return Array.from(
|
||||
segmenter.segment(text),
|
||||
(segment) => segment.segment,
|
||||
);
|
||||
}
|
||||
return Array.from(text);
|
||||
};
|
||||
|
||||
const elements = useMemo(() => {
|
||||
const currentText: string = texts[currentTextIndex];
|
||||
if (splitBy === "characters") {
|
||||
const words = currentText.split(" ");
|
||||
return words.map((word, i) => ({
|
||||
characters: splitIntoCharacters(word),
|
||||
needsSpace: i !== words.length - 1,
|
||||
}));
|
||||
}
|
||||
if (splitBy === "words") {
|
||||
return currentText.split(" ").map((word, i, arr) => ({
|
||||
characters: [word],
|
||||
needsSpace: i !== arr.length - 1,
|
||||
}));
|
||||
}
|
||||
if (splitBy === "lines") {
|
||||
return currentText.split("\n").map((line, i, arr) => ({
|
||||
characters: [line],
|
||||
needsSpace: i !== arr.length - 1,
|
||||
}));
|
||||
}
|
||||
|
||||
return currentText.split(splitBy).map((part, i, arr) => ({
|
||||
characters: [part],
|
||||
needsSpace: i !== arr.length - 1,
|
||||
}));
|
||||
}, [texts, currentTextIndex, splitBy]);
|
||||
|
||||
const getStaggerDelay = useCallback(
|
||||
(index: number, totalChars: number): number => {
|
||||
const total = totalChars;
|
||||
if (staggerFrom === "first") return index * staggerDuration;
|
||||
if (staggerFrom === "last")
|
||||
return (total - 1 - index) * staggerDuration;
|
||||
if (staggerFrom === "center") {
|
||||
const center = Math.floor(total / 2);
|
||||
return Math.abs(center - index) * staggerDuration;
|
||||
}
|
||||
if (staggerFrom === "random") {
|
||||
const randomIndex = Math.floor(Math.random() * total);
|
||||
return Math.abs(randomIndex - index) * staggerDuration;
|
||||
}
|
||||
return Math.abs((staggerFrom as number) - index) * staggerDuration;
|
||||
},
|
||||
[staggerFrom, staggerDuration],
|
||||
);
|
||||
|
||||
const handleIndexChange = useCallback(
|
||||
(newIndex: number) => {
|
||||
setCurrentTextIndex(newIndex);
|
||||
if (onNext) onNext(newIndex);
|
||||
},
|
||||
[onNext],
|
||||
);
|
||||
|
||||
const next = useCallback(() => {
|
||||
const nextIndex =
|
||||
currentTextIndex === texts.length - 1
|
||||
? loop
|
||||
? 0
|
||||
: currentTextIndex
|
||||
: currentTextIndex + 1;
|
||||
if (nextIndex !== currentTextIndex) {
|
||||
handleIndexChange(nextIndex);
|
||||
}
|
||||
}, [currentTextIndex, texts.length, loop, handleIndexChange]);
|
||||
|
||||
const previous = useCallback(() => {
|
||||
const prevIndex =
|
||||
currentTextIndex === 0
|
||||
? loop
|
||||
? texts.length - 1
|
||||
: currentTextIndex
|
||||
: currentTextIndex - 1;
|
||||
if (prevIndex !== currentTextIndex) {
|
||||
handleIndexChange(prevIndex);
|
||||
}
|
||||
}, [currentTextIndex, texts.length, loop, handleIndexChange]);
|
||||
|
||||
const jumpTo = useCallback(
|
||||
(index: number) => {
|
||||
const validIndex = Math.max(0, Math.min(index, texts.length - 1));
|
||||
if (validIndex !== currentTextIndex) {
|
||||
handleIndexChange(validIndex);
|
||||
}
|
||||
},
|
||||
[texts.length, currentTextIndex, handleIndexChange],
|
||||
);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
if (currentTextIndex !== 0) {
|
||||
handleIndexChange(0);
|
||||
}
|
||||
}, [currentTextIndex, handleIndexChange]);
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
next,
|
||||
previous,
|
||||
jumpTo,
|
||||
reset,
|
||||
}),
|
||||
[next, previous, jumpTo, reset],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!auto) return;
|
||||
const intervalId = setInterval(next, rotationInterval);
|
||||
return () => clearInterval(intervalId);
|
||||
}, [next, rotationInterval, auto]);
|
||||
|
||||
return (
|
||||
<motion.span
|
||||
className={cn(
|
||||
"relative flex flex-wrap whitespace-pre-wrap",
|
||||
mainClassName,
|
||||
)}
|
||||
{...rest}
|
||||
layout
|
||||
transition={transition}
|
||||
>
|
||||
<span className="sr-only">{texts[currentTextIndex]}</span>
|
||||
<AnimatePresence
|
||||
mode={animatePresenceMode}
|
||||
initial={animatePresenceInitial}
|
||||
>
|
||||
<motion.div
|
||||
key={currentTextIndex}
|
||||
className={cn(
|
||||
splitBy === "lines"
|
||||
? "flex w-full flex-col"
|
||||
: "relative flex flex-wrap whitespace-pre-wrap",
|
||||
)}
|
||||
layout
|
||||
aria-hidden="true"
|
||||
>
|
||||
{elements.map((wordObj, wordIndex, array) => {
|
||||
const previousCharsCount = array
|
||||
.slice(0, wordIndex)
|
||||
.reduce((sum, word) => sum + word.characters.length, 0);
|
||||
return (
|
||||
<span
|
||||
key={wordIndex}
|
||||
className={cn("inline-flex", splitLevelClassName)}
|
||||
>
|
||||
{wordObj.characters.map((char, charIndex) => (
|
||||
<motion.span
|
||||
key={charIndex}
|
||||
initial={initial}
|
||||
animate={animate}
|
||||
exit={exit}
|
||||
transition={{
|
||||
...transition,
|
||||
delay: getStaggerDelay(
|
||||
previousCharsCount + charIndex,
|
||||
array.reduce(
|
||||
(sum, word) => sum + word.characters.length,
|
||||
0,
|
||||
),
|
||||
),
|
||||
}}
|
||||
className={cn("inline-block", elementLevelClassName)}
|
||||
>
|
||||
{char}
|
||||
</motion.span>
|
||||
))}
|
||||
{wordObj.needsSpace && (
|
||||
<span className="whitespace-pre"> </span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</motion.span>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
RotatingText.displayName = "RotatingText";
|
||||
@@ -0,0 +1,27 @@
|
||||
"use client";
|
||||
import { RotatingText } from "@/components/reactbits/rotating-text";
|
||||
|
||||
const supports = [
|
||||
"Next.js",
|
||||
"Node.js",
|
||||
"Hono",
|
||||
"Express.js",
|
||||
"Deno",
|
||||
"Nest.js",
|
||||
"Waku",
|
||||
];
|
||||
|
||||
export const Supports = () => {
|
||||
return (
|
||||
<RotatingText
|
||||
texts={supports}
|
||||
mainClassName="inline-flex bg-transparent overflow-hidden justify-center"
|
||||
initial={{ y: "100%" }}
|
||||
animate={{ y: 0 }}
|
||||
exit={{ y: "-120%" }}
|
||||
staggerDuration={0.025}
|
||||
transition={{ type: "spring", damping: 30, stiffness: 400 }}
|
||||
rotationInterval={2000}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,28 +0,0 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import ReactTextTransition from "react-text-transition";
|
||||
|
||||
const supports = [
|
||||
"Next.js",
|
||||
"Node.js",
|
||||
"Hono",
|
||||
"Express.js",
|
||||
"Deno",
|
||||
"Nest.js",
|
||||
"Waku",
|
||||
];
|
||||
|
||||
export const TextEffect = () => {
|
||||
const [counter, setCounter] = useState(0);
|
||||
useEffect(() => {
|
||||
const id = setInterval(() => {
|
||||
setCounter(
|
||||
(Math.floor(Math.random() * supports.length) + 1) % supports.length,
|
||||
);
|
||||
}, 4000);
|
||||
return () => {
|
||||
clearInterval(id);
|
||||
};
|
||||
}, []);
|
||||
return <ReactTextTransition inline>{supports[counter]}</ReactTextTransition>;
|
||||
};
|
||||
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
|
||||
<Cross2Icon className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
|
||||
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -6,7 +6,7 @@ function Skeleton({
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn("animate-pulse rounded-md bg-primary/10", className)}
|
||||
className={cn("bg-primary/10 animate-pulse rounded-md", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -17,10 +17,10 @@ const Slider = React.forwardRef<
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
|
||||
<SliderPrimitive.Range className="absolute h-full bg-primary" />
|
||||
<SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
|
||||
<SliderPrimitive.Range className="bg-primary absolute h-full" />
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
|
||||
<SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50" />
|
||||
</SliderPrimitive.Root>
|
||||
));
|
||||
Slider.displayName = SliderPrimitive.Root.displayName;
|
||||
|
||||
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
"title": "LlamaCloud",
|
||||
"description": "The Cloud framework for LLM",
|
||||
"root": true,
|
||||
"pages": ["---Guide---", "index", "api"]
|
||||
"pages": ["---Guide---", "index", "..."]
|
||||
}
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
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} />
|
||||
@@ -1,28 +0,0 @@
|
||||
---
|
||||
title: Gemini Agent
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSourceGemini from "!raw-loader!../../../../../../../examples/gemini/agent.ts";
|
||||
|
||||
## Installation
|
||||
|
||||
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
|
||||
<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
|
||||
```shell tab="npm"
|
||||
npm install llamaindex @llamaindex/google
|
||||
```
|
||||
|
||||
```shell tab="yarn"
|
||||
yarn add llamaindex @llamaindex/google
|
||||
```
|
||||
|
||||
```shell tab="pnpm"
|
||||
pnpm add llamaindex @llamaindex/google
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
## Source
|
||||
|
||||
<DynamicCodeBlock lang="ts" code={CodeSourceGemini} />
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
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} />
|
||||
@@ -1,59 +0,0 @@
|
||||
---
|
||||
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,
|
||||
} from "llamaindex";
|
||||
import { OpenAI, OpenAIContextAwareAgent } from "@llamaindex/openai";
|
||||
|
||||
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.
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"title": "Examples",
|
||||
"pages": [
|
||||
"more_examples",
|
||||
"chat_engine",
|
||||
"vector_index",
|
||||
"summary_index",
|
||||
"save_load_index",
|
||||
"context_aware_agent",
|
||||
"agent",
|
||||
"agent_gemini",
|
||||
"local_llm",
|
||||
"other_llms"
|
||||
]
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
---
|
||||
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).
|
||||
|
||||
This example runs you through the process of setting up a Mistral model:
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
|
||||
<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
|
||||
```shell tab="npm"
|
||||
npm install llamaindex @llamaindex/mistral
|
||||
```
|
||||
|
||||
```shell tab="yarn"
|
||||
yarn add llamaindex @llamaindex/mistral
|
||||
```
|
||||
|
||||
```shell tab="pnpm"
|
||||
pnpm add llamaindex @llamaindex/mistral
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
## Using another LLM
|
||||
|
||||
You can specify what LLM LlamaIndex.TS will use on the `Settings` object, like this:
|
||||
|
||||
```typescript
|
||||
import { MistralAI } from "@llamaindex/mistral";
|
||||
import { 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 } from "@llamaindex/mistral";
|
||||
import { 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} />
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
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} />
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
title: Summary Index
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!../../../../../../../examples/summaryIndex";
|
||||
|
||||
<DynamicCodeBlock lang="ts" code={CodeSource} />
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
title: Vector Index
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!../../../../../../../examples/vectorIndex";
|
||||
|
||||
<DynamicCodeBlock lang="ts" code={CodeSource} />
|
||||
+1
-5
@@ -1,11 +1,7 @@
|
||||
---
|
||||
title: Chatbot tutorial
|
||||
title: Create-Llama
|
||||
---
|
||||
|
||||
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:
|
||||
+13
-2
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: See all examples
|
||||
title: Code 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.
|
||||
|
||||
## Check out all examples
|
||||
## Use examples locally
|
||||
|
||||
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,3 +19,14 @@ 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"
|
||||
/>
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Choose Framework
|
||||
title: Frameworks
|
||||
description: We support multiple JS runtime and frameworks, bundlers.
|
||||
---
|
||||
import {
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "Framework",
|
||||
"description": "The setup guide",
|
||||
"defaultOpen": true,
|
||||
"pages": ["node", "typescript", "next", "vite", "cloudflare"]
|
||||
}
|
||||
+22
@@ -3,6 +3,8 @@ title: With Node.js/Bun/Deno
|
||||
description: In this guide, you'll learn how to use LlamaIndex with Node.js, Bun, and Deno.
|
||||
---
|
||||
|
||||
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
|
||||
## Adding environment variables
|
||||
|
||||
By default, LlamaIndex uses OpenAI provider, which requires an API key. You can set the `OPENAI_API_KEY` environment variable to authenticate with OpenAI.
|
||||
@@ -22,6 +24,26 @@ node --env-file .env your-script.js
|
||||
|
||||
For more information, see the [How to read environment variables from Node.js](https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs).
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
By the default, we are using `js-tiktoken` for tokenization. You can install `gpt-tokenizer` which is then automatically used by LlamaIndex to get a 60x speedup for tokenization:
|
||||
|
||||
<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
|
||||
```shell tab="npm"
|
||||
npm install gpt-tokenizer
|
||||
```
|
||||
|
||||
```shell tab="yarn"
|
||||
yarn add gpt-tokenizer
|
||||
```
|
||||
|
||||
```shell tab="pnpm"
|
||||
pnpm add gpt-tokenizer
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
**Note**: This only works for Node.js
|
||||
|
||||
## TypeScript support
|
||||
|
||||
<Card
|
||||
+29
-12
@@ -106,21 +106,38 @@ Some modules uses `Web Stream` API like `ReadableStream` and `WritableStream`, y
|
||||
}
|
||||
```
|
||||
|
||||
```ts twoslash
|
||||
import { OpenAIAgent } from '@llamaindex/openai'
|
||||
```typescript
|
||||
import { agent, tool } from 'llamaindex'
|
||||
import { openai } from "@llamaindex/openai";
|
||||
|
||||
const agent = new OpenAIAgent({
|
||||
tools: []
|
||||
})
|
||||
Settings.llm = openai({
|
||||
model: "gpt-4o-mini",
|
||||
});
|
||||
|
||||
const response = await agent.chat({
|
||||
message: 'Hello, how are you?',
|
||||
stream: true
|
||||
})
|
||||
for await (const _ of response) {
|
||||
//^?
|
||||
// ...
|
||||
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
|
||||
|
Before Width: | Height: | Size: 540 KiB After Width: | Height: | Size: 540 KiB |
@@ -37,20 +37,20 @@ In most cases, you'll also need an LLM package to use LlamaIndex. For example, t
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
Go to [Using other LLM APIs](/docs/llamaindex/examples/other_llms) to find out how to use other LLMs.
|
||||
Go to [LLM APIs](/docs/llamaindex/modules/llms) to find out how to use other LLMs.
|
||||
|
||||
|
||||
## 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"
|
||||
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="https://stackblitz.com/github/run-llama/LlamaIndexTS/tree/main/examples?file=README.md"
|
||||
href="/docs/llamaindex/getting_started/examples"
|
||||
/>
|
||||
</Cards>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"title": "Getting Started",
|
||||
"pages": ["index", "setup", "starter_tutorial", "environments", "concepts"]
|
||||
"pages": ["index", "create_llama", "examples", "frameworks"]
|
||||
}
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"title": "Setup",
|
||||
"description": "The setup guide",
|
||||
"defaultOpen": true,
|
||||
"pages": ["index", "next", "node", "typescript", "vite", "cloudflare"]
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"title": "Starter Tutorials",
|
||||
"pages": [
|
||||
"retrieval_augmented_generation",
|
||||
"chatbot",
|
||||
"structured_data_extraction",
|
||||
"agent"
|
||||
]
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
---
|
||||
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](4_agentic_rag).
|
||||
@@ -1,16 +0,0 @@
|
||||
---
|
||||
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} />
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"title": "Guide",
|
||||
"description": "See our guide",
|
||||
"pages": ["loading", "workflow", "chat", "agents", "cost-analysis"]
|
||||
}
|
||||
@@ -16,9 +16,13 @@ The TypeScript implementation is designed for JavaScript server side application
|
||||
|
||||
LlamaIndex.TS provides tools for beginners, advanced users, and everyone in between.
|
||||
|
||||
Try it out with a starter example using StackBlitz:
|
||||
|
||||
<iframe
|
||||
className="w-full h-[440px]"
|
||||
aria-label="LlamaIndex.TS Starter"
|
||||
aria-description="This is a starter example for LlamaIndex.TS, it shows the basic usage of the library."
|
||||
src="https://stackblitz.com/github/run-llama/LlamaIndexTS/tree/main/examples?embed=1&file=starter.ts"
|
||||
/>
|
||||
|
||||
You'll need an OpenAI API key to run this example. You can retrieve it from [OpenAI](https://platform.openai.com/api-keys).
|
||||
@@ -4,13 +4,11 @@
|
||||
"root": true,
|
||||
"pages": [
|
||||
"---Guide---",
|
||||
"what-is-llamaindex",
|
||||
"index",
|
||||
"getting_started",
|
||||
"migration",
|
||||
"guide",
|
||||
"examples",
|
||||
"tutorials",
|
||||
"modules",
|
||||
"integration"
|
||||
"integration",
|
||||
"migration"
|
||||
]
|
||||
}
|
||||
|
||||
+2
@@ -2,6 +2,8 @@
|
||||
title: Agents
|
||||
---
|
||||
|
||||
**Note**: Agents are deprecated, use [Agent Workflows](/docs/llamaindex/modules/agent_workflow) instead.
|
||||
|
||||
An “agent” is an automated reasoning and decision engine. It takes in a user input/query and can make internal decisions for executing that query in order to return the correct result. The key agent components can include, but are not limited to:
|
||||
|
||||
- Breaking down a complex question into smaller ones
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"title": "Migration",
|
||||
"description": "Migration between different versions",
|
||||
"pages": ["0.8-to-0.9"]
|
||||
"pages": ["0.8-to-0.9", "deprecated"]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
title: Agent Workflows
|
||||
---
|
||||
|
||||
|
||||
Agent Workflows are a powerful system that enables you to create and orchestrate one or multiple agents with tools to perform specific tasks. It's built on top of the base [`Workflow`](./workflows) system and provides a streamlined interface for agent interactions.
|
||||
|
||||
## Usage
|
||||
|
||||
### Single Agent Workflow
|
||||
|
||||
The simplest use case is creating a single agent with specific tools. Here's an example of creating an assistant that tells jokes:
|
||||
|
||||
```typescript
|
||||
import { agent, tool } from "llamaindex";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
|
||||
// Define a joke-telling tool
|
||||
const jokeTool = tool(
|
||||
() => "Baby Llama is called cria",
|
||||
{
|
||||
name: "joke",
|
||||
description: "Use this tool to get a joke",
|
||||
}
|
||||
);
|
||||
|
||||
// Create an single agent workflow with the tool
|
||||
const jokeAgent = agent({
|
||||
tools: [jokeTool],
|
||||
llm: openai({ model: "gpt-4o-mini" }),
|
||||
});
|
||||
|
||||
// Run the workflow
|
||||
const result = await jokeAgent.run("Tell me something funny");
|
||||
console.log(result); // Baby Llama is called cria
|
||||
```
|
||||
|
||||
### Event Streaming
|
||||
|
||||
Agent Workflows provide a unified interface for event streaming, making it easy to track and respond to different events during execution:
|
||||
|
||||
```typescript
|
||||
import { AgentToolCall, AgentStream } from "llamaindex";
|
||||
|
||||
// Get the workflow execution context
|
||||
const context = workflow.run("Tell me something funny");
|
||||
|
||||
// Stream and handle events
|
||||
for await (const event of context) {
|
||||
if (event instanceof AgentToolCall) {
|
||||
console.log(`Tool being called: ${event.data.toolName}`);
|
||||
}
|
||||
if (event instanceof AgentStream) {
|
||||
process.stdout.write(event.data.delta);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Multi-Agent Workflow
|
||||
|
||||
An Agent Workflow can orchestrate multiple agents, enabling complex interactions and task handoffs. Each agent in a multi-agent workflow requires:
|
||||
|
||||
- `name`: Unique identifier for the agent
|
||||
- `description`: Purpose description used for task routing
|
||||
- `tools`: Array of tools the agent can use
|
||||
- `canHandoffTo` (optional): Array of agent names or agent instances that this agent can delegate tasks to
|
||||
|
||||
Here's an example of a multi-agent system that combines joke-telling and weather information:
|
||||
|
||||
```typescript
|
||||
import { multiAgent, agent, tool } from "llamaindex";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
import { z } from "zod";
|
||||
|
||||
// Create a weather agent
|
||||
const weatherAgent = agent({
|
||||
name: "WeatherAgent",
|
||||
description: "Provides weather information for any city",
|
||||
tools: [
|
||||
tool(
|
||||
{
|
||||
name: "fetchWeather",
|
||||
description: "Get weather information for a city",
|
||||
parameters: z.object({
|
||||
city: z.string(),
|
||||
}),
|
||||
execute: ({ city }) => `The weather in ${city} is sunny`,
|
||||
}
|
||||
),
|
||||
],
|
||||
llm: openai({ model: "gpt-4o-mini" }),
|
||||
});
|
||||
|
||||
// Create a joke-telling agent
|
||||
const jokeAgent = agent({
|
||||
name: "JokeAgent",
|
||||
description: "Tells jokes and funny stories",
|
||||
tools: [jokeTool], // Using the joke tool defined earlier
|
||||
llm: openai({ model: "gpt-4o-mini" }),
|
||||
canHandoffTo: [weatherAgent], // Can hand off to the weather agent
|
||||
});
|
||||
|
||||
// Create the multi-agent workflow
|
||||
const agents = multiAgent({
|
||||
agents: [jokeAgent, weatherAgent],
|
||||
rootAgent: jokeAgent, // Start with the joke agent
|
||||
});
|
||||
|
||||
// Run the workflow
|
||||
const result = await agents.run(
|
||||
"Give me a morning greeting with a joke and the weather in San Francisco"
|
||||
);
|
||||
```
|
||||
|
||||
The workflow will coordinate between agents, allowing them to handle different aspects of the request and hand off tasks when appropriate.
|
||||
|
||||
-2
@@ -3,8 +3,6 @@ title: Using API Route
|
||||
description: Chat interface for your LlamaIndexTS application using API Route
|
||||
---
|
||||
import { ChatDemo } from '../../../../../components/demo/chat/api/demo';
|
||||
import "@llamaindex/chat-ui/styles/code.css";
|
||||
import "@llamaindex/chat-ui/styles/katex.css";
|
||||
|
||||
Using [chat-ui](https://github.com/run-llama/chat-ui), it's easy to add a chat interface to your LlamaIndexTS application.
|
||||
You just need to create an API route that provides an `api/chat` endpoint and a chat component to consume the API.
|
||||
@@ -0,0 +1,22 @@
|
||||
---
|
||||
title: Install @llamaindex/chat
|
||||
description: Chat interface for your LlamaIndexTS application
|
||||
---
|
||||
|
||||
## Quick Start
|
||||
|
||||
You can quickly add a chatbot to your project by using Shadcn CLI command:
|
||||
|
||||
```sh
|
||||
npx shadcn@latest add https://ui.llamaindex.ai/r/chat.json
|
||||
```
|
||||
|
||||
## Manual Installation
|
||||
|
||||
To install the package, run the following command in your project directory:
|
||||
|
||||
```sh
|
||||
npm install @llamaindex/chat-ui
|
||||
```
|
||||
|
||||
For more information, check out the [github.comrun-llama/chat-ui](https://github.com/run-llama/chat-ui)
|
||||
+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": ["chat", "rsc"]
|
||||
"pages": ["install", "chat", "rsc"]
|
||||
}
|
||||
-2
@@ -3,8 +3,6 @@ title: Using Next.js RSC
|
||||
description: Chat interface for your LlamaIndexTS application using Next.js RSC
|
||||
---
|
||||
import { ChatDemoRSC } from '../../../../../components/demo/chat/rsc/demo';
|
||||
import "@llamaindex/chat-ui/styles/code.css";
|
||||
import "@llamaindex/chat-ui/styles/katex.css";
|
||||
|
||||
Using [chat-ui](https://github.com/run-llama/chat-ui), it's easy to add a chat interface to your LlamaIndexTS application using [Next.js RSC](https://nextjs.org/docs/app/building-your-application/rendering/server-components) and [Vercel AI RSC](https://sdk.vercel.ai/docs/ai-sdk-rsc/overview).
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Embedding
|
||||
|
||||
The embedding model in LlamaIndex is responsible for creating numerical representations of text. By default, LlamaIndex will use the `text-embedding-ada-002` model from OpenAI.
|
||||
|
||||
This can be explicitly updated through `Settings`
|
||||
This can be explicitly updated through `Settings.embedModel`.
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -35,7 +35,7 @@ Settings.embedModel = new OpenAIEmbedding({
|
||||
|
||||
## Local Embedding
|
||||
|
||||
For local embeddings, you can use the [HuggingFace](/docs/llamaindex/modules/embeddings/available_embeddings/huggingface) embedding model.
|
||||
For local embeddings, you can use the [HuggingFace](/docs/llamaindex/modules/embeddings/huggingface) embedding model.
|
||||
|
||||
## Local Ollama Embeddings With Remote Host
|
||||
|
||||
|
||||
+3
-2
@@ -2,10 +2,11 @@
|
||||
title: Jina AI
|
||||
---
|
||||
|
||||
To use Jina AI embeddings, you need to import `JinaAIEmbedding` from `llamaindex`.
|
||||
To use Jina AI embeddings, you need to import `JinaAIEmbedding` from `@llamaindex/jinaai`.
|
||||
|
||||
```ts
|
||||
import { JinaAIEmbedding, Settings } from "llamaindex";
|
||||
import { Settings } from "llamaindex";
|
||||
import { JinaAIEmbedding } from "@llamaindex/jinaai";
|
||||
|
||||
Settings.embedModel = new JinaAIEmbedding();
|
||||
|
||||
+3
-2
@@ -2,10 +2,11 @@
|
||||
title: Together
|
||||
---
|
||||
|
||||
To use together embeddings, you need to import `TogetherEmbedding` from `llamaindex`.
|
||||
To use together embeddings, you need to import `TogetherEmbedding` from `@llamaindex/together`.
|
||||
|
||||
```ts
|
||||
import { TogetherEmbedding, Settings } from "llamaindex";
|
||||
import { Settings } from "llamaindex";
|
||||
import { TogetherEmbedding } from "@llamaindex/together";
|
||||
|
||||
Settings.embedModel = new TogetherEmbedding({
|
||||
apiKey: "<YOUR_API_KEY>",
|
||||
+17
-28
@@ -127,26 +127,21 @@ async function main() {
|
||||
```ts
|
||||
import { BEDROCK_MODELS, Bedrock } from "@llamaindex/community";
|
||||
import { FunctionTool, LLMAgent } from "llamaindex";
|
||||
import { z } from "zod";
|
||||
|
||||
const sumNumbers = FunctionTool.from(
|
||||
({ a, b }: { a: number; b: number }) => `${a + b}`,
|
||||
{
|
||||
name: "sumNumbers",
|
||||
description: "Use this function to sum two numbers",
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
a: {
|
||||
type: "number",
|
||||
description: "The first number",
|
||||
},
|
||||
b: {
|
||||
type: "number",
|
||||
description: "The second number",
|
||||
},
|
||||
},
|
||||
required: ["a", "b"],
|
||||
},
|
||||
parameters: z.object({
|
||||
a: z.number({
|
||||
description: "The first number",
|
||||
}),
|
||||
b: z.number({
|
||||
description: "The second number",
|
||||
}),
|
||||
}),
|
||||
},
|
||||
);
|
||||
|
||||
@@ -155,20 +150,14 @@ const divideNumbers = FunctionTool.from(
|
||||
{
|
||||
name: "divideNumbers",
|
||||
description: "Use this function to divide two numbers",
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
a: {
|
||||
type: "number",
|
||||
description: "The dividend a to divide",
|
||||
},
|
||||
b: {
|
||||
type: "number",
|
||||
description: "The divisor b to divide by",
|
||||
},
|
||||
},
|
||||
required: ["a", "b"],
|
||||
},
|
||||
parameters: z.object({
|
||||
a: z.number({
|
||||
description: "The dividend a to divide",
|
||||
}),
|
||||
b: z.number({
|
||||
description: "The divisor b to divide by",
|
||||
}),
|
||||
}),
|
||||
},
|
||||
);
|
||||
|
||||
+4
-2
@@ -7,7 +7,8 @@ title: DeepSeek LLM
|
||||
## Usage
|
||||
|
||||
```ts
|
||||
import { DeepSeekLLM, Settings } from "llamaindex";
|
||||
import { Settings } from "llamaindex";
|
||||
import { DeepSeekLLM } from "@llamaindex/deepseek";
|
||||
|
||||
Settings.llm = new DeepSeekLLM({
|
||||
apiKey: "<YOUR_API_KEY>",
|
||||
@@ -18,7 +19,8 @@ Settings.llm = new DeepSeekLLM({
|
||||
## Example
|
||||
|
||||
```ts
|
||||
import { DeepSeekLLM, Document, VectorStoreIndex, Settings } from "llamaindex";
|
||||
import { Document, VectorStoreIndex, Settings } from "llamaindex";
|
||||
import { DeepSeekLLM } from "@llamaindex/deepseek";
|
||||
|
||||
const deepseekLlm = new DeepSeekLLM({
|
||||
apiKey: "<YOUR_API_KEY>",
|
||||
+2
-1
@@ -7,7 +7,8 @@ title: Fireworks LLM
|
||||
## Usage
|
||||
|
||||
```ts
|
||||
import { FireworksLLM, Settings } from "llamaindex";
|
||||
import { Settings } from "llamaindex";
|
||||
import { FireworksLLM } from "@llamaindex/fireworks";
|
||||
|
||||
Settings.llm = new FireworksLLM({
|
||||
apiKey: "<YOUR_API_KEY>",
|
||||
+14
@@ -31,6 +31,20 @@ Settings.llm = new Gemini({
|
||||
});
|
||||
```
|
||||
|
||||
## Usage with Proxy
|
||||
|
||||
```ts
|
||||
import { Gemini, GEMINI_MODEL } from "@llamaindex/google";
|
||||
import { Settings } from "llamaindex";
|
||||
|
||||
Settings.llm = new Gemini({
|
||||
model: GEMINI_MODEL.GEMINI_PRO,
|
||||
requestOptions: {
|
||||
baseUrl: <YOUR_PROXY_URL> // optional, but useful for custom endpoints
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Usage with Vertex AI
|
||||
|
||||
To use Gemini via Vertex AI you can use `GeminiVertexSession`.
|
||||
+1
-1
@@ -3,7 +3,7 @@ title: Groq
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!../../../../../../../../../examples/groq.ts";
|
||||
import CodeSource from "!raw-loader!../../../../../../../../examples/groq.ts";
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -45,7 +45,7 @@ export AZURE_OPENAI_DEPLOYMENT="gpt-4" # or some other deployment name
|
||||
|
||||
## Local LLM
|
||||
|
||||
For local LLMs, currently we recommend the use of [Ollama](/docs/llamaindex/modules/llms/available_llms/ollama) LLM.
|
||||
For local LLMs, currently we recommend the use of [Ollama](/docs/llamaindex/modules/llms/ollama) LLM.
|
||||
|
||||
## Available LLMs
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user