mirror of
https://github.com/run-llama/LlamaIndexTS.git
synced 2026-07-01 22:14:03 -04:00
Compare commits
68 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a50acf634c | |||
| 7039e1a214 | |||
| 785d010cd3 | |||
| b878032131 | |||
| f7ec293a0f | |||
| 49a5e0a8cf | |||
| 118924799a | |||
| ec8f673dae | |||
| 85039a5360 | |||
| d7305edb53 | |||
| 096bf2bda1 | |||
| c5846bd7dc | |||
| 97bbce6e13 | |||
| 62699b7497 | |||
| a89e187796 | |||
| d8ac8d385d | |||
| a6cef9c6be | |||
| c5b2691302 | |||
| 8122c7245e | |||
| 8a51c167f8 | |||
| 1b5af1402d | |||
| fffe93fac8 | |||
| dbd857f6b5 | |||
| a4d394f727 | |||
| 3c857f4132 | |||
| 36cfb93eb2 | |||
| ab4762f026 | |||
| 56763dc57d | |||
| 5375fdd704 | |||
| e7484efca5 | |||
| c958a1645a | |||
| 0140a257c4 | |||
| 40161fe8d2 | |||
| d883fe7351 | |||
| 2bc6914784 | |||
| 78fbec17a6 | |||
| 8b10a2e880 | |||
| 534662368f | |||
| b370bd59f1 | |||
| 766054ba67 | |||
| 71598f86d7 | |||
| 677abe46d2 | |||
| 1cc271ccae | |||
| c927457e2e | |||
| 17ae23560e | |||
| 0d9169e42d | |||
| 3864c77ac3 | |||
| a86f66cd2d | |||
| e5b25acc3d | |||
| ba35240b4c | |||
| 7384e4d273 | |||
| ae75966721 | |||
| 5cdab12791 | |||
| eaf2cb11a5 | |||
| 3ae01a227e | |||
| 76ff23dc48 | |||
| ed497727b1 | |||
| 59601dd3ab | |||
| 8474ca970e | |||
| 3703f907d9 | |||
| f63b702bec | |||
| ccde88fe0b | |||
| b0cd5301bb | |||
| 3e66ddc10d | |||
| c719b968f3 | |||
| c73c659c6d | |||
| 361a685012 | |||
| 680b529e94 |
@@ -0,0 +1,92 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Development Commands
|
||||
|
||||
This project uses pnpm as the package manager and Turbo for build orchestration:
|
||||
|
||||
- `pnpm install` - Install all dependencies
|
||||
- `pnpm build` - Build all packages using Turbo
|
||||
- `pnpm dev` - Start development mode for all packages
|
||||
- `pnpm test` - Run all unit tests
|
||||
- `pnpm e2e` - Run end-to-end tests
|
||||
- `pnpm lint` - Run ESLint across all packages
|
||||
- `pnpm type-check` - Run TypeScript type checking across workspace
|
||||
- `pnpm format` - Check code formatting with Prettier
|
||||
- `pnpm format:write` - Auto-fix formatting issues
|
||||
- `pnpm circular-check` - Check for circular dependencies using madge
|
||||
|
||||
For individual package development:
|
||||
|
||||
- `turbo run build --filter="@llamaindex/core"` - Build specific package
|
||||
- `turbo run test --filter="@llamaindex/core"` - Test specific package
|
||||
- Navigate to specific package directory and run `pnpm test` for focused testing
|
||||
- `pnpm clean` - Remove all build artifacts and node_modules across workspace
|
||||
|
||||
## Architecture Overview
|
||||
|
||||
LlamaIndex.TS is a TypeScript data framework for LLM applications organized as a pnpm monorepo with multiple runtime environment support (Node.js, Deno, Bun, Vercel Edge, Cloudflare Workers).
|
||||
|
||||
### Package Structure
|
||||
|
||||
**Core Packages:**
|
||||
|
||||
- `packages/core/` - Abstract base classes and interfaces for all runtime environments
|
||||
- `packages/llamaindex/` - Main package that aggregates core functionality
|
||||
- `packages/env/` - Environment-specific compatibility layers for different JS runtimes
|
||||
|
||||
**Provider Packages (`packages/providers/`):**
|
||||
|
||||
- LLM providers: `openai/`, `anthropic/`, `ollama/`, `google/`, `groq/`, etc.
|
||||
- Vector stores: `storage/pinecone/`, `storage/chroma/`, `storage/qdrant/`, etc.
|
||||
- Embeddings: Various embedding providers integrated within LLM packages
|
||||
- Readers: `assemblyai/`, `discord/`, `notion/` for data ingestion
|
||||
|
||||
**Specialized Packages:**
|
||||
|
||||
- `packages/cloud/` - LlamaCloud integration for managed services
|
||||
- `packages/tools/` - Function calling tools and utilities
|
||||
- `packages/workflow/` - Agent workflow orchestration
|
||||
- `packages/readers/` - File format readers (PDF, DOCX, etc.)
|
||||
|
||||
### Key Architectural Patterns
|
||||
|
||||
**Runtime Abstraction:** Core functionality is runtime-agnostic, with environment-specific implementations in separate entry points (`index.ts`, `index.edge.ts`, `index.workerd.ts`).
|
||||
|
||||
**Provider Pattern:** LLMs, embeddings, and vector stores implement common interfaces from `@llamaindex/core`, allowing easy swapping between providers.
|
||||
|
||||
**Modular Design:** Each provider is a separate package to minimize bundle size - users install only what they need.
|
||||
|
||||
**Data Flow:** Document → NodeParser → Embedding → VectorStore → Retriever → QueryEngine → Response
|
||||
|
||||
### Core Components
|
||||
|
||||
- **Agents and Workflows:** Abstractions for building agentic workflows and agents in `packages/workflow`
|
||||
- **Chat Engines:** Conversational interfaces in `core/chat-engine/`
|
||||
- **Query Engines:** Document querying with retrieval in `core/query-engine/`
|
||||
- **Indices:** VectorStoreIndex, SummaryIndex, KeywordTable in `llamaindex/indices/`
|
||||
- **Node Parsers:** Text splitting and chunking in `core/node-parser/`
|
||||
- **Ingestion Pipeline:** Document processing workflows in `llamaindex/ingestion/`
|
||||
- **Storage:** Chat stores, document stores, index stores, and KV stores in `core/storage/`
|
||||
|
||||
### Deprecated Components
|
||||
|
||||
- **Agents:** ReAct and function calling agents in `core/agent/` and `llamaindex/agent/`
|
||||
|
||||
### Testing Structure
|
||||
|
||||
- Unit tests in each package's `tests/` directory
|
||||
- E2E tests in `e2e/` directory with runtime-specific examples
|
||||
- Tests depend on build artifacts, so always run `pnpm build` before testing
|
||||
|
||||
### Multi-Runtime Support
|
||||
|
||||
The codebase supports multiple JavaScript runtimes through conditional exports and separate entry points. When making changes, consider compatibility across Node.js, Deno, Bun, and edge runtimes.
|
||||
|
||||
### Development Notes
|
||||
|
||||
- The project uses Husky for git hooks with lint-staged for pre-commit formatting and linting
|
||||
- All packages use bunchee for building with dual CJS/ESM support
|
||||
- Core package exports are organized as sub-modules (e.g., `@llamaindex/core/llms`, `@llamaindex/core/embeddings`)
|
||||
- Always run `pnpm build` before running tests, as tests depend on build artifacts
|
||||
@@ -1,5 +1,155 @@
|
||||
# @llamaindex/doc
|
||||
|
||||
## 0.2.31
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7039e1a]
|
||||
- Updated dependencies [7039e1a]
|
||||
- llamaindex@0.11.11
|
||||
- @llamaindex/core@0.6.12
|
||||
- @llamaindex/cloud@4.0.16
|
||||
- @llamaindex/node-parser@2.0.12
|
||||
- @llamaindex/openai@0.4.6
|
||||
- @llamaindex/readers@3.1.11
|
||||
- @llamaindex/workflow@1.1.12
|
||||
|
||||
## 0.2.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [f7ec293]
|
||||
- @llamaindex/workflow@1.1.11
|
||||
- llamaindex@0.11.10
|
||||
|
||||
## 0.2.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c5846bd]
|
||||
- @llamaindex/readers@3.1.10
|
||||
|
||||
## 0.2.28
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a89e187]
|
||||
- Updated dependencies [62699b7]
|
||||
- Updated dependencies [c5b2691]
|
||||
- Updated dependencies [d8ac8d3]
|
||||
- @llamaindex/core@0.6.11
|
||||
- @llamaindex/openai@0.4.5
|
||||
- @llamaindex/cloud@4.0.15
|
||||
- llamaindex@0.11.9
|
||||
- @llamaindex/node-parser@2.0.11
|
||||
- @llamaindex/readers@3.1.9
|
||||
- @llamaindex/workflow@1.1.10
|
||||
|
||||
## 0.2.27
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 8a51c16: Add natural language agent page
|
||||
- Updated dependencies [8a51c16]
|
||||
- Updated dependencies [1b5af14]
|
||||
- @llamaindex/workflow@1.1.9
|
||||
- @llamaindex/core@0.6.10
|
||||
- llamaindex@0.11.8
|
||||
- @llamaindex/cloud@4.0.14
|
||||
- @llamaindex/node-parser@2.0.10
|
||||
- @llamaindex/openai@0.4.4
|
||||
- @llamaindex/readers@3.1.8
|
||||
|
||||
## 0.2.26
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- a4d394f: fix: correct SimpleDirectoryReader import path in documentation example
|
||||
- Updated dependencies [dbd857f]
|
||||
- Updated dependencies [3c857f4]
|
||||
- @llamaindex/workflow@1.1.8
|
||||
- llamaindex@0.11.7
|
||||
|
||||
## 0.2.25
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [40161fe]
|
||||
- @llamaindex/workflow@1.1.7
|
||||
- llamaindex@0.11.6
|
||||
|
||||
## 0.2.24
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [766054b]
|
||||
- Updated dependencies [71598f8]
|
||||
- @llamaindex/workflow@1.1.6
|
||||
- @llamaindex/core@0.6.9
|
||||
- llamaindex@0.11.5
|
||||
- @llamaindex/cloud@4.0.13
|
||||
- @llamaindex/node-parser@2.0.9
|
||||
- @llamaindex/openai@0.4.3
|
||||
- @llamaindex/readers@3.1.7
|
||||
|
||||
## 0.2.23
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c927457]
|
||||
- @llamaindex/openai@0.4.2
|
||||
- @llamaindex/core@0.6.8
|
||||
- @llamaindex/cloud@4.0.12
|
||||
- llamaindex@0.11.4
|
||||
- @llamaindex/node-parser@2.0.8
|
||||
- @llamaindex/readers@3.1.6
|
||||
- @llamaindex/workflow@1.1.5
|
||||
|
||||
## 0.2.22
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [76ff23d]
|
||||
- @llamaindex/cloud@4.0.11
|
||||
- llamaindex@0.11.3
|
||||
|
||||
## 0.2.21
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [59601dd]
|
||||
- @llamaindex/openai@0.4.1
|
||||
- @llamaindex/core@0.6.7
|
||||
- @llamaindex/cloud@4.0.10
|
||||
- llamaindex@0.11.2
|
||||
- @llamaindex/node-parser@2.0.7
|
||||
- @llamaindex/readers@3.1.5
|
||||
- @llamaindex/workflow@1.1.4
|
||||
|
||||
## 0.2.20
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3703f90]
|
||||
- @llamaindex/cloud@4.0.9
|
||||
- llamaindex@0.11.1
|
||||
|
||||
## 0.2.19
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [680b529]
|
||||
- Updated dependencies [b0cd530]
|
||||
- Updated dependencies [361a685]
|
||||
- Updated dependencies [3e66ddc]
|
||||
- @llamaindex/workflow@1.1.3
|
||||
- @llamaindex/core@0.6.6
|
||||
- llamaindex@0.11.0
|
||||
- @llamaindex/openai@0.4.0
|
||||
- @llamaindex/cloud@4.0.8
|
||||
- @llamaindex/node-parser@2.0.6
|
||||
- @llamaindex/readers@3.1.4
|
||||
|
||||
## 0.2.18
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with the LlamaIndex.TS documentation site.
|
||||
|
||||
## Application Overview
|
||||
|
||||
This is a Next.js documentation site (`@llamaindex/doc`) that serves as the official documentation for LlamaIndex.TS. It's built using Fumadocs, a modern documentation framework, and includes interactive features, API documentation generation, and AI-powered chat functionality.
|
||||
|
||||
## Development Commands
|
||||
|
||||
From this directory (`apps/next/`):
|
||||
|
||||
- `pnpm dev` - Start development server with Turbo
|
||||
- `pnpm build` - Build the documentation site (includes `prebuild` step)
|
||||
- `pnpm start` - Start production server
|
||||
- `pnpm build:docs` - Generate API documentation from TypeScript source
|
||||
- `pnpm validate-links` - Validate all internal and external links
|
||||
|
||||
Key build process:
|
||||
|
||||
1. `prebuild` runs `build:docs` to generate API documentation using TypeDoc
|
||||
2. `build` runs Next.js build process
|
||||
3. `postbuild` runs post-processing scripts and link validation
|
||||
|
||||
## Architecture
|
||||
|
||||
### Framework Stack
|
||||
|
||||
- **Next.js 15.3** - React framework with App Router
|
||||
- **Fumadocs** - Documentation framework with MDX support
|
||||
- **React Server Components** - AI chat functionality with server actions
|
||||
- **Tailwind CSS** - Styling with custom design system
|
||||
- **TypeScript** - Full type safety
|
||||
|
||||
### Key Dependencies
|
||||
|
||||
- **Fumadocs ecosystem**: `fumadocs-ui`, `fumadocs-mdx`, `fumadocs-core`, `fumadocs-openapi`
|
||||
- **AI features**: `ai` package for React Server Components chat
|
||||
- **Code features**: Monaco Editor, Shiki syntax highlighting, Twoslash TypeScript integration
|
||||
- **UI components**: Radix UI primitives, Framer Motion animations
|
||||
- **Content processing**: MDX, remark/rehype plugins, TypeDoc for API generation
|
||||
|
||||
### Directory Structure
|
||||
|
||||
**Content Management:**
|
||||
|
||||
- `src/content/docs/` - MDX documentation files organized by topic
|
||||
- `src/content/docs/api/` - Auto-generated API documentation from TypeScript
|
||||
- `scripts/` - Build-time documentation generation and validation
|
||||
|
||||
**Application Code:**
|
||||
|
||||
- `src/app/` - Next.js App Router pages and API routes
|
||||
- `src/components/` - Reusable React components including UI library
|
||||
- `src/lib/` - Utilities, constants, and configuration
|
||||
|
||||
**Configuration:**
|
||||
|
||||
- `source.config.ts` - Fumadocs MDX configuration with plugins
|
||||
- `next.config.mjs` - Next.js configuration with MDX integration
|
||||
- `tailwind.config.mjs` - Tailwind CSS customization
|
||||
|
||||
### Key Features
|
||||
|
||||
**Documentation Features:**
|
||||
|
||||
- MDX-based content with TypeScript code highlighting
|
||||
- Auto-generated API documentation from TypeScript source
|
||||
- Interactive code examples with Monaco Editor
|
||||
- Math equation support with KaTeX
|
||||
- Link validation and build-time checks
|
||||
|
||||
**Interactive Features:**
|
||||
|
||||
- AI-powered chat interface using React Server Components
|
||||
- Code demos with live TypeScript execution
|
||||
- Interactive UI components and animations
|
||||
- Search functionality across all documentation
|
||||
|
||||
**Build Process:**
|
||||
|
||||
- TypeDoc generates API documentation from workspace packages
|
||||
- Custom scripts transform and validate generated content
|
||||
- Link checking ensures all internal/external links work
|
||||
- Static site generation with 10-minute timeout for large documentation set
|
||||
|
||||
### Configuration Files
|
||||
|
||||
**source.config.ts**: Defines MDX processing pipeline with:
|
||||
|
||||
- Code highlighting themes (Catppuccin)
|
||||
- Twoslash TypeScript integration
|
||||
- Remark/rehype plugins for enhanced Markdown
|
||||
- Content directories including external docs
|
||||
|
||||
**next.config.mjs**: Next.js configuration with:
|
||||
|
||||
- Extended static generation timeout (10 minutes)
|
||||
- Monaco Editor transpilation
|
||||
- Server external packages for build optimization
|
||||
- Webpack/Turbopack aliases for browser compatibility
|
||||
|
||||
### Content Organization
|
||||
|
||||
**Documentation Structure:**
|
||||
|
||||
- `/docs/llamaindex/` - Core LlamaIndex.TS documentation
|
||||
- `/docs/cloud/` - LlamaCloud integration guides
|
||||
- `/docs/api/` - Auto-generated TypeScript API reference
|
||||
|
||||
**Content Sources:**
|
||||
|
||||
- Local MDX files in `src/content/docs/`
|
||||
- External docs from `@llamaindex/workflow-docs` package
|
||||
- Generated API docs from TypeScript source
|
||||
|
||||
### Development Notes
|
||||
|
||||
- Documentation content is sourced from multiple locations including external packages
|
||||
- API documentation is regenerated on each build from TypeScript source
|
||||
- The site uses advanced MDX features including custom transformers and plugins
|
||||
- Build process includes comprehensive link validation
|
||||
- Large memory allocation needed for TypeDoc generation (`--max-old-space-size=8192`)
|
||||
- Chat functionality uses React Server Components with streaming responses
|
||||
|
||||
### AI Chat Integration
|
||||
|
||||
The documentation includes an AI chat feature that:
|
||||
|
||||
- Uses React Server Components for server-side AI processing
|
||||
- Integrates with LlamaIndex.TS packages for demonstrations
|
||||
- Provides interactive examples and code generation
|
||||
- Streams responses for better user experience
|
||||
|
||||
### Content Authoring
|
||||
|
||||
When adding new documentation:
|
||||
|
||||
- Create MDX files in appropriate `src/content/docs/` subdirectories
|
||||
- Follow existing content structure and frontmatter conventions
|
||||
- Use Fumadocs MDX features like code blocks, callouts, and tabs
|
||||
- API documentation is auto-generated - edit TypeScript source comments instead
|
||||
- Run `pnpm validate-links` to check all links before publishing
|
||||
@@ -15,6 +15,20 @@ const config = {
|
||||
"twoslash",
|
||||
"typescript",
|
||||
],
|
||||
async redirects() {
|
||||
return [
|
||||
{
|
||||
source: "/docs/chat-ui/:path*.mdx",
|
||||
destination: "/docs/chat-ui/:path*",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/workflows/:path*.mdx",
|
||||
destination: "/docs/workflows/:path*",
|
||||
permanent: true,
|
||||
},
|
||||
];
|
||||
},
|
||||
turbopack: {
|
||||
resolveAlias: {
|
||||
fs: { browser: "./fallback.js" },
|
||||
|
||||
+10
-10
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@llamaindex/doc",
|
||||
"version": "0.2.18",
|
||||
"version": "0.2.31",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"postinstall": "fumadocs-mdx",
|
||||
@@ -15,8 +15,8 @@
|
||||
"dependencies": {
|
||||
"@huggingface/transformers": "^3.5.0",
|
||||
"@icons-pack/react-simple-icons": "^10.1.0",
|
||||
"@llama-flow/docs": "0.0.8",
|
||||
"@llamaindex/chat-ui": "0.2.0",
|
||||
"@llamaindex/workflow-docs": "0.1.1",
|
||||
"@llamaindex/chat-ui-docs": "^0.0.5",
|
||||
"@llamaindex/cloud": "workspace:*",
|
||||
"@llamaindex/core": "workspace:*",
|
||||
"@llamaindex/node-parser": "workspace:*",
|
||||
@@ -39,13 +39,13 @@
|
||||
"clsx": "2.1.1",
|
||||
"foxact": "^0.2.41",
|
||||
"framer-motion": "^11.11.17",
|
||||
"fumadocs-core": "^15.2.7",
|
||||
"fumadocs-core": "^15.5.0",
|
||||
"fumadocs-docgen": "^2.0.0",
|
||||
"fumadocs-mdx": "^11.6.0",
|
||||
"fumadocs-openapi": "^8.0.1",
|
||||
"fumadocs-twoslash": "^3.1.1",
|
||||
"fumadocs-typescript": "^4.0.2",
|
||||
"fumadocs-ui": "^15.2.7",
|
||||
"fumadocs-mdx": "^11.6.6",
|
||||
"fumadocs-openapi": "^9.0.5",
|
||||
"fumadocs-twoslash": "^3.1.3",
|
||||
"fumadocs-typescript": "^4.0.5",
|
||||
"fumadocs-ui": "^15.5.0",
|
||||
"hast-util-to-jsx-runtime": "^2.3.2",
|
||||
"llamaindex": "workspace:*",
|
||||
"lucide-react": "^0.460.0",
|
||||
@@ -69,7 +69,7 @@
|
||||
"twoslash": "^0.3.1",
|
||||
"use-stick-to-bottom": "^1.0.42",
|
||||
"web-tree-sitter": "^0.24.4",
|
||||
"zod": "^3.23.8"
|
||||
"zod": "^3.25.67"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@next/env": "^15.3.0",
|
||||
|
||||
@@ -4,7 +4,6 @@ import matter from "gray-matter";
|
||||
import path from "path";
|
||||
|
||||
const CONTENT_DIR = path.join(process.cwd(), "src/content/docs");
|
||||
const BUILD_DIR = path.join(process.cwd(), ".next");
|
||||
|
||||
// Regular expression to find internal links
|
||||
// This captures Markdown links [text](/docs/path) and href attributes href="/docs/path"
|
||||
@@ -14,6 +13,8 @@ const INTERNAL_LINK_REGEX = /(?:(?:\]\(|\bhref=["'])\/docs\/([^")]+))/g;
|
||||
// This captures relative links like [text](./path) or 
|
||||
const RELATIVE_LINK_REGEX = /(?:\]\()(?:\s*)(?:\.\.?)\//g;
|
||||
|
||||
const ALLOWED_LINKS = ["/docs/workflows", "/docs/chat-ui"];
|
||||
|
||||
interface LinkValidationResult {
|
||||
file: string;
|
||||
invalidLinks: Array<{ link: string; line: number }>;
|
||||
@@ -28,7 +29,7 @@ interface RelativeLinkResult {
|
||||
* Get all valid documentation routes from the content directory
|
||||
*/
|
||||
async function getValidRoutes(): Promise<Set<string>> {
|
||||
const mdxFiles = await glob("**/*.mdx?", { cwd: CONTENT_DIR });
|
||||
const mdxFiles = await glob("**/*.{md,mdx}", { cwd: CONTENT_DIR });
|
||||
|
||||
const routes = new Set<string>();
|
||||
|
||||
@@ -124,14 +125,11 @@ function findRelativeLinksInFile(
|
||||
return relativeLinks;
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate internal links in all MDX files
|
||||
*/
|
||||
/**
|
||||
* Find relative links in all MDX files
|
||||
*/
|
||||
async function findRelativeLinks(): Promise<RelativeLinkResult[]> {
|
||||
const mdxFiles = await glob("**/*.mdx?", { cwd: CONTENT_DIR });
|
||||
const mdxFiles = await glob("**/*.mdx", { cwd: CONTENT_DIR });
|
||||
const results: RelativeLinkResult[] = [];
|
||||
|
||||
for (const file of mdxFiles) {
|
||||
@@ -150,7 +148,7 @@ async function findRelativeLinks(): Promise<RelativeLinkResult[]> {
|
||||
}
|
||||
|
||||
async function validateLinks(): Promise<LinkValidationResult[]> {
|
||||
const mdxFiles = await glob("**/*.mdx?", { cwd: CONTENT_DIR });
|
||||
const mdxFiles = await glob("**/*.mdx", { cwd: CONTENT_DIR });
|
||||
const validRoutes = await getValidRoutes();
|
||||
|
||||
const results: LinkValidationResult[] = [];
|
||||
@@ -160,6 +158,11 @@ async function validateLinks(): Promise<LinkValidationResult[]> {
|
||||
const links = extractLinksFromFile(filePath);
|
||||
|
||||
const invalidLinks = links.filter(({ link }) => {
|
||||
// Check if the link is in the allowed list
|
||||
if (ALLOWED_LINKS.includes(`/docs/${link}`)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if the link exists in valid routes
|
||||
// First normalize the link (remove any query string or hash)
|
||||
const baseLink = link.split("?")[0].split("#")[0];
|
||||
|
||||
@@ -9,7 +9,16 @@ import rehypeKatex from "rehype-katex";
|
||||
import remarkMath from "remark-math";
|
||||
|
||||
export const docs = defineDocs({
|
||||
dir: ["./src/content/docs", "./node_modules/@llama-flow/docs"],
|
||||
dir: [
|
||||
"./src/content/docs",
|
||||
"./node_modules/@llamaindex/workflow-docs",
|
||||
"./node_modules/@llamaindex/chat-ui-docs",
|
||||
// NOTE: When adding external docs (like chat-ui or workflow-docs above),
|
||||
// make sure to also update:
|
||||
// 1. scripts/validate-links.mts - add to ALLOWED_LINKS array
|
||||
// 2. next.config.mjs - add redirect for .mdx files
|
||||
// 3. src/content/docs/meta.json - add to pages array
|
||||
],
|
||||
docs: {
|
||||
async: true,
|
||||
},
|
||||
|
||||
@@ -113,7 +113,8 @@ export default function HomePage() {
|
||||
description="Truly powerful retrieval-augmented generation applications use agentic techniques, and LlamaIndex.TS makes it easy to build them."
|
||||
>
|
||||
<CodeBlock
|
||||
code={`import { SimpleDirectoryReader, VectorStoreIndex } from "llamaindex";
|
||||
code={`import { VectorStoreIndex } from "llamaindex";
|
||||
import { SimpleDirectoryReader } from "@llamaindex/readers/directory";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
import { agent } from "@llamaindex/workflow";
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { ChatDemoRSC } from "@/components/demo/chat/rsc/demo";
|
||||
import * as demos from "@/components/demo/lazy";
|
||||
import { createMetadata, metadataImage } from "@/lib/metadata";
|
||||
import { openapi, source } from "@/lib/source";
|
||||
@@ -51,7 +50,6 @@ export default async function Page(props: {
|
||||
...Icons,
|
||||
...defaultMdxComponents,
|
||||
...demos,
|
||||
ChatDemoRSC,
|
||||
Accordion,
|
||||
Accordions,
|
||||
APIPage: (props) => <APIPage {...openapi.getAPIPageProps(props)} />,
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
"use client";
|
||||
import {
|
||||
ChatHandler,
|
||||
ChatInput,
|
||||
ChatMessages,
|
||||
ChatSection,
|
||||
} from "@llamaindex/chat-ui";
|
||||
import { useChat } from "ai/react";
|
||||
|
||||
export const ChatDemo = () => {
|
||||
const handler = useChat();
|
||||
return (
|
||||
<ChatSection handler={handler as ChatHandler}>
|
||||
<ChatMessages>
|
||||
<ChatMessages.List className="h-auto max-h-[400px]" />
|
||||
<ChatMessages.Actions />
|
||||
</ChatMessages>
|
||||
<ChatInput />
|
||||
</ChatSection>
|
||||
);
|
||||
};
|
||||
@@ -1,57 +0,0 @@
|
||||
import { Markdown } from "@llamaindex/chat-ui/widgets";
|
||||
import { MockLLM } from "@llamaindex/core/utils";
|
||||
import { generateId, Message } from "ai";
|
||||
import { createAI, createStreamableUI, getMutableAIState } from "ai/rsc";
|
||||
import { type ChatMessage, Settings, SimpleChatEngine } from "llamaindex";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
type ServerState = Message[];
|
||||
type FrontendState = Array<Message & { display: ReactNode }>;
|
||||
type Actions = {
|
||||
chat: (message: Message) => Promise<Message & { display: ReactNode }>;
|
||||
};
|
||||
|
||||
Settings.llm = new MockLLM(); // config your LLM here
|
||||
|
||||
export const AI = createAI<ServerState, FrontendState, Actions>({
|
||||
initialAIState: [],
|
||||
initialUIState: [],
|
||||
actions: {
|
||||
chat: async (message: Message) => {
|
||||
"use server";
|
||||
|
||||
const aiState = getMutableAIState<typeof AI>();
|
||||
aiState.update((prev) => [...prev, message]);
|
||||
|
||||
const uiStream = createStreamableUI();
|
||||
const chatEngine = new SimpleChatEngine();
|
||||
const assistantMessage: Message = {
|
||||
id: generateId(),
|
||||
role: "assistant",
|
||||
content: "",
|
||||
};
|
||||
|
||||
// run the async function without blocking
|
||||
(async () => {
|
||||
const chatResponse = await chatEngine.chat({
|
||||
stream: true,
|
||||
message: message.content,
|
||||
chatHistory: aiState.get() as ChatMessage[],
|
||||
});
|
||||
|
||||
for await (const chunk of chatResponse) {
|
||||
assistantMessage.content += chunk.delta;
|
||||
uiStream.update(<Markdown content={assistantMessage.content} />);
|
||||
}
|
||||
|
||||
aiState.done([...aiState.get(), assistantMessage]);
|
||||
uiStream.done();
|
||||
})();
|
||||
|
||||
return {
|
||||
...assistantMessage,
|
||||
display: uiStream.value,
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,35 +0,0 @@
|
||||
"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}>
|
||||
<ChatMessages>
|
||||
<ChatMessages.List className="h-auto max-h-[400px]">
|
||||
{handler.messages.map((message, index) => (
|
||||
<ChatMessage
|
||||
key={index}
|
||||
message={message as Message}
|
||||
isLast={index === handler.messages.length - 1}
|
||||
>
|
||||
<ChatMessage.Avatar />
|
||||
<ChatMessage.Content>{message.display}</ChatMessage.Content>
|
||||
</ChatMessage>
|
||||
))}
|
||||
<ChatMessages.Loading />
|
||||
</ChatMessages.List>
|
||||
</ChatMessages>
|
||||
<ChatInput />
|
||||
</ChatSectionUI>
|
||||
);
|
||||
};
|
||||
@@ -1,8 +0,0 @@
|
||||
import { AI } from "./ai-action";
|
||||
import { ChatSectionRSC } from "./chat-section";
|
||||
|
||||
export const ChatDemoRSC = () => (
|
||||
<AI>
|
||||
<ChatSectionRSC />
|
||||
</AI>
|
||||
);
|
||||
@@ -1,41 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useActions } from "ai/rsc";
|
||||
|
||||
import { generateId, Message } from "ai";
|
||||
import { useUIState } from "ai/rsc";
|
||||
import { useState } from "react";
|
||||
import { AI } from "./ai-action";
|
||||
|
||||
export function useChatRSC() {
|
||||
const [input, setInput] = useState<string>("");
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
const [messages, setMessages] = useUIState<typeof AI>();
|
||||
const { chat } = useActions<typeof AI>();
|
||||
|
||||
const append = async (message: Omit<Message, "id">) => {
|
||||
const newMsg: Message = { ...message, id: generateId() };
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
setMessages((prev) => [...prev, { ...newMsg, display: message.content }]);
|
||||
const assistantMsg = await chat(newMsg);
|
||||
setMessages((prev) => [...prev, assistantMsg]);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
setIsLoading(false);
|
||||
setInput("");
|
||||
|
||||
return message.content;
|
||||
};
|
||||
|
||||
return {
|
||||
input,
|
||||
setInput,
|
||||
isLoading,
|
||||
messages,
|
||||
setMessages,
|
||||
append,
|
||||
};
|
||||
}
|
||||
@@ -1,11 +1,6 @@
|
||||
"use client";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
// lazy load client components
|
||||
export const ChatDemo = dynamic(() =>
|
||||
import("@/components/demo/chat/api/demo").then((mod) => mod.ChatDemo),
|
||||
);
|
||||
|
||||
export const CodeNodeParserDemo = dynamic(() =>
|
||||
import("@/components/demo/code-node-parser").then(
|
||||
(mod) => mod.CodeNodeParserDemo,
|
||||
|
||||
@@ -33,7 +33,7 @@ const jokeAgent = agent({
|
||||
|
||||
// Run the workflow
|
||||
const result = await jokeAgent.run("Tell me something funny");
|
||||
console.log(result); // Baby Llama is called cria
|
||||
console.log(result.data.result); // Baby Llama is called cria
|
||||
```
|
||||
|
||||
### Event Streaming
|
||||
@@ -44,7 +44,7 @@ Agent Workflows provide a unified interface for event streaming, making it easy
|
||||
import { agentToolCallEvent, agentStreamEvent } from "@llamaindex/workflow";
|
||||
|
||||
// Get the workflow execution context
|
||||
const events = workflow.runStream("Tell me something funny");
|
||||
const events = jokeAgent.runStream("Tell me something funny");
|
||||
|
||||
// Stream and handle events
|
||||
for await (const event of events) {
|
||||
@@ -112,6 +112,7 @@ const agents = multiAgent({
|
||||
const result = await agents.run(
|
||||
"Give me a morning greeting with a joke and the weather in San Francisco"
|
||||
);
|
||||
console.log(result.data.result);
|
||||
```
|
||||
|
||||
The workflow will coordinate between agents, allowing them to handle different aspects of the request and hand off tasks when appropriate.
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"title": "Agents",
|
||||
"pages": ["tool", "agent_workflow", "workflows"]
|
||||
"pages": ["tool", "agent_workflow", "workflows", "natural_language_workflow"]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
title: Define workflows using natural language
|
||||
---
|
||||
|
||||
When working with Workflows, you have to write code to handle an event in the workflow.
|
||||
Often, the logic of the handler is not too complex so that it can be expressed using natural language and executed by an LLM.
|
||||
Besides the instructions, we just need the expected result event of the step, possible tool calls and optionally other events that can be emitted.
|
||||
|
||||
## Usage
|
||||
|
||||
Let's take an example of a workflow that generates a joke, gets a critique for it, and then improves it.
|
||||
|
||||
### Define the events
|
||||
|
||||
First, we define the events for our workflow. We need one for writing the joke, one for critiquing it, and one for the final result:
|
||||
|
||||
```typescript
|
||||
import { z } from "zod";
|
||||
import { zodEvent } from "@llamaindex/workflow";
|
||||
|
||||
const writeJokeSchema = z.object({
|
||||
description: z
|
||||
.string()
|
||||
.describe("The topic to write a joke or describe the joke to improve."),
|
||||
writtenJoke: z.optional(z.string()).describe("The written joke."),
|
||||
retriedTimes: z
|
||||
.number()
|
||||
.default(0)
|
||||
.describe(
|
||||
"The retried times for writing the joke. Always increase this from the input retriedTimes.",
|
||||
),
|
||||
});
|
||||
|
||||
const critiqueSchema = z.object({
|
||||
joke: z.string().describe("The joke to critique"),
|
||||
retriedTimes: z.number().describe("The retried times for writing the joke."),
|
||||
});
|
||||
|
||||
const finalResultSchema = z.object({
|
||||
joke: z.string().describe("The joke to critique"),
|
||||
critique: z.string().describe("The critique of the joke"),
|
||||
});
|
||||
|
||||
const writeJokeEvent = zodEvent(writeJokeSchema, {
|
||||
debugLabel: "writeJokeEvent",
|
||||
});
|
||||
const critiqueEvent = zodEvent(critiqueSchema, {
|
||||
debugLabel: "critiqueEvent",
|
||||
});
|
||||
const finalResultEvent = zodEvent(finalResultSchema, {
|
||||
debugLabel: "finalResultEvent",
|
||||
});
|
||||
```
|
||||
|
||||
Note that your natural language workflows the events need to be created by the `zodEvent` function passing the zod schema as an argument. The agent needs the schema of the event data to correctly generate events.
|
||||
Also, we need a `debugLabel` so the LLM can identify the event to emit in the workflow.
|
||||
|
||||
### Define the workflow
|
||||
|
||||
As usual you first create the workflow:
|
||||
|
||||
```typescript
|
||||
import { agentHandler, createWorkflow } from "@llamaindex/workflow";
|
||||
|
||||
const jokeFlow = createWorkflow();
|
||||
```
|
||||
|
||||
Then you need to handle the events. For the handlers, instead of code, you're now going to use natural language by calling the `agentHandler` function.
|
||||
|
||||
It only requires two parameters:
|
||||
- `instructions`: A prompt to guide the agent how to handle the steps.
|
||||
- `results`: The output events that the agent should return after handling the step.
|
||||
|
||||
Then you will have a simple code to handle the step:
|
||||
|
||||
```typescript
|
||||
jokeFlow.handle(
|
||||
[writeJokeEvent],
|
||||
agentHandler({
|
||||
instructions: `You are a joke writer. You are given a topic and you need to write a joke about it.`,
|
||||
results: [critiqueEvent],
|
||||
}),
|
||||
);
|
||||
|
||||
jokeFlow.handle(
|
||||
[critiqueEvent],
|
||||
agentHandler({
|
||||
instructions: `
|
||||
You are given a joke and you need to critique it. Follow the following guidelines:
|
||||
1. You have maximum 3 times to improve the joke.
|
||||
2. If the joke is not good, increase the retriedTimes, describe how to improve the joke and send a writeJokeEvent.
|
||||
3. If the joke is good, trigger the finalResultEvent event.
|
||||
`,
|
||||
results: [writeJokeEvent, finalResultEvent],
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
For advanced usage, you can add more functionality to `agentHandler` by using these parameters:
|
||||
- `events`: A list of additional events that the agent can emit to the workflow. E.g., your agent can emit a `uiEvent` to update the UI during the execution.
|
||||
- `tools`: A list of tools that the agent can use to handle the step. E.g., your agent can use a `search` tool to search the web.
|
||||
|
||||
You can find more code examples in the [examples](https://github.com/run-llama/LlamaIndexTS/tree/main/examples/agents/natural) folder.
|
||||
@@ -74,12 +74,21 @@ const server = mcp({
|
||||
args: ["-y", "@modelcontextprotocol/server-filesystem", "."],
|
||||
verbose: true,
|
||||
});
|
||||
// or by SSE
|
||||
// or by StreamableHTTP transport
|
||||
const server = mcp({
|
||||
url: "http://localhost:8000/mcp",
|
||||
verbose: true,
|
||||
});
|
||||
|
||||
// if your MCP server is not using StreamableHTTP transport, you can also use SSE transport
|
||||
// by setting useSSETransport to true.
|
||||
// See: https://modelcontextprotocol.io/docs/concepts/transports#server-sent-events-sse-deprecated
|
||||
const server = mcp({
|
||||
url: "http://localhost:8000/mcp",
|
||||
useSSETransport: true,
|
||||
verbose: true,
|
||||
});
|
||||
|
||||
// 3. Get tools from MCP server
|
||||
const tools = await server.tools();
|
||||
|
||||
|
||||
@@ -9,10 +9,13 @@ Workflows are designed to be flexible and can be used to build agents, RAG flows
|
||||
To use workflows install this package:
|
||||
|
||||
```package-install
|
||||
npm i @llamaindex/workflow
|
||||
npm i @llamaindex/workflow-core
|
||||
```
|
||||
|
||||
This package is a stable, production-ready version of our [llama-flow](../../../llamaflow) project.
|
||||
This contains the core functionality for the workflow system. You can read more about the core concepts in the [workflow-core](/docs/workflows) section.
|
||||
|
||||
While you can still reference the llama-flow documentation for detailed information about the underlying concepts, we recommend using the `@llamaindex/workflow` package for all new projects to ensure stability and long-term availability.
|
||||
In contrast, the `@llamaindex/workflow` package contains more utiltities, such as prebuilt agents.
|
||||
|
||||
```package-install
|
||||
npm i @llamaindex/workflow
|
||||
```
|
||||
|
||||
@@ -18,7 +18,7 @@ In your Discord Application, go to the `OAuth2` tab and generate an invite URL b
|
||||
This will invite the bot with the necessary permissions to read messages.
|
||||
Copy the URL in your browser and select the server you want your bot to join.
|
||||
|
||||
<include cwd>../../examples/discord/reader.ts</include>
|
||||
<include cwd>../../examples/readers/discord/reader.ts</include>
|
||||
|
||||
### Params
|
||||
|
||||
|
||||
+32
-2
@@ -28,11 +28,12 @@ embedding vector(1536)
|
||||
);
|
||||
```
|
||||
|
||||
-- Create a function for similarity search
|
||||
-- Create a function for similarity search with filtering support
|
||||
```sql
|
||||
create function match_documents (
|
||||
query_embedding vector(1536),
|
||||
match_count int
|
||||
match_count int,
|
||||
filter jsonb DEFAULT '{}'
|
||||
) returns table (
|
||||
id uuid,
|
||||
content text,
|
||||
@@ -42,6 +43,7 @@ similarity float
|
||||
)
|
||||
language plpgsql
|
||||
as $$
|
||||
#variable_conflict use_column
|
||||
begin
|
||||
return query
|
||||
select
|
||||
@@ -51,6 +53,7 @@ metadata,
|
||||
embedding,
|
||||
1 - (embedding <=> query_embedding) as similarity
|
||||
from documents
|
||||
where metadata @> filter
|
||||
order by embedding <=> query_embedding
|
||||
limit match_count;
|
||||
end;
|
||||
@@ -95,6 +98,7 @@ const index = await VectorStoreIndex.fromDocuments(documents, {
|
||||
```ts
|
||||
const queryEngine = index.asQueryEngine();
|
||||
|
||||
// Basic query without filters
|
||||
const response = await queryEngine.query({
|
||||
query: "What is in the document?",
|
||||
});
|
||||
@@ -103,6 +107,32 @@ const response = await queryEngine.query({
|
||||
console.log(response.toString());
|
||||
```
|
||||
|
||||
## Query with filters
|
||||
|
||||
You can filter documents based on metadata when querying:
|
||||
|
||||
```ts
|
||||
import { FilterOperator, MetadataFilters } from "llamaindex";
|
||||
|
||||
// Create a filter for documents with author = "Jane Smith"
|
||||
const filters: MetadataFilters = {
|
||||
filters: [
|
||||
{
|
||||
key: "author",
|
||||
value: "Jane Smith",
|
||||
operator: FilterOperator.EQ,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Query with filters
|
||||
const filteredResponse = await vectorStore.query({
|
||||
queryEmbedding: embedModel.getQueryEmbedding("What is vector search?"),
|
||||
similarityTopK: 5,
|
||||
filters,
|
||||
});
|
||||
```
|
||||
|
||||
## Full code
|
||||
|
||||
```ts
|
||||
|
||||
@@ -2,89 +2,43 @@
|
||||
title: Azure OpenAI
|
||||
---
|
||||
|
||||
To use Azure OpenAI, you only need to set a few environment variables together with the `OpenAI` class.
|
||||
|
||||
For example:
|
||||
|
||||
## Environment Variables
|
||||
|
||||
```
|
||||
export AZURE_OPENAI_KEY="<YOUR KEY HERE>"
|
||||
export AZURE_OPENAI_ENDPOINT="<YOUR ENDPOINT, see https://learn.microsoft.com/en-us/azure/ai-services/openai/quickstart?tabs=command-line%2Cpython&pivots=rest-api>"
|
||||
export AZURE_OPENAI_DEPLOYMENT="gpt-4" # or some other deployment name
|
||||
```
|
||||
To use Azure OpenAI, you only need to install the `@llamaindex/azure` package:
|
||||
|
||||
## Installation
|
||||
|
||||
```package-install
|
||||
npm i llamaindex @llamaindex/openai
|
||||
npm i llamaindex @llamaindex/azure
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The class `AzureOpenAI` is used for setting the LLM and `AzureOpenAIEmbedding` is used for setting the embedding model, e.g.:
|
||||
|
||||
```ts
|
||||
import { Settings } from "llamaindex";
|
||||
import { OpenAI } from "@llamaindex/openai";
|
||||
import { AzureOpenAI, AzureOpenAIEmbedding } from "@llamaindex/azure";
|
||||
|
||||
Settings.llm = new OpenAI({ model: "gpt-4", temperature: 0 });
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
```ts
|
||||
const document = new Document({ text: essay, id_: "essay" });
|
||||
|
||||
const index = await VectorStoreIndex.fromDocuments([document]);
|
||||
```
|
||||
|
||||
## Query
|
||||
|
||||
```ts
|
||||
const queryEngine = index.asQueryEngine();
|
||||
|
||||
const query = "What is the meaning of life?";
|
||||
|
||||
const results = await queryEngine.query({
|
||||
query,
|
||||
Settings.llm = new AzureOpenAI({
|
||||
apiKey: '[key]',
|
||||
deployment: '[model]',
|
||||
apiVersion: '[version]',
|
||||
endpoint: `https://[deployment].openai.azure.com/`,
|
||||
});
|
||||
Settings.embedModel = new AzureOpenAIEmbedding({
|
||||
apiKey: '[key]',
|
||||
deployment: '[embedding-model]',
|
||||
apiVersion: '[version]',
|
||||
endpoint: `https://[deployment].openai.azure.com/`,
|
||||
});
|
||||
```
|
||||
|
||||
## Full Example
|
||||
Instead of explicitly setting the API key, deployment, version, and endpoint in the constructor, you can use the following environment variables: `AZURE_OPENAI_DEPLOYMENT` for the model deployment name, `AZURE_OPENAI_KEY` for your API key, `AZURE_OPENAI_ENDPOINT` for your Azure endpoint URL, and `AZURE_OPENAI_API_VERSION` for the API version.
|
||||
|
||||
```ts
|
||||
import { Document, VectorStoreIndex, Settings } from "llamaindex";
|
||||
import { OpenAI } from "@llamaindex/openai";
|
||||
## Examples
|
||||
|
||||
Settings.llm = new OpenAI({ model: "gpt-4", temperature: 0 });
|
||||
|
||||
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);
|
||||
}
|
||||
```
|
||||
See the [Azure examples](https://github.com/run-llama/LlamaIndexTS/tree/main/examples/storage/azure) for more examples of how to use Azure OpenAI.
|
||||
|
||||
## API Reference
|
||||
|
||||
- [OpenAI](/docs/api/classes/OpenAI)
|
||||
- [AzureOpenAI](/docs/api/classes/AzureOpenAI)
|
||||
- [AzureOpenAIEmbedding](/docs/api/classes/AzureOpenAIEmbedding)
|
||||
@@ -11,58 +11,130 @@ npm i llamaindex @llamaindex/google
|
||||
## Usage
|
||||
|
||||
```ts
|
||||
import { Gemini, GEMINI_MODEL } from "@llamaindex/google";
|
||||
import { gemini, GEMINI_MODEL } from "@llamaindex/google";
|
||||
import { Settings } from "llamaindex";
|
||||
|
||||
Settings.llm = new Gemini({
|
||||
model: GEMINI_MODEL.GEMINI_PRO,
|
||||
});
|
||||
```
|
||||
|
||||
## 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
|
||||
}
|
||||
Settings.llm = gemini({
|
||||
model: GEMINI_MODEL.GEMINI_2_0_FLASH,
|
||||
});
|
||||
```
|
||||
|
||||
### Usage with Vertex AI
|
||||
|
||||
To use Gemini via Vertex AI you can use `GeminiVertexSession`.
|
||||
|
||||
GeminiVertexSession accepts the env variables: `GOOGLE_VERTEX_LOCATION` and `GOOGLE_VERTEX_PROJECT`
|
||||
To use Gemini via Vertex AI, you can specify the vertex configuration:
|
||||
|
||||
```ts
|
||||
import { Gemini, GEMINI_MODEL, GeminiVertexSession } from "@llamaindex/google";
|
||||
import { gemini, GEMINI_MODEL } from "@llamaindex/google";
|
||||
|
||||
const gemini = new Gemini({
|
||||
model: GEMINI_MODEL.GEMINI_PRO,
|
||||
session: new GeminiVertexSession({
|
||||
location: "us-central1", // optional if provided by GOOGLE_VERTEX_LOCATION env variable
|
||||
project: "project1", // optional if provided by GOOGLE_VERTEX_PROJECT env variable
|
||||
googleAuthOptions: {...}, // optional, but useful for production. It accepts all values from `GoogleAuthOptions`
|
||||
}),
|
||||
const llm = gemini({
|
||||
model: GEMINI_MODEL.GEMINI_2_0_FLASH,
|
||||
vertex: {
|
||||
project: "your-cloud-project", // required for Vertex AI
|
||||
location: "us-central1", // required for Vertex AI
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
[GoogleAuthOptions](https://github.com/googleapis/google-auth-library-nodejs/blob/main/src/auth/googleauth.ts)
|
||||
|
||||
To authenticate for local development:
|
||||
|
||||
```bash
|
||||
npm i @google-cloud/vertexai
|
||||
gcloud auth application-default login
|
||||
```
|
||||
|
||||
To authenticate for production you'll have to use a [service account](https://cloud.google.com/docs/authentication/). `googleAuthOptions` has `credentials` which might be useful for you.
|
||||
|
||||
## Multimodal Usage
|
||||
|
||||
Gemini supports multimodal inputs including text, images, audio, and video:
|
||||
|
||||
```ts
|
||||
import { gemini, GEMINI_MODEL } from "@llamaindex/google";
|
||||
import fs from "fs";
|
||||
|
||||
const llm = gemini({ model: GEMINI_MODEL.GEMINI_2_0_FLASH });
|
||||
|
||||
const result = await llm.chat({
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: [
|
||||
{
|
||||
type: "text",
|
||||
text: "What's in this image?",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
data: fs.readFileSync("./image.jpg").toString("base64"),
|
||||
mimeType: "image/jpeg",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## Tool Calling
|
||||
|
||||
Gemini supports function calling with tools:
|
||||
|
||||
```ts
|
||||
import { gemini, GEMINI_MODEL } from "@llamaindex/google";
|
||||
import { tool } from "llamaindex";
|
||||
import { z } from "zod";
|
||||
|
||||
const llm = gemini({ model: GEMINI_MODEL.GEMINI_2_0_FLASH });
|
||||
|
||||
const result = await llm.chat({
|
||||
messages: [
|
||||
{
|
||||
content: "What's the weather in Tokyo?",
|
||||
role: "user",
|
||||
},
|
||||
],
|
||||
tools: [
|
||||
tool({
|
||||
name: "weather",
|
||||
description: "Get the weather",
|
||||
parameters: z.object({
|
||||
location: z.string().describe("The location to get the weather for"),
|
||||
}),
|
||||
execute: ({ location }) => {
|
||||
return `The weather in ${location} is sunny and hot`;
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## Live API (Real-time Conversations)
|
||||
|
||||
For real-time audio/video conversations using [Gemini Live API](https://ai.google.dev/gemini-api/docs/live).
|
||||
|
||||
The Live API is running directly in the frontend. That's why you have to generate an ephemeral key first on the server side and pass it to the frontend.
|
||||
|
||||
To use the Live API, make sure to pass `apiVersion: "v1alpha"` to the `httpOptions`.
|
||||
|
||||
```ts
|
||||
import { gemini, GEMINI_MODEL } from "@llamaindex/google";
|
||||
|
||||
// Server-side: Generate ephemeral key
|
||||
const serverLlm = gemini({
|
||||
model: GEMINI_MODEL.GEMINI_2_0_FLASH_LIVE,
|
||||
httpOptions: { apiVersion: "v1alpha" },
|
||||
});
|
||||
const ephemeralKey = await serverLlm.live.getEphemeralKey();
|
||||
|
||||
// Client-side: Use ephemeral key for Live API
|
||||
const llm = gemini({
|
||||
apiKey: ephemeralKey,
|
||||
model: GEMINI_MODEL.GEMINI_2_0_FLASH_LIVE,
|
||||
voiceName: "Zephyr",
|
||||
httpOptions: { apiVersion: "v1alpha" },
|
||||
});
|
||||
|
||||
const session = await llm.live.connect();
|
||||
```
|
||||
|
||||
## 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.
|
||||
@@ -90,11 +162,11 @@ const results = await queryEngine.query({
|
||||
## Full Example
|
||||
|
||||
```ts
|
||||
import { Gemini, GEMINI_MODEL } from "@llamaindex/google";
|
||||
import { gemini, GEMINI_MODEL } from "@llamaindex/google";
|
||||
import { Document, VectorStoreIndex, Settings } from "llamaindex";
|
||||
|
||||
Settings.llm = new Gemini({
|
||||
model: GEMINI_MODEL.GEMINI_PRO,
|
||||
Settings.llm = gemini({
|
||||
model: GEMINI_MODEL.GEMINI_2_0_FLASH,
|
||||
});
|
||||
|
||||
async function main() {
|
||||
@@ -104,9 +176,7 @@ async function main() {
|
||||
const index = await VectorStoreIndex.fromDocuments([document]);
|
||||
|
||||
// Create a query engine
|
||||
const queryEngine = index.asQueryEngine({
|
||||
retriever,
|
||||
});
|
||||
const queryEngine = index.asQueryEngine();
|
||||
|
||||
const query = "What is the meaning of life?";
|
||||
|
||||
|
||||
@@ -55,7 +55,7 @@ const results = await queryEngine.query({
|
||||
|
||||
## Full Example
|
||||
|
||||
<include cwd>../../examples/groq.ts</include>
|
||||
<include cwd>../../examples/models/groq.ts</include>
|
||||
|
||||
## API Reference
|
||||
|
||||
|
||||
@@ -378,3 +378,186 @@ async function main() {
|
||||
## API Reference
|
||||
|
||||
- [OpenAI](/docs/api/classes/OpenAI)
|
||||
|
||||
|
||||
# OpenAI Live LLM
|
||||
|
||||
The OpenAI Live LLM integration in LlamaIndex provides real-time chat capabilities with support for audio streaming and tool calling.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```typescript
|
||||
import { openai } from "@llamaindex/openai";
|
||||
import { tool, ModalityType } from "llamaindex";
|
||||
|
||||
// Get the ephimeral key on the server
|
||||
const serverllm = openai({
|
||||
apiKey: "your-api-key",
|
||||
model: "gpt-4o-realtime-preview-2025-06-03",
|
||||
});
|
||||
|
||||
// Get an ephemeral key
|
||||
// Usually this code is run on the server and the ephemeral key is passed to the
|
||||
// client - the ephemeral key can be securely used on the client side
|
||||
const ephemeralKey = await serverllm.live.getEphemeralKey();
|
||||
|
||||
// Create a client-side LLM instance with the ephemeral key
|
||||
const llm = openai({
|
||||
apiKey: ephemeralKey,
|
||||
model: "gpt-4o-realtime-preview-2025-06-03"
|
||||
});
|
||||
|
||||
// Create a live sessionimport { tool } from "llamaindex";
|
||||
const session = await llm.live.connect({
|
||||
systemInstruction: "You are a helpful assistant.",
|
||||
});
|
||||
|
||||
// Send a message
|
||||
session.sendMessage({
|
||||
content: "Hello!",
|
||||
role: "user",
|
||||
});
|
||||
```
|
||||
|
||||
## Tool Integration
|
||||
|
||||
Tools are handled server-side, making it simple to pass them to the live session:
|
||||
|
||||
```typescript
|
||||
// Define your tools
|
||||
const weatherTool = tool({
|
||||
name: "weather",
|
||||
description: "Get the weather for a location",
|
||||
parameters: z.object({
|
||||
location: z.string().describe("The location to get weather for"),
|
||||
}),
|
||||
execute: async ({ location }) => {
|
||||
return `The weather in ${location} is sunny`;
|
||||
},
|
||||
});
|
||||
|
||||
// Create session with tools
|
||||
const session = await llm.live.connect({
|
||||
systemInstruction: "You are a helpful assistant.",
|
||||
tools: [weatherTool],
|
||||
});
|
||||
```
|
||||
|
||||
## Audio Support
|
||||
|
||||
For audio capabilities:
|
||||
|
||||
```typescript
|
||||
// Get microphone access
|
||||
const userStream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: true,
|
||||
});
|
||||
|
||||
// Create session with audio
|
||||
const session = await llm.live.connect({
|
||||
audioConfig: {
|
||||
stream: userStream,
|
||||
onTrack: (remoteStream) => {
|
||||
// Handle incoming audio
|
||||
audioElement.srcObject = remoteStream;
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## Event Handling
|
||||
|
||||
Listen to events from the session:
|
||||
|
||||
```typescript
|
||||
for await (const event of session.streamEvents()) {
|
||||
if (liveEvents.open.include(event)) {
|
||||
// Connection established
|
||||
console.log("Connected!");
|
||||
} else if (liveEvents.text.include(event)) {
|
||||
// Received text response
|
||||
console.log("Assistant:", event.text);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Capabilities
|
||||
|
||||
The OpenAI Live LLM supports:
|
||||
|
||||
- Real-time text chat
|
||||
- Audio streaming (if configured)
|
||||
- Tool calling (server-side execution)
|
||||
- Ephemeral key generation for secure sessions
|
||||
|
||||
## API Reference
|
||||
|
||||
### LiveLLM Methods
|
||||
// Get an ephemeral key
|
||||
// Usually this code is run on the server and the ephemeral key is passed to the
|
||||
// client - the ephemeral key can be securely used on the client side
|
||||
|
||||
#### `connect(config?: LiveConnectConfig)`
|
||||
|
||||
Creates a new live session.
|
||||
|
||||
```typescript
|
||||
interface LiveConnectConfig {
|
||||
systemInstruction?: string;
|
||||
tools?: BaseTool[];
|
||||
audioConfig?: AudioConfig;
|
||||
responseModality?: ModalityType[];
|
||||
}
|
||||
```
|
||||
|
||||
#### `getEphemeralKey()`
|
||||
|
||||
Gets a temporary key for the session.
|
||||
|
||||
### LiveLLMSession Methods
|
||||
|
||||
#### `sendMessage(message: ChatMessage)`
|
||||
|
||||
Sends a message to the assistant.
|
||||
|
||||
```typescript
|
||||
interface ChatMessage {
|
||||
content: string | MessageContentDetail[];
|
||||
role: "user" | "assistant";
|
||||
}
|
||||
```
|
||||
|
||||
#### `disconnect()`
|
||||
|
||||
Closes the session and cleans up resources.
|
||||
|
||||
## Error Handling
|
||||
|
||||
```typescript
|
||||
try {
|
||||
const session = await llm.live.connect();
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
console.error("Connection failed:", error.message);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Tool Definition**
|
||||
|
||||
- Keep tool implementations server-side
|
||||
- Use clear descriptions for tools
|
||||
- Handle tool errors gracefully
|
||||
|
||||
2. **Session Management**
|
||||
|
||||
- Always disconnect sessions when done
|
||||
- Clean up audio resources
|
||||
- Handle reconnection scenarios
|
||||
|
||||
3. **Security**
|
||||
- Use ephemeral keys for sessions
|
||||
- Validate tool inputs
|
||||
- Secure API key handling
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
title: Using API Route
|
||||
description: Chat interface for your LlamaIndexTS application using API Route
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
## API route
|
||||
|
||||
As an example, this is an API route for the Next.js App Router. Copy the following code into your `app/api/chat/route.ts` file to get started:
|
||||
|
||||
```json doc-gen:file
|
||||
{
|
||||
"file": "./src/app/api/chat/route.ts",
|
||||
"codeblock": true
|
||||
}
|
||||
```
|
||||
|
||||
## Chat UI
|
||||
|
||||
This is the simplest way to add a chat interface to your application. Copy the following code into your application to consume the API:
|
||||
|
||||
```json doc-gen:file
|
||||
{
|
||||
"file": "./src/components/demo/chat/api/demo.tsx",
|
||||
"codeblock": true
|
||||
}
|
||||
```
|
||||
|
||||
## Try it out ⬇️
|
||||
|
||||
Combining both, you're getting a fully functional chat interface:
|
||||
|
||||
<ChatDemo />
|
||||
|
||||
|
||||
## Next Steps
|
||||
|
||||
The steps above are the bare minimum to get a chat interface working. From here, you can go two ways:
|
||||
|
||||
1. Use [create-llama](https://github.com/run-llama/create-llama) to scaffold a new LlamaIndexTS project including complex API routes and chat interfaces or
|
||||
2. Learn more about [chat-ui](https://github.com/run-llama/chat-ui) and [LlamaIndexTS](https://github.com/run-llama/llamaindex-ts) to customize the chat interface and API routes to your needs.
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Using @llamaindex/chat-ui
|
||||
description: Chat UI components for your LlamaIndexTS application
|
||||
---
|
||||
|
||||
@llamaindex/chat-ui is a library that provides a set of components for building chat user interfaces. It is built on top of [Shadcn UI](https://ui.shadcn.com).
|
||||
|
||||
Check out our [chat-ui](/docs/chat-ui) documentation or try running examples on the [ui.llamaindex.ai](https://ui.llamaindex.ai) website.
|
||||
@@ -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 i @llamaindex/chat-ui
|
||||
```
|
||||
|
||||
For more information, check out the [github.comrun-llama/chat-ui](https://github.com/run-llama/chat-ui)
|
||||
@@ -9,161 +9,11 @@ LlamaIndexServer is a Next.js-based application that allows you to quickly launc
|
||||
|
||||
## Features
|
||||
|
||||
- Serving a workflow as a chatbot
|
||||
- Add a sophisticated chatbot UI to your LlamaIndex workflow
|
||||
- Edit code and document artifacts in an OpenAI Canvas-style UI
|
||||
- Extendable UI components for events and headers
|
||||
- Built on Next.js for high performance and easy API development
|
||||
- Optional built-in chat UI with extendable UI components
|
||||
- Prebuilt development code
|
||||
|
||||
## Installation
|
||||
|
||||
```package-install
|
||||
npm i @llamaindex/server
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
|
||||
Create an `index.ts` file and add the following code:
|
||||
|
||||
```ts
|
||||
import { LlamaIndexServer } from "@llamaindex/server";
|
||||
import { wiki } from "@llamaindex/tools"; // or any other tool
|
||||
|
||||
const createWorkflow = () => agent({ tools: [wiki()] })
|
||||
|
||||
new LlamaIndexServer({
|
||||
workflow: createWorkflow,
|
||||
uiConfig: {
|
||||
appTitle: "LlamaIndex App",
|
||||
starterQuestions: ["Who is the first president of the United States?"],
|
||||
},
|
||||
}).start();
|
||||
```
|
||||
|
||||
## Running the Server
|
||||
|
||||
In the same directory as `index.ts`, run the following command to start the server:
|
||||
|
||||
```bash
|
||||
tsx index.ts
|
||||
```
|
||||
The server will start at `http://localhost:3000`
|
||||
|
||||
You can also make a request to the server:
|
||||
|
||||
```bash
|
||||
curl -X POST "http://localhost:3000/api/chat" -H "Content-Type: application/json" -d '{"message": "Who is the first president of the United States?"}'
|
||||
```
|
||||
|
||||
## Configuration Options
|
||||
|
||||
The `LlamaIndexServer` accepts the following configuration options:
|
||||
|
||||
- `workflow`: A callable function that creates a workflow instance for each request
|
||||
- `uiConfig`: An object to configure the chat UI containing the following properties:
|
||||
- `appTitle`: The title of the application (default: `"LlamaIndex App"`)
|
||||
- `starterQuestions`: List of starter questions for the chat UI (default: `[]`)
|
||||
- `componentsDir`: The directory for custom UI components rendering events emitted by the workflow. The default is undefined, which does not render custom UI components.
|
||||
- `llamaCloudIndexSelector`: Whether to show the LlamaCloud index selector in the chat UI (requires `LLAMA_CLOUD_API_KEY` to be set in the environment variables) (default: `false`)
|
||||
|
||||
LlamaIndexServer accepts all the configuration options from Nextjs Custom Server such as `port`, `hostname`, `dev`, etc.
|
||||
See all Nextjs Custom Server options [here](https://nextjs.org/docs/app/building-your-application/configuring/custom-server).
|
||||
|
||||
## AI-generated UI Components
|
||||
|
||||
The LlamaIndex server provides support for rendering workflow events using custom UI components, allowing you to extend and customize the chat interface.
|
||||
These components can be auto-generated using an LLM by providing a JSON schema of the workflow event.
|
||||
|
||||
### UI Event Schema
|
||||
|
||||
To display custom UI components, your workflow needs to emit UI events that have an event type for identification and a data object:
|
||||
|
||||
```typescript
|
||||
class UIEvent extends WorkflowEvent<{
|
||||
type: "ui_event";
|
||||
data: UIEventData;
|
||||
}> {}
|
||||
```
|
||||
|
||||
The `data` object can be any JSON object. To enable AI generation of the UI component, you need to provide a schema for that data (here we're using Zod):
|
||||
|
||||
```typescript
|
||||
const MyEventDataSchema = z.object({
|
||||
stage: z.enum(["retrieve", "analyze", "answer"]).describe("The current stage the workflow process is in."),
|
||||
progress: z.number().min(0).max(1).describe("The progress in percent of the current stage"),
|
||||
}).describe("WorkflowStageProgress");
|
||||
|
||||
type UIEventData = z.infer<typeof MyEventDataSchema>;
|
||||
```
|
||||
|
||||
### Generate UI Components
|
||||
|
||||
The `generateEventComponent` function uses an LLM to generate a custom UI component based on the JSON schema of a workflow event. The schema should contain accurate descriptions of each field so that the LLM can generate matching components for your use case. We've done this for you in the example above using the `describe` function from Zod:
|
||||
|
||||
```typescript
|
||||
import { OpenAI } from "llamaindex";
|
||||
import { generateEventComponent } from "@llamaindex/server";
|
||||
import { MyEventDataSchema } from "./your-workflow";
|
||||
|
||||
// Also works well with Claude 3.5 Sonnet and Google Gemini 2.5 Pro
|
||||
const llm = new OpenAI({ model: "gpt-4.1" });
|
||||
const code = generateEventComponent(MyEventDataSchema, llm);
|
||||
```
|
||||
|
||||
After generating the code, we need to save it to a file. The file name must match the event type from your workflow (e.g., `ui_event.jsx` for handling events with `ui_event` type):
|
||||
|
||||
```ts
|
||||
fs.writeFileSync("components/ui_event.jsx", code);
|
||||
```
|
||||
|
||||
Feel free to modify the generated code to match your needs. If you're not satisfied with the generated code, we suggest improving the provided JSON schema first or trying another LLM.
|
||||
|
||||
> Note that `generateEventComponent` is generating JSX code, but you can also provide a TSX file.
|
||||
|
||||
|
||||
### Server Setup
|
||||
|
||||
To use the generated UI components, you need to initialize the LlamaIndex server with the `componentsDir` that contains your custom UI components:
|
||||
|
||||
```ts
|
||||
new LlamaIndexServer({
|
||||
workflow: createWorkflow,
|
||||
uiConfig: {
|
||||
appTitle: "LlamaIndex App",
|
||||
componentsDir: "components",
|
||||
},
|
||||
}).start();
|
||||
```
|
||||
|
||||
## Default Endpoints and Features
|
||||
|
||||
### Chat Endpoint
|
||||
|
||||
The server includes a default chat endpoint at `/api/chat` for handling chat interactions.
|
||||
|
||||
### Chat UI
|
||||
|
||||
The server always provides a chat interface at the root path (`/`) with:
|
||||
|
||||
- Configurable starter questions
|
||||
- Real-time chat interface
|
||||
- API endpoint integration
|
||||
|
||||
### Static File Serving
|
||||
|
||||
- The server automatically mounts the `data` and `output` folders at `{server_url}{api_prefix}/files/data` (default: `/api/files/data`) and `{server_url}{api_prefix}/files/output` (default: `/api/files/output`) respectively.
|
||||
- Your workflows can use both folders to store and access files. By convention, the `data` folder is used for documents that are ingested, and the `output` folder is used for documents generated by the workflow.
|
||||
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. Always provide a workflow factory that creates a fresh workflow instance for each request.
|
||||
2. Use environment variables for sensitive configuration (e.g., API keys).
|
||||
3. Use starter questions to guide users in the chat UI.
|
||||
|
||||
## Getting Started with a New Project
|
||||
|
||||
Want to start a new project with LlamaIndexServer? Check out our [create-llama](https://github.com/run-llama/create-llama) tool to quickly generate a new project with LlamaIndexServer.
|
||||
|
||||
## API Reference
|
||||
|
||||
- [LlamaIndexServer](/docs/api/classes/LlamaIndexServer)
|
||||
Check the latest information on the NPM package page: https://www.npmjs.com/package/@llamaindex/server
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
"title": "Chat UI",
|
||||
"description": "Use chat-ui to add a chat interface to your LlamaIndexTS application.",
|
||||
"defaultOpen": false,
|
||||
"pages": ["install", "chat", "rsc", "llamaindex-server"]
|
||||
"pages": ["index", "llamaindex-server"]
|
||||
}
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
---
|
||||
title: Using Next.js RSC
|
||||
description: Chat interface for your LlamaIndexTS application using Next.js RSC
|
||||
---
|
||||
|
||||
Using [chat-ui](https://github.com/run-llama/chat-ui), it's easy to add a chat interface to your LlamaIndexTS application using [Next.js RSC](https://nextjs.org/docs/app/building-your-application/rendering/server-components) and [Vercel AI RSC](https://sdk.vercel.ai/docs/ai-sdk-rsc/overview).
|
||||
|
||||
With RSC, the chat messages are not returned as JSON from the server (like when using an [API route](/docs/llamaindex/modules/ui/chat)), instead the chat message components are rendered on the server side.
|
||||
This is for example useful for rendering a whole chat history on the server before sending it to the client. [Check here](https://sdk.vercel.ai/docs/getting-started/navigating-the-library#when-to-use-ai-sdk-rsc), for a discussion of when to use use RSC.
|
||||
|
||||
For implementing a chat interface with RSC, you need to create an AI action and then connect the chat interface to use it.
|
||||
|
||||
## Create an AI action
|
||||
|
||||
First, define an [AI context provider](https://sdk.vercel.ai/examples/rsc/state-management/ai-ui-states) with a chat server action:
|
||||
|
||||
```json doc-gen:file
|
||||
{
|
||||
"file": "./src/components/demo/chat/rsc/ai-action.tsx",
|
||||
"codeblock": true
|
||||
}
|
||||
```
|
||||
|
||||
The chat server action is using LlamaIndexTS to generate a response based on the chat history and the user input.
|
||||
|
||||
## Create the chat UI
|
||||
|
||||
The entrypoint of our application initializes the AI provider for the application and adds a `ChatSection` component:
|
||||
|
||||
```json doc-gen:file
|
||||
{
|
||||
"file": "./src/components/demo/chat/rsc/demo.tsx",
|
||||
"codeblock": true
|
||||
}
|
||||
```
|
||||
|
||||
The `ChatSection` component is created by using chat components from @llamaindex/chat-ui:
|
||||
|
||||
```json doc-gen:file
|
||||
{
|
||||
"file": "./src/components/demo/chat/rsc/chat-section.tsx",
|
||||
"codeblock": true
|
||||
}
|
||||
```
|
||||
|
||||
It is using a `useChatRSC` hook to conntect the chat interface to the `chat` AI action that we defined earlier:
|
||||
|
||||
```json doc-gen:file
|
||||
{
|
||||
"file": "./src/components/demo/chat/rsc/use-chat-rsc.tsx",
|
||||
"codeblock": true
|
||||
}
|
||||
```
|
||||
|
||||
## Try RSC Chat ⬇️
|
||||
|
||||
<ChatDemoRSC />
|
||||
|
||||
## Next Steps
|
||||
|
||||
The steps above are the bare minimum to get a chat interface working with RSC. From here, you can go two ways:
|
||||
|
||||
1. Use our [full-stack RSC example](https://github.com/run-llama/nextjs-rsc) based on [create-llama](https://github.com/run-llama/create-llama) to get started quickly with a fully working chat interface or
|
||||
2. Learn more about [AI RSC](https://sdk.vercel.ai/examples/rsc), [chat-ui](https://github.com/run-llama/chat-ui) and [LlamaIndexTS](https://github.com/run-llama/llamaindex-ts) to customize the chat interface and AI actions to your needs.
|
||||
|
||||
@@ -27,7 +27,7 @@ Create the file `example.ts`. This code will
|
||||
- index it (which creates embeddings using OpenAI)
|
||||
- create a query engine to answer questions about the data
|
||||
|
||||
<include cwd>../../examples/vectorIndex.ts</include>
|
||||
<include cwd>../../examples/index/vectorIndex.ts</include>
|
||||
|
||||
Create a `tsconfig.json` file in the same folder:
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@ Create the file `example.ts`. This code will:
|
||||
- Give an example of the data structure we wish to generate
|
||||
- Prompt the LLM with instructions and the example, plus a sample transcript
|
||||
|
||||
<include cwd>../../examples/jsonExtract.ts</include>
|
||||
<include cwd>../../examples/misc/jsonExtract.ts</include>
|
||||
|
||||
To run the code:
|
||||
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
{
|
||||
"pages": ["llamaindex", "api", "llamaflow"]
|
||||
"pages": ["llamaindex", "api", "workflows", "chat-ui"]
|
||||
}
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
"tasks": {
|
||||
"build": {
|
||||
"inputs": [
|
||||
"node_modules/@llama-flow/docs/**",
|
||||
"node_modules/@llamaindex/workflow-docs/**",
|
||||
"node_modules/@llamaindex/chat-ui-docs/**",
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.mdx",
|
||||
|
||||
@@ -1,5 +1,19 @@
|
||||
# @llamaindex/core-e2e
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- b0cd530: # Breaking Change
|
||||
|
||||
## What Changed
|
||||
|
||||
Remove default setting of llm and embedModel in Settings
|
||||
|
||||
## Migration Guide
|
||||
|
||||
Set the llm provider and embed Model in the top of your code using Settings.llm = and Settings.embedModel
|
||||
|
||||
## 0.1.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
+135
@@ -0,0 +1,135 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with the LlamaIndexTS e2e testing package.
|
||||
|
||||
## Package Overview
|
||||
|
||||
The `@llamaindex/e2e` package contains end-to-end tests and examples for LlamaIndexTS, ensuring the library works correctly across different runtime environments and use cases. It validates integration between core packages, providers, and real-world usage scenarios.
|
||||
|
||||
## Development Commands
|
||||
|
||||
Run e2e tests from the root directory using:
|
||||
|
||||
- `pnpm e2e` - Run all e2e tests with mocked LLM responses
|
||||
- `pnpm e2e:nomock` - Run e2e tests with real API calls (requires API keys)
|
||||
|
||||
Local e2e package commands:
|
||||
|
||||
- `npm run e2e` - Run all e2e tests with mock register
|
||||
- `npm run e2e:nomock` - Run tests without mocking (real API calls)
|
||||
- `npm run e2e:updatesnap` - Update test snapshots
|
||||
|
||||
## Testing Structure
|
||||
|
||||
### Core Test Files (`node/`)
|
||||
|
||||
**Main Test Suites:**
|
||||
|
||||
- `smoke.e2e.ts` - CJS/ESM dual module compatibility tests and basic import validation
|
||||
- `openai.e2e.ts` - OpenAI provider integration tests (LLM, agents, tools)
|
||||
- `claude.e2e.ts` - Anthropic Claude provider tests
|
||||
- `ollama.e2e.ts` - Ollama local LLM provider tests
|
||||
- `react.e2e.ts` - ReAct agent framework tests
|
||||
- `issue.e2e.ts` - Regression tests for specific GitHub issues
|
||||
|
||||
**Specialized Tests:**
|
||||
|
||||
- `embedding/clip.e2e.ts` - CLIP embedding model tests
|
||||
- `vector-store/` - Vector database integration tests (Pinecone, PostgreSQL with pgvector)
|
||||
|
||||
### Test Utilities
|
||||
|
||||
- `utils.ts` - Common test utilities and helper functions
|
||||
- `fixtures/` - Test data and mock tool definitions
|
||||
- `snapshot/` - Stored test snapshots for regression testing
|
||||
- `mock-register.js` & `mock-module.js` - LLM response mocking system
|
||||
|
||||
### Examples Directory (`examples/`)
|
||||
|
||||
Runtime-specific example applications that serve as integration tests:
|
||||
|
||||
**Edge/Serverless Runtimes:**
|
||||
|
||||
- `cloudflare-worker-agent/` - Cloudflare Workers agent example with Vitest
|
||||
- `cloudflare-hono/` - Cloudflare Workers with Hono framework
|
||||
- `nextjs-edge-runtime/` - Next.js Edge Runtime compatibility
|
||||
- `nextjs-node-runtime/` - Next.js Node.js runtime example
|
||||
- `nextjs-agent/` - Next.js with agent integration
|
||||
|
||||
**Client-Side:**
|
||||
|
||||
- `llama-parse-browser/` - Browser-based LlamaParse integration
|
||||
- `vite-import-llamaindex/` - Vite bundler compatibility test
|
||||
|
||||
**Alternative Frameworks:**
|
||||
|
||||
- `waku-query-engine/` - Waku framework with query engine integration
|
||||
|
||||
## Testing Patterns
|
||||
|
||||
### Mock System
|
||||
|
||||
The e2e tests use a sophisticated mocking system for consistent testing:
|
||||
|
||||
- **Mock Register**: `mock-register.js` enables LLM response mocking
|
||||
- **Snapshot Testing**: Pre-recorded responses stored in `snapshot/` directory
|
||||
- **Real API Mode**: Tests can run against real APIs when `OPENAI_API_KEY`, `ANTHROPIC_API_KEY`, etc. are provided
|
||||
|
||||
### Test Categories
|
||||
|
||||
1. **Smoke Tests**: Basic import/export validation and dual module (CJS/ESM) compatibility
|
||||
2. **Provider Integration**: LLM provider functionality (chat, streaming, function calling)
|
||||
3. **Agent Tests**: Agent framework validation with tool calling and reasoning
|
||||
4. **Runtime Compatibility**: Cross-platform runtime environment testing
|
||||
5. **Regression Tests**: Issue-specific tests preventing regressions
|
||||
|
||||
### Environment Conditions
|
||||
|
||||
Tests validate multiple JavaScript runtime conditions:
|
||||
|
||||
- `edge-light` - Vercel Edge Runtime
|
||||
- `workerd` - Cloudflare Workers runtime
|
||||
- `react-server` - React Server Components environment
|
||||
|
||||
## Dependencies
|
||||
|
||||
The package includes comprehensive workspace dependencies for testing all major LlamaIndexTS features:
|
||||
|
||||
**Core Dependencies:**
|
||||
|
||||
- `@llamaindex/core` - Base abstractions
|
||||
- `@llamaindex/env` - Runtime environment compatibility
|
||||
- `llamaindex` - Main package
|
||||
|
||||
**Provider Dependencies:**
|
||||
|
||||
- `@llamaindex/openai` - OpenAI integration
|
||||
- `@llamaindex/anthropic` - Anthropic Claude integration
|
||||
- `@llamaindex/ollama` - Ollama local LLM support
|
||||
- `@llamaindex/clip` - CLIP embedding models
|
||||
- `@llamaindex/pinecone` - Pinecone vector store
|
||||
- `@llamaindex/postgres` - PostgreSQL with pgvector
|
||||
|
||||
**Testing Utilities:**
|
||||
|
||||
- `@faker-js/faker` - Test data generation
|
||||
- `@huggingface/transformers` - Local model support
|
||||
- `consola` - Logging in tests
|
||||
- `dotenv` - Environment variable management
|
||||
- `tsx` - TypeScript execution for Node.js
|
||||
|
||||
## Development Notes
|
||||
|
||||
- **Build Dependency**: E2E tests depend on build artifacts, so always run `pnpm build` before testing
|
||||
- **API Keys**: Real API testing requires environment variables (`OPENAI_API_KEY`, `ANTHROPIC_API_KEY`, etc.)
|
||||
- **Snapshot Updates**: Use `npm run e2e:updatesnap` to update test snapshots after intentional changes
|
||||
- **Mock vs Real**: Use mock mode for CI/fast development, real mode for integration validation
|
||||
- **Runtime Testing**: Examples serve dual purpose as integration tests and usage documentation
|
||||
- **Node.js Test Runner**: Uses built-in Node.js test runner with tsx for TypeScript support
|
||||
|
||||
## Common Workflows
|
||||
|
||||
1. **Adding New Provider**: Create test file in `node/`, add mock snapshots, validate across runtimes
|
||||
2. **Runtime Compatibility**: Add example in `examples/` with framework-specific testing setup
|
||||
3. **Regression Testing**: Add specific test case in `issue.e2e.ts` with GitHub issue reference
|
||||
4. **Mock Updates**: Update snapshots when LLM provider responses change intentionally
|
||||
@@ -0,0 +1,156 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with the LlamaIndexTS Cloudflare Workers + Hono example.
|
||||
|
||||
## Package Overview
|
||||
|
||||
The `@llamaindex/cloudflare-hono` package is an end-to-end example demonstrating how to use LlamaIndexTS in a Cloudflare Workers environment with the Hono web framework. This example showcases building an AI agent with vector search capabilities that runs on Cloudflare's edge runtime.
|
||||
|
||||
## Development Commands
|
||||
|
||||
- `npm run dev` or `npm start` - Start local development server with Wrangler
|
||||
- `npm run build` - Build for deployment (dry run to dist directory)
|
||||
- `npm run deploy` - Deploy to Cloudflare Workers
|
||||
- `npm run cf-typegen` - Generate TypeScript types for Cloudflare Workers
|
||||
|
||||
## Architecture
|
||||
|
||||
This example demonstrates a complete RAG (Retrieval-Augmented Generation) system running on Cloudflare Workers:
|
||||
|
||||
### Key Components
|
||||
|
||||
1. **Hono Framework**: Lightweight web framework optimized for edge runtimes
|
||||
2. **OpenAI Integration**: GPT-4o-mini for language model and text-embedding-3-small for embeddings
|
||||
3. **Pinecone Vector Store**: Cloud vector database for document storage and retrieval
|
||||
4. **OpenAI Agent**: Function-calling agent with tool integration
|
||||
5. **Query Engine Tool**: Business information retrieval tool
|
||||
|
||||
### Request Flow
|
||||
|
||||
1. POST request to `/llm` endpoint with `{ message: "user question" }`
|
||||
2. Environment setup using `@llamaindex/env` for Cloudflare Workers compatibility
|
||||
3. Dynamic imports for tree-shaking and edge runtime optimization
|
||||
4. LLM and embedding model configuration with API keys from environment
|
||||
5. Vector store connection to Pinecone with predefined namespace
|
||||
6. Vector index creation and retriever setup (top-k=3 similarity search)
|
||||
7. Query engine tool creation for business information retrieval
|
||||
8. OpenAI agent initialization with tools
|
||||
9. Agent chat execution and response extraction
|
||||
|
||||
### Runtime Optimizations
|
||||
|
||||
- **Dynamic Imports**: All LlamaIndex packages imported asynchronously for optimal cold start performance
|
||||
- **Environment Setup**: Uses `@llamaindex/env` package for Cloudflare Workers compatibility
|
||||
- **Tree Shaking**: Selective imports reduce bundle size for edge deployment
|
||||
- **Async Operations**: Fully async pipeline optimized for serverless execution
|
||||
|
||||
## Configuration
|
||||
|
||||
### Wrangler Configuration (`wrangler.toml`)
|
||||
|
||||
- **Runtime**: Cloudflare Workers with Node.js AsyncLocalStorage compatibility
|
||||
- **Compatibility Date**: 2024-11-12 with `nodejs_als` flag
|
||||
- **Observability**: Enabled for monitoring and debugging
|
||||
- **Entry Point**: `src/index.ts`
|
||||
|
||||
### TypeScript Configuration
|
||||
|
||||
- **Target**: ES2021 for modern JavaScript features
|
||||
- **Module**: ES2022 with bundler module resolution
|
||||
- **Types**: Cloudflare Workers types for runtime compatibility
|
||||
- **Strict Mode**: Enabled for type safety
|
||||
|
||||
### Environment Variables
|
||||
|
||||
Required Cloudflare Workers environment variables:
|
||||
|
||||
- `OPENAI_API_KEY` - OpenAI API access for LLM and embeddings
|
||||
- `PINECONE_API_KEY` - Pinecone vector database access
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Runtime Dependencies
|
||||
|
||||
- `hono` - Lightweight web framework for edge runtimes
|
||||
|
||||
### Development Dependencies
|
||||
|
||||
- `@cloudflare/workers-types` - TypeScript definitions for Cloudflare Workers
|
||||
- `wrangler` - Cloudflare Workers CLI and development server
|
||||
- `typescript` - TypeScript compiler
|
||||
|
||||
### LlamaIndexTS Integration
|
||||
|
||||
This example relies on workspace dependencies:
|
||||
|
||||
- `llamaindex` - Core LlamaIndexTS functionality
|
||||
- `@llamaindex/openai` - OpenAI provider (LLM, embeddings, agents)
|
||||
- `@llamaindex/pinecone` - Pinecone vector store integration
|
||||
- `@llamaindex/env` - Runtime environment compatibility layer
|
||||
|
||||
## Code Patterns
|
||||
|
||||
### Environment Setup Pattern
|
||||
|
||||
```typescript
|
||||
const { setEnvs } = await import("@llamaindex/env");
|
||||
setEnvs(c.env);
|
||||
```
|
||||
|
||||
Required first step for Cloudflare Workers compatibility.
|
||||
|
||||
### Dynamic Import Pattern
|
||||
|
||||
```typescript
|
||||
const { VectorStoreIndex, Settings } = await import("llamaindex");
|
||||
const { OpenAI, OpenAIAgent } = await import("@llamaindex/openai");
|
||||
```
|
||||
|
||||
Optimizes bundle size and cold start performance.
|
||||
|
||||
### Settings Configuration
|
||||
|
||||
```typescript
|
||||
Settings.llm = new OpenAI({ model: "gpt-4o-mini" });
|
||||
Settings.embedModel = new OpenAIEmbedding({ model: "text-embedding-3-small" });
|
||||
Settings.nodeParser = new SentenceSplitter({ chunkSize: 8191 });
|
||||
```
|
||||
|
||||
Global configuration for consistent LLM behavior.
|
||||
|
||||
### Agent Tool Integration
|
||||
|
||||
```typescript
|
||||
const tools = [
|
||||
new QueryEngineTool({ queryEngine, metadata: { name, description } }),
|
||||
];
|
||||
const agent = new OpenAIAgent({ tools });
|
||||
```
|
||||
|
||||
Function-calling agent with domain-specific tools.
|
||||
|
||||
## Usage
|
||||
|
||||
1. **Local Development**: Run `npm run dev` to start Wrangler development server
|
||||
2. **Environment Setup**: Configure `OPENAI_API_KEY` and `PINECONE_API_KEY` in Wrangler
|
||||
3. **API Testing**: POST to `/llm` with JSON payload `{ message: "your question" }`
|
||||
4. **Deployment**: Run `npm run deploy` to publish to Cloudflare Workers
|
||||
|
||||
## Integration Testing
|
||||
|
||||
This example serves as an integration test for:
|
||||
|
||||
- Cloudflare Workers runtime compatibility
|
||||
- Hono framework integration
|
||||
- OpenAI provider functionality
|
||||
- Pinecone vector store operations
|
||||
- Agent workflow execution
|
||||
- Dynamic import optimization
|
||||
- Environment variable handling
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
- **Cold Start**: Dynamic imports minimize initial bundle size
|
||||
- **Memory Usage**: Efficient vector operations with Pinecone cloud storage
|
||||
- **Latency**: Edge deployment reduces geographic latency
|
||||
- **Concurrency**: Serverless architecture handles concurrent requests efficiently
|
||||
@@ -1,5 +1,81 @@
|
||||
# @llamaindex/cloudflare-worker-agent-test
|
||||
|
||||
## 0.0.172
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7039e1a]
|
||||
- llamaindex@0.11.11
|
||||
|
||||
## 0.0.171
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.10
|
||||
|
||||
## 0.0.170
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.9
|
||||
|
||||
## 0.0.169
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.8
|
||||
|
||||
## 0.0.168
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3c857f4]
|
||||
- llamaindex@0.11.7
|
||||
|
||||
## 0.0.167
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.6
|
||||
|
||||
## 0.0.166
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.5
|
||||
|
||||
## 0.0.165
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.4
|
||||
|
||||
## 0.0.164
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.3
|
||||
|
||||
## 0.0.163
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.2
|
||||
|
||||
## 0.0.162
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.1
|
||||
|
||||
## 0.0.161
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b0cd530]
|
||||
- Updated dependencies [361a685]
|
||||
- llamaindex@0.11.0
|
||||
|
||||
## 0.0.160
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with the Cloudflare Worker Agent example in the LlamaIndexTS e2e testing suite.
|
||||
|
||||
## Package Overview
|
||||
|
||||
The `@llamaindex/cloudflare-worker-agent-test` package demonstrates how to use LlamaIndex.TS within a Cloudflare Worker environment. This example serves as both a functional integration test and a reference implementation for deploying AI agents on Cloudflare's edge platform.
|
||||
|
||||
## Development Commands
|
||||
|
||||
Local development and testing:
|
||||
|
||||
- `npm run dev` or `npm start` - Start Wrangler development server
|
||||
- `npm run build` - Build worker for deployment (dry-run with output to dist/)
|
||||
- `npm run deploy` - Deploy worker to Cloudflare
|
||||
- `npm run test` - Run Vitest tests using Cloudflare Workers test environment
|
||||
- `npm run cf-typegen` - Generate TypeScript types from wrangler.toml bindings
|
||||
|
||||
## Architecture
|
||||
|
||||
### Worker Implementation (`src/index.ts`)
|
||||
|
||||
The worker implements a basic HTTP handler that:
|
||||
|
||||
1. **Environment Setup**: Uses `@llamaindex/env` to configure runtime environment variables
|
||||
2. **Agent Initialization**: Creates an OpenAI agent with streaming support
|
||||
3. **Request Processing**: Accepts text input via HTTP request body
|
||||
4. **Streaming Response**: Returns streaming AI responses (though currently returns static "Hello, world!")
|
||||
|
||||
**Key Components:**
|
||||
|
||||
- Environment interface with `OPENAI_API_KEY` requirement
|
||||
- Dynamic imports for optimal bundle size (`@llamaindex/env`, `@llamaindex/openai`)
|
||||
- OpenAI agent with streaming chat capability
|
||||
- Transform stream for encoding chat response deltas
|
||||
|
||||
### Configuration Files
|
||||
|
||||
**Wrangler Configuration (`wrangler.toml`):**
|
||||
|
||||
- Worker name: "agent"
|
||||
- Entry point: `src/index.ts`
|
||||
- Compatibility date: 2024-04-23
|
||||
- Node.js compatibility enabled via `nodejs_compat` flag
|
||||
- Commented examples for all major Cloudflare Worker bindings (D1, KV, R2, etc.)
|
||||
|
||||
**TypeScript Configuration (`tsconfig.json`):**
|
||||
|
||||
- Target: ES2021 with ES2022 modules
|
||||
- Bundler module resolution for Cloudflare Workers
|
||||
- Cloudflare Workers types included (`@cloudflare/workers-types/2023-07-01`)
|
||||
- Isolated modules enabled for edge runtime compatibility
|
||||
|
||||
### Testing Setup
|
||||
|
||||
**Vitest Configuration (`vitest.config.ts`):**
|
||||
|
||||
- Uses `@cloudflare/vitest-pool-workers` for Cloudflare Workers testing environment
|
||||
- Integrates with wrangler.toml configuration
|
||||
- Enables testing in actual Workers runtime conditions
|
||||
|
||||
**Test Implementation (`test/index.spec.ts`):**
|
||||
|
||||
- Unit-style testing with Cloudflare Workers test utilities
|
||||
- Mock environment variables (OPENAI_API_KEY)
|
||||
- Uses `createExecutionContext()` and `waitOnExecutionContext()` for proper async testing
|
||||
- Currently marked as failing due to implementation bug (returns "Hello World!" instead of actual agent response)
|
||||
|
||||
## Runtime Environment
|
||||
|
||||
### Cloudflare Workers Compatibility
|
||||
|
||||
This example demonstrates LlamaIndex.TS compatibility with the Cloudflare Workers runtime (`workerd`):
|
||||
|
||||
- **Edge Runtime**: Runs on Cloudflare's global edge network
|
||||
- **Node.js Compatibility**: Uses `nodejs_compat` flag for Node.js APIs
|
||||
- **Module System**: ESM-only with dynamic imports for code splitting
|
||||
- **Environment Variables**: Secure handling via Cloudflare Workers environment bindings
|
||||
|
||||
### Key Dependencies
|
||||
|
||||
- `llamaindex` (workspace) - Main LlamaIndex.TS package
|
||||
- `@cloudflare/workers-types` - TypeScript definitions for Workers APIs
|
||||
- `@cloudflare/vitest-pool-workers` - Testing framework for Workers environment
|
||||
- `wrangler` - Cloudflare Workers CLI and build tool
|
||||
|
||||
## Development Notes
|
||||
|
||||
### Environment Variables
|
||||
|
||||
- Create `.dev.vars` file with `OPENAI_API_KEY=your_key_here` for local development
|
||||
- Production secrets managed via `wrangler secret put OPENAI_API_KEY`
|
||||
|
||||
### Known Issues
|
||||
|
||||
- **Response Bug**: Worker currently returns static "Hello, world!" instead of streaming agent response (line 34 in `src/index.ts`)
|
||||
- **Test Status**: Main test marked as `.fails()` due to above implementation issue
|
||||
|
||||
### Bundle Optimization
|
||||
|
||||
- Uses dynamic imports to enable code splitting and reduce initial bundle size
|
||||
- Critical for Cloudflare Workers size limits and cold start performance
|
||||
- Environment setup (`@llamaindex/env`) imported dynamically to defer execution
|
||||
|
||||
### Security Considerations
|
||||
|
||||
- API keys handled through Cloudflare Workers environment bindings
|
||||
- No sensitive data stored in source code
|
||||
- Secure environment variable access pattern using `env` parameter
|
||||
|
||||
## Common Workflows
|
||||
|
||||
1. **Local Development**: Use `npm run dev` with `.dev.vars` file for API keys
|
||||
2. **Testing**: Run `npm test` to validate Workers runtime compatibility
|
||||
3. **Deployment**: Use `npm run deploy` after configuring production secrets
|
||||
4. **Debugging**: Use `wrangler tail` to view production logs and errors
|
||||
5. **Type Generation**: Run `npm run cf-typegen` after modifying wrangler.toml bindings
|
||||
|
||||
## Integration Testing Purpose
|
||||
|
||||
This example serves multiple purposes in the e2e test suite:
|
||||
|
||||
- **Runtime Validation**: Ensures LlamaIndex.TS works in Cloudflare Workers environment
|
||||
- **Bundle Testing**: Validates that dynamic imports and code splitting work correctly
|
||||
- **API Integration**: Tests OpenAI provider integration in edge runtime
|
||||
- **Streaming Support**: Demonstrates streaming response handling in Workers
|
||||
- **Reference Implementation**: Provides template for real-world Cloudflare Workers deployments
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@llamaindex/cloudflare-worker-agent-test",
|
||||
"version": "0.0.160",
|
||||
"version": "0.0.172",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -1,5 +1,61 @@
|
||||
# @llamaindex/llama-parse-browser-test
|
||||
|
||||
## 0.0.71
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @llamaindex/cloud@4.0.16
|
||||
|
||||
## 0.0.70
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @llamaindex/cloud@4.0.15
|
||||
|
||||
## 0.0.69
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @llamaindex/cloud@4.0.14
|
||||
|
||||
## 0.0.68
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @llamaindex/cloud@4.0.13
|
||||
|
||||
## 0.0.67
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @llamaindex/cloud@4.0.12
|
||||
|
||||
## 0.0.66
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [76ff23d]
|
||||
- @llamaindex/cloud@4.0.11
|
||||
|
||||
## 0.0.65
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @llamaindex/cloud@4.0.10
|
||||
|
||||
## 0.0.64
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3703f90]
|
||||
- @llamaindex/cloud@4.0.9
|
||||
|
||||
## 0.0.63
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @llamaindex/cloud@4.0.8
|
||||
|
||||
## 0.0.62
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with the LlamaParse Browser Test example.
|
||||
|
||||
## Package Overview
|
||||
|
||||
The `@llamaindex/llama-parse-browser-test` package is a minimal browser-based example that demonstrates how to use LlamaParse (from `@llamaindex/cloud`) in a web browser environment. This serves as both an integration test and a reference implementation for browser compatibility with LlamaIndexTS cloud services.
|
||||
|
||||
## Purpose
|
||||
|
||||
This example validates that:
|
||||
|
||||
- `@llamaindex/cloud` package works correctly in browser environments
|
||||
- LlamaParse functionality can be bundled and run in web applications
|
||||
- The build process properly handles WASM dependencies and browser-specific requirements
|
||||
- TypeScript compilation works with DOM APIs and modern bundler tooling
|
||||
|
||||
## Development Commands
|
||||
|
||||
- `npm run dev` - Start Vite development server with hot reload
|
||||
- `npm run build` - Build for production (TypeScript compilation + Vite build)
|
||||
- `npm run preview` - Preview the production build locally
|
||||
|
||||
## Architecture
|
||||
|
||||
### Build Setup
|
||||
|
||||
**Bundler**: Vite 6.x with TypeScript support
|
||||
**WASM Support**: Uses `vite-plugin-wasm` for WebAssembly module handling
|
||||
**Module System**: ESM-only (`"type": "module"`)
|
||||
**Target Environment**: Modern browsers (ES2020+)
|
||||
|
||||
### Key Configuration
|
||||
|
||||
**Vite Config (`vite.config.ts`):**
|
||||
|
||||
- `vite-plugin-wasm` - Enables WASM module imports
|
||||
- `ssr.external: ["tiktoken"]` - Excludes tiktoken from SSR bundling (browser-only)
|
||||
|
||||
**TypeScript Config (`tsconfig.json`):**
|
||||
|
||||
- Extends root monorepo TypeScript configuration
|
||||
- DOM and DOM.Iterable libraries enabled for browser APIs
|
||||
- Bundler module resolution for optimal Vite integration
|
||||
- References `@llamaindex/cloud` package for type checking
|
||||
|
||||
### Application Structure
|
||||
|
||||
**Entry Point (`src/main.ts`):**
|
||||
|
||||
- Imports `LlamaParseReader` from `@llamaindex/cloud`
|
||||
- Instantiates the reader to test browser compatibility
|
||||
- Minimal DOM manipulation for visual feedback
|
||||
|
||||
**Styling (`src/style.css`):**
|
||||
|
||||
- Modern CSS with light/dark theme support
|
||||
- Responsive design with flexbox layout
|
||||
- Clean, minimal UI suitable for testing environment
|
||||
|
||||
**HTML (`index.html`):**
|
||||
|
||||
- Standard Vite HTML template
|
||||
- Single-page application structure
|
||||
- Module script loading for ES6 imports
|
||||
|
||||
## Dependencies
|
||||
|
||||
**Core Dependency:**
|
||||
|
||||
- `@llamaindex/cloud` (workspace) - LlamaCloud integration including LlamaParse
|
||||
|
||||
**Development Dependencies:**
|
||||
|
||||
- `vite` - Modern build tool and development server
|
||||
- `vite-plugin-wasm` - WebAssembly support for Vite
|
||||
- `typescript` - TypeScript compiler and language support
|
||||
|
||||
## Testing Integration
|
||||
|
||||
This example functions as an end-to-end test by:
|
||||
|
||||
1. **Import Validation**: Verifies `@llamaindex/cloud` can be imported in browser context
|
||||
2. **Instantiation Testing**: Tests that `LlamaParseReader` can be created without errors
|
||||
3. **Bundle Compatibility**: Ensures the build process handles all dependencies correctly
|
||||
4. **Runtime Verification**: Validates the application loads and runs in actual browsers
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
The application targets modern browsers with:
|
||||
|
||||
- ES2020 language features
|
||||
- ES Modules support
|
||||
- WebAssembly support (for potential WASM dependencies)
|
||||
- Modern DOM APIs
|
||||
|
||||
## Development Notes
|
||||
|
||||
- **Minimal Implementation**: Keeps the example simple to focus on integration testing
|
||||
- **Cloud Service Focus**: Specifically tests browser compatibility with LlamaCloud services
|
||||
- **Build Validation**: Ensures the build process works end-to-end without browser-specific issues
|
||||
- **WASM Preparation**: Configured for WASM dependencies even if not currently used
|
||||
- **Type Safety**: Full TypeScript integration with proper DOM type definitions
|
||||
|
||||
## Common Issues
|
||||
|
||||
- **WASM Loading**: The `vite-plugin-wasm` handles WebAssembly module loading complexities
|
||||
- **SSR Exclusions**: Tiktoken is excluded from SSR to prevent Node.js-specific dependencies in browser builds
|
||||
- **Module Resolution**: Uses bundler module resolution for optimal compatibility with modern web tooling
|
||||
|
||||
This example serves as a foundation for integrating LlamaIndexTS cloud services into web applications and validates that the core cloud functionality works correctly in browser environments.
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@llamaindex/llama-parse-browser-test",
|
||||
"private": true,
|
||||
"version": "0.0.62",
|
||||
"version": "0.0.71",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -1,5 +1,81 @@
|
||||
# @llamaindex/next-agent-test
|
||||
|
||||
## 0.1.172
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7039e1a]
|
||||
- llamaindex@0.11.11
|
||||
|
||||
## 0.1.171
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.10
|
||||
|
||||
## 0.1.170
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.9
|
||||
|
||||
## 0.1.169
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.8
|
||||
|
||||
## 0.1.168
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3c857f4]
|
||||
- llamaindex@0.11.7
|
||||
|
||||
## 0.1.167
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.6
|
||||
|
||||
## 0.1.166
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.5
|
||||
|
||||
## 0.1.165
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.4
|
||||
|
||||
## 0.1.164
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.3
|
||||
|
||||
## 0.1.163
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.2
|
||||
|
||||
## 0.1.162
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.1
|
||||
|
||||
## 0.1.161
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b0cd530]
|
||||
- Updated dependencies [361a685]
|
||||
- llamaindex@0.11.0
|
||||
|
||||
## 0.1.160
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with the Next.js Agent example in the LlamaIndexTS e2e testing suite.
|
||||
|
||||
## Package Overview
|
||||
|
||||
The `@llamaindex/next-agent-test` package is a Next.js application example that demonstrates integration between LlamaIndexTS and Next.js, specifically showcasing agent functionality with React Server Components and streaming UI using the Vercel AI SDK.
|
||||
|
||||
This example serves as both an integration test for Next.js compatibility and a reference implementation for building LlamaIndex-powered chat applications with Next.js.
|
||||
|
||||
## Development Commands
|
||||
|
||||
Local development commands:
|
||||
|
||||
- `npm run dev` - Start the Next.js development server on http://localhost:3000
|
||||
- `npm run build` - Build the application for production
|
||||
- `npm run start` - Start the production server
|
||||
|
||||
From the workspace root:
|
||||
|
||||
- `pnpm build` - Build all packages (required before running this example)
|
||||
- `pnpm e2e` - Run e2e tests including this Next.js integration
|
||||
|
||||
## Architecture
|
||||
|
||||
### Next.js Configuration
|
||||
|
||||
The application uses a custom Next.js configuration with the LlamaIndex Next.js plugin:
|
||||
|
||||
- `next.config.mjs` imports and applies `withLlamaIndex` from `llamaindex/next`
|
||||
- Enables Edge Runtime compatibility for LlamaIndex components
|
||||
- Uses Next.js 15 with React 19
|
||||
|
||||
### Runtime Environment
|
||||
|
||||
- **Edge Runtime**: The main page (`src/app/page.tsx`) exports `runtime = "edge"` for Vercel Edge Runtime compatibility
|
||||
- **React Server Components**: Uses Next.js App Router with RSC architecture
|
||||
- **Streaming UI**: Integrates Vercel AI SDK's `createStreamableUI` for real-time agent responses
|
||||
|
||||
### Key Components
|
||||
|
||||
**Main Application (`src/app/page.tsx`):**
|
||||
|
||||
- Client component using React's `useFormState` hook
|
||||
- Triggers server action `chatWithAgent` with a simple form interface
|
||||
- Displays streaming agent responses in real-time
|
||||
|
||||
**Server Actions (`src/actions/index.tsx`):**
|
||||
|
||||
- `chatWithAgent` function creates an OpenAI agent and handles streaming chat
|
||||
- Uses `OpenAIAgent` from `@llamaindex/openai` package
|
||||
- Implements streaming response with `createStreamableUI` from AI SDK
|
||||
- Accepts question string and previous chat messages as parameters
|
||||
|
||||
**Test Page (`src/app/test/page.tsx`):**
|
||||
|
||||
- Simple import test that ensures `llamaindex` package loads correctly
|
||||
- Serves as a basic smoke test for package compatibility
|
||||
|
||||
### Dependencies
|
||||
|
||||
**Core Dependencies:**
|
||||
|
||||
- `llamaindex` - Main LlamaIndex package (workspace dependency)
|
||||
- `next` - Next.js framework (v15.3.0+)
|
||||
- `react` & `react-dom` - React 19 for latest features
|
||||
- `ai` - Vercel AI SDK for streaming UI components
|
||||
|
||||
**Development Dependencies:**
|
||||
|
||||
- TypeScript configuration for Next.js development
|
||||
- ESLint with Next.js specific rules
|
||||
|
||||
## Integration Patterns
|
||||
|
||||
### Agent Integration
|
||||
|
||||
The example demonstrates how to:
|
||||
|
||||
1. Create an OpenAI agent with configurable tools
|
||||
2. Handle streaming chat responses in a server action
|
||||
3. Integrate with React's form state management
|
||||
4. Display real-time streaming responses in the UI
|
||||
|
||||
### Next.js Best Practices
|
||||
|
||||
- Uses App Router with proper server/client component separation
|
||||
- Implements React Server Actions for agent communication
|
||||
- Leverages Edge Runtime for optimal performance
|
||||
- Follows Next.js 15 conventions with React 19 features
|
||||
|
||||
## Testing Role
|
||||
|
||||
This example serves multiple testing purposes in the e2e suite:
|
||||
|
||||
1. **Next.js Compatibility**: Validates LlamaIndex works with latest Next.js versions
|
||||
2. **Edge Runtime Testing**: Ensures agent functionality works in edge environments
|
||||
3. **Streaming Integration**: Tests real-time agent responses with AI SDK
|
||||
4. **React Server Components**: Validates RSC compatibility with LlamaIndex agents
|
||||
5. **Build Integration**: Confirms Next.js build process works with LlamaIndex
|
||||
|
||||
## Development Notes
|
||||
|
||||
- **Build Dependency**: This example requires the LlamaIndex packages to be built first (`pnpm build` from workspace root)
|
||||
- **API Keys**: Real agent functionality requires OpenAI API key in environment variables
|
||||
- **Edge Runtime**: The application is configured for edge runtime compatibility, making it suitable for Vercel deployment
|
||||
- **Streaming UI**: Demonstrates modern streaming patterns for AI applications
|
||||
- **Framework Integration**: Shows best practices for integrating LlamaIndex with React-based frameworks
|
||||
|
||||
## Environment Requirements
|
||||
|
||||
- Node.js environment with Next.js support
|
||||
- OpenAI API key for real agent functionality (optional for basic testing)
|
||||
- Compatible with Vercel Edge Runtime and standard Node.js runtime
|
||||
|
||||
## Common Workflows
|
||||
|
||||
1. **Local Development**: Run `npm run dev` after building workspace packages
|
||||
2. **Testing Agent Flow**: Use the simple form interface to test streaming agent responses
|
||||
3. **Build Validation**: Run `npm run build` to ensure production build compatibility
|
||||
4. **Integration Testing**: Part of e2e test suite validating Next.js + LlamaIndex integration
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@llamaindex/next-agent-test",
|
||||
"version": "0.1.160",
|
||||
"version": "0.1.172",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use server";
|
||||
import { OpenAIAgent } from "@llamaindex/openai";
|
||||
import { createStreamableUI } from "ai/rsc";
|
||||
import type { ChatMessage } from "llamaindex";
|
||||
import { OpenAIAgent } from "llamaindex";
|
||||
|
||||
export async function chatWithAgent(
|
||||
question: string,
|
||||
|
||||
@@ -1,5 +1,81 @@
|
||||
# test-edge-runtime
|
||||
|
||||
## 0.1.171
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7039e1a]
|
||||
- llamaindex@0.11.11
|
||||
|
||||
## 0.1.170
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.10
|
||||
|
||||
## 0.1.169
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.9
|
||||
|
||||
## 0.1.168
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.8
|
||||
|
||||
## 0.1.167
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3c857f4]
|
||||
- llamaindex@0.11.7
|
||||
|
||||
## 0.1.166
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.6
|
||||
|
||||
## 0.1.165
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.5
|
||||
|
||||
## 0.1.164
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.4
|
||||
|
||||
## 0.1.163
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.3
|
||||
|
||||
## 0.1.162
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.2
|
||||
|
||||
## 0.1.161
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.1
|
||||
|
||||
## 0.1.160
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b0cd530]
|
||||
- Updated dependencies [361a685]
|
||||
- llamaindex@0.11.0
|
||||
|
||||
## 0.1.159
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with the LlamaIndexTS Next.js Edge Runtime example.
|
||||
|
||||
## Package Overview
|
||||
|
||||
The `@llamaindex/nextjs-edge-runtime-test` package is an end-to-end test example that validates LlamaIndexTS compatibility with Next.js Edge Runtime. This example serves as both a test case and a reference implementation for using LlamaIndex in Vercel Edge Runtime environments.
|
||||
|
||||
## Purpose
|
||||
|
||||
This example specifically tests:
|
||||
|
||||
- LlamaIndex package import compatibility in Edge Runtime
|
||||
- Next.js Edge Runtime environment detection
|
||||
- Proper runtime configuration for LlamaIndex in serverless edge environments
|
||||
- Integration with Next.js 15.x App Router using edge runtime
|
||||
|
||||
## Development Commands
|
||||
|
||||
Standard Next.js commands:
|
||||
|
||||
- `npm run dev` - Start development server
|
||||
- `npm run build` - Build for production
|
||||
- `npm start` - Start production server
|
||||
|
||||
From the workspace root:
|
||||
|
||||
- `pnpm build` - Build all packages (required before testing)
|
||||
- `pnpm e2e` - Run all e2e tests including this example
|
||||
|
||||
## Architecture
|
||||
|
||||
### Next.js Configuration
|
||||
|
||||
**next.config.mjs:**
|
||||
|
||||
- Uses `withLlamaIndex` wrapper from `llamaindex/next` for proper Edge Runtime configuration
|
||||
- Applies necessary bundling and polyfill configurations for LlamaIndex compatibility
|
||||
|
||||
### Runtime Configuration
|
||||
|
||||
**Edge Runtime Setup:**
|
||||
|
||||
- Both `src/app/layout.tsx` and `src/app/page.tsx` export `runtime = "edge"`
|
||||
- Forces Next.js to use Edge Runtime instead of Node.js runtime
|
||||
- Validates LlamaIndex works in constrained serverless environments
|
||||
|
||||
### Runtime Validation
|
||||
|
||||
**src/utils/llm.ts:**
|
||||
|
||||
- Imports the main `llamaindex` package to test compatibility
|
||||
- Performs runtime environment validation by checking for `EdgeRuntime` global
|
||||
- Throws error if not running in expected Edge Runtime environment
|
||||
- Acts as a smoke test for package loading in edge environments
|
||||
|
||||
### Application Structure
|
||||
|
||||
**App Router Setup:**
|
||||
|
||||
- Uses Next.js 13+ App Router with TypeScript
|
||||
- Minimal React components for testing runtime compatibility
|
||||
- CSS imports to validate bundling works correctly
|
||||
- Path aliases configured for `@/*` imports
|
||||
|
||||
## Key Features
|
||||
|
||||
### Edge Runtime Compatibility
|
||||
|
||||
- Tests LlamaIndex package loading in Vercel Edge Runtime
|
||||
- Validates proper tree-shaking and bundling for edge environments
|
||||
- Ensures no Node.js-specific APIs are accidentally imported
|
||||
|
||||
### LlamaIndex Integration
|
||||
|
||||
- Uses workspace dependency `llamaindex: "workspace:*"`
|
||||
- Leverages `withLlamaIndex` Next.js plugin for proper configuration
|
||||
- Tests base package import without specific providers
|
||||
|
||||
### Environment Detection
|
||||
|
||||
- Runtime environment validation ensures code runs in expected context
|
||||
- Prevents deployment issues by catching runtime mismatches early
|
||||
- Provides clear error messages for debugging
|
||||
|
||||
## Dependencies
|
||||
|
||||
**Core Dependencies:**
|
||||
|
||||
- `llamaindex` - Main LlamaIndexTS package (workspace dependency)
|
||||
- `next` - Next.js framework (v15.3.0)
|
||||
- `react` & `react-dom` - React framework (v19.x)
|
||||
|
||||
**Development Dependencies:**
|
||||
|
||||
- TypeScript types for Node.js, React, and React DOM
|
||||
- TypeScript compiler for type checking
|
||||
|
||||
## Development Notes
|
||||
|
||||
- **Build Dependency**: Ensure `pnpm build` is run from workspace root before testing
|
||||
- **Edge Runtime Only**: This example is specifically designed for Edge Runtime, not Node.js runtime
|
||||
- **Minimal Implementation**: Intentionally minimal to isolate Edge Runtime compatibility testing
|
||||
- **Import Testing**: The `src/utils/llm.ts` file serves as an import compatibility test
|
||||
- **Bundle Size**: Edge Runtime has size constraints, so this tests LlamaIndex bundle compatibility
|
||||
|
||||
## Testing Purpose
|
||||
|
||||
This example validates that:
|
||||
|
||||
1. LlamaIndex packages can be imported in Edge Runtime environments
|
||||
2. Next.js configuration works correctly with LlamaIndex
|
||||
3. Runtime environment detection functions properly
|
||||
4. Bundle size and tree-shaking work for edge deployments
|
||||
5. No Node.js-specific APIs are inadvertently used
|
||||
|
||||
## Common Issues
|
||||
|
||||
- **Runtime Detection Failures**: If `EdgeRuntime` is not detected, check Next.js configuration
|
||||
- **Import Errors**: Ensure workspace packages are built before running
|
||||
- **Bundle Size**: Edge Runtime has memory/size limits that may affect large imports
|
||||
- **API Compatibility**: Some LlamaIndex features may not work in Edge Runtime due to API limitations
|
||||
|
||||
## Related Examples
|
||||
|
||||
- `../nextjs-node-runtime/` - Node.js runtime equivalent
|
||||
- `../cloudflare-worker-agent/` - Cloudflare Workers edge runtime
|
||||
- `../nextjs-agent/` - Full Next.js agent implementation
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@llamaindex/nextjs-edge-runtime-test",
|
||||
"version": "0.1.159",
|
||||
"version": "0.1.171",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
|
||||
@@ -1,5 +1,102 @@
|
||||
# @llamaindex/next-node-runtime
|
||||
|
||||
## 0.1.40
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7039e1a]
|
||||
- llamaindex@0.11.11
|
||||
- @llamaindex/huggingface@0.1.16
|
||||
- @llamaindex/readers@3.1.11
|
||||
|
||||
## 0.1.39
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.10
|
||||
|
||||
## 0.1.38
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c5846bd]
|
||||
- @llamaindex/readers@3.1.10
|
||||
|
||||
## 0.1.37
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.9
|
||||
- @llamaindex/huggingface@0.1.15
|
||||
- @llamaindex/readers@3.1.9
|
||||
|
||||
## 0.1.36
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.8
|
||||
- @llamaindex/huggingface@0.1.14
|
||||
- @llamaindex/readers@3.1.8
|
||||
|
||||
## 0.1.35
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3c857f4]
|
||||
- llamaindex@0.11.7
|
||||
|
||||
## 0.1.34
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.6
|
||||
|
||||
## 0.1.33
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.5
|
||||
- @llamaindex/huggingface@0.1.13
|
||||
- @llamaindex/readers@3.1.7
|
||||
|
||||
## 0.1.32
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @llamaindex/huggingface@0.1.12
|
||||
- llamaindex@0.11.4
|
||||
- @llamaindex/readers@3.1.6
|
||||
|
||||
## 0.1.31
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.3
|
||||
|
||||
## 0.1.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @llamaindex/huggingface@0.1.11
|
||||
- llamaindex@0.11.2
|
||||
- @llamaindex/readers@3.1.5
|
||||
|
||||
## 0.1.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.1
|
||||
|
||||
## 0.1.28
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b0cd530]
|
||||
- Updated dependencies [361a685]
|
||||
- llamaindex@0.11.0
|
||||
- @llamaindex/huggingface@0.1.10
|
||||
- @llamaindex/readers@3.1.4
|
||||
|
||||
## 0.1.27
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with the Next.js Node Runtime example package.
|
||||
|
||||
## Package Overview
|
||||
|
||||
The `@llamaindex/next-node-runtime-test` package is an end-to-end test example that demonstrates LlamaIndexTS integration with Next.js running on the Node.js runtime. This example validates that LlamaIndex packages work correctly in a Next.js App Router environment with server-side rendering and server actions.
|
||||
|
||||
## Development Commands
|
||||
|
||||
From this directory:
|
||||
|
||||
- `npm run dev` - Start development server on http://localhost:3000
|
||||
- `npm run build` - Build the Next.js application
|
||||
- `npm run start` - Start production server
|
||||
|
||||
From the e2e root directory:
|
||||
|
||||
- `pnpm e2e` - Run all e2e tests including this example
|
||||
|
||||
## Application Structure
|
||||
|
||||
### Configuration Files
|
||||
|
||||
- `next.config.mjs` - Next.js configuration with LlamaIndex integration using `withLlamaIndex()`
|
||||
- `tsconfig.json` - TypeScript configuration for Next.js with App Router
|
||||
- `package.json` - Dependencies including `llamaindex`, `@llamaindex/huggingface`, and `@llamaindex/readers`
|
||||
|
||||
### Source Structure
|
||||
|
||||
**App Router Pages:**
|
||||
|
||||
- `src/app/page.tsx` - Home page that demonstrates tokenizer usage with `runtime = "nodejs"`
|
||||
- `src/app/layout.tsx` - Root layout component with Inter font
|
||||
|
||||
**API Routes:**
|
||||
|
||||
- `src/app/api/openai/route.ts` - POST endpoint that calls OpenAI server action
|
||||
|
||||
**Server Actions:**
|
||||
|
||||
- `src/actions/openai.ts` - Server action demonstrating full LlamaIndex workflow with OpenAI agent
|
||||
|
||||
**Utilities:**
|
||||
|
||||
- `src/utils/tokenizer.ts` - Runtime validation and tokenization example
|
||||
|
||||
## Key Features Demonstrated
|
||||
|
||||
### 1. Runtime Validation (`src/utils/tokenizer.ts`)
|
||||
|
||||
Tests that the application runs in Node.js runtime (not Edge):
|
||||
|
||||
```typescript
|
||||
// @ts-expect-error EdgeRuntime is not defined in type
|
||||
if (typeof EdgeRuntime === "string") {
|
||||
throw new Error("Expected to not run in EdgeRuntime");
|
||||
}
|
||||
```
|
||||
|
||||
Uses LlamaIndex tokenizers:
|
||||
|
||||
```typescript
|
||||
import { Tokenizers, tokenizers } from "@llamaindex/env/tokenizers";
|
||||
```
|
||||
|
||||
### 2. OpenAI Agent Integration (`src/actions/openai.ts`)
|
||||
|
||||
Demonstrates a complete LlamaIndex workflow:
|
||||
|
||||
- **LLM Configuration**: OpenAI GPT-4o with API key management
|
||||
- **Embedding Model**: HuggingFace BAAI/bge-small-en-v1.5 embeddings
|
||||
- **Document Loading**: SimpleDirectoryReader for local file processing
|
||||
- **Vector Index**: VectorStoreIndex creation from documents
|
||||
- **Tool Integration**: Query engine as a tool for the agent
|
||||
- **Agent Creation**: OpenAIAgent with tools for conversational AI
|
||||
- **Callback Handling**: Event listeners for tool calls and results
|
||||
|
||||
### 3. Next.js Integration
|
||||
|
||||
- **Server Actions**: "use server" directive for server-side LlamaIndex operations
|
||||
- **API Routes**: RESTful endpoint for external integration
|
||||
- **App Router**: Modern Next.js routing with TypeScript support
|
||||
- **LlamaIndex Plugin**: `withLlamaIndex()` wrapper for proper bundling
|
||||
|
||||
## Dependencies
|
||||
|
||||
**Core LlamaIndex:**
|
||||
|
||||
- `llamaindex` - Main LlamaIndex package
|
||||
- `@llamaindex/huggingface` - HuggingFace embedding models
|
||||
- `@llamaindex/readers` - Document readers including SimpleDirectoryReader
|
||||
|
||||
**Next.js Stack:**
|
||||
|
||||
- `next@^15.3.0` - Next.js framework
|
||||
- `react@19.0.0` & `react-dom@19.0.0` - React runtime
|
||||
- `typescript@^5.7.3` - TypeScript support
|
||||
|
||||
## Testing Purpose
|
||||
|
||||
This example serves as an integration test for:
|
||||
|
||||
1. **Node.js Runtime Compatibility**: Ensures LlamaIndex works in Next.js Node.js runtime
|
||||
2. **Server Actions**: Validates server-side LlamaIndex operations
|
||||
3. **Document Processing**: Tests file reading and vector indexing
|
||||
4. **Agent Workflows**: Validates OpenAI agent with tool integration
|
||||
5. **Bundling**: Ensures proper webpack bundling with `withLlamaIndex()`
|
||||
6. **API Integration**: Tests REST API endpoints with LlamaIndex backend
|
||||
|
||||
## Environment Variables
|
||||
|
||||
- `NEXT_PUBLIC_OPENAI_KEY` - OpenAI API key (falls back to "FAKE_KEY_TO_PASS_TESTS" for testing)
|
||||
|
||||
## Development Notes
|
||||
|
||||
- **Runtime Enforcement**: Explicitly sets `runtime = "nodejs"` in page components
|
||||
- **Error Handling**: Comprehensive try-catch in server actions
|
||||
- **Callback Management**: Event listeners for debugging tool interactions
|
||||
- **Testing Compatibility**: Fake API key fallback for automated testing
|
||||
- **Bundle Optimization**: Uses `withLlamaIndex()` for proper webpack configuration
|
||||
- **Type Safety**: Full TypeScript support with Next.js type definitions
|
||||
|
||||
## Common Workflows
|
||||
|
||||
1. **Local Development**: `npm run dev` to start development server with hot reload
|
||||
2. **Production Testing**: `npm run build && npm run start` to test production build
|
||||
3. **Integration Testing**: Run from e2e root with `pnpm e2e` for automated validation
|
||||
4. **Agent Testing**: POST to `/api/openai` endpoint with query payload for agent responses
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@llamaindex/next-node-runtime-test",
|
||||
"version": "0.1.27",
|
||||
"version": "0.1.40",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
"use server";
|
||||
import { HuggingFaceEmbedding } from "@llamaindex/huggingface";
|
||||
import { OpenAI, OpenAIAgent } from "@llamaindex/openai";
|
||||
import { SimpleDirectoryReader } from "@llamaindex/readers/directory";
|
||||
import { OpenAI, OpenAIAgent, Settings, VectorStoreIndex } from "llamaindex";
|
||||
import { Settings, VectorStoreIndex } from "llamaindex";
|
||||
|
||||
Settings.llm = new OpenAI({
|
||||
apiKey: process.env.NEXT_PUBLIC_OPENAI_KEY ?? "FAKE_KEY_TO_PASS_TESTS",
|
||||
|
||||
@@ -1,5 +1,81 @@
|
||||
# vite-import-llamaindex
|
||||
|
||||
## 0.0.38
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7039e1a]
|
||||
- llamaindex@0.11.11
|
||||
|
||||
## 0.0.37
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.10
|
||||
|
||||
## 0.0.36
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.9
|
||||
|
||||
## 0.0.35
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.8
|
||||
|
||||
## 0.0.34
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3c857f4]
|
||||
- llamaindex@0.11.7
|
||||
|
||||
## 0.0.33
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.6
|
||||
|
||||
## 0.0.32
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.5
|
||||
|
||||
## 0.0.31
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.4
|
||||
|
||||
## 0.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.3
|
||||
|
||||
## 0.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.2
|
||||
|
||||
## 0.0.28
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.1
|
||||
|
||||
## 0.0.27
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b0cd530]
|
||||
- Updated dependencies [361a685]
|
||||
- llamaindex@0.11.0
|
||||
|
||||
## 0.0.26
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with the vite-import-llamaindex example package.
|
||||
|
||||
## Package Overview
|
||||
|
||||
The `vite-import-llamaindex` package is a minimal Vite-based compatibility test that validates LlamaIndexTS can be properly imported and bundled in browser environments using Vite. This example serves as both an integration test and a demonstration of bundle size validation.
|
||||
|
||||
## Purpose
|
||||
|
||||
This example specifically tests:
|
||||
|
||||
- **Vite Bundler Compatibility**: Ensures LlamaIndexTS works correctly with Vite's bundling system
|
||||
- **Browser Import Validation**: Validates that the `llamaindex` package can be imported in browser-compatible builds
|
||||
- **Bundle Size Monitoring**: Uses size-limit to track and validate bundle output size
|
||||
- **Dual Module Support**: Tests both ESM and CJS output formats through Vite's library mode
|
||||
|
||||
## Development Commands
|
||||
|
||||
Local package commands:
|
||||
|
||||
- `npm run build` - Build the example using Vite library mode
|
||||
- `npm run size-limit` - Check bundle size against configured limits
|
||||
|
||||
From the root directory:
|
||||
|
||||
- `pnpm build` - Build all packages (required before testing)
|
||||
- `pnpm e2e` - Run all e2e tests including this example
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
vite-import-llamaindex/
|
||||
├── src/
|
||||
│ └── main.ts # Main entry point that imports llamaindex
|
||||
├── public/
|
||||
│ └── vite.svg # Vite logo asset
|
||||
├── package.json # Package configuration with size-limit setup
|
||||
├── vite.config.ts # Vite library build configuration
|
||||
├── tsconfig.json # TypeScript configuration
|
||||
└── CHANGELOG.md # Version history
|
||||
```
|
||||
|
||||
## Configuration Details
|
||||
|
||||
### Vite Configuration (`vite.config.ts`)
|
||||
|
||||
- **Library Mode**: Configured to build as a library with dual format output (ESM + CJS)
|
||||
- **Entry Point**: `src/main.ts` as the main entry
|
||||
- **Output Name**: `LlamaIndexImportTest`
|
||||
- **Formats**: Both ES modules and CommonJS for compatibility testing
|
||||
|
||||
### TypeScript Configuration (`tsconfig.json`)
|
||||
|
||||
- **Target**: ES2020 for modern browser compatibility
|
||||
- **Module System**: ESNext with bundler resolution for Vite
|
||||
- **Strict Mode**: Enabled with comprehensive linting rules
|
||||
- **DOM Types**: Includes DOM and DOM.Iterable for browser environment
|
||||
|
||||
### Bundle Size Monitoring
|
||||
|
||||
The package uses `size-limit` to monitor bundle size:
|
||||
|
||||
```json
|
||||
"size-limit": [
|
||||
{
|
||||
"path": "dist/LlamaIndexImportTest.js"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
This ensures the bundled output remains within reasonable size constraints for browser applications.
|
||||
|
||||
## Test Approach
|
||||
|
||||
The test validates:
|
||||
|
||||
1. **Import Success**: The `llamaindex` package can be imported without errors
|
||||
2. **Bundle Generation**: Vite can successfully bundle the code into browser-compatible output
|
||||
3. **Size Validation**: The resulting bundle meets size requirements
|
||||
4. **Module Compatibility**: Both ESM and CJS outputs are generated correctly
|
||||
|
||||
## Dependencies
|
||||
|
||||
- **`llamaindex`**: Workspace dependency for testing the main package
|
||||
- **`vite`**: Build tool and bundler
|
||||
- **`typescript`**: TypeScript compiler
|
||||
- **`@size-limit/preset-big-lib`**: Bundle size analysis for libraries
|
||||
- **`size-limit`**: Bundle size monitoring tool
|
||||
|
||||
## Development Notes
|
||||
|
||||
- **Build Dependency**: This example depends on the main `llamaindex` package being built first
|
||||
- **Browser Focus**: Specifically tests browser compatibility, not Node.js environments
|
||||
- **Size Monitoring**: Bundle size is actively monitored to prevent bloat
|
||||
- **Minimal Example**: Kept intentionally simple to isolate bundling issues
|
||||
- **Integration Test**: Serves as both an example and an automated test in the e2e suite
|
||||
|
||||
## Common Issues
|
||||
|
||||
1. **Build Failures**: Ensure `pnpm build` is run from the root before testing this example
|
||||
2. **Size Limit Violations**: If bundle size exceeds limits, investigate dependency bloat
|
||||
3. **Import Errors**: Check that the `llamaindex` package exports are browser-compatible
|
||||
4. **TypeScript Errors**: Verify TypeScript configuration matches Vite requirements
|
||||
|
||||
## Relationship to E2E Testing
|
||||
|
||||
This example is part of the broader e2e testing suite and validates that LlamaIndexTS maintains browser compatibility. It ensures that when users integrate LlamaIndexTS with Vite in their own projects, they won't encounter bundling or import issues.
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "vite-import-llamaindex",
|
||||
"private": true,
|
||||
"version": "0.0.26",
|
||||
"version": "0.0.38",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
|
||||
@@ -1 +1,9 @@
|
||||
{"root":["./src/main.ts","./vite.config.ts"],"version":"5.7.3"}
|
||||
{
|
||||
"root": [
|
||||
"./src/main.ts",
|
||||
"./vite.config.ts",
|
||||
"./tsconfig.json"
|
||||
],
|
||||
"errors": true,
|
||||
"version": "5.7.3"
|
||||
}
|
||||
|
||||
@@ -1,5 +1,81 @@
|
||||
# @llamaindex/waku-query-engine-test
|
||||
|
||||
## 0.0.172
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7039e1a]
|
||||
- llamaindex@0.11.11
|
||||
|
||||
## 0.0.171
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.10
|
||||
|
||||
## 0.0.170
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.9
|
||||
|
||||
## 0.0.169
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.8
|
||||
|
||||
## 0.0.168
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [3c857f4]
|
||||
- llamaindex@0.11.7
|
||||
|
||||
## 0.0.167
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.6
|
||||
|
||||
## 0.0.166
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.5
|
||||
|
||||
## 0.0.165
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.4
|
||||
|
||||
## 0.0.164
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.3
|
||||
|
||||
## 0.0.163
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.2
|
||||
|
||||
## 0.0.162
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- llamaindex@0.11.1
|
||||
|
||||
## 0.0.161
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b0cd530]
|
||||
- Updated dependencies [361a685]
|
||||
- llamaindex@0.11.0
|
||||
|
||||
## 0.0.160
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with the LlamaIndexTS Waku Query Engine example.
|
||||
|
||||
## Package Overview
|
||||
|
||||
The `@llamaindex/waku-query-engine-test` package demonstrates LlamaIndexTS integration with the Waku React framework. This example showcases how to build a document query interface using LlamaIndex's VectorStoreIndex and QueryEngine capabilities within a Waku application that supports both static rendering and server actions.
|
||||
|
||||
## Development Commands
|
||||
|
||||
- `npm run dev` - Start Waku development server
|
||||
- `npm run build` - Build the application for production
|
||||
- `npm run start` - Start the production server
|
||||
|
||||
## Architecture
|
||||
|
||||
### Framework Integration
|
||||
|
||||
This example uses **Waku 0.22.2**, a lightweight React framework that supports:
|
||||
|
||||
- React Server Components (RSC)
|
||||
- Server actions with "use server" directive
|
||||
- Static site generation with `render: "static"` config
|
||||
- Client-side hydration with "use client" components
|
||||
|
||||
### LlamaIndex Integration
|
||||
|
||||
The core LlamaIndex functionality is implemented in `src/actions.ts`:
|
||||
|
||||
**Key Components:**
|
||||
|
||||
- **Document Loading**: Reads text from `node_modules/llamaindex/examples/abramov.txt`
|
||||
- **Vector Index**: Creates embeddings using `VectorStoreIndex.fromDocuments()`
|
||||
- **Query Engine**: Provides semantic search capabilities via `index.asQueryEngine()`
|
||||
- **Lazy Loading**: QueryEngine is initialized once and cached for subsequent requests
|
||||
|
||||
**Data Flow:**
|
||||
|
||||
1. User inputs question in chat interface (`src/components/chat.tsx`)
|
||||
2. Form submission triggers server action (`chatWithAI`)
|
||||
3. Server action queries the VectorStoreIndex
|
||||
4. Response is returned and displayed in the UI
|
||||
|
||||
### Component Structure
|
||||
|
||||
**Server Components:**
|
||||
|
||||
- `src/pages/_layout.tsx` - Root layout with static metadata
|
||||
- `src/pages/index.tsx` - Home page with static rendering config
|
||||
- `src/components/header.tsx` - Navigation header
|
||||
- `src/components/footer.tsx` - Site footer
|
||||
|
||||
**Client Components:**
|
||||
|
||||
- `src/components/chat.tsx` - Interactive chat interface with form state management
|
||||
|
||||
### Styling
|
||||
|
||||
- **TailwindCSS 4.1.4** for utility-first styling
|
||||
- **PostCSS** for CSS processing
|
||||
- **Nunito font** via Google Fonts
|
||||
- Responsive design with mobile-first approach
|
||||
|
||||
## Dependencies
|
||||
|
||||
**Core Dependencies:**
|
||||
|
||||
- `@llamaindex/env` - Runtime environment compatibility
|
||||
- `llamaindex` - Main LlamaIndexTS package for document indexing and querying
|
||||
- `waku` - React framework for SSR/SSG
|
||||
- `react` & `react-dom` - React 19.0.0 with experimental features
|
||||
- `react-server-dom-webpack` - React Server Components support
|
||||
|
||||
**Development Dependencies:**
|
||||
|
||||
- `typescript` - TypeScript 5.7.3 with strict mode
|
||||
- `tailwindcss` & `@tailwindcss/postcss` - Styling framework
|
||||
- `rollup` - Build tool used by Waku
|
||||
|
||||
## TypeScript Configuration
|
||||
|
||||
- **Target**: ESNext with modern features
|
||||
- **Module**: ESNext with bundler resolution
|
||||
- **React**: Experimental types for React 19 features
|
||||
- **Strict**: Full TypeScript strict mode enabled
|
||||
|
||||
## Key Features Demonstrated
|
||||
|
||||
1. **Server Actions Integration**: Seamless LlamaIndex queries via Waku server actions
|
||||
2. **Document RAG**: Retrieval-Augmented Generation using vector embeddings
|
||||
3. **Static Generation**: Pages are statically rendered while maintaining interactive features
|
||||
4. **React 19 Features**: Uses latest React with experimental types
|
||||
5. **Modern Styling**: TailwindCSS 4.x with PostCSS integration
|
||||
|
||||
## Testing Context
|
||||
|
||||
This example serves as an end-to-end test for:
|
||||
|
||||
- LlamaIndexTS compatibility with Waku framework
|
||||
- React Server Components integration
|
||||
- Vector store and query engine functionality
|
||||
- Server action patterns with LlamaIndex
|
||||
- Build and deployment workflows
|
||||
|
||||
## Development Notes
|
||||
|
||||
- **File Loading**: Uses `@llamaindex/env` fs abstraction for cross-platform file access
|
||||
- **Query Caching**: QueryEngine is lazily loaded and cached for performance
|
||||
- **Error Handling**: Basic error handling in server actions and form submissions
|
||||
- **Bundle Size**: Waku's optimized bundling ensures minimal client-side JavaScript
|
||||
- **Runtime Support**: Compatible with Node.js runtime environments
|
||||
|
||||
## Common Patterns
|
||||
|
||||
**Adding New Documents:**
|
||||
|
||||
1. Place document files in accessible location
|
||||
2. Update `lazyLoadQueryEngine()` to load additional documents
|
||||
3. Rebuild vector index with new document set
|
||||
|
||||
**Extending Chat Interface:**
|
||||
|
||||
1. Modify `Chat` component for enhanced UI features
|
||||
2. Update `chatWithAI` server action for additional processing
|
||||
3. Add error states and loading indicators as needed
|
||||
|
||||
**Styling Updates:**
|
||||
|
||||
1. Modify TailwindCSS classes in components
|
||||
2. Update `tailwind.config.js` for custom configurations
|
||||
3. Use `src/styles.css` for global styles
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@llamaindex/waku-query-engine-test",
|
||||
"version": "0.0.160",
|
||||
"version": "0.0.172",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ClipEmbedding } from "@llamaindex/clip";
|
||||
import type { LoadTransformerEvent } from "@llamaindex/env/multi-model";
|
||||
import { setTransformers } from "@llamaindex/env/multi-model";
|
||||
import { OpenAIEmbedding } from "@llamaindex/openai";
|
||||
import { ImageNode, Settings } from "llamaindex";
|
||||
import assert from "node:assert";
|
||||
import { type Mock, test } from "node:test";
|
||||
@@ -19,6 +20,7 @@ test.before(() => {
|
||||
|
||||
test.beforeEach(() => {
|
||||
callback.mock.resetCalls();
|
||||
Settings.embedModel = new OpenAIEmbedding();
|
||||
});
|
||||
|
||||
await test.skip("clip embedding", async (t) => {
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
import type { TaskStep } from "@llamaindex/core/agent";
|
||||
import {
|
||||
LLMSingleSelector,
|
||||
OpenAIAgent,
|
||||
Settings,
|
||||
type ChatMessage,
|
||||
} from "llamaindex";
|
||||
import { OpenAIAgent } from "@llamaindex/openai";
|
||||
import { LLMSingleSelector, Settings, type ChatMessage } from "llamaindex";
|
||||
import assert from "node:assert";
|
||||
import { test } from "node:test";
|
||||
import { divideNumbersTool, sumNumbersTool } from "./fixtures/tools.js";
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { extractText } from "@llamaindex/core/utils";
|
||||
import { OpenAI, OpenAIAgent } from "@llamaindex/openai";
|
||||
import { consola } from "consola";
|
||||
import {
|
||||
Document,
|
||||
FunctionTool,
|
||||
ObjectIndex,
|
||||
OpenAI,
|
||||
OpenAIAgent,
|
||||
QueryEngineTool,
|
||||
SentenceSplitter,
|
||||
Settings,
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { extractText } from "@llamaindex/core/utils";
|
||||
import { OpenAI, ReActAgent, Settings, type LLM } from "llamaindex";
|
||||
import { OpenAI } from "@llamaindex/openai";
|
||||
import { ReActAgent, Settings, type LLM } from "llamaindex";
|
||||
import { ok } from "node:assert";
|
||||
import { beforeEach, test } from "node:test";
|
||||
import { getWeatherTool } from "./fixtures/tools.js";
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { OpenAIEmbedding } from "@llamaindex/openai";
|
||||
import { PGVectorStore } from "@llamaindex/postgres";
|
||||
import { config } from "dotenv";
|
||||
import { Document, VectorStoreQueryMode } from "llamaindex";
|
||||
import { Document, Settings, VectorStoreQueryMode } from "llamaindex";
|
||||
import assert from "node:assert";
|
||||
import { test } from "node:test";
|
||||
import { beforeEach, test } from "node:test";
|
||||
import pg from "pg";
|
||||
import { registerTypes } from "pgvector/pg";
|
||||
|
||||
@@ -14,6 +15,10 @@ const pgConfig = {
|
||||
database: "llamaindex_node_test",
|
||||
};
|
||||
|
||||
beforeEach(async () => {
|
||||
Settings.embedModel = new OpenAIEmbedding();
|
||||
});
|
||||
|
||||
await test("init with client", async (t) => {
|
||||
const pgClient = new pg.Client(pgConfig);
|
||||
await pgClient.connect();
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
"dependencies": {
|
||||
"@llamaindex/workflow": "1.1.1",
|
||||
"llamaindex": "0.10.5",
|
||||
"zod": "^3.23.8"
|
||||
"zod": "^3.25.67"
|
||||
},
|
||||
"devDependencies": {
|
||||
"tsx": "^4.19.1",
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { OpenAI } from "@llamaindex/openai";
|
||||
import { agent } from "@llamaindex/workflow";
|
||||
import { OpenAI, Settings, tool } from "llamaindex";
|
||||
import { Settings, tool } from "llamaindex";
|
||||
import { ok } from "node:assert";
|
||||
import { test } from "node:test";
|
||||
import { z } from "zod";
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@llamaindex/e2e",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"e2e": "node --import tsx --import ./mock-register.js --test ./node/**/*.e2e.ts",
|
||||
@@ -27,6 +27,6 @@
|
||||
"pg": "^8.12.0",
|
||||
"pgvector": "0.2.0",
|
||||
"tsx": "^4.19.3",
|
||||
"zod": "^3.24.2"
|
||||
"zod": "^3.25.67"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,399 @@
|
||||
# examples
|
||||
|
||||
## 0.3.25
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [7039e1a]
|
||||
- Updated dependencies [7039e1a]
|
||||
- llamaindex@0.11.11
|
||||
- @llamaindex/core@0.6.12
|
||||
- @llamaindex/google@0.3.11
|
||||
- @llamaindex/cloud@4.0.16
|
||||
- @llamaindex/node-parser@2.0.12
|
||||
- @llamaindex/anthropic@0.3.14
|
||||
- @llamaindex/assemblyai@0.1.11
|
||||
- @llamaindex/clip@0.0.62
|
||||
- @llamaindex/cohere@0.0.26
|
||||
- @llamaindex/deepinfra@0.0.62
|
||||
- @llamaindex/discord@0.1.11
|
||||
- @llamaindex/huggingface@0.1.16
|
||||
- @llamaindex/jinaai@0.0.22
|
||||
- @llamaindex/mistral@0.1.12
|
||||
- @llamaindex/mixedbread@0.0.26
|
||||
- @llamaindex/notion@0.1.11
|
||||
- @llamaindex/ollama@0.1.12
|
||||
- @llamaindex/openai@0.4.6
|
||||
- @llamaindex/perplexity@0.0.19
|
||||
- @llamaindex/portkey-ai@0.0.54
|
||||
- @llamaindex/replicate@0.0.54
|
||||
- @llamaindex/astra@0.0.26
|
||||
- @llamaindex/azure@0.1.23
|
||||
- @llamaindex/chroma@0.0.26
|
||||
- @llamaindex/elastic-search@0.1.12
|
||||
- @llamaindex/firestore@1.0.19
|
||||
- @llamaindex/milvus@0.1.21
|
||||
- @llamaindex/mongodb@0.0.27
|
||||
- @llamaindex/pinecone@0.1.12
|
||||
- @llamaindex/postgres@0.0.55
|
||||
- @llamaindex/qdrant@0.1.22
|
||||
- @llamaindex/supabase@0.1.12
|
||||
- @llamaindex/upstash@0.0.26
|
||||
- @llamaindex/weaviate@0.0.27
|
||||
- @llamaindex/vercel@0.1.12
|
||||
- @llamaindex/voyage-ai@1.0.18
|
||||
- @llamaindex/readers@3.1.11
|
||||
- @llamaindex/tools@0.1.1
|
||||
- @llamaindex/workflow@1.1.12
|
||||
- @llamaindex/deepseek@0.0.22
|
||||
- @llamaindex/fireworks@0.0.22
|
||||
- @llamaindex/groq@0.0.77
|
||||
- @llamaindex/together@0.0.22
|
||||
- @llamaindex/vllm@0.0.48
|
||||
- @llamaindex/xai@0.0.9
|
||||
|
||||
## 0.3.24
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [096bf2b]
|
||||
- Updated dependencies [c5846bd]
|
||||
- @llamaindex/tools@0.1.0
|
||||
- @llamaindex/readers@3.1.10
|
||||
|
||||
## 0.3.23
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a89e187]
|
||||
- Updated dependencies [62699b7]
|
||||
- Updated dependencies [c5b2691]
|
||||
- Updated dependencies [d8ac8d3]
|
||||
- @llamaindex/core@0.6.11
|
||||
- @llamaindex/google@0.3.10
|
||||
- @llamaindex/openai@0.4.5
|
||||
- @llamaindex/cloud@4.0.15
|
||||
- llamaindex@0.11.9
|
||||
- @llamaindex/node-parser@2.0.11
|
||||
- @llamaindex/anthropic@0.3.13
|
||||
- @llamaindex/assemblyai@0.1.10
|
||||
- @llamaindex/clip@0.0.61
|
||||
- @llamaindex/cohere@0.0.25
|
||||
- @llamaindex/deepinfra@0.0.61
|
||||
- @llamaindex/discord@0.1.10
|
||||
- @llamaindex/huggingface@0.1.15
|
||||
- @llamaindex/jinaai@0.0.21
|
||||
- @llamaindex/mistral@0.1.11
|
||||
- @llamaindex/mixedbread@0.0.25
|
||||
- @llamaindex/notion@0.1.10
|
||||
- @llamaindex/ollama@0.1.11
|
||||
- @llamaindex/perplexity@0.0.18
|
||||
- @llamaindex/portkey-ai@0.0.53
|
||||
- @llamaindex/replicate@0.0.53
|
||||
- @llamaindex/astra@0.0.25
|
||||
- @llamaindex/azure@0.1.22
|
||||
- @llamaindex/chroma@0.0.25
|
||||
- @llamaindex/elastic-search@0.1.11
|
||||
- @llamaindex/firestore@1.0.18
|
||||
- @llamaindex/milvus@0.1.20
|
||||
- @llamaindex/mongodb@0.0.26
|
||||
- @llamaindex/pinecone@0.1.11
|
||||
- @llamaindex/postgres@0.0.54
|
||||
- @llamaindex/qdrant@0.1.21
|
||||
- @llamaindex/supabase@0.1.10
|
||||
- @llamaindex/upstash@0.0.25
|
||||
- @llamaindex/weaviate@0.0.26
|
||||
- @llamaindex/vercel@0.1.11
|
||||
- @llamaindex/voyage-ai@1.0.17
|
||||
- @llamaindex/readers@3.1.9
|
||||
- @llamaindex/tools@0.0.17
|
||||
- @llamaindex/workflow@1.1.10
|
||||
- @llamaindex/deepseek@0.0.21
|
||||
- @llamaindex/fireworks@0.0.21
|
||||
- @llamaindex/groq@0.0.76
|
||||
- @llamaindex/together@0.0.21
|
||||
- @llamaindex/vllm@0.0.47
|
||||
- @llamaindex/xai@0.0.8
|
||||
|
||||
## 0.3.22
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [8a51c16]
|
||||
- Updated dependencies [1b5af14]
|
||||
- @llamaindex/workflow@1.1.9
|
||||
- @llamaindex/core@0.6.10
|
||||
- llamaindex@0.11.8
|
||||
- @llamaindex/cloud@4.0.14
|
||||
- @llamaindex/node-parser@2.0.10
|
||||
- @llamaindex/anthropic@0.3.12
|
||||
- @llamaindex/assemblyai@0.1.9
|
||||
- @llamaindex/clip@0.0.60
|
||||
- @llamaindex/cohere@0.0.24
|
||||
- @llamaindex/deepinfra@0.0.60
|
||||
- @llamaindex/discord@0.1.9
|
||||
- @llamaindex/google@0.3.9
|
||||
- @llamaindex/huggingface@0.1.14
|
||||
- @llamaindex/jinaai@0.0.20
|
||||
- @llamaindex/mistral@0.1.10
|
||||
- @llamaindex/mixedbread@0.0.24
|
||||
- @llamaindex/notion@0.1.9
|
||||
- @llamaindex/ollama@0.1.10
|
||||
- @llamaindex/openai@0.4.4
|
||||
- @llamaindex/perplexity@0.0.17
|
||||
- @llamaindex/portkey-ai@0.0.52
|
||||
- @llamaindex/replicate@0.0.52
|
||||
- @llamaindex/astra@0.0.24
|
||||
- @llamaindex/azure@0.1.21
|
||||
- @llamaindex/chroma@0.0.24
|
||||
- @llamaindex/elastic-search@0.1.10
|
||||
- @llamaindex/firestore@1.0.17
|
||||
- @llamaindex/milvus@0.1.19
|
||||
- @llamaindex/mongodb@0.0.25
|
||||
- @llamaindex/pinecone@0.1.10
|
||||
- @llamaindex/postgres@0.0.53
|
||||
- @llamaindex/qdrant@0.1.20
|
||||
- @llamaindex/supabase@0.1.9
|
||||
- @llamaindex/upstash@0.0.24
|
||||
- @llamaindex/weaviate@0.0.25
|
||||
- @llamaindex/vercel@0.1.10
|
||||
- @llamaindex/voyage-ai@1.0.16
|
||||
- @llamaindex/readers@3.1.8
|
||||
- @llamaindex/tools@0.0.16
|
||||
- @llamaindex/deepseek@0.0.20
|
||||
- @llamaindex/fireworks@0.0.20
|
||||
- @llamaindex/groq@0.0.75
|
||||
- @llamaindex/together@0.0.20
|
||||
- @llamaindex/vllm@0.0.46
|
||||
- @llamaindex/xai@0.0.7
|
||||
|
||||
## 0.3.21
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [dbd857f]
|
||||
- Updated dependencies [3c857f4]
|
||||
- @llamaindex/workflow@1.1.8
|
||||
- llamaindex@0.11.7
|
||||
- @llamaindex/tools@0.0.15
|
||||
|
||||
## 0.3.20
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [e7484ef]
|
||||
- @llamaindex/weaviate@0.0.24
|
||||
|
||||
## 0.3.19
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [766054b]
|
||||
- Updated dependencies [5346623]
|
||||
- Updated dependencies [71598f8]
|
||||
- @llamaindex/workflow@1.1.6
|
||||
- @llamaindex/google@0.3.6
|
||||
- @llamaindex/core@0.6.9
|
||||
- llamaindex@0.11.5
|
||||
- @llamaindex/cloud@4.0.13
|
||||
- @llamaindex/node-parser@2.0.9
|
||||
- @llamaindex/anthropic@0.3.11
|
||||
- @llamaindex/assemblyai@0.1.8
|
||||
- @llamaindex/clip@0.0.59
|
||||
- @llamaindex/cohere@0.0.23
|
||||
- @llamaindex/deepinfra@0.0.59
|
||||
- @llamaindex/discord@0.1.8
|
||||
- @llamaindex/huggingface@0.1.13
|
||||
- @llamaindex/jinaai@0.0.19
|
||||
- @llamaindex/mistral@0.1.9
|
||||
- @llamaindex/mixedbread@0.0.23
|
||||
- @llamaindex/notion@0.1.8
|
||||
- @llamaindex/ollama@0.1.9
|
||||
- @llamaindex/openai@0.4.3
|
||||
- @llamaindex/perplexity@0.0.16
|
||||
- @llamaindex/portkey-ai@0.0.51
|
||||
- @llamaindex/replicate@0.0.51
|
||||
- @llamaindex/astra@0.0.23
|
||||
- @llamaindex/azure@0.1.20
|
||||
- @llamaindex/chroma@0.0.23
|
||||
- @llamaindex/elastic-search@0.1.9
|
||||
- @llamaindex/firestore@1.0.16
|
||||
- @llamaindex/milvus@0.1.18
|
||||
- @llamaindex/mongodb@0.0.24
|
||||
- @llamaindex/pinecone@0.1.9
|
||||
- @llamaindex/postgres@0.0.52
|
||||
- @llamaindex/qdrant@0.1.19
|
||||
- @llamaindex/supabase@0.1.8
|
||||
- @llamaindex/upstash@0.0.23
|
||||
- @llamaindex/weaviate@0.0.23
|
||||
- @llamaindex/vercel@0.1.9
|
||||
- @llamaindex/voyage-ai@1.0.15
|
||||
- @llamaindex/readers@3.1.7
|
||||
- @llamaindex/tools@0.0.14
|
||||
- @llamaindex/deepseek@0.0.19
|
||||
- @llamaindex/fireworks@0.0.19
|
||||
- @llamaindex/groq@0.0.74
|
||||
- @llamaindex/together@0.0.19
|
||||
- @llamaindex/vllm@0.0.45
|
||||
- @llamaindex/xai@0.0.6
|
||||
|
||||
## 0.3.18
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c927457]
|
||||
- @llamaindex/anthropic@0.3.10
|
||||
- @llamaindex/openai@0.4.2
|
||||
- @llamaindex/core@0.6.8
|
||||
- @llamaindex/clip@0.0.58
|
||||
- @llamaindex/deepinfra@0.0.58
|
||||
- @llamaindex/deepseek@0.0.18
|
||||
- @llamaindex/fireworks@0.0.18
|
||||
- @llamaindex/groq@0.0.73
|
||||
- @llamaindex/huggingface@0.1.12
|
||||
- @llamaindex/jinaai@0.0.18
|
||||
- @llamaindex/perplexity@0.0.15
|
||||
- @llamaindex/azure@0.1.19
|
||||
- @llamaindex/elastic-search@0.1.8
|
||||
- @llamaindex/milvus@0.1.17
|
||||
- @llamaindex/qdrant@0.1.18
|
||||
- @llamaindex/supabase@0.1.7
|
||||
- @llamaindex/together@0.0.18
|
||||
- @llamaindex/vllm@0.0.44
|
||||
- @llamaindex/xai@0.0.5
|
||||
- @llamaindex/cloud@4.0.12
|
||||
- llamaindex@0.11.4
|
||||
- @llamaindex/node-parser@2.0.8
|
||||
- @llamaindex/assemblyai@0.1.7
|
||||
- @llamaindex/cohere@0.0.22
|
||||
- @llamaindex/discord@0.1.7
|
||||
- @llamaindex/google@0.3.5
|
||||
- @llamaindex/mistral@0.1.8
|
||||
- @llamaindex/mixedbread@0.0.22
|
||||
- @llamaindex/notion@0.1.7
|
||||
- @llamaindex/ollama@0.1.8
|
||||
- @llamaindex/portkey-ai@0.0.50
|
||||
- @llamaindex/replicate@0.0.50
|
||||
- @llamaindex/astra@0.0.22
|
||||
- @llamaindex/chroma@0.0.22
|
||||
- @llamaindex/firestore@1.0.15
|
||||
- @llamaindex/mongodb@0.0.23
|
||||
- @llamaindex/pinecone@0.1.8
|
||||
- @llamaindex/postgres@0.0.51
|
||||
- @llamaindex/upstash@0.0.22
|
||||
- @llamaindex/weaviate@0.0.22
|
||||
- @llamaindex/vercel@0.1.8
|
||||
- @llamaindex/voyage-ai@1.0.14
|
||||
- @llamaindex/readers@3.1.6
|
||||
- @llamaindex/tools@0.0.13
|
||||
- @llamaindex/workflow@1.1.5
|
||||
|
||||
## 0.3.17
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [59601dd]
|
||||
- @llamaindex/openai@0.4.1
|
||||
- @llamaindex/core@0.6.7
|
||||
- @llamaindex/clip@0.0.57
|
||||
- @llamaindex/deepinfra@0.0.57
|
||||
- @llamaindex/deepseek@0.0.17
|
||||
- @llamaindex/fireworks@0.0.17
|
||||
- @llamaindex/groq@0.0.72
|
||||
- @llamaindex/huggingface@0.1.11
|
||||
- @llamaindex/jinaai@0.0.17
|
||||
- @llamaindex/perplexity@0.0.14
|
||||
- @llamaindex/azure@0.1.17
|
||||
- @llamaindex/elastic-search@0.1.7
|
||||
- @llamaindex/milvus@0.1.16
|
||||
- @llamaindex/qdrant@0.1.16
|
||||
- @llamaindex/supabase@0.1.6
|
||||
- @llamaindex/together@0.0.17
|
||||
- @llamaindex/vllm@0.0.43
|
||||
- @llamaindex/xai@0.0.4
|
||||
- @llamaindex/cloud@4.0.10
|
||||
- llamaindex@0.11.2
|
||||
- @llamaindex/node-parser@2.0.7
|
||||
- @llamaindex/anthropic@0.3.8
|
||||
- @llamaindex/assemblyai@0.1.6
|
||||
- @llamaindex/cohere@0.0.21
|
||||
- @llamaindex/discord@0.1.6
|
||||
- @llamaindex/google@0.3.3
|
||||
- @llamaindex/mistral@0.1.7
|
||||
- @llamaindex/mixedbread@0.0.21
|
||||
- @llamaindex/notion@0.1.6
|
||||
- @llamaindex/ollama@0.1.7
|
||||
- @llamaindex/portkey-ai@0.0.49
|
||||
- @llamaindex/replicate@0.0.49
|
||||
- @llamaindex/astra@0.0.21
|
||||
- @llamaindex/chroma@0.0.21
|
||||
- @llamaindex/firestore@1.0.14
|
||||
- @llamaindex/mongodb@0.0.22
|
||||
- @llamaindex/pinecone@0.1.7
|
||||
- @llamaindex/postgres@0.0.50
|
||||
- @llamaindex/upstash@0.0.21
|
||||
- @llamaindex/weaviate@0.0.21
|
||||
- @llamaindex/vercel@0.1.7
|
||||
- @llamaindex/voyage-ai@1.0.13
|
||||
- @llamaindex/readers@3.1.5
|
||||
- @llamaindex/tools@0.0.12
|
||||
- @llamaindex/workflow@1.1.4
|
||||
|
||||
## 0.3.16
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [680b529]
|
||||
- Updated dependencies [b0cd530]
|
||||
- Updated dependencies [c73c659]
|
||||
- Updated dependencies [361a685]
|
||||
- Updated dependencies [3e66ddc]
|
||||
- @llamaindex/workflow@1.1.3
|
||||
- @llamaindex/core@0.6.6
|
||||
- llamaindex@0.11.0
|
||||
- @llamaindex/qdrant@0.1.15
|
||||
- @llamaindex/azure@0.1.16
|
||||
- @llamaindex/openai@0.4.0
|
||||
- @llamaindex/cloud@4.0.8
|
||||
- @llamaindex/node-parser@2.0.6
|
||||
- @llamaindex/anthropic@0.3.7
|
||||
- @llamaindex/assemblyai@0.1.5
|
||||
- @llamaindex/clip@0.0.56
|
||||
- @llamaindex/cohere@0.0.20
|
||||
- @llamaindex/deepinfra@0.0.56
|
||||
- @llamaindex/discord@0.1.5
|
||||
- @llamaindex/google@0.3.2
|
||||
- @llamaindex/huggingface@0.1.10
|
||||
- @llamaindex/jinaai@0.0.16
|
||||
- @llamaindex/mistral@0.1.6
|
||||
- @llamaindex/mixedbread@0.0.20
|
||||
- @llamaindex/notion@0.1.5
|
||||
- @llamaindex/ollama@0.1.6
|
||||
- @llamaindex/perplexity@0.0.13
|
||||
- @llamaindex/portkey-ai@0.0.48
|
||||
- @llamaindex/replicate@0.0.48
|
||||
- @llamaindex/astra@0.0.20
|
||||
- @llamaindex/chroma@0.0.20
|
||||
- @llamaindex/elastic-search@0.1.6
|
||||
- @llamaindex/firestore@1.0.13
|
||||
- @llamaindex/milvus@0.1.15
|
||||
- @llamaindex/mongodb@0.0.21
|
||||
- @llamaindex/pinecone@0.1.6
|
||||
- @llamaindex/postgres@0.0.49
|
||||
- @llamaindex/supabase@0.1.5
|
||||
- @llamaindex/upstash@0.0.20
|
||||
- @llamaindex/weaviate@0.0.20
|
||||
- @llamaindex/vercel@0.1.6
|
||||
- @llamaindex/voyage-ai@1.0.12
|
||||
- @llamaindex/readers@3.1.4
|
||||
- @llamaindex/tools@0.0.11
|
||||
- @llamaindex/deepseek@0.0.16
|
||||
- @llamaindex/fireworks@0.0.16
|
||||
- @llamaindex/groq@0.0.71
|
||||
- @llamaindex/together@0.0.16
|
||||
- @llamaindex/vllm@0.0.42
|
||||
- @llamaindex/xai@0.0.3
|
||||
|
||||
## 0.3.15
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
# CLAUDE.md - Examples Package
|
||||
|
||||
This directory contains comprehensive examples demonstrating LlamaIndex.TS functionality across different use cases and integrations.
|
||||
|
||||
## Running Examples
|
||||
|
||||
All examples are executable TypeScript files that can be run directly:
|
||||
|
||||
```bash
|
||||
# Run a specific example
|
||||
npx tsx ./rag/starter.ts
|
||||
npx tsx ./agents/agent/single-agent.ts
|
||||
npx tsx ./models/openai/openai.ts
|
||||
|
||||
# Or use the package script
|
||||
npm start # runs ./starter.ts (if it exists)
|
||||
```
|
||||
|
||||
## Environment Setup
|
||||
|
||||
Most examples require API keys. Set environment variables before running:
|
||||
|
||||
```bash
|
||||
export OPENAI_API_KEY="sk-..."
|
||||
export ANTHROPIC_API_KEY="sk-..."
|
||||
export PINECONE_API_KEY="..."
|
||||
# Add other provider keys as needed
|
||||
```
|
||||
|
||||
## Example Categories
|
||||
|
||||
### Agents (`agents/`)
|
||||
|
||||
Demonstrates agent functionality and workflows:
|
||||
|
||||
- **`agent/`** - Modern agent implementations using `@llamaindex/workflow`
|
||||
- `single-agent.ts` - Basic agent with tool usage
|
||||
- `multiple-agents.ts` - Multi-agent coordination
|
||||
- `blog-writer.ts` - Content generation agent
|
||||
- `with-anthropic.ts`, `with-ollama.ts` - Provider-specific agents
|
||||
- **`workflow/`** - Workflow orchestration examples
|
||||
- **`toolsStream.ts`** - Streaming tool interactions
|
||||
|
||||
### RAG (Retrieval-Augmented Generation) (`rag/`)
|
||||
|
||||
Core RAG functionality examples:
|
||||
|
||||
- `starter.ts` - Basic RAG setup with VectorStoreIndex
|
||||
- `chatEngine.ts` - Conversational RAG interface
|
||||
- `chat-engine/` - Different chat engine implementations
|
||||
- `extractors/` - Metadata extraction examples
|
||||
- `nodeParser/` - Custom text chunking strategies
|
||||
- `split.ts`, `sentenceWindow.ts` - Text processing techniques
|
||||
|
||||
### Models (`models/`)
|
||||
|
||||
Provider-specific LLM and embedding examples:
|
||||
|
||||
- **`openai/`** - OpenAI integration (chat, completions, embeddings, multimodal)
|
||||
- **`anthropic/`** - Claude models with streaming and caching
|
||||
- **`gemini/`** - Google Gemini including live API examples
|
||||
- **`ollama/`**, **`groq/`**, **`mistral/`** - Alternative LLM providers
|
||||
- **`rerankers/`** - Result reranking implementations
|
||||
|
||||
### Storage (`storage/`)
|
||||
|
||||
Vector store and database integrations:
|
||||
|
||||
- **`pinecone-vector-store/`** - Pinecone setup and querying
|
||||
- **`chromadb/`**, **`qdrantdb/`**, **`weaviate/`** - Alternative vector stores
|
||||
- **`mongodb/`**, **`pg/`**, **`firestore/`** - Database integrations
|
||||
- **`metadata-filter/`** - Filtering and search parameters
|
||||
|
||||
### Multimodal (`multimodal/`)
|
||||
|
||||
Vision and multimodal capabilities:
|
||||
|
||||
- `chat.ts` - Image analysis with chat
|
||||
- `load.ts`, `retrieve.ts` - Multimodal document processing
|
||||
- `clip.ts` - CLIP embeddings for images
|
||||
|
||||
### Readers (`readers/`)
|
||||
|
||||
Document ingestion from various sources:
|
||||
|
||||
- `src/` - File format readers (PDF, DOCX, CSV, JSON, HTML)
|
||||
- `llamaparse.ts` - LlamaParse document processing
|
||||
- `discord/`, `notion/`, `assemblyai/` - Platform-specific readers
|
||||
|
||||
### Cloud (`cloud/`)
|
||||
|
||||
LlamaCloud integration examples:
|
||||
|
||||
- `chat.ts`, `query.ts` - Cloud-based RAG
|
||||
- `from-documents.ts` - Document upload to cloud
|
||||
|
||||
### Deprecated (`deprecated/`)
|
||||
|
||||
Legacy agent implementations for reference (prefer `agents/agent/` for new code).
|
||||
|
||||
## Key Development Patterns
|
||||
|
||||
### Example Structure
|
||||
|
||||
Most examples follow this pattern:
|
||||
|
||||
```typescript
|
||||
import { ... } from "llamaindex";
|
||||
import { ... } from "@llamaindex/provider";
|
||||
|
||||
async function main() {
|
||||
// Setup (API keys, configuration)
|
||||
// Create components (LLM, embeddings, vector store)
|
||||
// Build index or engine
|
||||
// Execute query/chat
|
||||
// Output results
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
```
|
||||
|
||||
### Provider Imports
|
||||
|
||||
Examples use modular provider imports:
|
||||
|
||||
```typescript
|
||||
// Specific provider packages
|
||||
import { OpenAI } from "@llamaindex/openai";
|
||||
import { claude } from "@llamaindex/anthropic";
|
||||
|
||||
// Core functionality
|
||||
import { VectorStoreIndex, Document } from "llamaindex";
|
||||
```
|
||||
|
||||
### Error Handling
|
||||
|
||||
Include proper error handling and API key validation:
|
||||
|
||||
```typescript
|
||||
if (!process.env.OPENAI_API_KEY) {
|
||||
console.log("API key required");
|
||||
process.exit(1);
|
||||
}
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
|
||||
The examples package includes all major LlamaIndex.TS providers and integrations. Key dependencies:
|
||||
|
||||
- **Core**: `llamaindex`, `@llamaindex/core`
|
||||
- **Providers**: All LLM, embedding, and vector store providers
|
||||
- **Tools**: `@llamaindex/workflow`, `@llamaindex/tools`
|
||||
- **Utilities**: `tsx` for TypeScript execution, `dotenv` for environment variables
|
||||
|
||||
## Usage Notes
|
||||
|
||||
1. **Build First**: Some examples may require building the packages first: `pnpm build`
|
||||
2. **Data Files**: Many examples reference files in `./data/` directory
|
||||
3. **API Costs**: Be aware that running examples will consume API credits
|
||||
4. **Environment**: Examples are designed to run in Node.js environment
|
||||
5. **Interactive Examples**: Some examples include readline interfaces for interactive testing
|
||||
|
||||
## Creating New Examples
|
||||
|
||||
When adding new examples:
|
||||
|
||||
1. Follow the established directory structure by category
|
||||
2. Use descriptive filenames that indicate functionality
|
||||
3. Include proper imports from modular packages
|
||||
4. Add error handling and environment validation
|
||||
5. Include comments explaining key concepts
|
||||
6. Test with minimal required dependencies
|
||||
@@ -1,4 +1,3 @@
|
||||
import { tool } from "@llamaindex/core/tools";
|
||||
import { openai } from "@llamaindex/openai";
|
||||
import {
|
||||
agent,
|
||||
@@ -7,6 +6,7 @@ import {
|
||||
multiAgent,
|
||||
} from "@llamaindex/workflow";
|
||||
import fs from "fs";
|
||||
import { tool } from "llamaindex";
|
||||
import os from "os";
|
||||
import { z } from "zod";
|
||||
|
||||
|
||||
@@ -6,15 +6,24 @@ async function main() {
|
||||
// Create an MCP server for filesystem tools
|
||||
const server = mcp({
|
||||
command: "npx",
|
||||
args: ["-y", "@modelcontextprotocol/server-filesystem", "."],
|
||||
args: ["-y", "@modelcontextprotocol/server-filesystem@latest", "."],
|
||||
verbose: true,
|
||||
});
|
||||
// You can also connect to the MCP server using SSE
|
||||
// See: https://modelcontextprotocol.io/docs/concepts/transports#server-sent-events-sse
|
||||
//
|
||||
// You can also connect to a remote MCP server using:
|
||||
// 1. StreamableHTTP transport (recommended)
|
||||
// See: https://modelcontextprotocol.io/docs/concepts/transports#streamable-http
|
||||
// const server = mcp({
|
||||
// url: "http://localhost:8000/mcp",
|
||||
// verbose: true,
|
||||
// });
|
||||
// 2.Or using SSE transport (will be deprecated soon)
|
||||
// See: https://modelcontextprotocol.io/docs/concepts/transports#server-sent-events-sse-deprecated
|
||||
// const server = mcp({
|
||||
// url: "http://localhost:8000/mcp",
|
||||
// useSSETransport: true,
|
||||
// verbose: true,
|
||||
// });
|
||||
|
||||
try {
|
||||
// Create an agent that uses the MCP tools
|
||||
|
||||
@@ -92,7 +92,7 @@ async function multiWeatherAgent() {
|
||||
agentInputEvent.include(event) ||
|
||||
stopAgentEvent.include(event)
|
||||
) {
|
||||
console.log(event);
|
||||
console.log(event.data);
|
||||
} else if (agentStreamEvent.include(event)) {
|
||||
for (const chunk of event.data.delta) {
|
||||
process.stdout.write(chunk);
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { openai } from "@llamaindex/openai";
|
||||
import {
|
||||
agent,
|
||||
agentStreamEvent,
|
||||
agentToolCallResultEvent,
|
||||
} from "@llamaindex/workflow";
|
||||
import { Document, VectorStoreIndex, openai } from "llamaindex";
|
||||
import { Document, VectorStoreIndex } from "llamaindex";
|
||||
|
||||
async function main() {
|
||||
const index = await VectorStoreIndex.fromDocuments([
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
import { ToolCallLLM } from "llamaindex";
|
||||
|
||||
import {
|
||||
agentHandler,
|
||||
createWorkflow,
|
||||
workflowEvent,
|
||||
zodEvent,
|
||||
} from "@llamaindex/workflow";
|
||||
|
||||
import { openai } from "@llamaindex/openai";
|
||||
import { z } from "zod";
|
||||
|
||||
// ===== 1. Define events =====
|
||||
// An event to trigger the workflow
|
||||
const planEvent = workflowEvent<{ topic: string }>();
|
||||
|
||||
// Generate artifact event
|
||||
const ArtifactRequirementSchema = z.object({
|
||||
type: z.literal("markdown"),
|
||||
title: z.string().describe("The title of the artifact."),
|
||||
requirement: z
|
||||
.string()
|
||||
.describe("The requirement for the artifact generation."),
|
||||
});
|
||||
|
||||
const generateArtifactEvent = zodEvent(ArtifactRequirementSchema, {
|
||||
debugLabel: "generateArtifactEvent",
|
||||
});
|
||||
|
||||
// Artifact output event
|
||||
const ArtifactSchema = z.object({
|
||||
type: z.literal("artifact"),
|
||||
data: z.object({
|
||||
type: z.literal("document"),
|
||||
data: z.object({
|
||||
title: z.string().describe("The title of the data."),
|
||||
content: z.string().describe("The content of the data."),
|
||||
type: z.enum(["markdown", "html"]).describe("The type of the data."),
|
||||
}),
|
||||
}),
|
||||
});
|
||||
const outputArtifactEvent = zodEvent(ArtifactSchema, {
|
||||
debugLabel: "outputArtifactEvent",
|
||||
});
|
||||
|
||||
// Events for updating UI
|
||||
// assume that we have a UI that can render different states of the workflow
|
||||
// and update the UI based on the state and the requirement
|
||||
export const UIEventSchema = z.object({
|
||||
type: z.literal("ui_event"),
|
||||
data: z.object({
|
||||
state: z
|
||||
.enum(["plan", "generate", "completed"])
|
||||
.describe("The current state of the workflow."),
|
||||
requirement: z
|
||||
.string()
|
||||
.optional()
|
||||
.describe(
|
||||
"An optional requirement creating or updating a document, if applicable.",
|
||||
),
|
||||
}),
|
||||
});
|
||||
const uiEvent = zodEvent(UIEventSchema, { debugLabel: "uiEvent" });
|
||||
|
||||
// ===== 2. Define workflow with agents using natural language =====
|
||||
// We have a document artifact workflow that made up of 2 steps:
|
||||
// 1. Generate requirement for the document
|
||||
// 2. Generate document content based on the requirement
|
||||
export function createDocumentArtifactWorkflow(llm: ToolCallLLM) {
|
||||
const workflow = createWorkflow();
|
||||
|
||||
// Generate requirement for the document
|
||||
workflow.handle(
|
||||
[planEvent],
|
||||
agentHandler({
|
||||
instructions: `
|
||||
Your task is to analyze the request and provide requirements for document generation or update.
|
||||
1. Send an uiEvent with the \`plan\` to show UI what you are going to do.
|
||||
2. Analyze the conversation history and the user's request carefully to determine the completed tasks and the next steps.
|
||||
3. Return the generateArtifactEvent with the requirement for the next step of the document generation or update.
|
||||
`,
|
||||
results: [generateArtifactEvent],
|
||||
events: [uiEvent],
|
||||
llm,
|
||||
}),
|
||||
);
|
||||
|
||||
// Generate document content based on the requirement
|
||||
workflow.handle(
|
||||
[generateArtifactEvent],
|
||||
agentHandler({
|
||||
instructions: `
|
||||
You are a skilled technical writer who can assist users with documentation.
|
||||
Your task is to generate document content based on the requirement and update the UI state.
|
||||
|
||||
Here are the steps to handle this task:
|
||||
1. First, send an uiEvent with the \`generate\` state and the requirement you received from the input.
|
||||
2. Next, start generating the content based on the requirement then send an uiEvent with the \`completed\` state to update the state.
|
||||
3. Finally, return the outputArtifactEvent with the document values.
|
||||
`,
|
||||
results: [outputArtifactEvent],
|
||||
events: [uiEvent],
|
||||
llm,
|
||||
}),
|
||||
);
|
||||
|
||||
return workflow;
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const llm = openai({ model: "gpt-4.1-mini" });
|
||||
const workflow = createDocumentArtifactWorkflow(llm);
|
||||
const { stream, sendEvent } = workflow.createContext();
|
||||
|
||||
// Ask the workflow to generate a document about `llama`
|
||||
sendEvent(planEvent.with({ topic: "llama" }));
|
||||
|
||||
await stream.until(outputArtifactEvent).forEach((event) => {
|
||||
if (planEvent.include(event)) {
|
||||
console.log("Starting workflow: ", event.data);
|
||||
}
|
||||
if (uiEvent.include(event)) {
|
||||
console.log("UI event: ", event.data);
|
||||
} else if (outputArtifactEvent.include(event)) {
|
||||
console.log("Output artifact event: ", event.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
main();
|
||||
@@ -0,0 +1,93 @@
|
||||
import { openai } from "@llamaindex/openai";
|
||||
import { agentHandler, createWorkflow, zodEvent } from "@llamaindex/workflow";
|
||||
import { Settings } from "llamaindex";
|
||||
import { z } from "zod";
|
||||
|
||||
// Create LLM instance
|
||||
const llm = openai({ model: "gpt-4.1-mini" });
|
||||
Settings.llm = llm;
|
||||
|
||||
// Define our workflow events
|
||||
const writeJokeSchema = z.object({
|
||||
description: z
|
||||
.string()
|
||||
.describe("The topic to write a joke or describe the joke to improve."),
|
||||
writtenJoke: z.optional(z.string()).describe("The written joke."),
|
||||
retriedTimes: z
|
||||
.number()
|
||||
.default(0)
|
||||
.describe(
|
||||
"The retried times for writing the joke. Always increase this from the input retriedTimes.",
|
||||
),
|
||||
});
|
||||
|
||||
const critiqueSchema = z.object({
|
||||
joke: z.string().describe("The joke to critique"),
|
||||
retriedTimes: z.number().describe("The retried times for writing the joke."),
|
||||
});
|
||||
|
||||
const finalResultSchema = z.object({
|
||||
joke: z.string().describe("The joke to critique"),
|
||||
critique: z.string().describe("The critique of the joke"),
|
||||
});
|
||||
|
||||
const writeJokeEvent = zodEvent(writeJokeSchema, {
|
||||
debugLabel: "writeJokeEvent",
|
||||
}); // Input topic for writing a joke
|
||||
const critiqueEvent = zodEvent(critiqueSchema, {
|
||||
debugLabel: "critiqueEvent",
|
||||
}); // Ask for critique of the joke
|
||||
const finalResultEvent = zodEvent(finalResultSchema, {
|
||||
debugLabel: "finalResultEvent",
|
||||
}); // Final result
|
||||
|
||||
// Create our workflow
|
||||
const jokeFlow = createWorkflow();
|
||||
|
||||
// Define handlers for each step
|
||||
// This step always write a joke based on the description
|
||||
jokeFlow.handle(
|
||||
[writeJokeEvent],
|
||||
agentHandler({
|
||||
instructions: `You are a joke writer. You are given a topic and you need to write a joke about it.`,
|
||||
results: [critiqueEvent],
|
||||
}),
|
||||
);
|
||||
|
||||
// This step critiques the joke and asks the writer to improve the joke or send a final result event for stopping.
|
||||
jokeFlow.handle(
|
||||
[critiqueEvent],
|
||||
agentHandler({
|
||||
instructions: `
|
||||
You are given a joke and you need to critique it. Follow the following guidelines:
|
||||
1. You have maximum 3 times to improve the joke.
|
||||
2. If the joke is not good, increase the retriedTimes, describe how to improve the joke and send a writeJokeEvent.
|
||||
3. If the joke is good, trigger the finalResultEvent event.
|
||||
`,
|
||||
results: [writeJokeEvent, finalResultEvent],
|
||||
}),
|
||||
);
|
||||
|
||||
// Usage
|
||||
async function main() {
|
||||
const { stream, sendEvent } = jokeFlow.createContext();
|
||||
sendEvent(writeJokeEvent.with({ description: "write a joke about llama" }));
|
||||
|
||||
await stream.until(finalResultEvent).forEach((event) => {
|
||||
if (writeJokeEvent.include(event)) {
|
||||
console.log(
|
||||
"Triggering write joke: ",
|
||||
JSON.stringify(event.data, null, 2),
|
||||
);
|
||||
} else if (critiqueEvent.include(event)) {
|
||||
console.log("Written joke: ", JSON.stringify(event.data, null, 2));
|
||||
} else if (finalResultEvent.include(event)) {
|
||||
console.log("Output: ", JSON.stringify(event.data, null, 2));
|
||||
} else {
|
||||
console.log("Unknown event: ", JSON.stringify(event.data, null, 2));
|
||||
}
|
||||
});
|
||||
console.log("Done");
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
@@ -0,0 +1,72 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<company name="MidSizeCorp" founded="2008">
|
||||
<division name="Engineering" head="Dana White">
|
||||
<department name="Frontend" lead="Alex Kim">
|
||||
<team name="Web">
|
||||
<employee id="E01">
|
||||
<name>Jordan Lee</name>
|
||||
<role>Lead Developer</role>
|
||||
<projects>
|
||||
<project code="PRJ101" status="active">
|
||||
<title>User Portal</title>
|
||||
<deadline>2025-08-01</deadline>
|
||||
<tasks>
|
||||
<task id="T1011">
|
||||
<description>Implement login page</description>
|
||||
<due>2025-05-10</due>
|
||||
</task>
|
||||
<task id="T1012">
|
||||
<description>Design dashboard</description>
|
||||
<due>2025-05-20</due>
|
||||
</task>
|
||||
</tasks>
|
||||
</project>
|
||||
</projects>
|
||||
</employee>
|
||||
<employee id="E02">
|
||||
<name>Riley Chen</name>
|
||||
<role>UI Designer</role>
|
||||
</employee>
|
||||
</team>
|
||||
<team name="Mobile">
|
||||
<employee id="E03">
|
||||
<name>Sam Patel</name>
|
||||
<role>iOS Developer</role>
|
||||
</employee>
|
||||
</team>
|
||||
</department>
|
||||
<department name="Backend" lead="Morgan Reed">
|
||||
<team name="API">
|
||||
<employee id="E04">
|
||||
<name>Taylor Jones</name>
|
||||
<role>API Engineer</role>
|
||||
</employee>
|
||||
</team>
|
||||
<team name="Database">
|
||||
<employee id="E05">
|
||||
<name>Casey Nguyen</name>
|
||||
<role>DB Administrator</role>
|
||||
</employee>
|
||||
</team>
|
||||
</department>
|
||||
</division>
|
||||
|
||||
<division name="Marketing" head="Pat Morgan">
|
||||
<department name="Digital" lead="Alex Rivera">
|
||||
<team name="Content">
|
||||
<employee id="M01">
|
||||
<name>Charlie Brooks</name>
|
||||
<role>Content Strategist</role>
|
||||
</employee>
|
||||
</team>
|
||||
</department>
|
||||
</division>
|
||||
|
||||
<headquarters location="Chicago, USA">
|
||||
<address>
|
||||
<street>789 Lake Shore Drive</street>
|
||||
<city>Chicago</city>
|
||||
<zip>60601</zip>
|
||||
</address>
|
||||
</headquarters>
|
||||
</company>
|
||||
Binary file not shown.
@@ -1,12 +1,20 @@
|
||||
import fs from "node:fs/promises";
|
||||
|
||||
import { openai, OpenAIEmbedding } from "@llamaindex/openai";
|
||||
import {
|
||||
Document,
|
||||
MetadataMode,
|
||||
NodeWithScore,
|
||||
Settings,
|
||||
VectorStoreIndex,
|
||||
} from "llamaindex";
|
||||
|
||||
Settings.llm = openai({
|
||||
apiKey: process.env.OPENAI_API_KEY,
|
||||
model: "gpt-4o",
|
||||
});
|
||||
Settings.embedModel = new OpenAIEmbedding();
|
||||
|
||||
async function main() {
|
||||
// Load essay from abramov.txt in Node
|
||||
const path = "node_modules/llamaindex/examples/abramov.txt";
|
||||
|
||||
@@ -25,7 +25,7 @@ async function main() {
|
||||
},
|
||||
{
|
||||
type: "file",
|
||||
data: Uint8Array.from(fs.readFileSync("./data/manga.pdf")),
|
||||
data: fs.readFileSync("./data/manga.pdf").toString("base64"),
|
||||
mimeType: "application/pdf",
|
||||
},
|
||||
],
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
import { Gemini, GEMINI_MODEL } from "@llamaindex/google";
|
||||
import { gemini, GEMINI_MODEL } from "@llamaindex/google";
|
||||
import fs from "fs";
|
||||
import { tool } from "llamaindex";
|
||||
import { z } from "zod";
|
||||
|
||||
(async () => {
|
||||
if (!process.env.GOOGLE_API_KEY) {
|
||||
throw new Error("Please set the GOOGLE_API_KEY environment variable.");
|
||||
}
|
||||
const gemini = new Gemini({
|
||||
model: GEMINI_MODEL.GEMINI_PRO_1_5,
|
||||
});
|
||||
const result = await gemini.chat({
|
||||
const llm = gemini({ model: GEMINI_MODEL.GEMINI_2_0_FLASH });
|
||||
|
||||
// normal chat
|
||||
const result = await llm.chat({
|
||||
messages: [
|
||||
{ content: "You want to talk in rhymes.", role: "system" },
|
||||
{
|
||||
@@ -18,10 +20,10 @@ import fs from "fs";
|
||||
},
|
||||
],
|
||||
});
|
||||
console.log(result);
|
||||
console.log("\n normal chat: \n", result);
|
||||
|
||||
// chat with file
|
||||
const resultWithFile = await gemini.chat({
|
||||
const resultWithFile = await llm.chat({
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
@@ -32,13 +34,59 @@ import fs from "fs";
|
||||
},
|
||||
{
|
||||
type: "file",
|
||||
data: Uint8Array.from(fs.readFileSync("./data/manga.pdf")),
|
||||
data: fs.readFileSync("./data/manga.pdf").toString("base64"),
|
||||
mimeType: "application/pdf",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
console.log("\n chat with file: \n", resultWithFile);
|
||||
|
||||
console.log(resultWithFile);
|
||||
// chat with image base64
|
||||
const resultWithImageFile = await llm.chat({
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: [
|
||||
{
|
||||
type: "text",
|
||||
text: "What's in this image?",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
data: fs
|
||||
.readFileSync("./multimodal/data/60.jpg")
|
||||
.toString("base64"),
|
||||
mimeType: "image/png",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
console.log("\n chat with image base64: \n", resultWithImageFile);
|
||||
|
||||
// chat with tool
|
||||
const resultWithTool = await llm.chat({
|
||||
messages: [
|
||||
{
|
||||
content: "What's the weather in Tokyo?",
|
||||
role: "user",
|
||||
},
|
||||
],
|
||||
tools: [
|
||||
tool({
|
||||
name: "weather",
|
||||
description: "Get the weather",
|
||||
parameters: z.object({
|
||||
location: z.string().describe("The location to get the weather for"),
|
||||
}),
|
||||
execute: ({ location }) => {
|
||||
console.log("weather", location);
|
||||
return `The weather in ${location} is sunny and hot`;
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
console.log("\n chat with tool: \n", resultWithTool.message.options); // should have toolCall
|
||||
})();
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
import { Gemini, GEMINI_MODEL, GeminiVertexSession } from "@llamaindex/google";
|
||||
import { gemini, GEMINI_MODEL } from "@llamaindex/google";
|
||||
|
||||
(async () => {
|
||||
const gemini = new Gemini({
|
||||
model: GEMINI_MODEL.GEMINI_PRO,
|
||||
session: new GeminiVertexSession(),
|
||||
const llm = gemini({
|
||||
model: GEMINI_MODEL.GEMINI_2_0_FLASH,
|
||||
vertex: {
|
||||
project: "your-cloud-project", // update to your cloud project
|
||||
location: "us-central1",
|
||||
},
|
||||
});
|
||||
const result = await gemini.chat({
|
||||
const result = await llm.chat({
|
||||
messages: [
|
||||
{ content: "You want to talk in rhymes.", role: "system" },
|
||||
{
|
||||
|
||||
@@ -16,9 +16,19 @@ async function main() {
|
||||
|
||||
console.log("🚀 Initializing Gemini Live API example...");
|
||||
|
||||
// Server-side (token creation):
|
||||
const serverllm = gemini({
|
||||
model: GEMINI_MODEL.GEMINI_2_0_FLASH_LIVE,
|
||||
httpOptions: { apiVersion: "v1alpha" }, // must use v1alpha to generate ephemeral key
|
||||
});
|
||||
const ephemeralKey = await serverllm.live.getEphemeralKey();
|
||||
|
||||
// Client-side (Live API connection):
|
||||
const llm = gemini({
|
||||
apiKey: ephemeralKey, // use ephemeral key for client-side
|
||||
model: GEMINI_MODEL.GEMINI_2_0_FLASH_LIVE,
|
||||
voiceName: "Zephyr",
|
||||
httpOptions: { apiVersion: "v1alpha" }, // must use v1alpha to init client with ephemeral key
|
||||
});
|
||||
|
||||
console.log("📡 Connecting to Gemini Live session...");
|
||||
|
||||
@@ -3,8 +3,18 @@ import { liveEvents } from "llamaindex";
|
||||
import { saveWavFile } from "./util";
|
||||
|
||||
async function main() {
|
||||
const llm = gemini({
|
||||
// Server-side (token creation):
|
||||
const serverllm = gemini({
|
||||
model: GEMINI_MODEL.GEMINI_2_0_FLASH_LIVE,
|
||||
httpOptions: { apiVersion: "v1alpha" }, // must use v1alpha to generate ephemeral key
|
||||
});
|
||||
const ephemeralKey = await serverllm.live.getEphemeralKey();
|
||||
|
||||
// Client-side (Live API connection):
|
||||
const llm = gemini({
|
||||
apiKey: ephemeralKey, // use ephemeral key for client-side
|
||||
model: GEMINI_MODEL.GEMINI_2_0_FLASH_LIVE,
|
||||
httpOptions: { apiVersion: "v1alpha" }, // must use v1alpha to init client with ephemeral key
|
||||
});
|
||||
|
||||
const session = await llm.live.connect();
|
||||
@@ -23,10 +33,7 @@ async function main() {
|
||||
content: "Say something about you for 10 seconds",
|
||||
role: "user",
|
||||
});
|
||||
} else if (
|
||||
liveEvents.audio.include(event) &&
|
||||
typeof event.data === "string"
|
||||
) {
|
||||
} else if (liveEvents.audio.include(event)) {
|
||||
const chunk = Buffer.from(event.data, "base64");
|
||||
audioChunks.push(chunk);
|
||||
console.log(`Received audio chunk: ${chunk.length} bytes`);
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { ModalityType } from "@llamaindex/core/schema";
|
||||
import { tool } from "@llamaindex/core/tools";
|
||||
import { gemini, GEMINI_MODEL } from "@llamaindex/google";
|
||||
import { ModalityType, tool } from "llamaindex";
|
||||
|
||||
import { liveEvents } from "llamaindex";
|
||||
import { z } from "zod";
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,54 @@
|
||||
# OpenAI Realtime Chat with LlamaIndex
|
||||
|
||||
This is a demo application showcasing real-time audio and text chat capabilities using OpenAI's GPT-4 with voice through LlamaIndex. The application demonstrates bidirectional audio communication and text chat with an AI assistant.
|
||||
|
||||
## Features
|
||||
|
||||
- Real-time voice communication with GPT-4
|
||||
- Text-based chat interface
|
||||
- WebRTC-based audio streaming
|
||||
- Bidirectional communication (both text and voice)
|
||||
- React + TypeScript implementation
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Node.js (v18 or higher)
|
||||
- OpenAI API key with access to GPT-4 voice models
|
||||
- Modern browser with WebRTC support
|
||||
|
||||
## Getting Started
|
||||
|
||||
1. Install dependencies:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
2. Start the development server:
|
||||
|
||||
```bash
|
||||
pnpm run dev
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The application provides a simple interface where you can:
|
||||
|
||||
- Start/Stop a chat session
|
||||
- Speak to the AI assistant through your microphone
|
||||
- Receive audio responses from the assistant
|
||||
- See text transcripts of the conversation
|
||||
|
||||
## Technical Details
|
||||
|
||||
This project uses:
|
||||
|
||||
- LlamaIndex for AI interaction management
|
||||
- WebRTC for real-time audio streaming
|
||||
- React for the UI
|
||||
- Vite for development and building
|
||||
- TypeScript for type safety
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
@@ -0,0 +1,28 @@
|
||||
import js from "@eslint/js";
|
||||
import reactHooks from "eslint-plugin-react-hooks";
|
||||
import reactRefresh from "eslint-plugin-react-refresh";
|
||||
import globals from "globals";
|
||||
import tseslint from "typescript-eslint";
|
||||
|
||||
export default tseslint.config(
|
||||
{ ignores: ["dist"] },
|
||||
{
|
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||
files: ["**/*.{ts,tsx}"],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
plugins: {
|
||||
"react-hooks": reactHooks,
|
||||
"react-refresh": reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
"react-refresh/only-export-components": [
|
||||
"warn",
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
},
|
||||
);
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "open-ai-realtime",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.25.0",
|
||||
"@types/react": "^19.1.2",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
"@vitejs/plugin-react": "^4.5.2",
|
||||
"eslint": "^9.25.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"globals": "^16.0.0",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-eslint": "^8.30.1",
|
||||
"vite": "^6.3.5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,183 @@
|
||||
import { openai } from "@llamaindex/openai";
|
||||
import { liveEvents, LiveLLMSession, ModalityType } from "llamaindex";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
const MicIcon = ({ isConnected }: { isConnected: boolean }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
{isConnected ? (
|
||||
<>
|
||||
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
|
||||
<path d="M19 10v2a7 7 0 0 1-14 0v-2" />
|
||||
<line x1="12" y1="19" x2="12" y2="23" />
|
||||
<line x1="8" y1="23" x2="16" y2="23" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
|
||||
<path d="M19 10v2a7 7 0 0 1-14 0v-2" />
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
);
|
||||
|
||||
const WaveAnimation = () => (
|
||||
<div className="wave-animation">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<div key={i} className="wave" style={{ animationDelay: `${i * 0.2}s` }} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const AudioChat = () => {
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const [messages, setMessages] = useState<
|
||||
Array<{ role: string; content: string }>
|
||||
>([]);
|
||||
const [status, setStatus] = useState<string>("");
|
||||
const audioRef = useRef<HTMLAudioElement>(null);
|
||||
const sessionRef = useRef<LiveLLMSession | null>(null);
|
||||
const [stream, setStream] = useState<MediaStream | null>(null);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const scrollToBottom = () => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messages]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (stream) {
|
||||
stream.getTracks().forEach((track) => track.stop());
|
||||
}
|
||||
};
|
||||
}, [stream]);
|
||||
|
||||
const startChat = async () => {
|
||||
try {
|
||||
setStatus("Initializing microphone...");
|
||||
const userStream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: true,
|
||||
});
|
||||
setStream(userStream);
|
||||
|
||||
setStatus("Connecting to AI...");
|
||||
const apiKey = prompt("Please enter your OpenAI API key:");
|
||||
if (!apiKey) {
|
||||
throw new Error("API key is required");
|
||||
}
|
||||
|
||||
// move this call to the server side for security reasons
|
||||
// Do not store the API key in the frontend!
|
||||
const serverllm = openai({
|
||||
apiKey: apiKey,
|
||||
model: "gpt-4o-realtime-preview-2025-06-03",
|
||||
});
|
||||
|
||||
const tempKey = await serverllm.live.getEphemeralKey();
|
||||
|
||||
const llm = openai({
|
||||
apiKey: tempKey,
|
||||
model: "gpt-4o-realtime-preview-2025-06-03",
|
||||
});
|
||||
const session = await llm.live.connect({
|
||||
systemInstruction: "You are a helpful assistant who speaks naturally.",
|
||||
responseModality: [ModalityType.TEXT, ModalityType.AUDIO],
|
||||
audioConfig: {
|
||||
stream: userStream,
|
||||
onTrack: (remoteStream) => {
|
||||
if (audioRef.current && remoteStream) {
|
||||
audioRef.current.srcObject = remoteStream;
|
||||
audioRef.current.play().catch(console.error);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
sessionRef.current = session;
|
||||
setIsConnected(true);
|
||||
setStatus("Connected! Listening...");
|
||||
|
||||
for await (const event of session.streamEvents()) {
|
||||
if (liveEvents.open.include(event)) {
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
{
|
||||
role: "user",
|
||||
content: "Hello, I'm ready to chat!",
|
||||
},
|
||||
]);
|
||||
session.sendMessage({
|
||||
content: "Hello, I'm ready to chat!",
|
||||
role: "user",
|
||||
});
|
||||
} else if (liveEvents.text.include(event)) {
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
{
|
||||
role: "assistant",
|
||||
content: event.text,
|
||||
},
|
||||
]);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error starting chat:", error);
|
||||
setStatus("Error connecting. Please try again.");
|
||||
setIsConnected(false);
|
||||
}
|
||||
};
|
||||
|
||||
const stopChat = async () => {
|
||||
setStatus("Disconnecting...");
|
||||
if (sessionRef.current) {
|
||||
await sessionRef.current.disconnect();
|
||||
sessionRef.current = null;
|
||||
}
|
||||
if (stream) {
|
||||
stream.getTracks().forEach((track) => track.stop());
|
||||
setStream(null);
|
||||
}
|
||||
if (audioRef.current) {
|
||||
audioRef.current.srcObject = null;
|
||||
}
|
||||
setIsConnected(false);
|
||||
setStatus("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="audio-chat-container">
|
||||
<h1>AI Voice Chat</h1>
|
||||
<div className="messages-container">
|
||||
{messages.map((msg, idx) => (
|
||||
<div key={idx} className={`message ${msg.role}`}>
|
||||
{msg.content}
|
||||
</div>
|
||||
))}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
<div className="controls">
|
||||
{status && <div className="status-indicator">{status}</div>}
|
||||
<button
|
||||
className={`mic-button ${isConnected ? "connected" : ""}`}
|
||||
onClick={isConnected ? stopChat : startChat}
|
||||
title={isConnected ? "Stop Chat" : "Start Chat"}
|
||||
>
|
||||
<MicIcon isConnected={isConnected} />
|
||||
{isConnected && <WaveAnimation />}
|
||||
</button>
|
||||
<audio ref={audioRef} style={{ display: "none" }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,322 @@
|
||||
:root {
|
||||
--primary-color: #646cff;
|
||||
--secondary-color: #535bf2;
|
||||
--background-dark: #1a1a1a;
|
||||
--chat-bg: #242424;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #888888;
|
||||
--success-color: #4caf50;
|
||||
--error-color: #f44336;
|
||||
--gradient-start: #4776e6;
|
||||
--gradient-end: #8e54e9;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-dark);
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.audio-chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: 80vh;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
background: var(--chat-bg);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.audio-chat-container::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--gradient-start),
|
||||
var(--gradient-end)
|
||||
);
|
||||
}
|
||||
|
||||
.audio-chat-container h1 {
|
||||
font-size: 2.5rem;
|
||||
margin: 0;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--gradient-start),
|
||||
var(--gradient-end)
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 16px;
|
||||
max-width: 80%;
|
||||
text-align: left;
|
||||
animation: messageSlide 0.3s ease-out;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@keyframes messageSlide {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.message.user {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--gradient-start),
|
||||
var(--gradient-end)
|
||||
);
|
||||
align-self: flex-end;
|
||||
margin-left: 20%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message.assistant {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
align-self: flex-start;
|
||||
margin-right: 20%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mic-button {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--gradient-start),
|
||||
var(--gradient-end)
|
||||
);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mic-button::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.1),
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.mic-button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.mic-button:hover::before {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.mic-button.connected {
|
||||
background: var(--error-color);
|
||||
animation: pulseError 2s infinite;
|
||||
}
|
||||
|
||||
.mic-button svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.mic-button:hover svg {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@keyframes pulseError {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 20px rgba(244, 67, 54, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status indicator */
|
||||
.status-indicator {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.controls:hover .status-indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.messages-container::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.messages-container::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.messages-container::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(var(--gradient-start), var(--gradient-end));
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.messages-container::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(var(--gradient-end), var(--gradient-start));
|
||||
}
|
||||
|
||||
/* Wave Animation */
|
||||
.wave-animation {
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.wave {
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
background: currentColor;
|
||||
border-radius: 2px;
|
||||
animation: wave 0.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
0%,
|
||||
100% {
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
50% {
|
||||
transform: scaleY(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.mic-button.loading {
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { AudioChat } from "./audio-chat.tsx";
|
||||
import "./index.css";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<AudioChat />
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [{ "path": "./tsconfig.app.json" }]
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user