受限生成式界面

Generative UI / Component Registry

把结构化结果映射成已注册的卡片、图表或表单。

对比

交互预览实时预览

从已注册组件中渲染

核对官方来源

状态：已完成（示例）

从明确注册的组件与属性渲染，不执行生成的代码。

从已注册的视图中切换

使用代码安装指南 ↗

app.mjs

import { mount } from '@sofish/ui/browser';

const view = mount(
  document.querySelector('#example'),
  'generative-ui'
);

view.element.addEventListener('ui:change', event => {
  console.log(event.detail.value);
});

// view.update({ ...nextProps });
// view.destroy();

什么时候用

数据需要交互展示，并且可用组件及动作有明确边界。

什么时候不用

不要把模型生成的任意代码直接视为可信应用界面。

COMPONENT API

属性与事件

传入业务数据，通过事件连接你的应用。

属性	默认值
`label`	`"从已注册组件中渲染"`
`value`	`"task"`
`views`	`[{"id":"task","label":"任务视图","component":"alert","props":{"title":"核对官方来源","description":"状态：已完成（示例）"}},{"id":"decision","label":"决策视图","component":"a`
`note`	`"从明确注册的组件与属性渲染，不执行生成的代码。"`