> ## Documentation Index
> Fetch the complete documentation index at: https://docs.myrmagent.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 交互式 UI（render_ui）

> 通过 A2UI v3.1 在对话内渲染表单、表格与图表。

# 交互式 UI（`render_ui`）

Myrm 提供**声明式 UI 工件**链路：Agent 调用 `render_ui` → Server 推送 `UI_UPDATE` SSE → WebUI 在对话内渲染可交互组件。

## 启用方式

1. 在聊天中打开 **Agent 配置**。
2. 开启 **交互式 UI**（`render_ui`）。
3. 首次在有 workspace 的场景运行时会自动 seed `.agent/docs/A2UI_REFERENCE.md`（完整 props 手册）。

Turn1 工具描述约 **223 token**（瘦 docstring）；完整组件 props **不会**常驻 prompt。

## A2UI v3.1 要点

| 主题       | 行为                                                                                                                          |
| -------- | --------------------------------------------------------------------------------------------------------------------------- |
| 组件白名单    | **23** 种 `UIComponentType`（前后端枚举 SSOT）                                                                                      |
| 渐进式 spec | 简单 UI（text + field + button）无需额外读取；**table / chart / tabs** 或 **3+ 组件** 前应 `file_read_tool` `.agent/docs/A2UI_REFERENCE.md` |
| 校验       | **fail-closed** — 未知 `type`、空 `components`、无效图（`root_ids`/`children`）、非法 `actions` 均返回结构化错误，禁止静默跳过                          |
| 用户操作     | 按钮/表单提交以 `UIActionEvent` 回传 Agent 继续执行                                                                                      |

## 投递链路（SSE）

工具可能在 LangGraph 子 asyncio 任务中执行，此时 `ArtifactContext` 的 ContextVar 不可见。Myrm 按 assistant `message_id` stash UI 工件（run 级绑定 + post\_run 弹出），确保 **`UI_UPDATE` SSE** 在 `MESSAGE_END` 前到达 WebUI。由集成 wiring 测试与 **真实 LLM agent-stream E2E**（关键路径无 mock）覆盖。

## JSON 结构（邻接表）

```json theme={null}
{
  "title": "反馈表单",
  "components": [
    {"id": "t1", "type": "text", "props": {"text": "请评价本次运行"}},
    {"id": "f1", "type": "text_field", "props": {"label": "备注"}, "bindings": {"value": "$.form.comment"}},
    {"id": "b1", "type": "button", "props": {"label": "提交"}, "events": {"onClick": "submit"}}
  ],
  "root_ids": ["t1", "f1", "b1"],
  "data": {"form": {"comment": ""}},
  "actions": [{"id": "submit", "type": "submit", "label": "提交"}]
}
```

## 竞品对比

| 产品                             | 对话内生成式 UI                                              |
| ------------------------------ | ------------------------------------------------------ |
| **Myrm**                       | 23 种 typed 组件 + SSE 工件 + 渐进 spec + fail-closed         |
| OpenClaw / Codex / Claude Code | 无一等公民对话内表单渲染                                           |
| CopilotKit AG-UI               | Web 协议 catalog（约 19 基础控件）；无 workspace spec seed + 枚举门禁 |
| Hermes                         | 文本建议为主；无结构化 chat UI 工件                                 |

简单澄清问题请优先 `ask_question_tool`，不必搭完整 UI。

另见：[Agent 配置 — 工具加载策略](/docs/zh/core-concepts/agent-configuration)。