Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions llama-index-server/docs/custom_ui_component.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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.
2 changes: 1 addition & 1 deletion llama-index-server/llama_index/server/chat_ui.py
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import requests

CHAT_UI_VERSION = "0.1.1"
CHAT_UI_VERSION = "0.1.2"


def download_chat_ui(
Expand Down
4 changes: 4 additions & 0 deletions llama-index-server/llama_index/server/gen_ui/__init__.py
Original file line number Diff line number Diff line change
@@ -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"]
9 changes: 5 additions & 4 deletions llama-index-server/llama_index/server/gen_ui/main.py
Original file line number Diff line number Diff line change
Expand Up @@ -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/<component_path>";
// 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 }) {
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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,
Expand All @@ -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:
Expand Down