add GenUIWorkflow for generating UI components from workflow events (#549)

* feat: add GenUIWorkflow for generating UI components from workflow events

* feat: enhance GenUIWorkflow to support event handling and UI generation

* add cache, split code

* use gemini model

* refactor: update GenUIWorkflow to use Anthropic model and add pre-run checks for API key and package installation

* feat: introduce PlanningEvent and enhance GenUIWorkflow for improved UI planning and aggregation function generation

* feat: add gen ui to llamaindexserver

* refactor: remove unused gen_ui.py file

* simplify

* update for tailwindcss

* simplify code and add document

* refine text

* feat: add UIEvent model and update exports in server module

* use default UIEvent

* fix wrong model, update template

* add missing doc

* fix linting

* revert change on template

* fix mypy

* disable e2e for the change from llama-index-server

* remove unused script entry from pyproject.toml and refine UI notice text in GenUIWorkflow

* update workflow, bump chat ui

* Refine GenUIWorkflow documentation and improve code structure notes; add llm parameter to generate_ui_for_workflow function.

Author: leehuwuj

.github/workflows/e2e.yml

@@ -2,8 +2,12 @@ name: E2E Tests
 on:
   push:
     branches: [main]
+    paths-ignore:
+      - "llama-index-server/**"
   pull_request:
     branches: [main]
+    paths-ignore:
+      - "llama-index-server/**"
 
 env:
   POETRY_VERSION: "1.6.1"

llama-index-server/docs/custom_ui_component.md

@@ -14,27 +14,33 @@ Custom UI components are a powerful feature that enables you to:
 
 ### Workflow events
 
-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>
-}
-```
-
-In Pydantic, this is equivalent to:
+To display custom UI components, your workflow needs to emit `UIEvent` events with data that conforms to the data model of your custom UI component.
 
 ```python
-from pydantic import BaseModel
+from llama_index.server import UIEvent
+from pydantic import BaseModel, Field
 from typing import Literal, Any
 
-class MyCustomEvent(BaseModel):
-    type: Literal["<my_custom_event_name>"]
-    data: dict | Any
-
-    def to_response(self):
-        return self.model_dump()
+# Define a Pydantic model for your event data
+class DeepResearchEventData(BaseModel):
+    id: str = Field(description="The unique identifier for the event")
+    type: Literal["retrieval", "analysis"] = Field(description="DeepResearch has two main stages: retrieval and analysis")
+    status: Literal["pending", "completed", "failed"] = Field(description="The current status of the event")
+    content: str = Field(description="The textual content of the event")
+
+
+# In your workflow, emit the data model with UIEvent
+ctx.write_event_to_stream(
+    UIEvent(
+        type="deep_research_event",
+        data=DeepResearchEventData(
+            id="123",
+            type="retrieval",
+            status="pending",
+            content="Retrieving data...",
+        ),
+    )
+)
 ```
 
 ### Server Setup
@@ -67,3 +73,31 @@ server = LlamaIndexServer(
        );
    }
    ```
+
+### Generate UI Component
+
+We provide a `generate_ui_component` function that uses LLMs to automatically generate UI components for your workflow events.
+
+> **_Note:_** This feature requires the `ANTHROPIC_API_KEY` to be set in your environment.
+
+```python
+from llama_index.server.gen_ui.main import generate_ui_component
+
+# Generate a component using the event class you defined in your workflow
+from your_workflow import DeepResearchEvent
+ui_code = await generate_ui_component(
+    event_cls=DeepResearchEvent,
+)
+
+# Alternatively, generate from your workflow file
+ui_code = await generate_ui_component(
+    workflow_file="your_workflow.py",
+)
+print(ui_code)
+
+# Save the generated code to a file for use in your project
+with open("deep_research_event.jsx", "w") as f:
+    f.write(ui_code)
+```
+
+> **Tip:** For optimal results, add descriptive documentation to each field in your event data class. This helps the LLM better understand your data structure and generate more appropriate UI components.

llama-index-server/llama_index/server/__init__.py

@@ -1,3 +1,4 @@
+from .api.models import UIEvent
 from .server import LlamaIndexServer, UIConfig
 
-__all__ = ["LlamaIndexServer", "UIConfig"]
+__all__ = ["LlamaIndexServer", "UIConfig", "UIEvent"]

llama-index-server/llama_index/server/api/models.py

@@ -140,3 +140,14 @@ class ComponentDefinition(BaseModel):
     type: str
     code: str
     filename: str
+
+
+class UIEvent(Event):
+    type: str
+    data: BaseModel
+
+    def to_response(self) -> dict:
+        return {
+            "type": self.type,
+            "data": self.data.model_dump(),
+        }

llama-index-server/llama_index/server/chat_ui.py

@@ -5,7 +5,7 @@
 
 import requests
 
-CHAT_UI_VERSION = "0.1.0"
+CHAT_UI_VERSION = "0.1.1"
 
 
 def download_chat_ui(