The Challenge: LLMs are great at poetry, but bad at structured JSON. The Solution: Give them a grammar book (Schema) and a translator (Validation).

This guide shows you how to turn a standard “Chatbot” into a “UI Generator”.

1. The “System Prompt” Strategy

The most reliable way to get A2UI output is to inject the instructions directly into the System Prompt.

The Anatomy of a UI Prompt

You need to tell the LLM three things:

Identity: “You are a helpful assistant…”
Capability: “You can render UI components using the a2ui tool…”
Grammar: “Here is the exact JSON structure you must follow…“

SYSTEM_PROMPT = """
You are a travel assistant.
If the user asks for flights, DO NOT send a text list.
Instead, generate a JSON object using the 'flight-list' schema:

{
  "type": "flight-list",
  "data": { "flights": [...] }
}
"""

2. Tool Use vs. Generation

There are two ways to generate UI:

Approach A: Tool Calling (Recommended)

Define a render_ui tool. The LLM calls the function, and your backend handles the JSON construction.

Pros: 100% valid JSON (guaranteed by the SDK).
Cons: Slower (extra round trip).

Approach B: Direct Streaming (Fastest)

Ask the LLM to output raw JSON directly in the stream.

Pros: Instant “Streaming” UX.
Cons: LLM might make syntax errors (e.g., missing comma).

3. Validation is Mandatory

Never trust the AI. It will eventually “hallucinate” a closing bracket. Always validate the output before sending it to the client.

import jsonschema

def validate_and_send(ai_response):
    try:
        jsonschema.validate(instance=ai_response, schema=A2UI_SCHEMA)
        client.send(ai_response)
    except Exception:
        client.send({ "type": "error", "message": "I tried to draw a UI but failed." })

4. Google ADK Example

Using the Google Agent Development Kit, you can bind the schema automatically.

from google.adk.agents import Agent

agent = Agent(
    name="restaurant_booker",
    instruction="Use the `show_restaurant` tool to display results.",
    tools=[show_restaurant_tool] 
)