A2UI Inconsistency in response from llm

[clever ice]

When I prompt the agent with:

Render a weather dashboard using A2UI
It renders the A2UI components properly

But when I prompt it with this;

create a form using A2UI to ask user about their name email and age

It doesnt render anything

Any idea why this is happening? Is it something to do with the System instruction?

For the second prompt I am getting this error message:

[A2UIMiddleware] Failed to parse A2UI JSON string: SyntaxError: Bad escaped character in JSON at position 553 (line 1 column 554)
    at JSON.parse (<anonymous>)

[half juniper]

This solution has been AI generated

This happens because the LLM’s form response is producing malformed A2UI JSON (bad escaping and/or missing sections). Forms are more complex than dashboards and require a strict sequence and proper string escaping, so the middleware fails with “Bad escaped character.” Updating your system instructions with a concrete form example typically resolves it.

Why this happens

• JSON escaping issues: nested strings in a2ui_json (quotes/newlines) aren’t escaped correctly, causing the parse error.
• Instruction gaps: the model isn’t told the exact structure for A2UI forms (bindings and initialization).
• Complex nesting: forms must include surfaceUpdate, dataModelUpdate, and beginRendering; if any are malformed/missing, parsing fails.

Fix: strengthen your A2UI system prompt

Add a concrete, one-shot example for forms and explicit rules:

Rules for Forms

1. Send surfaceUpdate, dataModelUpdate, and beginRendering in ONE tool call.
2. Bind inputs with "text": { "path": "/form/fieldName" }.
3. Always include dataModelUpdate to initialize paths.

[
  {
    "surfaceUpdate": {
      "surfaceId": "user-info-form",
      "components": [
        { "id": "root", "component": { "Card": { "child": "form-col" } } },
        { "id": "form-col", "component": { "Column": { "children": { "explicitList": ["name-field", "email-field", "age-field", "submit-btn"] } } } },
        { "id": "name-field", "component": { "TextField": { "label": { "literalString": "Name" }, "text": { "path": "/form/name" } } } },
        { "id": "email-field", "component": { "TextField": { "label": { "literalString": "Email" }, "text": { "path": "/form/email" } } } },
        { "id": "age-field", "component": { "TextField": { "label": { "literalString": "Age" }, "text": { "path": "/form/age" } } } },

        { "id": "submit-btn", "component": { "Button": { "child": "btn-text", "action": { "name": "submit" } } } },
        { "id": "btn-text", "component": { "Text": { "text": { "literalString": "Submit" } } } }
      ]
    }
  },
  {
    "dataModelUpdate": {
      "surfaceId": "user-info-form",
      "contents": [{ "key": "form", "valueMap": [
        { "key": "name", "valueString": "" },
        { "key": "email", "valueString": "" },
        { "key": "age", "valueString": "" }
      ] }]
    }
  },
  { "beginRendering": { "surfaceId": "user-info-form", "root": "root" } }
]

Implementation note

• For custom forms, ensure the agent uses the raw send_a2ui_json_to_client tool. Prebuilt helpers (e.g., calendar/inbox) won’t cover this case.

Docs: A2UI Protocol Guide and Agent-Spec A2UI example in the repo.

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve: