Generative UI

Agent-driven UI via structured output, AG-UI streaming, and optional A2UI declarative rendering

from praisonaiagents import Agent

agent = Agent(name="ui-assistant", instructions="Reply with concise text suitable for UI cards.")
agent.start("Show me a summary card for my project")

Agents can drive rich user interfaces — from plain text streaming to typed JSON schemas to live React components — by picking the right output tier for your client.

The user chats with the agent; generative UI renders cards, forms, or charts alongside the text reply.

How It Works

Quick Start

1. Tier 1 — Structured output (recommended for APIs)

   from pydantic import BaseModel
   from praisonaiagents import Agent
   
   class Dashboard(BaseModel):
       title: str
       summary: str
       metrics: list[dict]
   
   agent = Agent(
       name="Analyst",
       instructions="Summarise sales data into a dashboard.",
       output_pydantic=Dashboard
   )
   
   data = agent.start("Summarise Q1 sales from the attached report.")
   print(data.title)
   print(data.metrics)

   Your frontend receives a typed object — map Dashboard fields to whatever React, Vue, or mobile components you already have.

2. Tier 2 — AG-UI (CopilotKit / React)

   from praisonaiagents import Agent, AGUI
   from fastapi import FastAPI
   
   agent = Agent(
       name="Assistant",
       instructions="Help users with research.",
   )
   agui = AGUI(agent=agent)
   
   app = FastAPI()
   app.include_router(agui.get_router())

   Run: uvicorn main:app --port 8002

   The agent streams text deltas and tool call events over Server-Sent Events to any AG-UI compatible frontend (CopilotKit, custom SSE client).

How It Works

Tier decision flow

Tier 0 — Markdown streaming

from praisonaiagents import Agent

agent = Agent(name="Bot", instructions="Answer questions.")
for chunk in agent.start("Tell me about AI.", stream=True):
    print(chunk, end="", flush=True)

Tier 1 — Structured output

Use output_pydantic=YourModel or output_json=True on the agent. The model formats its response to fit the schema, and you receive a validated Python object.

Tier 2 — AG-UI stream

AGUI wraps any agent and exposes a POST /agui endpoint that emits text delta and tool call events per the AG-UI protocol. Recoverable failures and progress (retry, model fallback, tool progress, todo updates) arrive as custom events named praisonai.*, and mid-stream provider errors surface as run_error. See the AGUI API reference.

Tier 3 — A2UI declarative

Requires pip install praisonaiagents[a2ui]. The agent emits A2UI JSON; platform-specific renderers (React, Flutter, Lit) turn it into native UI components.

Configuration Options

Tier 1 — Structured output parameters on Agent:

Tier 2 — AGUI constructor:

Common Patterns

Return a typed dashboard from a research agent:

from pydantic import BaseModel
from praisonaiagents import Agent

class ResearchReport(BaseModel):
    title: str
    summary: str
    key_points: list[str]
    sources: list[str]

agent = Agent(
    name="Researcher",
    instructions="Research topics and return structured reports.",
    output_pydantic=ResearchReport
)

report = agent.start("Research the impact of AI on healthcare.")
for point in report.key_points:
    print(f"• {point}")

Expose a multi-agent workflow via AG-UI:

from praisonaiagents import Agent, Agents, AGUI
from fastapi import FastAPI

researcher = Agent(name="Researcher", instructions="Research topics.")
writer = Agent(name="Writer", instructions="Write articles.")

workflow = Agents(agents=[researcher, writer])
agui = AGUI(agents=workflow)

app = FastAPI()
app.include_router(agui.get_router())

Stream output to the terminal:

from praisonaiagents import Agent

agent = Agent(name="Assistant", instructions="Be helpful.")
for chunk in agent.start("Write a poem about space.", stream=True):
    print(chunk, end="", flush=True)

Best Practices

Related