AgentNexus Documentation
UI Components

UI Components

UI Components

AgentNexus includes a powerful UI component system that allows you to create rich, interactive agent interfaces directly from Python. These components handle rendering, user interaction, state management, and event processing.

Available Components

Form Components
Interactive data collection forms
Table Components
Tabular data display with interactions
Code Editor Components
Code editing with syntax highlighting
Markdown Components
Formatted text display
Custom Components
Creating your own components

Key Benefits

AgentNexus UI components offer several advantages:

  • Declarative Syntax: Define UI components directly in Python
  • Event Handling: Built-in system for handling user interactions
  • State Management: Automatic state preservation across interactions
  • Dynamic Updates: Update components based on agent responses
  • Workflow Integration: Seamless integration with multi-step workflows
  • No Frontend Code: Create rich interfaces without JavaScript or HTML

Component Architecture

All AgentNexus UI components follow a consistent architecture:

  1. Component Definition: Python objects defining structure and behavior
  2. Event System: Handlers for user interactions
  3. State Management: Properties that define component appearance and behavior
  4. Update Mechanism: System for modifying components based on agent responses

Basic Example

Here’s a simple example of defining and using a form component:

from agentnexus.ui_components import FormComponent, FormField
from agentnexus.base_types import UIComponentUpdate, WorkflowStepResponse

# Define a form component
user_form = FormComponent(
    component_key="user_form",
    title="User Information",
    form_fields=[
        FormField(
            field_name="name",
            label_text="Full Name",
            field_type="text",
            is_required=True
        ),
        FormField(
            field_name="email",
            label_text="Email Address",
            field_type="email",
            is_required=True
        )
    ],
    event_handlers={
        "submit": handle_form_submit
    }
)

# Define an event handler
async def handle_form_submit(
    action: str,
    data: Dict[str, Any],
    component_key: str,
    **kwargs
) -> WorkflowStepResponse:
    """Handle form submission."""
    # Extract form values
    values = data.get("values", {})
    name = values.get("name", "")
    email = values.get("email", "")

    # Return response with UI updates
    return WorkflowStepResponse(
        data={"status": "form_submitted"},
        ui_updates=[
            UIComponentUpdate(
                key="status_display",
                state={"markdown_content": f"Thank you, {name}!"}
            )
        ],
        context_updates={
            "user_name": name,
            "user_email": email
        }
    )

Component Integration

Components are typically used in two ways:

In Workflows 

@workflow_step(
    agent_config=my_agent,
    workflow_id="user_registration",
    step_id="collect_info",
    name="Collect User Information",
    ui_components=[user_form, status_display]
)
async def handle_user_info_step(input_data) -> WorkflowStepResponse:
    # Workflow step implementation
    # ...

In UI-Driven Actions 

@agent_action(
    agent_config=my_agent,
    action_type=ActionType.CUSTOM_UI,
    name="Interactive Registration",
    description="Interactive user registration form",
    ui_components=[user_form, status_display]
)
async def interactive_registration(input_data) -> UIResponse:
    # Action implementation
    # ...

Next Steps

Form Components →

Learn about creating interactive forms for data collection.

UI Concepts →

Review core concepts of the UI component system.