Release 0.10.2 (#1861)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: marcusschiesser <17126+marcusschiesser@users.noreply.github.com>

apps/next/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @llamaindex/doc
 
+## 0.2.13
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+  - llamaindex@0.10.2
+
 ## 0.2.12
 
 ### Patch Changes

apps/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llamaindex/doc",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "private": true,
   "scripts": {
     "postinstall": "fumadocs-mdx",

apps/next/src/app/docs/layout.tsx

@@ -1,11 +1,7 @@
 import { baseOptions } from "@/app/layout.config";
-import { AITrigger } from "@/components/ai-chat";
-import { buttonVariants } from "@/components/ui/button";
 import { source } from "@/lib/source";
-import { cn } from "@/lib/utils";
 import "fumadocs-twoslash/twoslash.css";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
-import { MessageCircle } from "lucide-react";
 import type { ReactNode } from "react";
 
 export default function Layout({ children }: { children: ReactNode }) {
@@ -15,21 +11,6 @@ export default function Layout({ children }: { children: ReactNode }) {
       {...baseOptions}
       nav={{
         ...baseOptions.nav,
-        children: (
-          <AITrigger
-            className={cn(
-              buttonVariants({
-                variant: "secondary",
-                size: "xs",
-                className:
-                  "text-fd-muted-foreground ms-2 gap-1.5 rounded-full px-2 md:flex-1",
-              }),
-            )}
-          >
-            <MessageCircle className="size-3" />
-            Ask LlamaCloud
-          </AITrigger>
-        ),
       }}
     >
       {children}

apps/next/src/content/docs/llamaindex/modules/ui/llamaindex-server.mdx

@@ -22,7 +22,7 @@ npm i @llamaindex/server
 
 ## Quick Start
 
-Create index.ts file and add the following code:
+Create an `index.ts` file and add the following code:
 
 ```ts
 import { LlamaIndexServer } from "@llamaindex/server";
@@ -43,20 +43,20 @@ new LlamaIndexServer({
 
 In the same directory as `index.ts`, run the following command to start the server:
 
-  ```bash
-  tsx index.ts
-  ```
+```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?"}'
-  ```
+```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
+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:
@@ -68,6 +68,72 @@ The LlamaIndexServer accepts the following configuration
 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
@@ -85,69 +151,19 @@ The server always provides a chat interface at the root path (`/`) with:
 ### 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. As a convention, the `data` folder is used for documents that are ingested and the `output` folder is used for documents that are generated by the workflow.
+- 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.
 
 
-## Custom UI Components
-
-The LlamaIndex server provides support for rendering workflow events using custom UI components, allowing you to extend and customize the chat interface.
-
-### Overview
-
-Custom UI components are a powerful feature that enables you to:
-
-- Add custom interface elements to the chat UI using React JSX or TSX files
-- Extend the default chat interface functionality
-- Create specialized visualizations or interactions
-
-### Configuration
-
-Your workflow must emit events that fit this structure, allowing the LlamaIndex server to display the right UI components based on the event type.
-
-```json
-{
-    "type": "<event_name>",
-    "data": <data model>
-}
-```
-
-### Server Setup
-
-1. Initialize the LlamaIndex server with a component directory:
-
-```ts
-new LlamaIndexServer({
-  workflow: createWorkflow,
-  uiConfig: {
-    appTitle: "LlamaIndex App",
-    componentsDir: "components",
-  },
-}).start();
-```
-
-2. Add the custom component code to the directory following the naming pattern:
-
-   - File Extension: `.jsx` and `.tsx` for React components
-   - File Name: Should match the event type from your workflow (e.g., `deep_research_event.jsx` for handling `deep_research_event` type that you defined in your workflow). If there are TSX and JSX files with the same name, the TSX file will be used.
-   - Component Name: Export a default React component named `Component` that receives props from the event data
-
-   Example component structure:
-
-   ```jsx
-   function Component({ events }) {
-       // Your component logic here
-       return (
-           // Your UI code here
-       );
-   }
-   ```
-
 ## Best Practices
 
-1. Always provide a workflow factory that creates fresh workflow instances
-2. Use environment variables for sensitive configuration
-3. Use starter questions to guide users in the chat UI
+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.
+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)

e2e/examples/cloudflare-worker-agent/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @llamaindex/cloudflare-worker-agent-test
 
+## 0.0.156
+
+### Patch Changes
+
+- llamaindex@0.10.2
+
 ## 0.0.155
 
 ### Patch Changes

e2e/examples/cloudflare-worker-agent/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llamaindex/cloudflare-worker-agent-test",
-  "version": "0.0.155",
+  "version": "0.0.156",
   "type": "module",
   "private": true,
   "scripts": {

e2e/examples/nextjs-agent/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @llamaindex/next-agent-test
 
+## 0.1.156
+
+### Patch Changes
+
+- llamaindex@0.10.2
+
 ## 0.1.155
 
 ### Patch Changes

e2e/examples/nextjs-agent/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llamaindex/next-agent-test",
-  "version": "0.1.155",
+  "version": "0.1.156",
   "private": true,
   "scripts": {
     "dev": "next dev",

e2e/examples/nextjs-edge-runtime/CHANGELOG.md

@@ -1,5 +1,11 @@
 # test-edge-runtime
 
+## 0.1.155
+
+### Patch Changes
+
+- llamaindex@0.10.2
+
 ## 0.1.154
 
 ### Patch Changes

e2e/examples/nextjs-edge-runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llamaindex/nextjs-edge-runtime-test",
-  "version": "0.1.154",
+  "version": "0.1.155",
   "private": true,
   "scripts": {
     "dev": "next dev",

e2e/examples/nextjs-node-runtime/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @llamaindex/next-node-runtime
 
+## 0.1.22
+
+### Patch Changes
+
+- llamaindex@0.10.2
+- @llamaindex/huggingface@0.1.6
+
 ## 0.1.21
 
 ### Patch Changes

e2e/examples/nextjs-node-runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llamaindex/next-node-runtime-test",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "private": true,
   "scripts": {
     "dev": "next dev",

e2e/examples/vite-import-llamaindex/CHANGELOG.md

@@ -1,5 +1,11 @@
 # vite-import-llamaindex
 
+## 0.0.22
+
+### Patch Changes
+
+- llamaindex@0.10.2
+
 ## 0.0.21
 
 ### Patch Changes

e2e/examples/vite-import-llamaindex/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-import-llamaindex",
   "private": true,
-  "version": "0.0.21",
+  "version": "0.0.22",
   "type": "module",
   "scripts": {
     "build": "vite build",

e2e/examples/waku-query-engine/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @llamaindex/waku-query-engine-test
 
+## 0.0.156
+
+### Patch Changes
+
+- llamaindex@0.10.2
+
 ## 0.0.155
 
 ### Patch Changes

e2e/examples/waku-query-engine/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llamaindex/waku-query-engine-test",
-  "version": "0.0.155",
+  "version": "0.0.156",
   "type": "module",
   "private": true,
   "scripts": {

examples/CHANGELOG.md

@@ -1,5 +1,25 @@
 # examples
 
+## 0.3.9
+
+### Patch Changes
+
+- Updated dependencies [96dac4d]
+- Updated dependencies [e5c3f95]
+  - @llamaindex/google@0.2.4
+  - @llamaindex/openai@0.3.4
+  - llamaindex@0.10.2
+  - @llamaindex/clip@0.0.52
+  - @llamaindex/deepinfra@0.0.52
+  - @llamaindex/deepseek@0.0.12
+  - @llamaindex/fireworks@0.0.12
+  - @llamaindex/groq@0.0.67
+  - @llamaindex/huggingface@0.1.6
+  - @llamaindex/jinaai@0.0.12
+  - @llamaindex/perplexity@0.0.9
+  - @llamaindex/together@0.0.12
+  - @llamaindex/vllm@0.0.38
+
 ## 0.3.8
 
 ### Patch Changes

examples/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llamaindex/examples",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "private": true,
   "scripts": {
     "lint": "eslint .",
@@ -15,16 +15,16 @@
     "@llamaindex/astra": "^0.0.16",
     "@llamaindex/azure": "^0.1.11",
     "@llamaindex/chroma": "^0.0.16",
-    "@llamaindex/clip": "^0.0.51",
+    "@llamaindex/clip": "^0.0.52",
     "@llamaindex/cloud": "^4.0.3",
     "@llamaindex/cohere": "^0.0.16",
     "@llamaindex/core": "^0.6.2",
-    "@llamaindex/deepinfra": "^0.0.51",
+    "@llamaindex/deepinfra": "^0.0.52",
     "@llamaindex/env": "^0.1.29",
     "@llamaindex/firestore": "^1.0.9",
-    "@llamaindex/google": "^0.2.3",
-    "@llamaindex/groq": "^0.0.66",
-    "@llamaindex/huggingface": "^0.1.5",
+    "@llamaindex/google": "^0.2.4",
+    "@llamaindex/groq": "^0.0.67",
+    "@llamaindex/huggingface": "^0.1.6",
     "@llamaindex/milvus": "^0.1.11",
     "@llamaindex/mistral": "^0.1.2",
     "@llamaindex/mixedbread": "^0.0.16",
@@ -32,7 +32,7 @@
     "@llamaindex/elastic-search": "^0.1.2",
     "@llamaindex/node-parser": "^2.0.2",
     "@llamaindex/ollama": "^0.1.2",
-    "@llamaindex/openai": "^0.3.3",
+    "@llamaindex/openai": "^0.3.4",
     "@llamaindex/pinecone": "^0.1.2",
     "@llamaindex/portkey-ai": "^0.0.44",
     "@llamaindex/postgres": "^0.0.45",
@@ -41,15 +41,15 @@
     "@llamaindex/replicate": "^0.0.44",
     "@llamaindex/upstash": "^0.0.16",
     "@llamaindex/vercel": "^0.1.2",
-    "@llamaindex/vllm": "^0.0.37",
+    "@llamaindex/vllm": "^0.0.38",
     "@llamaindex/voyage-ai": "^1.0.8",
     "@llamaindex/weaviate": "^0.0.16",
     "@llamaindex/workflow": "^1.0.3",
-    "@llamaindex/deepseek": "^0.0.11",
-    "@llamaindex/fireworks": "^0.0.11",
-    "@llamaindex/together": "^0.0.11",
-    "@llamaindex/jinaai": "^0.0.11",
-    "@llamaindex/perplexity": "^0.0.8",
+    "@llamaindex/deepseek": "^0.0.12",
+    "@llamaindex/fireworks": "^0.0.12",
+    "@llamaindex/together": "^0.0.12",
+    "@llamaindex/jinaai": "^0.0.12",
+    "@llamaindex/perplexity": "^0.0.9",
     "@llamaindex/supabase": "^0.1.1",
     "@llamaindex/tools": "^0.0.5",
     "@notionhq/client": "^2.2.15",
@@ -60,7 +60,7 @@
     "commander": "^12.1.0",
     "dotenv": "^16.4.5",
     "js-tiktoken": "^1.0.14",
-    "llamaindex": "^0.10.1",
+    "llamaindex": "^0.10.2",
     "mongodb": "6.7.0",
     "postgres": "^3.4.4",
     "wikipedia": "^2.1.2",

packages/autotool/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @llamaindex/autotool
 
+## 7.0.2
+
+### Patch Changes
+
+- llamaindex@0.10.2
+
 ## 7.0.1
 
 ### Patch Changes

packages/autotool/examples/01_node/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @llamaindex/autotool-01-node-example
 
+## 0.0.103
+
+### Patch Changes
+
+- llamaindex@0.10.2
+- @llamaindex/autotool@7.0.2
+
 ## 0.0.102
 
 ### Patch Changes

packages/autotool/examples/01_node/package.json

@@ -13,5 +13,5 @@
   "scripts": {
     "start": "node --import tsx --import @llamaindex/autotool/node ./src/index.ts"
   },
-  "version": "0.0.102"
+  "version": "0.0.103"
 }

packages/autotool/package.json

@@ -6,7 +6,7 @@
     "url": "git+https://github.com/run-llama/LlamaIndexTS.git",
     "directory": "packages/autotool"
   },
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "auto transpile your JS function to LLM Agent compatible",
   "files": [
     "dist",

packages/experimental/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @llamaindex/experimental
 
+## 0.0.172
+
+### Patch Changes
+
+- llamaindex@0.10.2
+
 ## 0.0.171
 
 ### Patch Changes

packages/experimental/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/experimental",
   "description": "Experimental package for LlamaIndexTS",
-  "version": "0.0.171",
+  "version": "0.0.172",
   "type": "module",
   "types": "dist/type/index.d.ts",
   "main": "dist/cjs/index.js",

packages/llamaindex/CHANGELOG.md

@@ -1,5 +1,12 @@
 # llamaindex
 
+## 0.10.2
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+
 ## 0.10.1
 
 ### Patch Changes

packages/llamaindex/package.json

@@ -1,6 +1,6 @@
 {
   "name": "llamaindex",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "license": "MIT",
   "type": "module",
   "keywords": [

packages/providers/clip/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @llamaindex/clip
 
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+
 ## 0.0.51
 
 ### Patch Changes

packages/providers/clip/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/clip",
   "description": "Clip Embedding Adapter for LlamaIndex",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "type": "module",
   "types": "dist/index.d.ts",
   "main": "dist/index.cjs",

packages/providers/deepinfra/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @llamaindex/deepinfra
 
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+
 ## 0.0.51
 
 ### Patch Changes

packages/providers/deepinfra/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/deepinfra",
   "description": "Deepinfra Adapter for LlamaIndex",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

packages/providers/deepseek/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @llamaindex/deepseek
 
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+
 ## 0.0.11
 
 ### Patch Changes

packages/providers/deepseek/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/deepseek",
   "description": "DeepSeek Adapter for LlamaIndex",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

packages/providers/fireworks/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @llamaindex/fireworks
 
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+
 ## 0.0.11
 
 ### Patch Changes

packages/providers/fireworks/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/fireworks",
   "description": "Fireworks Adapter for LlamaIndex",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

packages/providers/google/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @llamaindex/google
 
+## 0.2.4
+
+### Patch Changes
+
+- 96dac4d: Add Gemini 2.5 Flash Preview
+
 ## 0.2.3
 
 ### Patch Changes

packages/providers/google/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/google",
   "description": "Google Adapter for LlamaIndex",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

packages/providers/google/src/base.ts

@@ -62,6 +62,7 @@ export const GEMINI_MODEL_INFO_MAP: Record<GEMINI_MODEL, GeminiModelInfo> = {
   [GEMINI_MODEL.GEMINI_2_0_FLASH_THINKING_EXP]: { contextWindow: 32768 },
   [GEMINI_MODEL.GEMINI_2_0_PRO_EXPERIMENTAL]: { contextWindow: 2 * 10 ** 6 },
   [GEMINI_MODEL.GEMINI_2_5_PRO_PREVIEW]: { contextWindow: 10 ** 6 },
+  [GEMINI_MODEL.GEMINI_2_5_FLASH_PREVIEW]: { contextWindow: 10 ** 6 },
 };
 
 export const SUPPORT_TOOL_CALL_MODELS: GEMINI_MODEL[] = [
@@ -79,6 +80,7 @@ export const SUPPORT_TOOL_CALL_MODELS: GEMINI_MODEL[] = [
   GEMINI_MODEL.GEMINI_2_0_FLASH,
   GEMINI_MODEL.GEMINI_2_0_PRO_EXPERIMENTAL,
   GEMINI_MODEL.GEMINI_2_5_PRO_PREVIEW,
+  GEMINI_MODEL.GEMINI_2_5_FLASH_PREVIEW,
 ];
 
 export const DEFAULT_GEMINI_PARAMS = {

packages/providers/google/src/types.ts

@@ -74,6 +74,7 @@ export enum GEMINI_MODEL {
   GEMINI_2_0_FLASH_THINKING_EXP = "gemini-2.0-flash-thinking-exp-01-21",
   GEMINI_2_0_PRO_EXPERIMENTAL = "gemini-2.0-pro-exp-02-05",
   GEMINI_2_5_PRO_PREVIEW = "gemini-2.5-pro-preview-03-25",
+  GEMINI_2_5_FLASH_PREVIEW = "gemini-2.5-flash-preview-04-17",
 }
 
 export interface GeminiModelInfo {

packages/providers/groq/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @llamaindex/groq
 
+## 0.0.67
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+
 ## 0.0.66
 
 ### Patch Changes

packages/providers/groq/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/groq",
   "description": "Groq Adapter for LlamaIndex",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

packages/providers/huggingface/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @llamaindex/huggingface
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+
 ## 0.1.5
 
 ### Patch Changes

packages/providers/huggingface/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/huggingface",
   "description": "Huggingface Adapter for LlamaIndex",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "types": "dist/index.d.ts",
   "main": "dist/index.cjs",

packages/providers/jinaai/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @llamaindex/jinaai
 
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+
 ## 0.0.11
 
 ### Patch Changes

packages/providers/jinaai/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/jinaai",
   "description": "JinaAI Adapter for LlamaIndex",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

packages/providers/openai/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @llamaindex/openai
 
+## 0.3.4
+
+### Patch Changes
+
+- e5c3f95: Update o4-mini to accept reasoning parameters and exclude temperature
+
 ## 0.3.3
 
 ### Patch Changes

packages/providers/openai/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/openai",
   "description": "OpenAI Adapter for LlamaIndex",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

packages/providers/openai/src/utils.ts

@@ -149,11 +149,12 @@ export function isFunctionCallingModel(llm: LLM): llm is OpenAI {
 export function isReasoningModel(model: ChatModel | string): boolean {
   const isO1 = model.startsWith("o1");
   const isO3 = model.startsWith("o3");
-  return isO1 || isO3;
+  const isO4 = model.startsWith("o4");
+  return isO1 || isO3 || isO4;
 }
 
 export function isTemperatureSupported(model: ChatModel | string): boolean {
-  return !model.startsWith("o3");
+  return !model.startsWith("o3") && !model.startsWith("o4");
 }
 
 export type OpenAIAdditionalMetadata = object;

packages/providers/perplexity/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @llamaindex/perplexity
 
+## 0.0.9
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+
 ## 0.0.8
 
 ### Patch Changes

packages/providers/perplexity/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/perplexity",
   "description": "Perplexity Adapter for LlamaIndex",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

packages/providers/together/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @llamaindex/together
 
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+
 ## 0.0.11
 
 ### Patch Changes

packages/providers/together/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/together",
   "description": "Together Adapter for LlamaIndex",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

packages/providers/vllm/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @llamaindex/vllm
 
+## 0.0.38
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+
 ## 0.0.37
 
 ### Patch Changes

packages/providers/vllm/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/vllm",
   "description": "vLLM Adapter for LlamaIndex",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

packages/server/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @llamaindex/server
 
+## 0.1.5
+
+### Patch Changes
+
+- 7ca9ddf: Add generate ui workflow to @llamaindex/server
+- 3310eaa: chore: bump chat-ui
+  - llamaindex@0.10.2
+
 ## 0.1.4
 
 ### Patch Changes

packages/server/next/app/components/chat-section.tsx

@@ -4,9 +4,10 @@ import { ChatSection as ChatSectionUI } from "@llamaindex/chat-ui";
 import "@llamaindex/chat-ui/styles/markdown.css";
 import "@llamaindex/chat-ui/styles/pdf.css";
 import { useChat } from "ai/react";
+import { Sparkles, Star } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import Header from "./header";
 import { RenderingErrors } from "./rendering-errors";
+import { Button } from "./ui/button";
 import CustomChatInput from "./ui/chat/chat-input";
 import CustomChatMessages from "./ui/chat/chat-messages";
 import { fetchComponentDefinitions } from "./ui/chat/custom/events/loader";
@@ -51,20 +52,66 @@ export default function ChatSection() {
     experimental_throttle: 100,
   });
   return (
-    <div className="flex h-[85vh] w-full flex-col gap-2">
-      <Header />
-      <RenderingErrors
-        uniqueErrors={uniqueErrors}
-        clearErrors={() => setErrors([])}
-      />
-      <ChatSectionUI handler={handler} className="min-h-0 w-full flex-1">
-        <CustomChatMessages
-          componentDefs={componentDefs}
-          appendError={appendError}
-        />
-        <CustomChatInput />
-      </ChatSectionUI>
+    <>
+      <div className="grid h-screen w-screen grid-cols-4 gap-4 overflow-hidden">
+        <div className="col-span-1">
+          <div className="flex flex-col gap-8 p-2 pl-4">
+            <div className="flex items-center gap-2">
+              <Sparkles className="size-4" />
+              <h1 className="font-semibold">{getConfig("APP_TITLE")}</h1>
+            </div>
+            <RenderingErrors
+              uniqueErrors={uniqueErrors}
+              clearErrors={() => setErrors([])}
+            />
+          </div>
+        </div>
+        <div className="col-span-2 h-full min-h-0">
+          <ChatSectionUI handler={handler} className="p-0">
+            <CustomChatMessages
+              componentDefs={componentDefs}
+              appendError={appendError}
+            />
+            <CustomChatInput />
+          </ChatSectionUI>
+        </div>
+        <div className="col-span-1">
+          <LlamaIndexLinks />
+        </div>
+      </div>
       <TailwindCDNInjection />
+    </>
+  );
+}
+
+function LlamaIndexLinks() {
+  return (
+    <div className="flex items-center justify-end gap-4 p-2 pr-4">
+      <div className="flex items-center gap-2">
+        <a
+          href="https://www.llamaindex.ai/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
+        >
+          Built by LlamaIndex
+        </a>
+        <img
+          className="h-[24px] w-[24px] rounded-sm"
+          src="/llama.png"
+          alt="Llama Logo"
+        />
+      </div>
+      <a
+        href="https://github.com/run-llama/LlamaIndexTS"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Button variant="outline" size="sm">
+          <Star className="mr-2 size-4" />
+          Star on GitHub
+        </Button>
+      </a>
     </div>
   );
 }

packages/server/next/app/components/header.tsx

@@ -1,28 +0,0 @@
-"use client";
-
-import { getConfig } from "./ui/lib/utils";
-
-export default function Header() {
-  return (
-    <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm">
-      <div className="flex w-full flex-col items-center pb-2 text-center">
-        <h1 className="mb-2 text-4xl font-bold">{getConfig("APP_TITLE")}</h1>
-        <div className="flex items-center justify-center gap-2">
-          <a
-            href="https://www.llamaindex.ai/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
-          >
-            Built by LlamaIndex
-          </a>
-          <img
-            className="h-[24px] w-[24px] rounded-sm"
-            src="/llama.png"
-            alt="Llama Logo"
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

packages/server/next/app/components/ui/chat/chat-avatar.tsx

@@ -1,25 +1,15 @@
 "use client";
 
-import { useChatMessage } from "@llamaindex/chat-ui";
-import { User2 } from "lucide-react";
+import { ChatMessage } from "@llamaindex/chat-ui";
 
 export function ChatMessageAvatar() {
-  const { message } = useChatMessage();
-  if (message.role === "user") {
-    return (
-      <div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
-        <User2 className="h-4 w-4" />
-      </div>
-    );
-  }
-
   return (
-    <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-black text-white shadow-sm">
+    <ChatMessage.Avatar>
       <img
-        className="h-[40px] w-[40px] rounded-xl object-contain"
+        className="border-1 rounded-full border-[#e711dd]"
         src="/llama.png"
         alt="Llama Logo"
       />
-    </div>
+    </ChatMessage.Avatar>
   );
 }

packages/server/next/app/components/ui/chat/chat-input.tsx

@@ -45,30 +45,24 @@ export default function CustomChatInput() {
   const annotations = getAnnotations();
 
   return (
-    <ChatInput
-      className="rounded-xl shadow-xl"
-      resetUploadedFiles={reset}
-      annotations={annotations}
-    >
-      <div>
-        {/* Image preview section */}
-        {imageUrl && (
-          <ImagePreview url={imageUrl} onRemove={() => setImageUrl(null)} />
-        )}
-        {/* Document previews section */}
-        {files.length > 0 && (
-          <div className="flex w-full gap-4 overflow-auto py-2">
-            {files.map((file) => (
-              <DocumentInfo
-                key={file.id}
-                document={{ url: file.url, sources: [] }}
-                className="mb-2 mt-2"
-                onRemove={() => removeDoc(file)}
-              />
-            ))}
-          </div>
-        )}
-      </div>
+    <ChatInput resetUploadedFiles={reset} annotations={annotations}>
+      {/* Image preview section */}
+      {imageUrl && (
+        <ImagePreview url={imageUrl} onRemove={() => setImageUrl(null)} />
+      )}
+      {/* Document previews section */}
+      {files.length > 0 && (
+        <div className="flex w-full gap-4 overflow-auto py-2">
+          {files.map((file) => (
+            <DocumentInfo
+              key={file.id}
+              document={{ url: file.url, sources: [] }}
+              className="mb-2 mt-2"
+              onRemove={() => removeDoc(file)}
+            />
+          ))}
+        </div>
+      )}
       <ChatInput.Form>
         <ChatInput.Field />
         {uploadAPI && <ChatInput.Upload onUpload={handleUploadFile} />}

packages/server/next/app/components/ui/chat/chat-messages.tsx

@@ -16,7 +16,7 @@ export default function CustomChatMessages({
   const { messages } = useChatUI();
 
   return (
-    <ChatMessages className="rounded-xl shadow-xl">
+    <ChatMessages>
       <ChatMessages.List>
         {messages.map((message, index) => (
           <ChatMessage
@@ -32,9 +32,9 @@ export default function CustomChatMessages({
             <ChatMessage.Actions />
           </ChatMessage>
         ))}
+        <ChatMessages.Empty />
         <ChatMessages.Loading />
       </ChatMessages.List>
-      <ChatMessages.Actions />
       <ChatStarter />
     </ChatMessages>
   );

packages/server/next/app/components/ui/chat/chat-starter.tsx

@@ -4,7 +4,7 @@ import { useChatUI } from "@llamaindex/chat-ui";
 import { StarterQuestions } from "@llamaindex/chat-ui/widgets";
 import { getConfig } from "../lib/utils";
 
-export function ChatStarter() {
+export function ChatStarter({ className }: { className?: string }) {
   const { append, messages, requestData } = useChatUI();
   const starterQuestions = getConfig("STARTER_QUESTIONS") ?? [];
 
@@ -13,6 +13,7 @@ export function ChatStarter() {
     <StarterQuestions
       append={(message) => append(message, { data: requestData })}
       questions={starterQuestions}
+      className={className}
     />
   );
 }

packages/server/next/app/page.tsx

@@ -13,11 +13,5 @@ const ChatSection = dynamic(() => import("./components/chat-section"), {
 });
 
 export default function Home() {
-  return (
-    <main className="background-gradient flex h-screen w-screen items-center justify-center overflow-hidden">
-      <div className="w-[90%] space-y-2 lg:w-[60rem] lg:space-y-10">
-        <ChatSection />
-      </div>
-    </main>
-  );
+  return <ChatSection />;
 }

packages/server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/server",
   "description": "LlamaIndex Server",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -45,21 +45,24 @@
     "@types/node": "^22.9.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "llamaindex": "workspace:*",
     "eslint": "^9",
     "eslint-config-next": "15.2.3",
     "postcss": "^8.5.3",
     "postcss-cli": "^11.0.1",
     "tailwindcss": "^4",
-    "tw-animate-css": "1.2.5",
     "tsx": "^4.19.3",
+    "tw-animate-css": "1.2.5",
     "vitest": "^2.1.5"
   },
   "dependencies": {
     "@babel/parser": "^7.27.0",
     "@babel/standalone": "^7.27.0",
     "@babel/traverse": "^7.27.0",
+    "@babel/types": "^7.27.0",
     "@hookform/resolvers": "^5.0.1",
-    "@llamaindex/chat-ui": "0.3.2",
+    "@llama-flow/core": "^0.3.4",
+    "@llamaindex/chat-ui": "0.4.0",
     "@llamaindex/env": "workspace:*",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.7",
@@ -94,7 +97,6 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "llamaindex": "workspace:*",
     "lucide-react": "^0.460.0",
     "next": "^15.3.0",
     "next-themes": "^0.4.3",
@@ -106,7 +108,19 @@
     "recharts": "^2.15.2",
     "sonner": "^2.0.3",
     "tailwind-merge": "^2.6.0",
-    "vaul": "^1.1.2",
-    "zod": "^3.24.2"
+    "vaul": "^1.1.2"
+  },
+  "peerDependencies": {
+    "llamaindex": "workspace:*",
+    "zod": "^3.24.2",
+    "zod-to-json-schema": "^3.23.3"
+  },
+  "peerDependenciesMeta": {
+    "zod": {
+      "optional": true
+    },
+    "zod-to-json-schema": {
+      "optional": true
+    }
   }
 }

packages/server/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./events";
 export * from "./server";
 export * from "./types";
+export { generateEventComponent } from "./utils/gen-ui";
 export { toStreamGenerator } from "./utils/workflow";

packages/server/src/utils/gen-ui.ts

@@ -0,0 +1,561 @@
+import { parse } from "@babel/parser";
+import type { NodePath } from "@babel/traverse";
+import traverse from "@babel/traverse";
+import type {
+  ExportDefaultDeclaration,
+  ImportDeclaration,
+  ImportDefaultSpecifier,
+  ImportNamespaceSpecifier,
+  ImportSpecifier,
+} from "@babel/types";
+import { createWorkflow, getContext, workflowEvent } from "@llama-flow/core";
+import { collect } from "@llama-flow/core/stream/consumer";
+import { until } from "@llama-flow/core/stream/until";
+import type { LLM } from "llamaindex";
+import type { ZodType } from "zod";
+
+const writeAggregationEvent = workflowEvent<{
+  eventSchema: object;
+  uiDescription: string;
+}>();
+
+const writeUiComponentEvent = workflowEvent<{
+  eventSchema: object;
+  uiDescription: string;
+  aggregationFunction: string | undefined;
+}>();
+
+const refineGeneratedCodeEvent = workflowEvent<{
+  uiCode: string;
+  aggregationFunction: string;
+  uiDescription: string;
+}>();
+
+const startEvent = workflowEvent<{
+  eventSchema: object;
+}>();
+const stopEvent = workflowEvent<string | null>();
+
+const CODE_STRUCTURE = `
+// export the component
+// The component accepts an 'events' array prop. Each item in the array conforms to the schema provided during generation.
+export default function Component({ events }) {
+  // logic for aggregating events (if needed)
+  const aggregatedEvents = // ... aggregation logic based on aggregationFunction description ...
+
+  // Determine which events to render (original or aggregated)
+  const eventsToRender = aggregatedEvents || events;
+
+  return (
+    <div>
+      {/* Render eventsToRender using shadcn/ui, lucide-react, tailwind CSS */}
+      {/* Map over eventsToRender and display each one */}
+      {/* Example: */}
+      {/* {eventsToRender.map((event, index) => (
+        <Card key={index}>
+          <CardHeader>
+            <CardTitle>Event Data</CardTitle> // Adjust title as needed
+          </CardHeader>
+          <CardContent>
+            <pre>{JSON.stringify(event, null, 2)}</pre>
+          </CardContent>
+        </Card>
+      ))} */}
+    </div>
+  );
+}
+`;
+
+const SOURCE_MAP: Record<string, boolean> = {
+  react: true,
+  "react-dom": true,
+  "@/components/ui/accordion": true,
+  "@/components/ui/alert": true,
+  "@/components/ui/alert-dialog": true,
+  "@/components/ui/aspect-ratio": true,
+  "@/components/ui/avatar": true,
+  "@/components/ui/badge": true,
+  "@/components/ui/breadcrumb": true,
+  "@/components/ui/button": true,
+  "@/components/ui/calendar": true,
+  "@/components/ui/card": true,
+  "@/components/ui/carousel": true,
+  "@/components/ui/chart": true,
+  "@/components/ui/checkbox": true,
+  "@/components/ui/collapsible": true,
+  "@/components/ui/command": true,
+  "@/components/ui/context-menu": true,
+  "@/components/ui/dialog": true,
+  "@/components/ui/drawer": true,
+  "@/components/ui/dropdown-menu": true,
+  "@/components/ui/form": true,
+  "@/components/ui/hover-card": true,
+  "@/components/ui/input": true,
+  "@/components/ui/input-otp": true,
+  "@/components/ui/label": true,
+  "@/components/ui/menubar": true,
+  "@/components/ui/navigation-menu": true,
+  "@/components/ui/pagination": true,
+  "@/components/ui/popover": true,
+  "@/components/ui/progress": true,
+  "@/components/ui/radio-group": true,
+  "@/components/ui/resizable": true,
+  "@/components/ui/scroll-area": true,
+  "@/components/ui/select": true,
+  "@/components/ui/separator": true,
+  "@/components/ui/sheet": true,
+  "@/components/ui/sidebar": true,
+  "@/components/ui/skeleton": true,
+  "@/components/ui/slider": true,
+  "@/components/ui/sonner": true,
+  "@/components/ui/switch": true,
+  "@/components/ui/table": true,
+  "@/components/ui/tabs": true,
+  "@/components/ui/textarea": true,
+  "@/components/ui/toggle": true,
+  "@/components/ui/toggle-group": true,
+  "@/components/ui/tooltip": true,
+  "@/components/lib/utils": true,
+  "@/lib/utils": true,
+  "lucide-react": true,
+  "@llamaindex/chat-ui/widgets": true,
+};
+
+function generateSupportedDeps(): string {
+  // Extract all shadcn component names from SOURCE_MAP
+  const shadcnComponents = Object.keys(SOURCE_MAP)
+    .filter((key) => key.startsWith("@/components/ui/"))
+    .map((key) => key.replace("@/components/ui/", ""))
+    .sort()
+    .join(", ");
+
+  return `
+        - React: import { useState } from "react";
+        - shadcn/ui: import { ComponentName } from "@/components/ui/<component_path>";
+            Supported shadcn components:  
+                ${shadcnComponents}  
+        - lucide-react: import { IconName } from "lucide-react";
+        - tailwind css: import { cn } from "@/lib/utils"; // Note: clsx is not supported
+        - LlamaIndex's markdown-ui: import { Markdown } from "@llamaindex/chat-ui/widgets";
+`;
+}
+
+const SUPPORTED_DEPS = generateSupportedDeps();
+
+function validateComponentCode(code: string): {
+  isValid: boolean;
+  error?: string;
+  componentName?: string;
+} {
+  try {
+    const imports: Array<{ name: string; source: string }> = [];
+    let componentName: string | null = null;
+
+    // Parse the code into an AST
+    const ast = parse(code, {
+      sourceType: "module",
+      plugins: ["jsx", "typescript"],
+    });
+
+    // Traverse the AST to find import declarations
+    traverse(ast, {
+      // Find import declarations
+      ImportDeclaration(path: NodePath<ImportDeclaration>) {
+        path.node.specifiers.forEach(
+          (
+            specifier:
+              | ImportSpecifier
+              | ImportDefaultSpecifier
+              | ImportNamespaceSpecifier,
+          ) => {
+            if (
+              specifier.type === "ImportSpecifier" ||
+              specifier.type === "ImportDefaultSpecifier"
+            ) {
+              imports.push({
+                name: specifier.local.name, // e.g., "Button"
+                source: path.node.source.value, // e.g., "@/components/ui/button"
+              });
+            }
+          },
+        );
+      },
+      // Find export default declaration
+      ExportDefaultDeclaration(path: NodePath<ExportDefaultDeclaration>) {
+        const declaration = path.node.declaration;
+        if (declaration.type === "FunctionDeclaration" && declaration.id) {
+          componentName = declaration.id.name; // e.g., "EventTimeline"
+        } else if (
+          declaration.type === "Identifier" &&
+          path.scope.hasBinding(declaration.name)
+        ) {
+          componentName = declaration.name; // e.g., named function assigned to export
+        }
+      },
+    });
+
+    // Validate imports
+    for (const { name, source } of imports) {
+      if (!(source in SOURCE_MAP)) {
+        console.error(`Invalid import: ${name} from ${source}`);
+        return {
+          isValid: false,
+          error: `Failed to import ${name} from ${source}. Reason: Module not found. 
+          \nHere is the list of supported imports: ${SUPPORTED_DEPS}`,
+        };
+      }
+    }
+
+    // Validate component export
+    if (!componentName) {
+      console.warn("Could not identify component name in the generated code.");
+    }
+
+    return {
+      isValid: true,
+      ...(componentName ? { componentName } : {}),
+    };
+  } catch (error) {
+    console.error("Error during code validation:", error);
+    return {
+      isValid: false,
+      error:
+        error instanceof Error ? error.message : "Unknown validation error",
+    };
+  }
+}
+
+/**
+ * Creates the UI generation workflow with the provided LLM instance.
+ *
+ * @param llm - The LLM instance to use for the workflow.
+ * @returns The configured workflow instance.
+ */
+export function createGenUiWorkflow(llm: LLM) {
+  const genUiWorkflow = createWorkflow();
+
+  genUiWorkflow.handle([startEvent], async ({ data: { eventSchema } }) => {
+    const context = getContext();
+
+    const planningPrompt = `
+# Your role
+You are an AI assistant helping to plan a React UI component. This component will display *one or more events* in a chat application, all conforming to a single JSON schema.
+
+# Context
+Here is the JSON schema for the events the component needs to display:
+${JSON.stringify(eventSchema, null, 2)}
+
+# Task
+1. Analyze the event schema.
+2. Decide if multiple events of this type should be aggregated before rendering in the UI (e.g., group similar events, summarize sequences). Assume the component will receive an array of these events.
+3. If aggregation is needed, provide a *brief* description of the JavaScript function logic (no code implementation yet, just the logic description) that would take an array of events and return an aggregated representation.
+4. Provide a concise description of the desired UI look and feel for displaying these events (e.g., "Display each event in a card with an icon representing the event type.").
+
+e.g: Assume that the backend produce list of events with animal name, action, and status.
+    \`\`\`
+    A card-based layout displaying animal actions:
+    - Each card shows an animal's image at the top
+    - Below the image: animal name as the card title
+    - Action details in the card body with an icon (eating 🍖, sleeping 😴, playing 🎾)
+    - Status badge in the corner showing if action is ongoing/completed
+    - Expandable section for additional details
+    - Soft color scheme based on action type
+    \`\`\`
+
+Don't be verbose, just return the description for the UI based on the event schema and data.
+`;
+
+    try {
+      const response = await llm.complete({
+        prompt: planningPrompt,
+        stream: false,
+      });
+
+      const responseText = response.text.trim();
+      console.log("\nUI Description:", responseText);
+
+      context.sendEvent(
+        writeAggregationEvent.with({
+          eventSchema,
+          uiDescription: responseText,
+        }),
+      );
+    } catch (error) {
+      console.error("Error during UI planning:", error);
+      context.sendEvent(stopEvent.with(null));
+    }
+  });
+
+  genUiWorkflow.handle([writeAggregationEvent], async ({ data: planData }) => {
+    const context = getContext();
+
+    const schemaContext = JSON.stringify(planData.eventSchema, null, 2);
+    const uiDescriptionContext = planData.uiDescription;
+
+    const writingPrompt = `
+# Your role
+You are a frontend developer who is developing a React component for given events that are emitted from a backend workflow.
+Here are the events that you need to work on: ${schemaContext}
+Here is the description of the UI: ${uiDescriptionContext}
+
+# Task
+Based on the description of the UI and the list of events, write the aggregation function that will be used to aggregate the events.
+Take into account that the list of events grows with time. At the beginning, there is only one event in the list, and events are incrementally added. 
+To render the events in a visually pleasing way, try to aggregate them by their attributes and render the aggregates instead of just rendering a list of all events.
+Don't add computation to the aggregation function, just group the events by their attributes.
+Make sure that the aggregation should reflect the description of the UI and the grouped events are not duplicated, make it as simple as possible to avoid unnecessary issues.
+
+# Answer with the following format:
+\`\`\`jsx
+const aggregateEvents = () => {
+    // code for aggregating events here if needed otherwise let the jsx code block empty
+}
+\`\`\`
+`;
+
+    try {
+      const response = await llm.complete({
+        prompt: writingPrompt,
+        stream: false,
+      });
+
+      const generatedCode = response.text.trim();
+      context.sendEvent(
+        writeUiComponentEvent.with({
+          eventSchema: planData.eventSchema,
+          uiDescription: planData.uiDescription,
+          aggregationFunction: generatedCode,
+        }),
+      );
+    } catch (error) {
+      console.error("Error during aggregation function writing:", error);
+      context.sendEvent(stopEvent.with(null));
+    }
+  });
+
+  genUiWorkflow.handle([writeUiComponentEvent], async ({ data: planData }) => {
+    const context = getContext();
+
+    const aggregationFunctionContext = planData.aggregationFunction
+      ? `
+# Here is the aggregation function that aggregates the events:
+${planData.aggregationFunction}`
+      : "";
+
+    const schemaContext = JSON.stringify(planData.eventSchema, null, 2);
+    const uiDescriptionContext = planData.uiDescription;
+
+    const writingPrompt = `
+# Your role
+You are a frontend developer who is developing a React component using shadcn/ui, lucide-react, LlamaIndex's chat-ui, and tailwind css (cn) for the UI.
+You are given a list of events and other context.
+Your task is to write a beautiful UI for the events that will be included in a chat UI.
+
+# Context:
+Here are the events that you need to work on: ${schemaContext}
+${aggregationFunctionContext}
+Here is the description of the UI: 
+    \`\`\`
+    ${uiDescriptionContext}
+    \`\`\`
+
+
+# Only use the following dependencies: ${SUPPORTED_DEPS}
+
+# Requirements:
+- Write beautiful UI components for the events using the supported dependencies
+- The component text/label should be specified for each event type.
+
+
+# Instructions:
+## Event and schema notice
+- Based on the provided list of events, determine their types and attributes.
+- It's normal that the schema is applied to all events, but the events might be completely different where some schema attributes aren't used.
+- You should make the component visually distinct for each event type.
+  e.g: A simple cat schema
+    \`\`\`{"type": "cat", "action": ["jump", "run", "meow"], "jump": {"height": 10, "distance": 20}, "run": {"distance": 100}}\`\`\`
+    You should display the jump, run and meow actions in different ways. Don't try to render "height" for the "run" and "meow" action.
+
+## UI notice
+- Use the supported dependencies for the UI.
+- Be careful on state handling, make sure the update should be updated in the state and there is no duplicate state.
+- For a long content, consider to use markdown along with dropdown to show the full content.
+    e.g:
+    \`\`\`jsx
+    import { Markdown } from "@llamaindex/chat-ui/widgets";
+    <Markdown content={content} />
+    \`\`\`
+- Try to make the component placement not monotonous, consider use row/column/flex/grid layout.
+`;
+
+    try {
+      const response = await llm.complete({
+        prompt: writingPrompt,
+        stream: false,
+      });
+
+      const generatedCode = response.text.trim();
+
+      context.sendEvent(
+        refineGeneratedCodeEvent.with({
+          uiCode: generatedCode,
+          aggregationFunction: planData.aggregationFunction || "",
+          uiDescription: planData.uiDescription,
+        }),
+      );
+    } catch (error) {
+      console.error("Error during UI component writing:", error);
+      context.sendEvent(stopEvent.with(null));
+    }
+  });
+
+  genUiWorkflow.handle(
+    [refineGeneratedCodeEvent],
+    async ({ data: writeData }) => {
+      const context = getContext();
+      const MAX_VALIDATION_ATTEMPTS = 3;
+
+      let currentCode = writeData.uiCode;
+      let attemptCount = 0;
+      let validationError = null;
+
+      while (attemptCount < MAX_VALIDATION_ATTEMPTS) {
+        attemptCount++;
+        if (attemptCount > 1) {
+          console.log(
+            `Refinement attempt ${attemptCount}/${MAX_VALIDATION_ATTEMPTS}`,
+          );
+        }
+
+        try {
+          // Build refinement prompt - include error info for subsequent attempts
+          const errorSection =
+            attemptCount > 1 && validationError
+              ? `\n# Error to fix:\n${validationError}\n\n# Additional requirements:\n1. Only import from supported modules\n2. Ensure the component has an export default statement\n3. Component must accept an 'events' array prop`
+              : "";
+
+          const refiningPrompt = `
+# Your role
+You are a senior frontend developer reviewing React code written by a junior developer.
+
+# Context:
+- The goal is to create a React component that displays an array of events.
+- Required Code Structure (Component accepts an \`events\` array prop):
+${CODE_STRUCTURE}
+- Aggregation Context (if any): ${writeData.aggregationFunction || "None"}
+- ${attemptCount > 1 ? "Previous" : "Generated"} Code:
+${currentCode}${errorSection}
+
+# Task:
+Review and refine the provided code. Ensure it strictly follows the "Required Code Structure" (including accepting the \`events\` array prop), implements any described aggregation logic correctly, imports are correct (individual shadcn/ui imports), and there are no obvious bugs or undefined variables.
+
+# Output Format:
+Return ONLY the final, refined code, enclosed in a single JSX code block (\`\`\`jsx ... \`\`\`). Do not add any explanations before or after the code block.
+`;
+
+          const response = await llm.complete({
+            prompt: refiningPrompt,
+            stream: false,
+          });
+
+          const refinedCode = response.text.trim();
+          // Extract code from markdown block if present
+          const codeMatch = refinedCode.match(/```jsx\n?([^]*?)\n?```/);
+          if (codeMatch && codeMatch[1]) {
+            currentCode = codeMatch[1].trim();
+          } else {
+            // Fallback if no block found - attempt cleanup
+            currentCode = refinedCode.replace(/^```jsx|```$/g, "").trim();
+            console.warn(
+              "Could not find standard JSX code block in refinement response, using raw content.",
+            );
+          }
+
+          // Validate the refined code
+          const validation = validateComponentCode(currentCode);
+
+          if (validation.isValid) {
+            console.log(`\n✅ Code validated successfully`);
+            context.sendEvent(stopEvent.with(currentCode));
+            return;
+          } else {
+            validationError = validation.error;
+            console.warn(
+              `Validation failed (attempt ${attemptCount}/${MAX_VALIDATION_ATTEMPTS}): ${validation.error}`,
+            );
+
+            // If this was the last attempt, give up
+            if (attemptCount >= MAX_VALIDATION_ATTEMPTS) {
+              console.error(
+                `Failed to generate valid code after ${MAX_VALIDATION_ATTEMPTS} attempts`,
+              );
+              context.sendEvent(stopEvent.with(null));
+              return;
+            }
+            // Otherwise continue to the next iteration of the loop
+          }
+        } catch (error) {
+          console.error(
+            `Error during refinement attempt ${attemptCount}:`,
+            error,
+          );
+          context.sendEvent(stopEvent.with(null));
+          return;
+        }
+      }
+    },
+  );
+
+  return genUiWorkflow;
+}
+
+/**
+ * Generates a React UI component for displaying event data of a given type.
+ *
+ * @param eventType - A Zod schema representing the event type.
+ * @param llm - The LLM instance to use for the workflow.
+ *              We recommend using gpt-4.1, sonnet-3.7, or gemini-2.5-pro
+ *              for better results
+ * @returns The generated React component code as a string.
+ */
+export async function generateEventComponent(
+  eventType: ZodType | object,
+  llm: LLM,
+): Promise<string> {
+  let eventSchema: object = eventType;
+  if ("parse" in eventType && "safeParse" in eventType) {
+    // Zod schema given, convert to JSON schema including descriptions
+    const zodToJsonSchema = (await import("zod-to-json-schema")).default;
+    const zodEventSchema = zodToJsonSchema(eventType, {
+      target: "openApi3",
+    });
+    if (!zodEventSchema) {
+      throw new Error("Could not get JSON schema for the event type");
+    }
+    eventSchema = zodEventSchema;
+  }
+  console.log(`🎨 Starting UI generation...
+`);
+
+  try {
+    const genUiWorkflow = createGenUiWorkflow(llm);
+
+    const { stream, sendEvent } = genUiWorkflow.createContext();
+    sendEvent(startEvent.with({ eventSchema }));
+
+    // Collect all events until the stop event and get the last one
+    const allEvents = await collect(until(stream, stopEvent));
+    const result = allEvents[allEvents.length - 1];
+    if (result?.data === null) {
+      throw new Error("Workflow failed.");
+    } else if (result) {
+      console.log("\nWorkflow finished successfully.");
+      return result.data;
+    } else {
+      throw new Error("Workflow result is undefined.");
+    }
+  } catch (error) {
+    console.error("Workflow execution failed:", error);
+    throw new Error(`UI generation workflow failed: ${error}`);
+  }
+}

pnpm-lock.yaml

@@ -619,7 +619,7 @@ importers:
         specifier: ^0.0.16
         version: link:../packages/providers/storage/chroma
       '@llamaindex/clip':
-        specifier: ^0.0.51
+        specifier: ^0.0.52
         version: link:../packages/providers/clip
       '@llamaindex/cloud':
         specifier: ^4.0.3
@@ -631,10 +631,10 @@ importers:
         specifier: ^0.6.2
         version: link:../packages/core
       '@llamaindex/deepinfra':
-        specifier: ^0.0.51
+        specifier: ^0.0.52
         version: link:../packages/providers/deepinfra
       '@llamaindex/deepseek':
-        specifier: ^0.0.11
+        specifier: ^0.0.12
         version: link:../packages/providers/deepseek
       '@llamaindex/elastic-search':
         specifier: ^0.1.2
@@ -646,19 +646,19 @@ importers:
         specifier: ^1.0.9
         version: link:../packages/providers/storage/firestore
       '@llamaindex/fireworks':
-        specifier: ^0.0.11
+        specifier: ^0.0.12
         version: link:../packages/providers/fireworks
       '@llamaindex/google':
-        specifier: ^0.2.3
+        specifier: ^0.2.4
         version: link:../packages/providers/google
       '@llamaindex/groq':
-        specifier: ^0.0.66
+        specifier: ^0.0.67
         version: link:../packages/providers/groq
       '@llamaindex/huggingface':
-        specifier: ^0.1.5
+        specifier: ^0.1.6
         version: link:../packages/providers/huggingface
       '@llamaindex/jinaai':
-        specifier: ^0.0.11
+        specifier: ^0.0.12
         version: link:../packages/providers/jinaai
       '@llamaindex/milvus':
         specifier: ^0.1.11
@@ -679,10 +679,10 @@ importers:
         specifier: ^0.1.2
         version: link:../packages/providers/ollama
       '@llamaindex/openai':
-        specifier: ^0.3.3
+        specifier: ^0.3.4
         version: link:../packages/providers/openai
       '@llamaindex/perplexity':
-        specifier: ^0.0.8
+        specifier: ^0.0.9
         version: link:../packages/providers/perplexity
       '@llamaindex/pinecone':
         specifier: ^0.1.2
@@ -706,7 +706,7 @@ importers:
         specifier: ^0.1.1
         version: link:../packages/providers/storage/supabase
       '@llamaindex/together':
-        specifier: ^0.0.11
+        specifier: ^0.0.12
         version: link:../packages/providers/together
       '@llamaindex/tools':
         specifier: ^0.0.5
@@ -718,7 +718,7 @@ importers:
         specifier: ^0.1.2
         version: link:../packages/providers/vercel
       '@llamaindex/vllm':
-        specifier: ^0.0.37
+        specifier: ^0.0.38
         version: link:../packages/providers/vllm
       '@llamaindex/voyage-ai':
         specifier: ^1.0.8
@@ -754,7 +754,7 @@ importers:
         specifier: ^1.0.14
         version: 1.0.19
       llamaindex:
-        specifier: ^0.10.1
+        specifier: ^0.10.2
         version: link:../packages/llamaindex
       mongodb:
         specifier: 6.7.0
@@ -1655,12 +1655,18 @@ importers:
       '@babel/traverse':
         specifier: ^7.27.0
         version: 7.27.0
+      '@babel/types':
+        specifier: ^7.27.0
+        version: 7.27.0
       '@hookform/resolvers':
         specifier: ^5.0.1
         version: 5.0.1(react-hook-form@7.55.0(react@19.1.0))
+      '@llama-flow/core':
+        specifier: ^0.3.4
+        version: 0.3.4(@modelcontextprotocol/sdk@1.9.0)(hono@4.7.7)(next@15.3.0(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(p-retry@6.2.1)(zod@3.24.2)
       '@llamaindex/chat-ui':
-        specifier: 0.3.2
-        version: 0.3.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        specifier: 0.4.0
+        version: 0.4.0(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@llamaindex/env':
         specifier: workspace:*
         version: link:../env
@@ -1763,9 +1769,6 @@ importers:
       input-otp:
         specifier: ^1.4.2
         version: 1.4.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      llamaindex:
-        specifier: workspace:*
-        version: link:../llamaindex
       lucide-react:
         specifier: ^0.460.0
         version: 0.460.0(react@19.1.0)
@@ -1805,6 +1808,9 @@ importers:
       zod:
         specifier: ^3.24.2
         version: 3.24.2
+      zod-to-json-schema:
+        specifier: ^3.23.3
+        version: 3.24.5(zod@3.24.2)
     devDependencies:
       '@eslint/eslintrc':
         specifier: ^3
@@ -1833,6 +1839,9 @@ importers:
       eslint-config-next:
         specifier: 15.2.3
         version: 15.2.3(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.3)
+      llamaindex:
+        specifier: workspace:*
+        version: link:../llamaindex
       postcss:
         specifier: ^8.5.3
         version: 8.5.3
@@ -3789,6 +3798,26 @@ packages:
   '@lezer/yaml@1.0.3':
     resolution: {integrity: sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==}
 
+  '@llama-flow/core@0.3.4':
+    resolution: {integrity: sha512-BOe23pfm7j9hKMH7u0jFS8bPKLsShKgz8KdN/rXeicgnopCwhDMO4ppOg7Cy7tWap8kYZIY8ZliN7Q9SmNfjkg==}
+    peerDependencies:
+      '@modelcontextprotocol/sdk': ^1.7.0
+      hono: ^4.7.4
+      next: ^15.2.2
+      p-retry: ^6.2.1
+      zod: ^3.24.2
+    peerDependenciesMeta:
+      '@modelcontextprotocol/sdk':
+        optional: true
+      hono:
+        optional: true
+      next:
+        optional: true
+      p-retry:
+        optional: true
+      zod:
+        optional: true
+
   '@llama-flow/docs@0.0.3':
     resolution: {integrity: sha512-5BFSbaWY7Ps5djzXilgyy9t7OYElyoojvEmLy/FC1azUnn6poIxvr04Ctsoi0PR44sYyqWb7hkuU5iJap6uLyA==}
 
@@ -3797,8 +3826,8 @@ packages:
     peerDependencies:
       react: ^18.2.0 || ^19.0.0 || ^19.0.0-rc
 
-  '@llamaindex/chat-ui@0.3.2':
-    resolution: {integrity: sha512-YcQOghcxutqHK9KO2CRSws0inDR5bbMZkmpUFJtC2aWcHjWi8wYbzVZjRVl1vrb3VCk+VInKOhFUTW9hEkzydA==}
+  '@llamaindex/chat-ui@0.4.0':
+    resolution: {integrity: sha512-u9jOUuyKPDFnJsorfH8oIE0UVO+zlabbD8lgTFbN37XUdYFFG4rteEYwUWc/n4/h/GjnFcTfxpiyWmiwTKzicw==}
     peerDependencies:
       react: ^18.2.0 || ^19.0.0 || ^19.0.0-rc
 
@@ -15877,6 +15906,14 @@ snapshots:
       '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.2
 
+  '@llama-flow/core@0.3.4(@modelcontextprotocol/sdk@1.9.0)(hono@4.7.7)(next@15.3.0(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(p-retry@6.2.1)(zod@3.24.2)':
+    optionalDependencies:
+      '@modelcontextprotocol/sdk': 1.9.0
+      hono: 4.7.7
+      next: 15.3.0(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      p-retry: 6.2.1
+      zod: 3.24.2
+
   '@llama-flow/docs@0.0.3': {}
 
   '@llamaindex/chat-ui@0.2.0(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
@@ -15909,7 +15946,7 @@ snapshots:
       - react-dom
       - supports-color
 
-  '@llamaindex/chat-ui@0.3.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@llamaindex/chat-ui@0.4.0(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@llamaindex/pdf-viewer': 1.3.0(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-collapsible': 1.1.4(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)

unit/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @llamaindex/unit-test
 
+## 0.1.22
+
+### Patch Changes
+
+- Updated dependencies [e5c3f95]
+  - @llamaindex/openai@0.3.4
+  - llamaindex@0.10.2
+
 ## 0.1.21
 
 ### Patch Changes

unit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@llamaindex/unit-test",
   "private": true,
-  "version": "0.1.21",
+  "version": "0.1.22",
   "type": "module",
   "scripts": {
     "test": "vitest run"