mirror of
https://github.com/run-llama/LlamaIndexTS.git
synced 2026-07-19 18:43:34 -04:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 leehuwuj
|
ffe8919cde |
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@llamaindex/core": patch
|
||||
"@llamaindex/workflow": patch
|
||||
---
|
||||
|
||||
feat: Support AgentWorkflow
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@llamaindex/voyage-ai": patch
|
||||
---
|
||||
|
||||
Fixing tsconfig for voyage-ai provider
|
||||
+13
-46
@@ -14,14 +14,13 @@ There are some important folders in the repository:
|
||||
all JS runtime environments.
|
||||
- `env`: The environment package of LlamaIndex.TS, which contains the environment-specific classes and interfaces. It
|
||||
includes compatibility layers for Node.js, Deno, Vercel Edge Runtime, Cloudflare Workers...
|
||||
- `providers/*`: The providers package of LlamaIndex.TS, which contains the providers for LLM and other services.
|
||||
- `apps/*`: The applications based on LlamaIndex.TS.
|
||||
- `next`: Our documentation website based on Next.js.
|
||||
- `examples`: The code examples of LlamaIndex.TS using Node.js.
|
||||
|
||||
## Getting Started
|
||||
|
||||
Make sure you have Node.js LTS (Long-term Support) installed. You can check your Node.js version by running:
|
||||
Make sure you have Node.js LIS (Long-term Support) installed. You can check your Node.js version by running:
|
||||
|
||||
```shell
|
||||
node -v
|
||||
@@ -31,7 +30,7 @@ node -v
|
||||
### Use pnpm
|
||||
|
||||
```shell
|
||||
npm install -g pnpm
|
||||
corepack enable
|
||||
```
|
||||
|
||||
### Install dependencies
|
||||
@@ -42,65 +41,33 @@ 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
|
||||
pnpm build
|
||||
# Build all packages
|
||||
pnpx turbo build --filter "./packages/*"
|
||||
|
||||
# Or if you have turbo installed, you can run:
|
||||
turbo build --filter "./packages/*"
|
||||
```
|
||||
|
||||
### Run tests
|
||||
|
||||
#### Unit tests
|
||||
|
||||
After build, to run all unit tests, call:
|
||||
|
||||
```shell
|
||||
pnpm test
|
||||
```
|
||||
|
||||
Unit tests are located in the `tests` folder of each package. They are using their own package (e.g. `@llamaindex/core-tests` for `@llamaindex/core`). The tests are importing the package under test and the test package is not published.
|
||||
|
||||
#### E2E tests
|
||||
|
||||
To run all E2E tests, call:
|
||||
|
||||
```shell
|
||||
pnpm e2e
|
||||
```
|
||||
|
||||
All E2E tests are in the `e2e` folder.
|
||||
|
||||
### Docs
|
||||
|
||||
See the [docs](./apps/next/README.md) for more information.
|
||||
|
||||
## Adding a new package
|
||||
|
||||
Please follow these steps to add a new package:
|
||||
|
||||
1. Only add new packages to the `packages/providers` folder.
|
||||
2. Use the `package.json` and `tsconfig.json` of an existing packages as template.
|
||||
3. Reference your new package in the root `tsconfig.json` file
|
||||
4. Add your package to the `examples/package.json` file if you add a new example.
|
||||
|
||||
## Before sending a PR
|
||||
|
||||
Before sending a PR, make sure of the following:
|
||||
|
||||
1. Tests are all running and you added meaningful tests for your change.
|
||||
2. If you have a new feature, document it in the `apps/next` docs folder.
|
||||
3. If you have a new feature, add a new example in the `examples` folder.
|
||||
4. You have a descriptive changeset for each PR:
|
||||
|
||||
### Changesets
|
||||
## Changeset
|
||||
|
||||
We use [changesets](https://github.com/changesets/changesets) for managing versions and changelogs. To create a new
|
||||
changeset, run in the root folder:
|
||||
|
||||
```shell
|
||||
```
|
||||
pnpm changeset
|
||||
```
|
||||
|
||||
Please send a descriptive changeset for each PR.
|
||||
|
||||
## Publishing (maintainers only)
|
||||
|
||||
The [Release Github Action](.github/workflows/release.yml) is automatically generating and updating a
|
||||
|
||||
@@ -1,82 +1,5 @@
|
||||
# @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
|
||||
|
||||
+2
-1
@@ -6,7 +6,8 @@ This is a Next.js application generated with
|
||||
Run development server:
|
||||
|
||||
```bash
|
||||
pnpm run dev
|
||||
turbo run dev
|
||||
# turbo will build all required packages before running the dev server
|
||||
```
|
||||
|
||||
## Learn More
|
||||
|
||||
@@ -5,15 +5,8 @@ const withMDX = createMDX();
|
||||
/** @type {import('next').NextConfig} */
|
||||
const config = {
|
||||
reactStrictMode: true,
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
},
|
||||
transpilePackages: ["monaco-editor"],
|
||||
serverExternalPackages: [
|
||||
"@huggingface/transformers",
|
||||
"twoslash",
|
||||
"typescript",
|
||||
],
|
||||
serverExternalPackages: ["@huggingface/transformers"],
|
||||
webpack: (config, { isServer }) => {
|
||||
if (Array.isArray(config.target) && config.target.includes("web")) {
|
||||
config.target = ["web", "es2020"];
|
||||
|
||||
+25
-26
@@ -1,19 +1,18 @@
|
||||
{
|
||||
"name": "@llamaindex/doc",
|
||||
"version": "0.1.11",
|
||||
"version": "0.1.5",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"postinstall": "fumadocs-mdx",
|
||||
"prebuild": "pnpm run build:docs",
|
||||
"build": "next build",
|
||||
"build": "pnpm run build:docs && next build",
|
||||
"dev": "next dev",
|
||||
"start": "next start",
|
||||
"postbuild": "tsx scripts/post-build.mts",
|
||||
"build:docs": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" typedoc && tsx scripts/generate-docs.mts"
|
||||
"postdev": "fumadocs-mdx",
|
||||
"postbuild": "fumadocs-mdx && tsx scripts/post-build.mts",
|
||||
"build:docs": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" typedoc && node ./scripts/generate-docs.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@icons-pack/react-simple-icons": "^10.1.0",
|
||||
"@llamaindex/chat-ui": "0.2.0",
|
||||
"@llamaindex/chat-ui": "0.0.9",
|
||||
"@llamaindex/cloud": "workspace:*",
|
||||
"@llamaindex/core": "workspace:*",
|
||||
"@llamaindex/node-parser": "workspace:*",
|
||||
@@ -28,35 +27,36 @@
|
||||
"@radix-ui/react-slider": "^1.2.1",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@radix-ui/react-tooltip": "^1.1.4",
|
||||
"@scalar/api-client-react": "^1.1.25",
|
||||
"@vercel/functions": "^1.5.0",
|
||||
"@scalar/api-client-react": "^1.1.25",
|
||||
"ai": "^3.4.33",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "2.1.1",
|
||||
"foxact": "^0.2.41",
|
||||
"framer-motion": "^11.11.17",
|
||||
"fumadocs-core": "^15.0.15",
|
||||
"fumadocs-docgen": "^2.0.0",
|
||||
"fumadocs-mdx": "^11.5.6",
|
||||
"fumadocs-openapi": "^6.3.0",
|
||||
"fumadocs-twoslash": "^3.1.0",
|
||||
"fumadocs-typescript": "^3.1.0",
|
||||
"fumadocs-ui": "^15.0.15",
|
||||
"fumadocs-core": "^14.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",
|
||||
"hast-util-to-jsx-runtime": "^2.3.2",
|
||||
"llamaindex": "workspace:*",
|
||||
"lucide-react": "^0.460.0",
|
||||
"next": "^15.2.1",
|
||||
"next": "15.1.7",
|
||||
"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": "^3.1.0",
|
||||
"shiki-magic-move": "^1.0.1",
|
||||
"shiki": "^2.3.2",
|
||||
"shiki-magic-move": "^1.0.0",
|
||||
"swr": "^2.2.5",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
@@ -67,28 +67,27 @@
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@next/env": "^15.2.1",
|
||||
"@tailwindcss/postcss": "^4.0.9",
|
||||
"@next/env": "^15.0.3",
|
||||
"@types/mdx": "^2.0.13",
|
||||
"@types/node": "22.9.0",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"cross-env": "^7.0.3",
|
||||
"fast-glob": "^3.3.2",
|
||||
"gray-matter": "^4.0.3",
|
||||
"monaco-editor-webpack-plugin": "^7.1.0",
|
||||
"postcss": "^8.5.3",
|
||||
"postcss": "^8.4.49",
|
||||
"raw-loader": "^4.0.2",
|
||||
"remark": "^15.0.1",
|
||||
"remark-gfm": "^4.0.0",
|
||||
"remark-mdx": "^3.1.0",
|
||||
"remark-stringify": "^11.0.0",
|
||||
"tailwindcss": "^4.0.9",
|
||||
"tsx": "^4.19.3",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"tsx": "^4.19.2",
|
||||
"typedoc": "0.27.4",
|
||||
"typedoc-plugin-markdown": "^4.3.1",
|
||||
"typedoc-plugin-merge-modules": "^6.1.0",
|
||||
"typescript": "^5.7.3"
|
||||
"typescript": "^5.7.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@@ -1,5 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
@@ -1,7 +1,8 @@
|
||||
import { generateFiles as openapiGenerateFiles } from "fumadocs-openapi";
|
||||
import { generateFiles as typescriptGenerateFiles } from "fumadocs-typescript";
|
||||
import * as OpenAPI from "fumadocs-openapi";
|
||||
import { generateFiles } from "fumadocs-typescript";
|
||||
import fs from "node:fs";
|
||||
import * as path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { rimrafSync } from "rimraf";
|
||||
|
||||
const out = "./src/content/docs/cloud/api";
|
||||
@@ -14,23 +15,28 @@ rimrafSync(out, {
|
||||
},
|
||||
});
|
||||
|
||||
void openapiGenerateFiles({
|
||||
input: ["../../packages/cloud/openapi.json"],
|
||||
output: "./src/content/docs/cloud/api",
|
||||
void OpenAPI.generateFiles({
|
||||
input: [
|
||||
fileURLToPath(
|
||||
new URL("../../../packages/cloud/openapi.json", import.meta.url),
|
||||
),
|
||||
],
|
||||
output: out,
|
||||
groupBy: "tag",
|
||||
});
|
||||
|
||||
void typescriptGenerateFiles({
|
||||
void generateFiles({
|
||||
input: ["./src/content/docs/api/**/*.mdx"],
|
||||
output: (file) => path.resolve(path.dirname(file), path.basename(file)),
|
||||
transformOutput,
|
||||
});
|
||||
|
||||
function transformOutput(filePath: string, content: string) {
|
||||
function transformOutput(filePath, content) {
|
||||
const fileName = path.basename(filePath);
|
||||
let title = fileName.split(".")[0];
|
||||
let pageContent = content;
|
||||
if (title === "index") title = "LlamaIndex API Reference";
|
||||
return `---\ntitle: ${title}\n---\n\n${transformAbsoluteUrl(content, filePath)}`;
|
||||
return `---\ntitle: ${title}\n---\n\n${transformAbsoluteUrl(pageContent, filePath)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -40,17 +46,20 @@ function transformOutput(filePath: string, content: string) {
|
||||
* [text](BaseVectorStore.mdx#constructors) -> [text](/docs/api/classes/BaseVectorStore#constructors)
|
||||
* [text](TaskStep.mdx) -> [text](/docs/api/type-aliases/TaskStep)
|
||||
*/
|
||||
function transformAbsoluteUrl(content: string, filePath: string) {
|
||||
function transformAbsoluteUrl(content, filePath) {
|
||||
const group = path.dirname(filePath).split(path.sep).pop();
|
||||
return content.replace(/\]\(([^)]+)\.mdx([^)]*)\)/g, (_, slug, anchor) => {
|
||||
const slugParts = slug.split("/");
|
||||
const fileName = slugParts[slugParts.length - 1];
|
||||
const fileGroup = slugParts[slugParts.length - 2] ?? group;
|
||||
const result = ["/docs/api", fileGroup, fileName, anchor]
|
||||
.filter(Boolean)
|
||||
.join("/");
|
||||
return `](${result})`;
|
||||
});
|
||||
return content.replace(
|
||||
/\]\(([^)]+)\.mdx([^)]*)\)/g,
|
||||
(match, slug, anchor) => {
|
||||
const slugParts = slug.split("/");
|
||||
const fileName = slugParts[slugParts.length - 1];
|
||||
const fileGroup = slugParts[slugParts.length - 2] ?? group;
|
||||
const result = ["/docs/api", fileGroup, fileName, anchor]
|
||||
.filter(Boolean)
|
||||
.join("/");
|
||||
return `](${result})`;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// append meta.json for API page
|
||||
@@ -4,8 +4,4 @@ import { updateLlamaCloud } from "./update-llamacloud.mjs";
|
||||
|
||||
env.loadEnvConfig(process.cwd());
|
||||
|
||||
if (process.env.VERCEL_ENV === "production") {
|
||||
updateLlamaCloud().catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
await updateLlamaCloud();
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
import { upsertBatchPipelineDocumentsApiV1PipelinesPipelineIdDocumentsPut } from "@llamaindex/cloud/api";
|
||||
import fg from "fast-glob";
|
||||
import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
|
||||
import { remarkAutoTypeTable } from "fumadocs-typescript";
|
||||
import {
|
||||
fileGenerator,
|
||||
remarkDocGen,
|
||||
remarkInstall,
|
||||
typescriptGenerator,
|
||||
} from "fumadocs-docgen";
|
||||
import matter from "gray-matter";
|
||||
import * as fs from "node:fs/promises";
|
||||
import path, { relative } from "node:path";
|
||||
@@ -17,8 +21,7 @@ async function processContent(content: string): Promise<string> {
|
||||
const file = await remark()
|
||||
.use(remarkMdx)
|
||||
.use(remarkGfm)
|
||||
.use(remarkAutoTypeTable)
|
||||
.use(remarkDocGen, { generators: [fileGenerator()] })
|
||||
.use(remarkDocGen, { generators: [typescriptGenerator(), fileGenerator()] })
|
||||
.use(remarkInstall, { persist: { id: "package-manager" } })
|
||||
.use(remarkStringify)
|
||||
.process(content);
|
||||
|
||||
@@ -2,11 +2,10 @@ import { rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
|
||||
import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
|
||||
import { defineConfig, defineDocs } from "fumadocs-mdx/config";
|
||||
import { transformerTwoslash } from "fumadocs-twoslash";
|
||||
import { createFileSystemTypesCache } from "fumadocs-twoslash/cache-fs";
|
||||
import rehypeKatex from "rehype-katex";
|
||||
import remarkMath from "remark-math";
|
||||
|
||||
export const docs = defineDocs({
|
||||
export const { docs, meta } = defineDocs({
|
||||
dir: "./src/content/docs",
|
||||
});
|
||||
|
||||
@@ -21,11 +20,7 @@ export default defineConfig({
|
||||
},
|
||||
transformers: [
|
||||
...(rehypeCodeDefaultOptions.transformers ?? []),
|
||||
transformerTwoslash({
|
||||
typesCache: createFileSystemTypesCache({
|
||||
dir: ".next/cache/twoslash",
|
||||
}),
|
||||
}),
|
||||
transformerTwoslash(),
|
||||
{
|
||||
name: "transformers:remove-notation-escape",
|
||||
code(hast) {
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
} from "@/components/infinite-providers";
|
||||
import { MagicMove } from "@/components/magic-move";
|
||||
import { NpmInstall } from "@/components/npm-install";
|
||||
import { Supports } from "@/components/supports";
|
||||
import { TextEffect } from "@/components/text-effect";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { LEGACY_DOCUMENT_URL } from "@/lib/const";
|
||||
@@ -24,18 +24,18 @@ import { Suspense } from "react";
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-12">
|
||||
<h1 className="mb-4 text-center text-4xl font-bold md:text-6xl">
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-center mb-4">
|
||||
Build context-augmented web apps using
|
||||
<br /> <span className="text-blue-500">LlamaIndex.TS</span>
|
||||
</h1>
|
||||
<p className="text-fd-muted-foreground mb-12 text-center text-xl">
|
||||
<p className="text-xl text-center text-fd-muted-foreground mb-12 ">
|
||||
LlamaIndex.TS is the JS/TS version of{" "}
|
||||
<a href="https://llamaindex.ai">LlamaIndex</a>, the framework for
|
||||
building agentic generative AI applications connected to your data.
|
||||
</p>
|
||||
<div className="text-fd-muted-foreground mb-12 text-center text-lg">
|
||||
<div className="text-center text-lg text-fd-muted-foreground mb-12">
|
||||
<span>Designed for building web applications in </span>
|
||||
<Supports />
|
||||
<TextEffect />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
@@ -60,7 +60,7 @@ export default function HomePage() {
|
||||
icon={Footprints}
|
||||
subheading="Progressive"
|
||||
heading="From the simplest to the most complex"
|
||||
description="LlamaIndex.TS is designed to be simple to get started, but powerful enough to build complex, agentic AI applications using multi-agents."
|
||||
description="LlamaIndex.TS is designed to be simple to get started, but powerful enough to build complex, agentic AI applications."
|
||||
>
|
||||
<Suspense
|
||||
fallback={
|
||||
@@ -76,48 +76,44 @@ export default function HomePage() {
|
||||
>
|
||||
<MagicMove
|
||||
code={[
|
||||
`import { openai } from "@llamaindex/openai";
|
||||
`import { OpenAI } from "@llamaindex/openai";
|
||||
|
||||
const llm = openai();
|
||||
const llm = new OpenAI();
|
||||
const response = await llm.complete({ prompt: "How are you?" });`,
|
||||
`import { openai } from "@llamaindex/openai";
|
||||
`import { OpenAI } from "@llamaindex/openai";
|
||||
|
||||
const llm = openai();
|
||||
const llm = new OpenAI();
|
||||
const response = await llm.chat({
|
||||
messages: [{ content: "Tell me a joke.", role: "user" }],
|
||||
});`,
|
||||
`import { agent } from "llamaindex";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
`import { ChatMemoryBuffer } from "llamaindex";
|
||||
import { OpenAI } from "@llamaindex/openai";
|
||||
|
||||
const analyseAgent = agent({
|
||||
llm: openai({ model: "gpt-4o" }),
|
||||
tools: [analyseTools],
|
||||
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]
|
||||
systemPrompt,
|
||||
});
|
||||
const response = await analyseAgent.run(\`Analyse the given data:
|
||||
\${data}\`);`,
|
||||
`import { agent, multiAgent } from "llamaindex";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
|
||||
const analyseAgent = agent({
|
||||
name: "AnalyseAgent",
|
||||
llm: openai({ model: "gpt-4o" }),
|
||||
tools: [analyseTools],
|
||||
});
|
||||
const reporterAgent = agent({
|
||||
name: "ReporterAgent",
|
||||
llm: openai({ model: "gpt-4o" }),
|
||||
tools: [reporterTools],
|
||||
canHandoffTo: [analyseAgent],
|
||||
});
|
||||
|
||||
const agents = multiAgent({
|
||||
agents: [analyseAgent, reporterAgent],
|
||||
rootAgent: reporterAgent,
|
||||
});
|
||||
|
||||
const response = await agents.run(\`Analyse the given data:
|
||||
\${data}\`);`,
|
||||
const buffer = new ChatMemoryBuffer({
|
||||
tokenLimit: 128_000,
|
||||
})
|
||||
buffer.put({ content: "Analysis the data based on the given data.", role: "user" })
|
||||
buffer.put({ content: \`\${data}\`, role: "user" })
|
||||
const response = await agent.chat({
|
||||
message: buffer.getMessages(),
|
||||
});`,
|
||||
]}
|
||||
/>
|
||||
</Suspense>
|
||||
@@ -129,20 +125,19 @@ const response = await agents.run(\`Analyse the given data:
|
||||
description="Truly powerful retrieval-augmented generation applications use agentic techniques, and LlamaIndex.TS makes it easy to build them."
|
||||
>
|
||||
<CodeBlock
|
||||
code={`import { agent, SimpleDirectoryReader, VectorStoreIndex } from "llamaindex";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
code={`import { FunctionTool } from "llamaindex";
|
||||
import { OpenAIAgent } from "@llamaindex/openai";
|
||||
|
||||
// load documents from current directoy into an index
|
||||
const reader = new SimpleDirectoryReader();
|
||||
const documents = await reader.loadData(currentDir);
|
||||
const index = await VectorStoreIndex.fromDocuments(documents);
|
||||
const interpreterTool = FunctionTool.from(...);
|
||||
const systemPrompt = \`...\`;
|
||||
|
||||
const myAgent = agent({
|
||||
llm: openai({ model: "gpt-4o" }),
|
||||
tools: [index.queryTool()],
|
||||
const agent = new OpenAIAgent({
|
||||
llm,
|
||||
tools: [interpreterTool],
|
||||
systemPrompt,
|
||||
});
|
||||
|
||||
await myAgent.run('...');`}
|
||||
await agent.chat('...');`}
|
||||
lang="ts"
|
||||
/>
|
||||
</Feature>
|
||||
@@ -154,13 +149,13 @@ await myAgent.run('...');`}
|
||||
>
|
||||
<div className="mt-8 flex flex-col gap-8">
|
||||
<div>
|
||||
<h3 className="text-fd-muted-foreground mb-2 text-lg font-semibold">
|
||||
<h3 className="text-lg font-semibold text-fd-muted-foreground mb-2">
|
||||
LLMs
|
||||
</h3>
|
||||
<InfiniteLLMProviders />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-fd-muted-foreground mb-2 text-lg font-semibold">
|
||||
<h3 className="text-lg font-semibold text-fd-muted-foreground mb-2">
|
||||
Vector Stores
|
||||
</h3>
|
||||
<InfiniteVectorStoreProviders />
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import { LEGACY_DOCUMENT_URL } from "@/lib/const";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default async function Page(props: {
|
||||
params: Promise<{
|
||||
any: string[];
|
||||
}>;
|
||||
}) {
|
||||
const path = await props.params.then(({ any }) => any.join("/"));
|
||||
return redirect(new URL(path, LEGACY_DOCUMENT_URL).toString());
|
||||
}
|
||||
@@ -13,8 +13,6 @@ import { notFound } from "next/navigation";
|
||||
|
||||
const { AutoTypeTable } = createTypeTable();
|
||||
|
||||
export const revalidate = false;
|
||||
|
||||
export default async function Page(props: {
|
||||
params: Promise<{ slug?: string[] }>;
|
||||
}) {
|
||||
@@ -28,10 +26,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}`,
|
||||
}}
|
||||
>
|
||||
@@ -66,7 +64,6 @@ export async function generateMetadata(props: {
|
||||
|
||||
return createMetadata(
|
||||
metadataImage.withImage(page.slugs, {
|
||||
metadataBase: new URL("https://ts.llamaindex.ai"),
|
||||
title: page.data.title,
|
||||
description: page.data.description,
|
||||
openGraph: {
|
||||
|
||||
@@ -22,7 +22,7 @@ export default function Layout({ children }: { children: ReactNode }) {
|
||||
variant: "secondary",
|
||||
size: "xs",
|
||||
className:
|
||||
"text-fd-muted-foreground ms-2 gap-1.5 rounded-full px-2 md:flex-1",
|
||||
"md:flex-1 px-2 ms-2 gap-1.5 text-fd-muted-foreground rounded-full",
|
||||
}),
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -1,13 +1,6 @@
|
||||
@import "tailwindcss";
|
||||
@import "fumadocs-ui/css/neutral.css";
|
||||
@import "fumadocs-ui/css/preset.css";
|
||||
@import "../../node_modules/fumadocs-twoslash/dist/twoslash.css";
|
||||
@plugin "tailwindcss-animate";
|
||||
@source '../../node_modules/fumadocs-ui/dist/**/*.js';
|
||||
@source "../../node_modules/fumadocs-openapi/dist/**/*.js",
|
||||
@source '../../node_modules/@llamaindex/chat-ui/dist/**/*.js';
|
||||
@config "../../tailwind.config.mjs";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@layer base {
|
||||
:root {
|
||||
--page-max-width: 1840px;
|
||||
@@ -53,7 +46,6 @@
|
||||
--chart-5: 27 87% 67%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-neutral-000: #0e0c15;
|
||||
--color-neutral-100: #252134;
|
||||
@@ -95,3 +87,40 @@
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
/*
|
||||
* Override default styles for Markdown
|
||||
*/
|
||||
.prose
|
||||
:where(blockquote):not(
|
||||
:where([class~="not-prose"], [class~="not-prose"] *)
|
||||
) {
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
||||
.prose
|
||||
:where(blockquote p:first-of-type):not(
|
||||
:where([class~="not-prose"], [class~="not-prose"] *)
|
||||
):before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.prose
|
||||
:where(blockquote p:first-of-type):not(
|
||||
:where([class~="not-prose"], [class~="not-prose"] *)
|
||||
):after {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.prose
|
||||
:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
@apply text-blue-600 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@ export default function Layout({ children }: { children: ReactNode }) {
|
||||
href="/favicon-16x16.png"
|
||||
/>
|
||||
</head>
|
||||
<body className="flex min-h-screen flex-col">
|
||||
<body className="flex flex-col min-h-screen">
|
||||
<TooltipProvider>
|
||||
<AIProvider>
|
||||
<RootProvider>{children}</RootProvider>
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
import fg from "fast-glob";
|
||||
import { fileGenerator, remarkDocGen, remarkInstall } from "fumadocs-docgen";
|
||||
import { remarkInclude } from "fumadocs-mdx/config";
|
||||
import { remarkAutoTypeTable } from "fumadocs-typescript";
|
||||
import matter from "gray-matter";
|
||||
import * as fs from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { remark } from "remark";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import remarkMdx from "remark-mdx";
|
||||
import remarkStringify from "remark-stringify";
|
||||
|
||||
export const revalidate = false;
|
||||
|
||||
export async function GET() {
|
||||
const files = await fg([
|
||||
"./src/content/docs/**/*.mdx",
|
||||
// remove generated openapi files
|
||||
"!./src/content/docs/cloud/api/**/*",
|
||||
]);
|
||||
|
||||
const scan = files.map(async (file) => {
|
||||
const fileContent = await fs.readFile(file);
|
||||
const { content, data } = matter(fileContent.toString());
|
||||
|
||||
const dir = path.dirname(file).split(path.sep).at(4);
|
||||
const category = {
|
||||
llamaindex: "LlamaIndexTS Framework",
|
||||
api: "LlamaIndexTS API",
|
||||
cloud: "LlamaCloud Service",
|
||||
}[dir ?? ""];
|
||||
|
||||
const processed = await processContent(file, content);
|
||||
return `file: ${file}
|
||||
# ${category}: ${data.title}
|
||||
|
||||
${data.description}
|
||||
|
||||
${processed}`;
|
||||
});
|
||||
|
||||
const scanned = await Promise.all(scan);
|
||||
|
||||
return new Response(scanned.join("\n\n"));
|
||||
}
|
||||
|
||||
async function processContent(path: string, content: string): Promise<string> {
|
||||
const file = await remark()
|
||||
.use(remarkMdx)
|
||||
.use(remarkInclude)
|
||||
.use(remarkGfm)
|
||||
.use(remarkAutoTypeTable)
|
||||
.use(remarkDocGen, { generators: [fileGenerator()] })
|
||||
.use(remarkInstall, { persist: { id: "package-manager" } })
|
||||
.use(remarkStringify)
|
||||
.process({
|
||||
path,
|
||||
value: content,
|
||||
});
|
||||
|
||||
return String(file);
|
||||
}
|
||||
@@ -45,13 +45,13 @@ export const AITrigger = (props: AITriggerProps) => {
|
||||
<Dialog>
|
||||
<DialogTrigger {...props} />
|
||||
<DialogPortal>
|
||||
<DialogOverlay className="bg-fd-background/50 data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in fixed inset-0 z-50 backdrop-blur-sm" />
|
||||
<DialogOverlay className="fixed inset-0 z-50 bg-fd-background/50 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" />
|
||||
<DialogContent
|
||||
onOpenAutoFocus={(e) => {
|
||||
document.getElementById("nd-ai-input")?.focus();
|
||||
e.preventDefault();
|
||||
}}
|
||||
className="bg-fd-popover text-fd-popover-foreground data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in fixed left-1/2 z-50 my-[5vh] flex max-h-[90dvh] w-[98vw] max-w-[860px] origin-left -translate-x-1/2 flex-col rounded-lg border shadow-lg focus-visible:outline-none"
|
||||
className="fixed left-1/2 z-50 my-[5vh] flex max-h-[90dvh] w-[98vw] max-w-[860px] origin-left -translate-x-1/2 flex-col rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in"
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="sr-only">Search AI</DialogTitle>
|
||||
@@ -67,11 +67,11 @@ export const AITrigger = (props: AITriggerProps) => {
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</DialogHeader>
|
||||
<div className="mt-4 flex-grow overflow-scroll">
|
||||
<div className="overflow-scroll flex-grow mt-4">
|
||||
<ChatList messages={messages} />
|
||||
</div>
|
||||
<form
|
||||
className="space-y-4 px-4 py-2"
|
||||
className="px-4 py-2 space-y-4"
|
||||
action={async () => {
|
||||
const value = inputValue.trim();
|
||||
setInputValue("");
|
||||
@@ -102,7 +102,7 @@ export const AITrigger = (props: AITriggerProps) => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex w-full flex-row items-center gap-2">
|
||||
<div className="flex flex-row w-full items-center gap-2">
|
||||
<Textarea
|
||||
tabIndex={0}
|
||||
placeholder="Ask AI about documentation."
|
||||
|
||||
@@ -1,21 +1,50 @@
|
||||
import { highlight } from "fumadocs-core/highlight";
|
||||
import * as Base from "fumadocs-ui/components/codeblock";
|
||||
import type { BundledLanguage } from "shiki";
|
||||
import { toJsxRuntime, type Jsx } from "hast-util-to-jsx-runtime";
|
||||
import { Fragment } from "react";
|
||||
import { jsx, jsxs } from "react/jsx-runtime";
|
||||
import { codeToHast } from "shiki";
|
||||
|
||||
export interface CodeBlockProps {
|
||||
code: string;
|
||||
wrapper?: Base.CodeBlockProps;
|
||||
lang: BundledLanguage;
|
||||
lang: "bash" | "ts" | "tsx";
|
||||
}
|
||||
|
||||
export async function CodeBlock({ code, lang, wrapper }: CodeBlockProps) {
|
||||
const rendered = await highlight(code, {
|
||||
export async function CodeBlock({
|
||||
code,
|
||||
lang,
|
||||
wrapper,
|
||||
}: CodeBlockProps): Promise<React.ReactElement> {
|
||||
const hast = await codeToHast(code, {
|
||||
lang,
|
||||
defaultColor: false,
|
||||
themes: {
|
||||
light: "github-light",
|
||||
dark: "vesper",
|
||||
},
|
||||
transformers: [
|
||||
{
|
||||
name: "rehype-code:pre-process",
|
||||
line(node) {
|
||||
if (node.children.length === 0) {
|
||||
// Keep the empty lines when using grid layout
|
||||
node.children.push({
|
||||
type: "text",
|
||||
value: " ",
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const rendered = toJsxRuntime(hast, {
|
||||
jsx: jsx as Jsx,
|
||||
jsxs: jsxs as Jsx,
|
||||
Fragment,
|
||||
development: false,
|
||||
components: {
|
||||
// @ts-expect-error -- JSX component
|
||||
pre: Base.Pre,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -10,7 +10,7 @@ export function Contributing(): ReactElement {
|
||||
<h2 className="mb-4 text-xl font-semibold sm:text-2xl">
|
||||
Made possible by you <Heart className="inline align-middle" />
|
||||
</h2>
|
||||
<p className="text-fd-muted-foreground mb-4">
|
||||
<p className="mb-4 text-fd-muted-foreground">
|
||||
LlamaIndex.TS is powered by the open source community.
|
||||
</p>
|
||||
<div className="mb-8 flex flex-row items-center gap-2">
|
||||
|
||||
@@ -33,7 +33,7 @@ export default async function ContributorCounter({
|
||||
href={`https://github.com/${contributor.login}`}
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
className="border-fd-background bg-fd-background size-10 overflow-hidden rounded-full border-4 md:-mr-4 md:size-12"
|
||||
className="size-10 overflow-hidden rounded-full border-4 border-fd-background bg-fd-background md:-mr-4 md:size-12"
|
||||
style={{
|
||||
zIndex: topContributors.length - i,
|
||||
}}
|
||||
@@ -48,7 +48,7 @@ export default async function ContributorCounter({
|
||||
</a>
|
||||
))}
|
||||
{displayCount < contributors.length ? (
|
||||
<div className="bg-fd-secondary size-12 content-center rounded-full text-center">
|
||||
<div className="size-12 content-center rounded-full bg-fd-secondary text-center">
|
||||
+{contributors.length - displayCount}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -83,7 +83,7 @@ export function CreateAppAnimation(): React.ReactElement {
|
||||
}}
|
||||
>
|
||||
{tick > timeWindowOpen && (
|
||||
<LaunchAppWindow className="animate-in fade-in slide-in-from-top-10 absolute bottom-5 right-4 z-10" />
|
||||
<LaunchAppWindow className="absolute bottom-5 right-4 z-10 animate-in fade-in slide-in-from-top-10" />
|
||||
)}
|
||||
<pre className="overflow-hidden rounded-xl border text-xs">
|
||||
<div className="flex flex-row items-center gap-2 border-b px-4 py-2">
|
||||
@@ -92,7 +92,7 @@ export function CreateAppAnimation(): React.ReactElement {
|
||||
<div className="grow" />
|
||||
<div className="size-2 rounded-full bg-red-400" />
|
||||
</div>
|
||||
<div className="from-fd-secondary min-h-[200px] bg-gradient-to-b [mask-image:linear-gradient(to_bottom,white,transparent)]">
|
||||
<div className="min-h-[200px] bg-gradient-to-b from-fd-secondary [mask-image:linear-gradient(to_bottom,white,transparent)]">
|
||||
<code className="grid p-4">{lines}</code>
|
||||
</div>
|
||||
</pre>
|
||||
@@ -103,7 +103,7 @@ export function CreateAppAnimation(): React.ReactElement {
|
||||
function UserMessage({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="group relative flex items-start">
|
||||
<div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
|
||||
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-background">
|
||||
<IconUser />
|
||||
</div>
|
||||
<div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
|
||||
@@ -122,7 +122,7 @@ function BotMessage({
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("group relative flex items-start", className)}>
|
||||
<div className="bg-primary text-primary-foreground flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
|
||||
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground">
|
||||
<IconAI />
|
||||
</div>
|
||||
<div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
|
||||
@@ -164,7 +164,7 @@ export function ChatExample() {
|
||||
|
||||
return (
|
||||
<div className="max-w-64">
|
||||
<div className="flex flex-col gap-2 px-4">
|
||||
<div className="flex flex-col px-4 gap-2">
|
||||
{userMessageLength === userMessageFull.length && (
|
||||
<UserMessage>
|
||||
<span>{userMessageFull}</span>
|
||||
@@ -204,11 +204,11 @@ function LaunchAppWindow(
|
||||
<div
|
||||
{...props}
|
||||
className={cn(
|
||||
"bg-fd-background overflow-hidden rounded-md border shadow-xl",
|
||||
"overflow-hidden rounded-md border bg-fd-background shadow-xl",
|
||||
props.className,
|
||||
)}
|
||||
>
|
||||
<div className="bg-fd-muted text-fd-muted-foreground relative flex h-6 flex-row items-center border-b px-4 text-xs">
|
||||
<div className="relative flex h-6 flex-row items-center border-b bg-fd-muted px-4 text-xs text-fd-muted-foreground">
|
||||
<p className="absolute inset-x-0 text-center">localhost:8080</p>
|
||||
</div>
|
||||
<div className="p-4 text-sm">
|
||||
|
||||
@@ -1,16 +1,11 @@
|
||||
"use client";
|
||||
import {
|
||||
ChatHandler,
|
||||
ChatInput,
|
||||
ChatMessages,
|
||||
ChatSection,
|
||||
} from "@llamaindex/chat-ui";
|
||||
import { ChatInput, ChatMessages, ChatSection } from "@llamaindex/chat-ui";
|
||||
import { useChat } from "ai/react";
|
||||
|
||||
export const ChatDemo = () => {
|
||||
const handler = useChat();
|
||||
return (
|
||||
<ChatSection handler={handler as ChatHandler}>
|
||||
<ChatSection handler={handler}>
|
||||
<ChatMessages>
|
||||
<ChatMessages.List className="h-auto max-h-[400px]" />
|
||||
<ChatMessages.Actions />
|
||||
|
||||
@@ -1,25 +1,23 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ChatHandler,
|
||||
ChatInput,
|
||||
ChatMessage,
|
||||
ChatMessages,
|
||||
ChatSection as ChatSectionUI,
|
||||
Message,
|
||||
} from "@llamaindex/chat-ui";
|
||||
import { useChatRSC } from "./use-chat-rsc";
|
||||
|
||||
export const ChatSectionRSC = () => {
|
||||
const handler = useChatRSC();
|
||||
return (
|
||||
<ChatSectionUI handler={handler as ChatHandler}>
|
||||
<ChatSectionUI handler={handler}>
|
||||
<ChatMessages>
|
||||
<ChatMessages.List className="h-auto max-h-[400px]">
|
||||
{handler.messages.map((message, index) => (
|
||||
<ChatMessage
|
||||
key={index}
|
||||
message={message as Message}
|
||||
message={message}
|
||||
isLast={index === handler.messages.length - 1}
|
||||
>
|
||||
<ChatMessage.Avatar />
|
||||
|
||||
@@ -57,7 +57,7 @@ export const IDE = () => {
|
||||
const maxChars = useSlider();
|
||||
const useSetMaxChars = useSetSlider();
|
||||
return (
|
||||
<div className="flex max-h-96 flex-col overflow-scroll border-r p-4">
|
||||
<div className="flex flex-col p-4 border-r max-h-96 overflow-scroll">
|
||||
<div>
|
||||
<Label>Max Chars {maxChars}</Label>
|
||||
<Slider
|
||||
@@ -113,7 +113,7 @@ const Preview = ({ text }: { text: string }) => {
|
||||
},
|
||||
},
|
||||
});
|
||||
return <CodeBlock className="m-2 py-0">{rendered}</CodeBlock>;
|
||||
return <CodeBlock className="py-0 m-2">{rendered}</CodeBlock>;
|
||||
};
|
||||
|
||||
function ScrollToBottom() {
|
||||
@@ -122,7 +122,7 @@ function ScrollToBottom() {
|
||||
return (
|
||||
!isAtBottom && (
|
||||
<button
|
||||
className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
|
||||
className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
|
||||
onClick={() => scrollToBottom()}
|
||||
/>
|
||||
)
|
||||
@@ -136,7 +136,7 @@ export const NodePreview = () => {
|
||||
const textChunks = useMemo(() => parser.splitText(code), [code, maxChars]);
|
||||
return (
|
||||
<StickToBottom
|
||||
className="relative block max-h-96 overflow-scroll"
|
||||
className="block relative max-h-96 overflow-scroll"
|
||||
resize="smooth"
|
||||
initial="smooth"
|
||||
>
|
||||
@@ -154,7 +154,7 @@ export const CodeNodeParserDemo = () => {
|
||||
const isClient = useIsClient();
|
||||
if (!isClient) {
|
||||
return (
|
||||
<div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
|
||||
<div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
|
||||
<Skeleton className="h-96" />
|
||||
<Skeleton className="h-96" />
|
||||
</div>
|
||||
@@ -165,13 +165,13 @@ export const CodeNodeParserDemo = () => {
|
||||
<CodeProvider>
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
|
||||
<div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
|
||||
<Skeleton className="h-96" />
|
||||
<Skeleton className="h-96" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
|
||||
<div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
|
||||
<IDE />
|
||||
<NodePreview />
|
||||
</div>
|
||||
|
||||
@@ -75,7 +75,7 @@ function ScrollToBottom() {
|
||||
return (
|
||||
!isAtBottom && (
|
||||
<button
|
||||
className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
|
||||
className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
|
||||
onClick={() => scrollToBottom()}
|
||||
/>
|
||||
)
|
||||
@@ -91,9 +91,9 @@ export function WorkflowStreamingDemo() {
|
||||
const [total, setTotal] = useState<number>(10);
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col items-start gap-2">
|
||||
<div className="flex flex-row items-center justify-center">
|
||||
<div className="mr-2 text-lg">Compute total</div>{" "}
|
||||
<div className="flex flex-col items-start w-full gap-2">
|
||||
<div className="flex flex-row justify-center items-center">
|
||||
<div className="text-lg mr-2">Compute total</div>{" "}
|
||||
<FlowInput value={total} onChange={(value) => setTotal(value)} />
|
||||
</div>
|
||||
<Button
|
||||
@@ -141,7 +141,7 @@ export function WorkflowStreamingDemo() {
|
||||
>
|
||||
Start Workflow
|
||||
</Button>
|
||||
<StickToBottom className="flex max-h-96 w-full flex-col gap-2 overflow-y-auto rounded-lg border border-gray-200 p-2">
|
||||
<StickToBottom className="w-full flex flex-col gap-2 p-2 border border-gray-200 rounded-lg max-h-96 overflow-y-auto">
|
||||
<StickToBottom.Content className="flex flex-col gap-2">
|
||||
{ui}
|
||||
</StickToBottom.Content>
|
||||
|
||||
@@ -20,7 +20,7 @@ export function Feature({
|
||||
className={cn("border-l border-t px-6 py-12 md:py-16", className)}
|
||||
{...props}
|
||||
>
|
||||
<div className="text-fd-muted-foreground mb-4 inline-flex items-center gap-2 text-sm font-medium">
|
||||
<div className="mb-4 inline-flex items-center gap-2 text-sm font-medium text-fd-muted-foreground">
|
||||
<Icon className="size-4" />
|
||||
<p>{subheading}</p>
|
||||
</div>
|
||||
|
||||
@@ -60,7 +60,7 @@ export default function FlowInput({
|
||||
className={clsx(
|
||||
showCaret ? "caret-primary" : "caret-transparent",
|
||||
"spin-hide w-[1.5em] bg-transparent py-2 text-center font-[inherit] text-transparent outline-none",
|
||||
"[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
|
||||
"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
|
||||
)}
|
||||
// Make sure to disable kerning, to match NumberFlow:
|
||||
style={{ fontKerning: "none" }}
|
||||
|
||||
@@ -8,7 +8,7 @@ import { IconAI, IconUser } from "./ui/icons";
|
||||
export function UserMessage({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="group relative flex items-start">
|
||||
<div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
|
||||
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-background">
|
||||
<IconUser />
|
||||
</div>
|
||||
<div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
|
||||
@@ -54,7 +54,7 @@ export function BotCard({
|
||||
<div className="group relative flex items-start md:-ml-12">
|
||||
<div
|
||||
className={cn(
|
||||
"bg-primary text-primary-foreground flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm",
|
||||
"flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground",
|
||||
!showAvatar && "invisible",
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -25,7 +25,7 @@ export const NpmInstall = () => {
|
||||
className="flex flex-row items-center justify-center"
|
||||
>
|
||||
<code className="mr-2">$ npm i llamaindex</code>
|
||||
<div className="relative h-4 w-4 cursor-pointer bg-transparent">
|
||||
<div className="relative cursor-pointer bg-transparent w-4 h-4">
|
||||
<div
|
||||
className={`absolute inset-0 transform transition-all duration-300 ${
|
||||
hasCheckIcon ? "scale-0 opacity-0" : "scale-100 opacity-100"
|
||||
|
||||
@@ -1,268 +0,0 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
AnimatePresence,
|
||||
motion,
|
||||
Transition,
|
||||
type AnimationControls,
|
||||
type Target,
|
||||
type TargetAndTransition,
|
||||
type VariantLabels,
|
||||
} from "framer-motion";
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
export interface RotatingTextRef {
|
||||
next: () => void;
|
||||
previous: () => void;
|
||||
jumpTo: (index: number) => void;
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
export interface RotatingTextProps
|
||||
extends Omit<
|
||||
React.ComponentPropsWithoutRef<typeof motion.span>,
|
||||
"children" | "transition" | "initial" | "animate" | "exit"
|
||||
> {
|
||||
texts: string[];
|
||||
transition?: Transition;
|
||||
initial?: boolean | Target | VariantLabels;
|
||||
animate?: boolean | VariantLabels | AnimationControls | TargetAndTransition;
|
||||
exit?: Target | VariantLabels;
|
||||
animatePresenceMode?: "sync" | "wait";
|
||||
animatePresenceInitial?: boolean;
|
||||
rotationInterval?: number;
|
||||
staggerDuration?: number;
|
||||
staggerFrom?: "first" | "last" | "center" | "random" | number;
|
||||
loop?: boolean;
|
||||
auto?: boolean;
|
||||
splitBy?: string;
|
||||
onNext?: (index: number) => void;
|
||||
mainClassName?: string;
|
||||
splitLevelClassName?: string;
|
||||
elementLevelClassName?: string;
|
||||
}
|
||||
|
||||
export const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
|
||||
(
|
||||
{
|
||||
texts,
|
||||
transition = { type: "spring", damping: 25, stiffness: 300 },
|
||||
initial = { y: "100%", opacity: 0 },
|
||||
animate = { y: 0, opacity: 1 },
|
||||
exit = { y: "-120%", opacity: 0 },
|
||||
animatePresenceMode = "wait",
|
||||
animatePresenceInitial = false,
|
||||
rotationInterval = 2000,
|
||||
staggerDuration = 0,
|
||||
staggerFrom = "first",
|
||||
loop = true,
|
||||
auto = true,
|
||||
splitBy = "characters",
|
||||
onNext,
|
||||
mainClassName,
|
||||
splitLevelClassName,
|
||||
elementLevelClassName,
|
||||
...rest
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const [currentTextIndex, setCurrentTextIndex] = useState<number>(0);
|
||||
|
||||
const splitIntoCharacters = (text: string): string[] => {
|
||||
if (typeof Intl !== "undefined" && Intl.Segmenter) {
|
||||
const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
|
||||
return Array.from(
|
||||
segmenter.segment(text),
|
||||
(segment) => segment.segment,
|
||||
);
|
||||
}
|
||||
return Array.from(text);
|
||||
};
|
||||
|
||||
const elements = useMemo(() => {
|
||||
const currentText: string = texts[currentTextIndex];
|
||||
if (splitBy === "characters") {
|
||||
const words = currentText.split(" ");
|
||||
return words.map((word, i) => ({
|
||||
characters: splitIntoCharacters(word),
|
||||
needsSpace: i !== words.length - 1,
|
||||
}));
|
||||
}
|
||||
if (splitBy === "words") {
|
||||
return currentText.split(" ").map((word, i, arr) => ({
|
||||
characters: [word],
|
||||
needsSpace: i !== arr.length - 1,
|
||||
}));
|
||||
}
|
||||
if (splitBy === "lines") {
|
||||
return currentText.split("\n").map((line, i, arr) => ({
|
||||
characters: [line],
|
||||
needsSpace: i !== arr.length - 1,
|
||||
}));
|
||||
}
|
||||
|
||||
return currentText.split(splitBy).map((part, i, arr) => ({
|
||||
characters: [part],
|
||||
needsSpace: i !== arr.length - 1,
|
||||
}));
|
||||
}, [texts, currentTextIndex, splitBy]);
|
||||
|
||||
const getStaggerDelay = useCallback(
|
||||
(index: number, totalChars: number): number => {
|
||||
const total = totalChars;
|
||||
if (staggerFrom === "first") return index * staggerDuration;
|
||||
if (staggerFrom === "last")
|
||||
return (total - 1 - index) * staggerDuration;
|
||||
if (staggerFrom === "center") {
|
||||
const center = Math.floor(total / 2);
|
||||
return Math.abs(center - index) * staggerDuration;
|
||||
}
|
||||
if (staggerFrom === "random") {
|
||||
const randomIndex = Math.floor(Math.random() * total);
|
||||
return Math.abs(randomIndex - index) * staggerDuration;
|
||||
}
|
||||
return Math.abs((staggerFrom as number) - index) * staggerDuration;
|
||||
},
|
||||
[staggerFrom, staggerDuration],
|
||||
);
|
||||
|
||||
const handleIndexChange = useCallback(
|
||||
(newIndex: number) => {
|
||||
setCurrentTextIndex(newIndex);
|
||||
if (onNext) onNext(newIndex);
|
||||
},
|
||||
[onNext],
|
||||
);
|
||||
|
||||
const next = useCallback(() => {
|
||||
const nextIndex =
|
||||
currentTextIndex === texts.length - 1
|
||||
? loop
|
||||
? 0
|
||||
: currentTextIndex
|
||||
: currentTextIndex + 1;
|
||||
if (nextIndex !== currentTextIndex) {
|
||||
handleIndexChange(nextIndex);
|
||||
}
|
||||
}, [currentTextIndex, texts.length, loop, handleIndexChange]);
|
||||
|
||||
const previous = useCallback(() => {
|
||||
const prevIndex =
|
||||
currentTextIndex === 0
|
||||
? loop
|
||||
? texts.length - 1
|
||||
: currentTextIndex
|
||||
: currentTextIndex - 1;
|
||||
if (prevIndex !== currentTextIndex) {
|
||||
handleIndexChange(prevIndex);
|
||||
}
|
||||
}, [currentTextIndex, texts.length, loop, handleIndexChange]);
|
||||
|
||||
const jumpTo = useCallback(
|
||||
(index: number) => {
|
||||
const validIndex = Math.max(0, Math.min(index, texts.length - 1));
|
||||
if (validIndex !== currentTextIndex) {
|
||||
handleIndexChange(validIndex);
|
||||
}
|
||||
},
|
||||
[texts.length, currentTextIndex, handleIndexChange],
|
||||
);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
if (currentTextIndex !== 0) {
|
||||
handleIndexChange(0);
|
||||
}
|
||||
}, [currentTextIndex, handleIndexChange]);
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
next,
|
||||
previous,
|
||||
jumpTo,
|
||||
reset,
|
||||
}),
|
||||
[next, previous, jumpTo, reset],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!auto) return;
|
||||
const intervalId = setInterval(next, rotationInterval);
|
||||
return () => clearInterval(intervalId);
|
||||
}, [next, rotationInterval, auto]);
|
||||
|
||||
return (
|
||||
<motion.span
|
||||
className={cn(
|
||||
"relative flex flex-wrap whitespace-pre-wrap",
|
||||
mainClassName,
|
||||
)}
|
||||
{...rest}
|
||||
layout
|
||||
transition={transition}
|
||||
>
|
||||
<span className="sr-only">{texts[currentTextIndex]}</span>
|
||||
<AnimatePresence
|
||||
mode={animatePresenceMode}
|
||||
initial={animatePresenceInitial}
|
||||
>
|
||||
<motion.div
|
||||
key={currentTextIndex}
|
||||
className={cn(
|
||||
splitBy === "lines"
|
||||
? "flex w-full flex-col"
|
||||
: "relative flex flex-wrap whitespace-pre-wrap",
|
||||
)}
|
||||
layout
|
||||
aria-hidden="true"
|
||||
>
|
||||
{elements.map((wordObj, wordIndex, array) => {
|
||||
const previousCharsCount = array
|
||||
.slice(0, wordIndex)
|
||||
.reduce((sum, word) => sum + word.characters.length, 0);
|
||||
return (
|
||||
<span
|
||||
key={wordIndex}
|
||||
className={cn("inline-flex", splitLevelClassName)}
|
||||
>
|
||||
{wordObj.characters.map((char, charIndex) => (
|
||||
<motion.span
|
||||
key={charIndex}
|
||||
initial={initial}
|
||||
animate={animate}
|
||||
exit={exit}
|
||||
transition={{
|
||||
...transition,
|
||||
delay: getStaggerDelay(
|
||||
previousCharsCount + charIndex,
|
||||
array.reduce(
|
||||
(sum, word) => sum + word.characters.length,
|
||||
0,
|
||||
),
|
||||
),
|
||||
}}
|
||||
className={cn("inline-block", elementLevelClassName)}
|
||||
>
|
||||
{char}
|
||||
</motion.span>
|
||||
))}
|
||||
{wordObj.needsSpace && (
|
||||
<span className="whitespace-pre"> </span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</motion.span>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
RotatingText.displayName = "RotatingText";
|
||||
@@ -1,27 +0,0 @@
|
||||
"use client";
|
||||
import { RotatingText } from "@/components/reactbits/rotating-text";
|
||||
|
||||
const supports = [
|
||||
"Next.js",
|
||||
"Node.js",
|
||||
"Hono",
|
||||
"Express.js",
|
||||
"Deno",
|
||||
"Nest.js",
|
||||
"Waku",
|
||||
];
|
||||
|
||||
export const Supports = () => {
|
||||
return (
|
||||
<RotatingText
|
||||
texts={supports}
|
||||
mainClassName="inline-flex bg-transparent overflow-hidden justify-center"
|
||||
initial={{ y: "100%" }}
|
||||
animate={{ y: 0 }}
|
||||
exit={{ y: "-120%" }}
|
||||
staggerDuration={0.025}
|
||||
transition={{ type: "spring", damping: 30, stiffness: 400 }}
|
||||
rotationInterval={2000}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import ReactTextTransition from "react-text-transition";
|
||||
|
||||
const supports = [
|
||||
"Next.js",
|
||||
"Node.js",
|
||||
"Hono",
|
||||
"Express.js",
|
||||
"Deno",
|
||||
"Nest.js",
|
||||
"Waku",
|
||||
];
|
||||
|
||||
export const TextEffect = () => {
|
||||
const [counter, setCounter] = useState(0);
|
||||
useEffect(() => {
|
||||
const id = setInterval(() => {
|
||||
setCounter(
|
||||
(Math.floor(Math.random() * supports.length) + 1) % supports.length,
|
||||
);
|
||||
}, 4000);
|
||||
return () => {
|
||||
clearInterval(id);
|
||||
};
|
||||
}, []);
|
||||
return <ReactTextTransition inline>{supports[counter]}</ReactTextTransition>;
|
||||
};
|
||||
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<Cross2Icon className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
|
||||
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -6,7 +6,7 @@ function Skeleton({
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn("bg-primary/10 animate-pulse rounded-md", className)}
|
||||
className={cn("animate-pulse rounded-md bg-primary/10", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -17,10 +17,10 @@ const Slider = React.forwardRef<
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
|
||||
<SliderPrimitive.Range className="bg-primary absolute h-full" />
|
||||
<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
|
||||
<SliderPrimitive.Range className="absolute h-full bg-primary" />
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50" />
|
||||
<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
|
||||
</SliderPrimitive.Root>
|
||||
));
|
||||
Slider.displayName = SliderPrimitive.Root.displayName;
|
||||
|
||||
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
|
||||
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
"title": "LlamaCloud",
|
||||
"description": "The Cloud framework for LLM",
|
||||
"root": true,
|
||||
"pages": ["---Guide---", "index", "..."]
|
||||
"pages": ["---Guide---", "index", "api"]
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ 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](./local_llm).
|
||||
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:
|
||||
|
||||
|
||||
@@ -3,8 +3,6 @@ title: With Node.js/Bun/Deno
|
||||
description: In this guide, you'll learn how to use LlamaIndex with Node.js, Bun, and Deno.
|
||||
---
|
||||
|
||||
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
|
||||
## Adding environment variables
|
||||
|
||||
By default, LlamaIndex uses OpenAI provider, which requires an API key. You can set the `OPENAI_API_KEY` environment variable to authenticate with OpenAI.
|
||||
@@ -24,26 +22,6 @@ 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
|
||||
|
||||
@@ -106,38 +106,21 @@ Some modules uses `Web Stream` API like `ReadableStream` and `WritableStream`, y
|
||||
}
|
||||
```
|
||||
|
||||
```typescript
|
||||
import { agent, tool } from 'llamaindex'
|
||||
import { openai } from "@llamaindex/openai";
|
||||
```ts twoslash
|
||||
import { OpenAIAgent } from '@llamaindex/openai'
|
||||
|
||||
Settings.llm = openai({
|
||||
model: "gpt-4o-mini",
|
||||
});
|
||||
const agent = new OpenAIAgent({
|
||||
tools: []
|
||||
})
|
||||
|
||||
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
|
||||
}
|
||||
const response = await agent.chat({
|
||||
message: 'Hello, how are you?',
|
||||
stream: true
|
||||
})
|
||||
for await (const _ of response) {
|
||||
//^?
|
||||
// ...
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## Run TypeScript Script in Node.js
|
||||
|
||||
@@ -25,22 +25,15 @@ npx tsx example.ts
|
||||
First we'll need to pull in our dependencies. These are:
|
||||
|
||||
- The OpenAI class to use the OpenAI LLM
|
||||
- tool to provide tools to our agent
|
||||
- agent to create the single agent
|
||||
- FunctionTool to provide tools to our agent
|
||||
- OpenAIAgent to create the agent itself
|
||||
- Settings to define some global settings for the library
|
||||
- Dotenv to load our API key from the .env file
|
||||
- Zod to define the schema for our tool
|
||||
|
||||
```javascript
|
||||
import { FunctionTool, Settings } from "llamaindex";
|
||||
import { OpenAI, OpenAIAgent } from "@llamaindex/openai";
|
||||
import "dotenv/config";
|
||||
import {
|
||||
agent,
|
||||
AgentStream,
|
||||
tool,
|
||||
openai,
|
||||
Settings,
|
||||
} from "llamaindex";
|
||||
import { z } from "zod";
|
||||
```
|
||||
|
||||
### Initialize your LLM
|
||||
@@ -48,12 +41,25 @@ import { z } from "zod";
|
||||
We need to tell our OpenAI class where its API key is, and which of OpenAI's models to use. We'll be using `gpt-4o`, which is capable while still being pretty cheap. This is a global setting, so anywhere an LLM is needed will use the same model.
|
||||
|
||||
```javascript
|
||||
Settings.llm = openai({
|
||||
Settings.llm = new OpenAI({
|
||||
apiKey: process.env.OPENAI_API_KEY,
|
||||
model: "gpt-4o",
|
||||
});
|
||||
```
|
||||
|
||||
### Turn on logging
|
||||
|
||||
We want to see what our agent is up to, so we're going to hook into some events that the library generates and print them out. There are several events possible, but we'll specifically tune in to `llm-tool-call` (when a tool is called) and `llm-tool-result` (when it responds).
|
||||
|
||||
```javascript
|
||||
Settings.callbackManager.on("llm-tool-call", (event) => {
|
||||
console.log(event.detail);
|
||||
});
|
||||
Settings.callbackManager.on("llm-tool-result", (event) => {
|
||||
console.log(event.detail);
|
||||
});
|
||||
```
|
||||
|
||||
### Create a function
|
||||
|
||||
We're going to create a very simple function that adds two numbers together. This will be the tool we ask our agent to use.
|
||||
@@ -68,7 +74,7 @@ Note that we're passing in an object with two named parameters, `a` and `b`. Thi
|
||||
|
||||
### Turn the function into a tool for the agent
|
||||
|
||||
This is the most complicated part of creating an agent. We need to define a `tool`. We have to pass in:
|
||||
This is the most complicated part of creating an agent. We need to define a `FunctionTool`. We have to pass in:
|
||||
|
||||
- The function itself (`sumNumbers`)
|
||||
- A name for the function, which the LLM will use to call it
|
||||
@@ -77,25 +83,30 @@ This is the most complicated part of creating an agent. We need to define a `too
|
||||
- You can see [more examples of function schemas](https://cookbook.openai.com/examples/how_to_call_functions_with_chat_models).
|
||||
|
||||
```javascript
|
||||
const addTool = tool({
|
||||
const tool = FunctionTool.from(sumNumbers, {
|
||||
name: "sumNumbers",
|
||||
description: "Use this function to sum two numbers",
|
||||
parameters: z.object({
|
||||
a: z.number({
|
||||
description: "First number to sum",
|
||||
}),
|
||||
b: z.number({
|
||||
description: "Second number to sum",
|
||||
}),
|
||||
}),
|
||||
execute: sumNumbers,
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
a: {
|
||||
type: "number",
|
||||
description: "First number to sum",
|
||||
},
|
||||
b: {
|
||||
type: "number",
|
||||
description: "Second number to sum",
|
||||
},
|
||||
},
|
||||
required: ["a", "b"],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
We then wrap up the tools into an array. We could provide lots of tools this way, but for this example we're just using the one.
|
||||
|
||||
```javascript
|
||||
const tools = [addTool];
|
||||
const tools = [tool];
|
||||
```
|
||||
|
||||
### Create the agent
|
||||
@@ -103,7 +114,7 @@ const tools = [addTool];
|
||||
With your LLM already set up and your tools defined, creating an agent is simple:
|
||||
|
||||
```javascript
|
||||
const myAgent = agent({ tools });
|
||||
const agent = new OpenAIAgent({ tools });
|
||||
```
|
||||
|
||||
### Ask the agent a question
|
||||
@@ -111,109 +122,61 @@ const myAgent = agent({ tools });
|
||||
We can use the `chat` interface to ask our agent a question, and it will use the tools we've defined to find an answer.
|
||||
|
||||
```javascript
|
||||
const context = myAgent.run("Sum 101 and 303");
|
||||
const result = await context;
|
||||
console.log(result.data);
|
||||
```
|
||||
You will see the following output:
|
||||
let response = await agent.chat({
|
||||
message: "Add 101 and 303",
|
||||
});
|
||||
|
||||
**_Output_**
|
||||
|
||||
```
|
||||
{ result: 'The sum of 101 and 303 is 404.' }
|
||||
```
|
||||
|
||||
To stream the response, you can use the `AgentStream` event which provides chunks of the response as they become available. This allows you to display the response incrementally rather than waiting for the full response:
|
||||
|
||||
```javascript
|
||||
const context = myAgent.run("Add 101 and 303");
|
||||
for await (const event of context) {
|
||||
if (event instanceof AgentStream) {
|
||||
process.stdout.write(event.data.delta);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**_Streaming Output_**
|
||||
|
||||
```
|
||||
The sum of 101 and 303 is 404.
|
||||
```
|
||||
|
||||
### Logging workflow events
|
||||
|
||||
To log the workflow events, you can check the event type and log the event data.
|
||||
|
||||
```javascript
|
||||
const context = myAgent.run("Sum 202 and 404");
|
||||
for await (const event of context) {
|
||||
if (event instanceof AgentStream) {
|
||||
// Stream the response
|
||||
for (const chunk of event.data.delta) {
|
||||
process.stdout.write(chunk);
|
||||
}
|
||||
} else {
|
||||
// Log other events
|
||||
console.log("\nWorkflow event:", JSON.stringify(event, null, 2));
|
||||
}
|
||||
}
|
||||
console.log(response);
|
||||
```
|
||||
|
||||
Let's see what running this looks like using `npx tsx agent.ts`
|
||||
|
||||
**_Output_**
|
||||
|
||||
```
|
||||
Workflow event: {
|
||||
"data": {
|
||||
"userInput": "Sum 202 and 404"
|
||||
```javascript
|
||||
{
|
||||
toolCall: {
|
||||
id: 'call_ze6A8C3mOUBG4zmXO8Z4CPB5',
|
||||
name: 'sumNumbers',
|
||||
input: { a: 101, b: 303 }
|
||||
},
|
||||
"displayName": "StartEvent"
|
||||
toolResult: {
|
||||
tool: FunctionTool { _fn: [Function: sumNumbers], _metadata: [Object] },
|
||||
input: { a: 101, b: 303 },
|
||||
output: '404',
|
||||
isError: false
|
||||
}
|
||||
}
|
||||
|
||||
Workflow event: {
|
||||
"data": {
|
||||
"input": [
|
||||
{
|
||||
"role": "user",
|
||||
"content": "Sum 202 and 404"
|
||||
}
|
||||
],
|
||||
"currentAgentName": "Agent"
|
||||
},
|
||||
"displayName": "AgentInput"
|
||||
}
|
||||
|
||||
Workflow event: {
|
||||
"data": {
|
||||
"input": [
|
||||
{
|
||||
"role": "system",
|
||||
"content": "You are a helpful assistant. Use the provided tools to answer questions."
|
||||
},
|
||||
{
|
||||
"role": "user",
|
||||
"content": "Sum 202 and 404"
|
||||
}
|
||||
],
|
||||
"currentAgentName": "Agent"
|
||||
},
|
||||
"displayName": "AgentSetup"
|
||||
}
|
||||
|
||||
....
|
||||
|
||||
```
|
||||
|
||||
We're seeing several workflow events being logged:
|
||||
```javascript
|
||||
{
|
||||
response: {
|
||||
raw: {
|
||||
id: 'chatcmpl-9KwauZku3QOvH78MNvxJs81mDvQYK',
|
||||
object: 'chat.completion',
|
||||
created: 1714778824,
|
||||
model: 'gpt-4-turbo-2024-04-09',
|
||||
choices: [Array],
|
||||
usage: [Object],
|
||||
system_fingerprint: 'fp_ea6eb70039'
|
||||
},
|
||||
message: {
|
||||
content: 'The sum of 101 and 303 is 404.',
|
||||
role: 'assistant',
|
||||
options: {}
|
||||
}
|
||||
},
|
||||
sources: [Getter]
|
||||
}
|
||||
```
|
||||
|
||||
1. `AgentToolCall` - Shows the agent preparing to call our tool with the numbers 202 and 404
|
||||
2. `AgentToolCallResult` - Shows the result of calling the tool, which returned "606"
|
||||
3. `AgentInput` - Shows the original user input
|
||||
4. `AgentOutput` - Shows the agent's response
|
||||
We're seeing two pieces of output here. The first is our callback firing when the tool is called. You can see in `toolResult` that the LLM has correctly passed `101` and `303` to our `sumNumbers` function, which adds them up and returns `404`.
|
||||
|
||||
Great! We've built an agent that can understand requests and use tools to fulfill them. Next you can:
|
||||
The second piece of output is the response from the LLM itself, where the `message.content` key is giving us the answer.
|
||||
|
||||
- [See the full code](https://github.com/run-llama/LlamaIndexTS/blob/main/examples/agentworkflow/blog-writer.ts)
|
||||
Great! We've built an agent with tool use! Next you can:
|
||||
|
||||
- [See the full code](https://github.com/run-llama/ts-agents/blob/main/1_agent/agent.ts)
|
||||
- [Switch to a local LLM](3_local_model)
|
||||
- Move on to [add Retrieval-Augmented Generation to your agent](4_agentic_rag)
|
||||
|
||||
@@ -23,27 +23,70 @@ The first time you run it will also automatically download and install the model
|
||||
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 = ollama({
|
||||
Settings.llm = new Ollama({
|
||||
model: "mixtral:8x7b",
|
||||
});
|
||||
```
|
||||
|
||||
### Run local agent
|
||||
### Swap to a ReActAgent
|
||||
|
||||
You can also create local agent by importing `agent` from `llamaindex`.
|
||||
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
|
||||
import { agent } from "llamaindex";
|
||||
|
||||
const workflow = agent({
|
||||
tools: [getWeatherTool],
|
||||
});
|
||||
|
||||
const workflowContext = workflow.run(
|
||||
"What's the weather like in San Francisco?",
|
||||
);
|
||||
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).
|
||||
|
||||
@@ -37,7 +37,7 @@ import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
We'll be bringing in `SimpleDirectoryReader`, `HuggingFaceEmbedding`, `VectorStoreIndex`, and `QueryEngineTool`, `OpenAIContextAwareAgent` from LlamaIndex.TS, as well as the dependencies we previously used.
|
||||
|
||||
```javascript
|
||||
import { QueryEngineTool, Settings, VectorStoreIndex } from "llamaindex";
|
||||
import { FunctionTool, QueryEngineTool, Settings, VectorStoreIndex } from "llamaindex";
|
||||
import { OpenAI, OpenAIAgent } from "@llamaindex/openai";
|
||||
import { HuggingFaceEmbedding } from "@llamaindex/huggingface";
|
||||
import { SimpleDirectoryReader } from "@llamaindex/readers/directory";
|
||||
@@ -115,8 +115,10 @@ The total budget for the City and County of San Francisco for the fiscal year 20
|
||||
If you prefer more flexibility and don't mind additional complexity, you can create a `QueryEngineTool`. This approach allows you to define the query logic, providing a more tailored way to interact with the data, but note that it introduces a delay due to the extra tool call.
|
||||
|
||||
```javascript
|
||||
const queryEngine = await index.asQueryEngine({ retriever });
|
||||
const tools = [
|
||||
index.queryTool({
|
||||
new QueryEngineTool({
|
||||
queryEngine: queryEngine,
|
||||
metadata: {
|
||||
name: "san_francisco_budget_tool",
|
||||
description: `This tool can answer detailed questions about the individual components of the budget of San Francisco in 2023-2024.`,
|
||||
@@ -125,9 +127,11 @@ const tools = [
|
||||
];
|
||||
|
||||
// Create an agent using the tools array
|
||||
const myAgent = agent({ tools });
|
||||
const agent = new OpenAIAgent({ tools });
|
||||
|
||||
let toolResponse = await myAgent.run("What's the budget of San Francisco in 2023-2024?");
|
||||
let toolResponse = await agent.chat({
|
||||
message: "What's the budget of San Francisco in 2023-2024?",
|
||||
});
|
||||
|
||||
console.log(toolResponse);
|
||||
```
|
||||
|
||||
@@ -2,67 +2,58 @@
|
||||
title: A RAG agent that does math
|
||||
---
|
||||
|
||||
In [our third iteration of the agent](https://github.com/run-llama/ts-agents/blob/main/3_rag_and_tools/agent.ts) we've combined the two previous agents, so we've defined both `sumNumbers` and a `QueryEngineTool` and created an array of two tools. The tools support both Zod and JSON Schema for parameter definition:
|
||||
In [our third iteration of the agent](https://github.com/run-llama/ts-agents/blob/main/3_rag_and_tools/agent.ts) we've combined the two previous agents, so we've defined both `sumNumbers` and a `QueryEngineTool` and created an array of two tools:
|
||||
|
||||
```javascript
|
||||
// define the query engine as a tool
|
||||
const tools = [
|
||||
index.queryTool({
|
||||
new QueryEngineTool({
|
||||
queryEngine: queryEngine,
|
||||
metadata: {
|
||||
name: "san_francisco_budget_tool",
|
||||
description: `This tool can answer detailed questions about the individual components of the budget of San Francisco in 2023-2024.`,
|
||||
},
|
||||
}),
|
||||
tool({
|
||||
FunctionTool.from(sumNumbers, {
|
||||
name: "sumNumbers",
|
||||
description: "Use this function to sum two numbers",
|
||||
parameters: z.object({
|
||||
a: z.number({
|
||||
description: "First number to sum",
|
||||
}),
|
||||
b: z.number({
|
||||
description: "Second number to sum",
|
||||
}),
|
||||
}),
|
||||
execute: ({ a, b }) => `${a + b}`,
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
a: {
|
||||
type: "number",
|
||||
description: "First number to sum",
|
||||
},
|
||||
b: {
|
||||
type: "number",
|
||||
description: "Second number to sum",
|
||||
},
|
||||
},
|
||||
required: ["a", "b"],
|
||||
},
|
||||
}),
|
||||
];
|
||||
```
|
||||
|
||||
You can also use JSON Schema to define the tool parameters as an alternative to Zod.
|
||||
|
||||
```javascript
|
||||
tool(sumNumbers, {
|
||||
name: "sumNumbers",
|
||||
description: "Use this function to sum two numbers",
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
a: {
|
||||
type: "number",
|
||||
description: "First number to sum",
|
||||
},
|
||||
b: {
|
||||
type: "number",
|
||||
description: "Second number to sum",
|
||||
},
|
||||
},
|
||||
required: ["a", "b"],
|
||||
},
|
||||
}),
|
||||
```
|
||||
|
||||
|
||||
These tool descriptions are identical to the ones we previously defined. Now let's ask it 3 questions in a row:
|
||||
|
||||
```javascript
|
||||
let response = await agent.run("What's the budget of San Francisco for community health in 2023-24?");
|
||||
let response = await agent.chat({
|
||||
message:
|
||||
"What's the budget of San Francisco for community health in 2023-24?",
|
||||
});
|
||||
console.log(response);
|
||||
|
||||
let response2 = await agent.run("What's the budget of San Francisco for public protection in 2023-24?");
|
||||
let response2 = await agent.chat({
|
||||
message:
|
||||
"What's the budget of San Francisco for public protection in 2023-24?",
|
||||
});
|
||||
console.log(response2);
|
||||
|
||||
let response3 = await agent.run("What's the combined budget of San Francisco for community health and public protection in 2023-24?");
|
||||
let response3 = await agent.chat({
|
||||
message:
|
||||
"What's the combined budget of San Francisco for community health and public protection in 2023-24?",
|
||||
});
|
||||
console.log(response3);
|
||||
```
|
||||
|
||||
|
||||
@@ -3,6 +3,8 @@ title: Using API Route
|
||||
description: Chat interface for your LlamaIndexTS application using API Route
|
||||
---
|
||||
import { ChatDemo } from '../../../../../components/demo/chat/api/demo';
|
||||
import "@llamaindex/chat-ui/styles/code.css";
|
||||
import "@llamaindex/chat-ui/styles/katex.css";
|
||||
|
||||
Using [chat-ui](https://github.com/run-llama/chat-ui), it's easy to add a chat interface to your LlamaIndexTS application.
|
||||
You just need to create an API route that provides an `api/chat` endpoint and a chat component to consume the API.
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
---
|
||||
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)
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"title": "Chat UI",
|
||||
"title": "Chat-UI",
|
||||
"description": "Use chat-ui to add a chat interface to your LlamaIndexTS application.",
|
||||
"defaultOpen": false,
|
||||
"pages": ["install", "chat", "rsc"]
|
||||
"pages": ["chat", "rsc"]
|
||||
}
|
||||
|
||||
@@ -3,6 +3,8 @@ 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).
|
||||
|
||||
|
||||
@@ -2,8 +2,30 @@
|
||||
title: Agent Workflow
|
||||
---
|
||||
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
import CodeSource from "!raw-loader!../../../../../../../examples/agentworkflow/blog_writer.ts";
|
||||
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
|
||||
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` system and provides a streamlined interface for agent interactions.
|
||||
|
||||
`AgentWorkflow` is 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` system and provides a streamlined interface for agent interactions.
|
||||
|
||||
## Installation
|
||||
|
||||
You'll need to install the `@llamaindex/workflow` package:
|
||||
|
||||
<Tabs groupId="install" items={["npm", "yarn", "pnpm"]} persist>
|
||||
```shell tab="npm"
|
||||
npm install @llamaindex/workflow
|
||||
```
|
||||
|
||||
```shell tab="yarn"
|
||||
yarn add @llamaindex/workflow
|
||||
```
|
||||
|
||||
```shell tab="pnpm"
|
||||
pnpm add @llamaindex/workflow
|
||||
```
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -12,11 +34,11 @@ Agent Workflows are a powerful system that enables you to create and orchestrate
|
||||
The simplest use case is creating a single agent with specific tools. Here's an example of creating an assistant that tells jokes:
|
||||
|
||||
```typescript
|
||||
import { agent, tool } from "llamaindex";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
import { AgentWorkflow, FunctionTool } from "llamaindex";
|
||||
import { OpenAI } from "@llamaindex/openai";
|
||||
|
||||
// Define a joke-telling tool
|
||||
const jokeTool = tool(
|
||||
const jokeTool = FunctionTool.from(
|
||||
() => "Baby Llama is called cria",
|
||||
{
|
||||
name: "joke",
|
||||
@@ -24,20 +46,22 @@ const jokeTool = tool(
|
||||
}
|
||||
);
|
||||
|
||||
// Create an single agent workflow with the tool
|
||||
const jokeAgent = agent({
|
||||
// Create an agent workflow with the tool
|
||||
const workflow = AgentWorkflow.fromTools({
|
||||
tools: [jokeTool],
|
||||
llm: openai({ model: "gpt-4o-mini" }),
|
||||
llm: new OpenAI({
|
||||
model: "gpt-4o-mini",
|
||||
}),
|
||||
});
|
||||
|
||||
// Run the workflow
|
||||
const result = await jokeAgent.run("Tell me something funny");
|
||||
const result = await workflow.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:
|
||||
`AgentWorkflow` provides a unified interface for event streaming, making it easy to track and respond to different events during execution:
|
||||
|
||||
```typescript
|
||||
import { AgentToolCall, AgentStream } from "llamaindex";
|
||||
@@ -58,7 +82,7 @@ for await (const event of context) {
|
||||
|
||||
### Multi-Agent Workflow
|
||||
|
||||
An Agent Workflow can orchestrate multiple agents, enabling complex interactions and task handoffs. Each agent in a multi-agent workflow requires:
|
||||
`AgentWorkflow` 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
|
||||
@@ -68,46 +92,46 @@ An Agent Workflow can orchestrate multiple agents, enabling complex interactions
|
||||
Here's an example of a multi-agent system that combines joke-telling and weather information:
|
||||
|
||||
```typescript
|
||||
import { multiAgent, agent, tool } from "llamaindex";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
import { AgentWorkflow, FunctionAgent, FunctionTool } from "llamaindex";
|
||||
import { OpenAI } from "@llamaindex/openai";
|
||||
import { z } from "zod";
|
||||
|
||||
// Create a weather agent
|
||||
const weatherAgent = agent({
|
||||
const weatherAgent = new FunctionAgent({
|
||||
name: "WeatherAgent",
|
||||
description: "Provides weather information for any city",
|
||||
tools: [
|
||||
tool(
|
||||
FunctionTool.from(
|
||||
({ city }: { city: string }) => `The weather in ${city} is sunny`,
|
||||
{
|
||||
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" }),
|
||||
llm: new OpenAI({ model: "gpt-4o-mini" }),
|
||||
});
|
||||
|
||||
// Create a joke-telling agent
|
||||
const jokeAgent = agent({
|
||||
const jokeAgent = new FunctionAgent({
|
||||
name: "JokeAgent",
|
||||
description: "Tells jokes and funny stories",
|
||||
tools: [jokeTool], // Using the joke tool defined earlier
|
||||
llm: openai({ model: "gpt-4o-mini" }),
|
||||
llm: new OpenAI({ model: "gpt-4o-mini" }),
|
||||
canHandoffTo: [weatherAgent], // Can hand off to the weather agent
|
||||
});
|
||||
|
||||
// Create the multi-agent workflow
|
||||
const agents = multiAgent({
|
||||
const workflow = new AgentWorkflow({
|
||||
agents: [jokeAgent, weatherAgent],
|
||||
rootAgent: jokeAgent, // Start with the joke agent
|
||||
});
|
||||
|
||||
// Run the workflow
|
||||
const result = await agents.run(
|
||||
const result = await workflow.run(
|
||||
"Give me a morning greeting with a joke and the weather in San Francisco"
|
||||
);
|
||||
```
|
||||
|
||||
+2
-3
@@ -2,11 +2,10 @@
|
||||
title: Jina AI
|
||||
---
|
||||
|
||||
To use Jina AI embeddings, you need to import `JinaAIEmbedding` from `@llamaindex/jinaai`.
|
||||
To use Jina AI embeddings, you need to import `JinaAIEmbedding` from `llamaindex`.
|
||||
|
||||
```ts
|
||||
import { Settings } from "llamaindex";
|
||||
import { JinaAIEmbedding } from "@llamaindex/jinaai";
|
||||
import { JinaAIEmbedding, Settings } from "llamaindex";
|
||||
|
||||
Settings.embedModel = new JinaAIEmbedding();
|
||||
|
||||
|
||||
+2
-3
@@ -2,11 +2,10 @@
|
||||
title: Together
|
||||
---
|
||||
|
||||
To use together embeddings, you need to import `TogetherEmbedding` from `@llamaindex/together`.
|
||||
To use together embeddings, you need to import `TogetherEmbedding` from `llamaindex`.
|
||||
|
||||
```ts
|
||||
import { Settings } from "llamaindex";
|
||||
import { TogetherEmbedding } from "@llamaindex/together";
|
||||
import { TogetherEmbedding, Settings } from "llamaindex";
|
||||
|
||||
Settings.embedModel = new TogetherEmbedding({
|
||||
apiKey: "<YOUR_API_KEY>",
|
||||
|
||||
@@ -127,21 +127,26 @@ 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: z.object({
|
||||
a: z.number({
|
||||
description: "The first number",
|
||||
}),
|
||||
b: z.number({
|
||||
description: "The second number",
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
a: {
|
||||
type: "number",
|
||||
description: "The first number",
|
||||
},
|
||||
b: {
|
||||
type: "number",
|
||||
description: "The second number",
|
||||
},
|
||||
},
|
||||
required: ["a", "b"],
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
@@ -150,14 +155,20 @@ const divideNumbers = FunctionTool.from(
|
||||
{
|
||||
name: "divideNumbers",
|
||||
description: "Use this function to divide two numbers",
|
||||
parameters: z.object({
|
||||
a: z.number({
|
||||
description: "The dividend a to divide",
|
||||
}),
|
||||
b: z.number({
|
||||
description: "The divisor b to divide by",
|
||||
}),
|
||||
}),
|
||||
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"],
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
@@ -7,8 +7,7 @@ title: DeepSeek LLM
|
||||
## Usage
|
||||
|
||||
```ts
|
||||
import { Settings } from "llamaindex";
|
||||
import { DeepSeekLLM } from "@llamaindex/deepseek";
|
||||
import { DeepSeekLLM, Settings } from "llamaindex";
|
||||
|
||||
Settings.llm = new DeepSeekLLM({
|
||||
apiKey: "<YOUR_API_KEY>",
|
||||
@@ -19,8 +18,7 @@ Settings.llm = new DeepSeekLLM({
|
||||
## Example
|
||||
|
||||
```ts
|
||||
import { Document, VectorStoreIndex, Settings } from "llamaindex";
|
||||
import { DeepSeekLLM } from "@llamaindex/deepseek";
|
||||
import { DeepSeekLLM, Document, VectorStoreIndex, Settings } from "llamaindex";
|
||||
|
||||
const deepseekLlm = new DeepSeekLLM({
|
||||
apiKey: "<YOUR_API_KEY>",
|
||||
|
||||
@@ -7,8 +7,7 @@ title: Fireworks LLM
|
||||
## Usage
|
||||
|
||||
```ts
|
||||
import { Settings } from "llamaindex";
|
||||
import { FireworksLLM } from "@llamaindex/fireworks";
|
||||
import { FireworksLLM, Settings } from "llamaindex";
|
||||
|
||||
Settings.llm = new FireworksLLM({
|
||||
apiKey: "<YOUR_API_KEY>",
|
||||
|
||||
@@ -31,20 +31,6 @@ 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`.
|
||||
|
||||
@@ -34,18 +34,6 @@ You can setup the apiKey on the environment variables, like:
|
||||
export OPENAI_API_KEY="<YOUR_API_KEY>"
|
||||
```
|
||||
|
||||
You can optionally set a custom base URL, like:
|
||||
|
||||
```bash
|
||||
export OPENAI_BASE_URL="https://api.scaleway.ai/v1"
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```ts
|
||||
Settings.llm = new OpenAI({ model: "gpt-3.5-turbo", temperature: 0, apiKey: <YOUR_API_KEY>, baseURL: "https://api.scaleway.ai/v1" });
|
||||
```
|
||||
|
||||
## Load and index documents
|
||||
|
||||
For this example, we will use a single document. In a real-world scenario, you would have multiple documents to index.
|
||||
|
||||
@@ -1,116 +0,0 @@
|
||||
---
|
||||
title: Perplexity LLM
|
||||
---
|
||||
## Usage
|
||||
|
||||
|
||||
```ts
|
||||
import { Settings } from "llamaindex";
|
||||
import { perplexity } from "@llamaindex/perplexity";
|
||||
Settings.llm = perplexity({
|
||||
apiKey: "<YOUR_API_KEY>",
|
||||
model: "sonar", // or available models
|
||||
});
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
import { perplexity } from "@llamaindex/perplexity";
|
||||
|
||||
const perplexityLlm = perplexity({
|
||||
apiKey: "<YOUR_API_KEY>",
|
||||
model: "sonar", // or avaiable models
|
||||
});
|
||||
|
||||
async function main() {
|
||||
const response = await perplexityLlm.chat({
|
||||
messages: [
|
||||
{
|
||||
role: "system",
|
||||
content: "You are an AI assistant",
|
||||
},
|
||||
{
|
||||
role: "user",
|
||||
content: "Tell me about San Francisco",
|
||||
},
|
||||
],
|
||||
stream: false,
|
||||
});
|
||||
console.log(response);
|
||||
|
||||
const stream = await perplexityLlm.chat({
|
||||
messages: [
|
||||
{
|
||||
role: "system",
|
||||
content: "You are a creative AI assistant that tells engaging stories",
|
||||
},
|
||||
{
|
||||
role: "user",
|
||||
content: "Tell me a short story",
|
||||
},
|
||||
],
|
||||
stream: true,
|
||||
});
|
||||
|
||||
console.log("\nStreaming response:");
|
||||
for await (const chunk of stream) {
|
||||
process.stdout.write(chunk.delta);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Full Example
|
||||
|
||||
```ts
|
||||
import { perplexity } from "@llamaindex/perplexity";
|
||||
import { Document, Settings, VectorStoreIndex } from "llamaindex";
|
||||
|
||||
// Use the perplexity LLM
|
||||
Settings.llm = perplexity({ model: "sonar", apiKey: "<YOUR_API_KEY>" });
|
||||
|
||||
async function main() {
|
||||
const document = new Document({ text: essay, id_: "essay" });
|
||||
|
||||
// Load and index documents
|
||||
const index = await VectorStoreIndex.fromDocuments([document]);
|
||||
|
||||
// get retriever
|
||||
const retriever = index.asRetriever();
|
||||
|
||||
// Create a query engine
|
||||
const queryEngine = index.asQueryEngine({
|
||||
retriever,
|
||||
});
|
||||
|
||||
const query = "What is the meaning of life?";
|
||||
|
||||
// Query
|
||||
const response = await queryEngine.query({
|
||||
query,
|
||||
});
|
||||
|
||||
// Log the response
|
||||
console.log(response.response);
|
||||
}
|
||||
```
|
||||
|
||||
## Available Models
|
||||
|
||||
The following models are available:
|
||||
|
||||
- `sonar`: 128k context window
|
||||
- `sonar-pro`: 200k context window
|
||||
- `sonar-deep-research`: 128k context window
|
||||
- `sonar-reasoning`: 128k context window
|
||||
- `sonar-reasoning-pro`: 128k context window
|
||||
- `r1-1776`: 128k context window
|
||||
|
||||
|
||||
# Limitations
|
||||
|
||||
Currently does not support function calling.
|
||||
|
||||
## API Reference
|
||||
|
||||
- [Perplexity](/docs/api/classes/Perplexity)
|
||||
@@ -23,8 +23,7 @@ import { Tab, Tabs } from "fumadocs-ui/components/tabs";
|
||||
## Usage
|
||||
|
||||
```ts
|
||||
import { Settings } from "llamaindex";
|
||||
import { TogetherLLM } from "@llamaindex/together";
|
||||
import { Settings, TogetherLLM } from "llamaindex";
|
||||
|
||||
Settings.llm = new TogetherLLM({
|
||||
apiKey: "<YOUR_API_KEY>",
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
---
|
||||
title: Tools
|
||||
---
|
||||
|
||||
A "tool" is a utility that can be called by an agent on behalf of an LLM.
|
||||
A tool can be called to perform custom actions, or retrieve extra information based on the LLM-generated input.
|
||||
A result from a tool call can be used by subsequent steps in a workflow, or to compute a final answer.
|
||||
For example, a "weather tool" could fetch some live weather information from a geographical location.
|
||||
|
||||
## Function tool
|
||||
|
||||
Function tools are implemented with the `FunctionTool` class.
|
||||
A `FunctionTool` is constructed from a function with signature
|
||||
```ts
|
||||
(input: T, additionalArg?: AdditionalToolArgument) => R
|
||||
```
|
||||
where
|
||||
- `input` is generated by the LLM, `T` is the type defined by the tool `parameters`
|
||||
- `additionalArg` is an optional extra argument, see "Binding" below
|
||||
- `R` is the return type
|
||||
|
||||
### Binding
|
||||
|
||||
An additional argument can be bound to a tool, each tool call will be passed
|
||||
- the input provided by the LLM
|
||||
- the additional argument (extends object)
|
||||
|
||||
Note: calling the `bind` method will return a new `FunctionTool` instance, without modifying the tool which `bind` is called on.
|
||||
|
||||
Example to pass a `userToken` as additional argument:
|
||||
```ts
|
||||
import { agent, tool } from "llamaindex";
|
||||
|
||||
// first arg is LLM input, second is bound arg
|
||||
const queryKnowledgeBase = async ({ question }, { userToken }) => {
|
||||
const response = await fetch(`https://knowledge-base.com?token=${userToken}&query=${question}`);
|
||||
// ...
|
||||
};
|
||||
|
||||
// define tool as usual
|
||||
const kbTool = tool(queryKnowledgeBase, {
|
||||
name: 'queryKnowledgeBase',
|
||||
description: 'Query knowledge base',
|
||||
parameters: z.object({
|
||||
question: z.string({
|
||||
description: 'The user question',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
// create an agent
|
||||
const additionalArg = { userToken: 'abcd1234' };
|
||||
const workflow = agent({
|
||||
tools: [kbTool.bind(additionalArg)],
|
||||
// llm, systemPrompt etc
|
||||
})
|
||||
```
|
||||
@@ -119,7 +119,7 @@ Lastly, we run the workflow. The `.run()` method is async, so we use await here
|
||||
Optionally, you can choose to use a shared context between steps by specifying a context type when creating the workflow. Here's an example where multiple steps access a shared state:
|
||||
|
||||
```typescript
|
||||
import { HandlerContext } from "llamaindex";
|
||||
import { HandlerContext } from "@llamaindex/workflow";
|
||||
|
||||
type MyContextData = {
|
||||
query: string;
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { docs } from '@/.source';
|
||||
import { docs, meta } from '../../.source';
|
||||
import { createMDXSource } from 'fumadocs-mdx';
|
||||
import { loader } from 'fumadocs-core/source';
|
||||
import { createOpenAPI } from "fumadocs-openapi/server";
|
||||
|
||||
export const source = loader({
|
||||
baseUrl: '/docs',
|
||||
source: docs.toFumadocsSource(),
|
||||
source: createMDXSource(docs, meta),
|
||||
});
|
||||
|
||||
export const openapi = createOpenAPI();
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { createPreset } from "fumadocs-ui/tailwind-plugin";
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: ["class"],
|
||||
@@ -6,7 +8,13 @@ export default {
|
||||
"./src/app/**/*.{ts,tsx}",
|
||||
"./src/content/**/*.{md,mdx}",
|
||||
"./src/mdx-components.{ts,tsx}",
|
||||
"./node_modules/fumadocs-ui/dist/**/*.js",
|
||||
"./node_modules/fumadocs-openapi/dist/**/*.js",
|
||||
"./node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}",
|
||||
],
|
||||
presets: [createPreset()],
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
theme: {
|
||||
extend: {
|
||||
borderRadius: {
|
||||
@@ -16,8 +16,7 @@
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"@/.source": ["./.source/index.ts"]
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
{
|
||||
"$schema": "https://turbo.build/schema.json",
|
||||
"extends": ["//"],
|
||||
"tasks": {
|
||||
"build": {
|
||||
@@ -9,11 +8,6 @@
|
||||
"next-env.d.ts",
|
||||
"src/content/docs/cloud/api/**",
|
||||
"src/content/docs/api/**"
|
||||
],
|
||||
"env": [
|
||||
"LLAMA_CLOUD_API_KEY",
|
||||
"LLAMA_CLOUD_PIPELINE_ID",
|
||||
"OPENAI_API_KEY"
|
||||
]
|
||||
},
|
||||
"dev": {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cloudflare/workers-types": "^4.20241112.0",
|
||||
"typescript": "^5.7.3",
|
||||
"typescript": "^5.7.2",
|
||||
"wrangler": "^3.89.0"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
@@ -1,46 +1,5 @@
|
||||
# @llamaindex/cloudflare-worker-agent-test
|
||||
|
||||
## 0.0.145
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.11
|
||||
|
||||
## 0.0.144
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c1b5be5]
|
||||
- Updated dependencies [40ee761]
|
||||
- Updated dependencies [40ee761]
|
||||
- llamaindex@0.9.10
|
||||
|
||||
## 0.0.143
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.9
|
||||
|
||||
## 0.0.142
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bbc8c87]
|
||||
- llamaindex@0.9.8
|
||||
|
||||
## 0.0.141
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [beb922b]
|
||||
- llamaindex@0.9.7
|
||||
|
||||
## 0.0.140
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.6
|
||||
|
||||
## 0.0.139
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@llamaindex/cloudflare-worker-agent-test",
|
||||
"version": "0.0.145",
|
||||
"version": "0.0.139",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@@ -16,7 +16,7 @@
|
||||
"@cloudflare/workers-types": "^4.20241112.0",
|
||||
"@vitest/runner": "2.1.5",
|
||||
"@vitest/snapshot": "2.1.5",
|
||||
"typescript": "^5.7.3",
|
||||
"typescript": "^5.7.2",
|
||||
"vitest": "2.1.5",
|
||||
"wrangler": "^3.87.0"
|
||||
},
|
||||
|
||||
@@ -1,29 +1,5 @@
|
||||
# @llamaindex/llama-parse-browser-test
|
||||
|
||||
## 0.0.54
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @llamaindex/cloud@3.0.9
|
||||
|
||||
## 0.0.53
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @llamaindex/cloud@3.0.8
|
||||
|
||||
## 0.0.52
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @llamaindex/cloud@3.0.7
|
||||
|
||||
## 0.0.51
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @llamaindex/cloud@3.0.6
|
||||
|
||||
## 0.0.50
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@llamaindex/llama-parse-browser-test",
|
||||
"private": true,
|
||||
"version": "0.0.54",
|
||||
"version": "0.0.50",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -9,7 +9,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.7.3",
|
||||
"typescript": "^5.7.2",
|
||||
"vite": "^5.4.12",
|
||||
"vite-plugin-wasm": "^3.3.0"
|
||||
},
|
||||
|
||||
@@ -1,46 +1,5 @@
|
||||
# @llamaindex/next-agent-test
|
||||
|
||||
## 0.1.145
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.11
|
||||
|
||||
## 0.1.144
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c1b5be5]
|
||||
- Updated dependencies [40ee761]
|
||||
- Updated dependencies [40ee761]
|
||||
- llamaindex@0.9.10
|
||||
|
||||
## 0.1.143
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.9
|
||||
|
||||
## 0.1.142
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bbc8c87]
|
||||
- llamaindex@0.9.8
|
||||
|
||||
## 0.1.141
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [beb922b]
|
||||
- llamaindex@0.9.7
|
||||
|
||||
## 0.1.140
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.6
|
||||
|
||||
## 0.1.139
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@llamaindex/next-agent-test",
|
||||
"version": "0.1.145",
|
||||
"version": "0.1.139",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
@@ -10,16 +10,18 @@
|
||||
"dependencies": {
|
||||
"ai": "^4.0.0",
|
||||
"llamaindex": "workspace:*",
|
||||
"next": "15.2.0",
|
||||
"next": "15.1.7",
|
||||
"react": "19.0.0",
|
||||
"react-dom": "19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.9.0",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"eslint": "9.16.0",
|
||||
"eslint-config-next": "15.1.0",
|
||||
"typescript": "^5.7.3"
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "^5.7.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
/** @type {import('postcss-load-config').Config} */
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
||||
"gradient-conic":
|
||||
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
export default config;
|
||||
@@ -1,46 +1,5 @@
|
||||
# test-edge-runtime
|
||||
|
||||
## 0.1.144
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.11
|
||||
|
||||
## 0.1.143
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c1b5be5]
|
||||
- Updated dependencies [40ee761]
|
||||
- Updated dependencies [40ee761]
|
||||
- llamaindex@0.9.10
|
||||
|
||||
## 0.1.142
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.9
|
||||
|
||||
## 0.1.141
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bbc8c87]
|
||||
- llamaindex@0.9.8
|
||||
|
||||
## 0.1.140
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [beb922b]
|
||||
- llamaindex@0.9.7
|
||||
|
||||
## 0.1.139
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.6
|
||||
|
||||
## 0.1.138
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@llamaindex/nextjs-edge-runtime-test",
|
||||
"version": "0.1.144",
|
||||
"version": "0.1.138",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
@@ -9,14 +9,14 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"llamaindex": "workspace:*",
|
||||
"next": "15.2.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
"next": "15.1.7",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.9.0",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"typescript": "^5.7.3"
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"typescript": "^5.7.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,56 +1,5 @@
|
||||
# @llamaindex/next-node-runtime
|
||||
|
||||
## 0.1.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.11
|
||||
- @llamaindex/huggingface@0.0.45
|
||||
|
||||
## 0.1.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [aea550a]
|
||||
- Updated dependencies [c1b5be5]
|
||||
- Updated dependencies [40ee761]
|
||||
- Updated dependencies [40ee761]
|
||||
- @llamaindex/huggingface@0.0.44
|
||||
- llamaindex@0.9.10
|
||||
- @llamaindex/readers@2.0.8
|
||||
|
||||
## 0.1.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.9
|
||||
- @llamaindex/huggingface@0.0.43
|
||||
- @llamaindex/readers@2.0.7
|
||||
|
||||
## 0.1.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bbc8c87]
|
||||
- llamaindex@0.9.8
|
||||
|
||||
## 0.1.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [beb922b]
|
||||
- llamaindex@0.9.7
|
||||
- @llamaindex/huggingface@0.0.42
|
||||
- @llamaindex/readers@2.0.6
|
||||
|
||||
## 0.1.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.6
|
||||
- @llamaindex/huggingface@0.0.41
|
||||
- @llamaindex/readers@2.0.5
|
||||
|
||||
## 0.1.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@llamaindex/next-node-runtime-test",
|
||||
"version": "0.1.11",
|
||||
"version": "0.1.5",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
@@ -8,19 +8,21 @@
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"llamaindex": "workspace:*",
|
||||
"@llamaindex/huggingface": "workspace:*",
|
||||
"@llamaindex/readers": "workspace:*",
|
||||
"llamaindex": "workspace:*",
|
||||
"next": "15.2.0",
|
||||
"next": "15.1.7",
|
||||
"react": "19.0.0",
|
||||
"react-dom": "19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.9.0",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"eslint": "9.16.0",
|
||||
"eslint-config-next": "15.1.0",
|
||||
"typescript": "^5.7.3"
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "^5.7.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
/** @type {import('postcss-load-config').Config} */
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -1,7 +1,13 @@
|
||||
"use server";
|
||||
import { HuggingFaceEmbedding } from "@llamaindex/huggingface";
|
||||
import { SimpleDirectoryReader } from "@llamaindex/readers/directory";
|
||||
import { OpenAI, OpenAIAgent, Settings, VectorStoreIndex } from "llamaindex";
|
||||
import {
|
||||
OpenAI,
|
||||
OpenAIAgent,
|
||||
QueryEngineTool,
|
||||
Settings,
|
||||
VectorStoreIndex,
|
||||
} from "llamaindex";
|
||||
|
||||
Settings.llm = new OpenAI({
|
||||
apiKey: process.env.NEXT_PUBLIC_OPENAI_KEY ?? "FAKE_KEY_TO_PASS_TESTS",
|
||||
@@ -25,20 +31,23 @@ export async function getOpenAIModelRequest(query: string) {
|
||||
const reader = new SimpleDirectoryReader();
|
||||
const documents = await reader.loadData(currentDir);
|
||||
const index = await VectorStoreIndex.fromDocuments(documents);
|
||||
const retriever = index.asRetriever({
|
||||
similarityTopK: 10,
|
||||
});
|
||||
const queryEngine = index.asQueryEngine({
|
||||
retriever,
|
||||
});
|
||||
|
||||
// define the query engine as a tool
|
||||
const tools = [
|
||||
index.queryTool({
|
||||
options: {
|
||||
similarityTopK: 10,
|
||||
},
|
||||
new QueryEngineTool({
|
||||
queryEngine: queryEngine,
|
||||
metadata: {
|
||||
name: "deployment_details_per_env",
|
||||
description: `This tool can answer detailed questions about deployments happened in various environments.`,
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
// create the agent
|
||||
const agent = new OpenAIAgent({ tools });
|
||||
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
||||
"gradient-conic":
|
||||
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
export default config;
|
||||
@@ -1,46 +1,5 @@
|
||||
# vite-import-llamaindex
|
||||
|
||||
## 0.0.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.11
|
||||
|
||||
## 0.0.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c1b5be5]
|
||||
- Updated dependencies [40ee761]
|
||||
- Updated dependencies [40ee761]
|
||||
- llamaindex@0.9.10
|
||||
|
||||
## 0.0.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.9
|
||||
|
||||
## 0.0.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bbc8c87]
|
||||
- llamaindex@0.9.8
|
||||
|
||||
## 0.0.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [beb922b]
|
||||
- llamaindex@0.9.7
|
||||
|
||||
## 0.0.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.6
|
||||
|
||||
## 0.0.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "vite-import-llamaindex",
|
||||
"private": true,
|
||||
"version": "0.0.11",
|
||||
"version": "0.0.5",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
@@ -15,7 +15,7 @@
|
||||
"devDependencies": {
|
||||
"@size-limit/preset-big-lib": "^11.1.6",
|
||||
"size-limit": "^11.1.6",
|
||||
"typescript": "^5.7.3",
|
||||
"typescript": "^5.7.2",
|
||||
"vite": "^6.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
@@ -1,47 +1,5 @@
|
||||
# @llamaindex/waku-query-engine-test
|
||||
|
||||
## 0.0.145
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.11
|
||||
|
||||
## 0.0.144
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c1b5be5]
|
||||
- Updated dependencies [40ee761]
|
||||
- Updated dependencies [40ee761]
|
||||
- llamaindex@0.9.10
|
||||
|
||||
## 0.0.143
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.9
|
||||
|
||||
## 0.0.142
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bbc8c87]
|
||||
- llamaindex@0.9.8
|
||||
|
||||
## 0.0.141
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [beb922b]
|
||||
- @llamaindex/env@0.1.29
|
||||
- llamaindex@0.9.7
|
||||
|
||||
## 0.0.140
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.9.6
|
||||
|
||||
## 0.0.139
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@llamaindex/waku-query-engine-test",
|
||||
"version": "0.0.145",
|
||||
"version": "0.0.139",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@@ -17,10 +17,10 @@
|
||||
"waku": "0.21.20"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "19.0.10",
|
||||
"@types/react-dom": "19.0.4",
|
||||
"@types/react": "18.3.12",
|
||||
"@types/react-dom": "18.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"tailwindcss": "^4.0.9",
|
||||
"typescript": "5.7.3"
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "5.7.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
/** @type {import('postcss-load-config').Config} */
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@@ -1,5 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
@@ -10,10 +10,10 @@ export const Chat = (props: ChatProps) => {
|
||||
const [response, setResponse] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<section className="-mx-4 mt-4 rounded border border-dashed border-blue-400 p-4">
|
||||
<section className="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4">
|
||||
<h2 className="text-lg font-bold">Chat with AI</h2>
|
||||
{response ? (
|
||||
<p className="max-w-sm text-sm text-gray-600">{response}</p>
|
||||
<p className="text-sm text-gray-600 max-w-sm">{response}</p>
|
||||
) : null}
|
||||
<form
|
||||
action={async (formData) => {
|
||||
@@ -26,7 +26,7 @@ export const Chat = (props: ChatProps) => {
|
||||
<input
|
||||
type="text"
|
||||
name="question"
|
||||
className="rounded-sm border border-gray-400 px-2 py-0.5 text-sm"
|
||||
className="border border-gray-400 rounded-sm px-2 py-0.5 text-sm"
|
||||
/>
|
||||
<button className="rounded-sm bg-black px-2 py-0.5 text-sm text-white">
|
||||
Ask
|
||||
|
||||
@@ -1,2 +1,4 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap");
|
||||
@import "tailwindcss";
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
+38
-22
@@ -1,5 +1,4 @@
|
||||
import { FunctionTool } from "llamaindex";
|
||||
import { z } from "zod";
|
||||
|
||||
function sumNumbers({ a, b }: { a: number; b: number }) {
|
||||
return `${a + b}`;
|
||||
@@ -12,27 +11,39 @@ function divideNumbers({ a, b }: { a: number; b: number }) {
|
||||
export const sumNumbersTool = FunctionTool.from(sumNumbers, {
|
||||
name: "sumNumbers",
|
||||
description: "Use this function to sum two numbers",
|
||||
parameters: z.object({
|
||||
a: z.number({
|
||||
description: "The first number",
|
||||
}),
|
||||
b: z.number({
|
||||
description: "The second number",
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
a: {
|
||||
type: "number",
|
||||
description: "The first number",
|
||||
},
|
||||
b: {
|
||||
type: "number",
|
||||
description: "The second number",
|
||||
},
|
||||
},
|
||||
required: ["a", "b"],
|
||||
},
|
||||
});
|
||||
|
||||
export const divideNumbersTool = FunctionTool.from(divideNumbers, {
|
||||
name: "divideNumbers",
|
||||
description: "Use this function to divide two numbers",
|
||||
parameters: z.object({
|
||||
a: z.number({
|
||||
description: "The first number",
|
||||
}),
|
||||
b: z.number({
|
||||
description: "The second number",
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
a: {
|
||||
type: "number",
|
||||
description: "The first number",
|
||||
},
|
||||
b: {
|
||||
type: "number",
|
||||
description: "The second number",
|
||||
},
|
||||
},
|
||||
required: ["a", "b"],
|
||||
},
|
||||
});
|
||||
|
||||
// should always return the 72 degrees
|
||||
@@ -43,10 +54,15 @@ export const getWeatherTool = FunctionTool.from(
|
||||
{
|
||||
name: "getWeather",
|
||||
description: "Get the weather for a city",
|
||||
parameters: z.object({
|
||||
city: z.string({
|
||||
description: "The city to get the weather for",
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
city: {
|
||||
type: "string",
|
||||
description: "The city to get the weather for",
|
||||
},
|
||||
},
|
||||
required: ["city"],
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
+4
-5
@@ -10,23 +10,22 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@faker-js/faker": "^9.2.0",
|
||||
"@huggingface/transformers": "^3.0.2",
|
||||
"@llamaindex/anthropic": "workspace:*",
|
||||
"@llamaindex/clip": "workspace:*",
|
||||
"@llamaindex/core": "workspace:*",
|
||||
"@llamaindex/env": "workspace:*",
|
||||
"@llamaindex/ollama": "workspace:*",
|
||||
"@llamaindex/openai": "workspace:*",
|
||||
"@llamaindex/pinecone": "workspace:*",
|
||||
"@llamaindex/postgres": "workspace:*",
|
||||
"@llamaindex/clip": "workspace:*",
|
||||
"@llamaindex/anthropic": "workspace:*",
|
||||
"@types/node": "^22.9.0",
|
||||
"@types/pg": "^8.11.8",
|
||||
"@huggingface/transformers": "^3.0.2",
|
||||
"consola": "^3.2.3",
|
||||
"dotenv": "^16.4.5",
|
||||
"llamaindex": "workspace:*",
|
||||
"pg": "^8.12.0",
|
||||
"pgvector": "0.2.0",
|
||||
"tsx": "^4.19.3",
|
||||
"zod": "^3.24.2"
|
||||
"tsx": "^4.19.0"
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user