Skip to main content

agents.examples.haiku_generative_ui

Haiku Generative UI example.

Demonstrates tool-based generative UI where the agent generates haiku poetry that is rendered as beautiful cards in the frontend.

The agent uses the generate_haiku tool which returns structured haiku data (Japanese + English + gradient). The frontend renders this as a card both in the chat and in the main display area.

Features:

  • Haiku generation in Japanese and English
  • CSS gradient backgrounds for visual appeal
  • Tool-based generative UI pattern
  • Carousel display in main view

This follows the same pattern as the ag-ui Dojo implementation.

generate_haiku​

@agent.tool_plain
async def generate_haiku(japanese: list[str], english: list[str],
                         gradient: str) -> str

Generate a haiku and display it in the UI.

This tool creates a haiku with Japanese text, English translation, and a beautiful gradient background. The frontend will render this as a card in both the chat and the main display area.

Arguments:

  • japanese - Array of three lines of the haiku in Japanese (5-7-5 syllables).
  • english - Array of three lines of the haiku translated to English.
  • gradient - CSS gradient string for the card background.
  • Example - linear-gradient(135deg, color1 0%, color2 100%)

Returns:

Confirmation message.