---
title: "回答里的界面（OpenUI）"
description: "Peri 的 Web 会话可以把模型输出的 OpenUI 程序渲染成指标卡、表格和图表；本文说明它在哪里生效、长什么样，以及当前限制。"
---

> Documentation Index
> Fetch the complete documentation index at: https://konghayao.github.io/peri-cool/llms.txt
> Use this file to discover all available pages before exploring further.

# 回答里的界面（OpenUI）

## 是什么

OpenUI 是 Peri 的一种助手输出格式。模型不再只写 Markdown，而是给出一段声明式程序，客户端把它渲染成指标卡、表格、图表、任务清单等界面。

同一段程序在 Web 会话里是界面，在终端（TUI）里仍是文本。这是两端渲染能力的差异，不是模型输出的差异。

## 什么时候会出现

Peri 判断「表格或图形比长段文字更容易读」时会使用 OpenUI，常见场景：

1. 多指标汇总：订单量、退款率、准时率并排展示。
2. 结构化明细：按城市、模块或版本对照的数据表。
3. 趋势与分布：折线图、柱状图、饼图。
4. 任务状态：清单、进度、改动文件列表。

是否输出 OpenUI 由模型决定；你可以直接要求「用 Markdown 回答」来得到纯文本。

## 示例

下面的面板由本页直接渲染，数据是演示用的，不是真实会话：

**示例：三项指标**

```text
root = Stack([headline, metrics, basis])
headline = H2("本周处理量上升 12%")
metrics = Grid(3, [orders, refunds, onTime])
orders = Stat("2,702", "订单量", "success")
refunds = Stat("34", "退款单", "warning")
onTime = Stat("96.4%", "准时率", "info")
basis = Text("来源：演示数据；对比前 7 天。", "secondary", "small")
```

本页使用的是 Peri Web 客户端同一套渲染器，水合后配色跟随站点明暗主题；水合完成前显示服务端生成的浅色静态版本。

## 怎么用

不需要手动写 OpenUI 程序。你描述任务，Peri 自行决定是否输出。对话形态如下：问题在上，助手回复在下，面板直接嵌在回复里。

**你**

把上周各城市的订单、退款和准时率整理一下，能对比的用表格。

**Peri**

下面按城市汇总。数据为演示。

**示例：按城市汇总**

```text
root = Stack([table, note])
table = Table(["城市", "订单", "退款", "准时率"], [
["上海", "842", "11", "97.1%"],
["深圳", "715", "9", "96.8%"],
["成都", "503", "14", "94.2%"]
])
note = Text("演示数据；对比前 7 天。", "secondary", "small")
```

字段或排序可以继续追问，Peri 会输出新的程序替换这一块。

对话排版是静态的，只用于展示形态；面板与真实会话使用同一个渲染器。

## 限制

1. 目前只有 Web 会话渲染 OpenUI；TUI 会把程序按原文显示。
2. 本页是静态展示，表单控件和按钮处于禁用状态，点击不会回传到对话；对话示例也只是排版，不是可交互会话。
3. 程序必须完整并通过校验；解析失败时客户端回退显示原文，不会白屏。
4. 界面由服务端渲染为静态 HTML；关闭 JavaScript 时仍能看到界面，但无法交互（本页控件本来也处于禁用状态）。
5. 卡片和图表使用 OpenUI 自带的配色令牌，不会逐项套用站点的 `--nb-*` 样式。

Source: https://konghayao.github.io/peri-cool/docs/features/openui/index.mdx