diff --git a/llama-index-server/docs/custom_ui_component.md b/llama-index-server/docs/custom_ui_component.md index 06857a4ec..abb2e8891 100644 --- a/llama-index-server/docs/custom_ui_component.md +++ b/llama-index-server/docs/custom_ui_component.md @@ -76,21 +76,21 @@ 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. +We provide a `generate_event_component` function that uses LLMs to automatically generate UI components for your workflow events. ```python -from llama_index.server.gen_ui.main import generate_ui_component +from llama_index.server.gen_ui import generate_event_component +from llama_index.llms.openai import OpenAI # Generate a component using the event class you defined in your workflow from your_workflow import DeepResearchEvent -ui_code = await generate_ui_component( +ui_code = await generate_event_component( event_cls=DeepResearchEvent, + llm=OpenAI(model="gpt-4.1"), # Default LLM is Claude 3.7 Sonnet if not provided ) # Alternatively, generate from your workflow file -ui_code = await generate_ui_component( +ui_code = await generate_event_component( workflow_file="your_workflow.py", ) print(ui_code) @@ -100,4 +100,4 @@ 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. +> **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. We also recommend using GPT 4.1, Claude 3.7 Sonnet and Gemini 2.5 Pro for better results. diff --git a/llama-index-server/llama_index/server/chat_ui.py b/llama-index-server/llama_index/server/chat_ui.py index 6e3c6d8d8..130cae9ca 100644 --- a/llama-index-server/llama_index/server/chat_ui.py +++ b/llama-index-server/llama_index/server/chat_ui.py @@ -5,7 +5,7 @@ import requests -CHAT_UI_VERSION = "0.1.1" +CHAT_UI_VERSION = "0.1.2" def download_chat_ui( diff --git a/llama-index-server/llama_index/server/gen_ui/__init__.py b/llama-index-server/llama_index/server/gen_ui/__init__.py index e69de29bb..ce310dcad 100644 --- a/llama-index-server/llama_index/server/gen_ui/__init__.py +++ b/llama-index-server/llama_index/server/gen_ui/__init__.py @@ -0,0 +1,4 @@ +from .main import generate_event_component +from .parse_workflow_code import get_workflow_event_schemas + +__all__ = ["generate_event_component", "get_workflow_event_schemas"] diff --git a/llama-index-server/llama_index/server/gen_ui/main.py b/llama-index-server/llama_index/server/gen_ui/main.py index e185f79c5..f1731720a 100644 --- a/llama-index-server/llama_index/server/gen_ui/main.py +++ b/llama-index-server/llama_index/server/gen_ui/main.py @@ -80,10 +80,11 @@ class GenUIWorkflow(Workflow): code_structure: str = """ ```jsx - // Note: Only shadcn/ui and lucide-react and tailwind css are allowed (but cn() is not supported yet). + // Note: Only shadcn/ui and lucide-react and tailwind css are allowed. // shadcn import pattern: import { ComponentName } from "@/components/ui/"; // e.g: import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"; // import { Button } from "@/components/ui/button"; + // import cn from "@/lib/utils"; // clsx is not supported // export the component export default function Component({ events }) { @@ -264,7 +265,7 @@ async def write_ui_component( 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 shadcn/ui and lucide-react and tailwind CSS for the UI (cn() is not supported yet). + - Use shadcn/ui and lucide-react and tailwind CSS 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: @@ -350,7 +351,7 @@ async def refine_code( ) -async def generate_ui_for_workflow( +async def generate_event_component( workflow_file: Optional[str] = None, event_cls: Optional[Type[BaseModel]] = None, llm: Optional[LLM] = None, @@ -360,7 +361,7 @@ async def generate_ui_for_workflow( Either workflow_file or event_cls must be provided. Args: - workflow_file: The path to the workflow file to generate UI from. e.g: `app/workflow.py`. + workflow_file: The path to the workflow file that contains the event to generate UI for. e.g: `app/workflow.py`. event_cls: A Pydantic class to generate UI for. e.g: `DeepResearchEvent`. llm: The LLM to use for the generation. Default is Anthropic's Claude 3.7 Sonnet. We recommend using these LLMs: