# Chat Widgets

Shows images, cards and charts in chat or collects answers in a form.

- Repository: https://github.com/xerrors/Yuxi (7566 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add xerrors/Yuxi --skill chat-widgets -g -a claude-code -y`
Codex: `npx skills add xerrors/Yuxi --skill chat-widgets -g -a codex -y`
Cursor: `npx skills add xerrors/Yuxi --skill chat-widgets -g -a cursor -y`
Gemini CLI: `npx skills add xerrors/Yuxi --skill chat-widgets -g -a gemini-cli -y`

## Description

在普通聊天中直接展示图片、图文卡片和数值图表，或用简短表单收集用户回答。展示图片或截图时优先 Image/ImageGroup；图片需要配合说明、参数或比较时组合 Card、Row、Col；分类比较用柱状图，时间趋势用折线图；需要填写多个条件时用 Form、文本输入、单选和日期。按用途主动读取本 Skill，无需用户指定组件或 JSON；普通文字回答保持 Markdown。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 对话组件

## 普通聊天的直接响应

按用户目的选结构，先完成数据获取工具，再在最终回复中输出下列对应模板，替换全部示例文字、数据和图片地址：

| 用户目的 | 最终回复 |
|---|---|
| 给出分类数值，希望直观比较、查看主要占比 | 简短结论 + Card 中的柱状图 + 单位与来源 |
| 展示一张或多张图片 | 单张以 Image 为根，多张以 ImageGroup 为根；短语用 Image.caption 放在左下角 |
| 图片需要配合说明或比较 | Card 内用 Row、Col 组合 Image 与文字 |
| 需要用户填写几个条件再继续 | Card 中的 Form，按需放文本输入、单选、日期和提交按钮 |

这些短请求直接在回复里呈现内容即可。组件无需创建文件、执行脚本或更新待办。每个模板的开头是三个反引号紧接 `widget`，结尾是三个反引号。协议使用 Markdown 围栏，`<widget>` 标签不会被渲染。所有要展示的围栏放在最后一次工具调用之后的最终回复中，用户才能在正式消息里看到它。

### 分类比较模板

```widget
{
  "type": "Card",
  "size": "full",
  "children": [
    {
      "type": "Title",
      "value": "阅读时长对比"
    },
    {
      "type": "Caption",
      "value": "示例数据 · 单位：分钟"
    },
    {
      "type": "Chart",
      "label": "四类阅读时长",
      "xAxis": "activity",
      "data": [
        {
          "activity": "论文",
          "minutes": 120
        },
        {
          "activity": "技术文档",
          "minutes": 80
        },
        {
          "activity": "笔记",
          "minutes": 45
        },
        {
          "activity": "网页",
          "minutes": 60
        }
      ],
      "series": [
        {
          "type": "bar",
          "dataKey": "minutes",
          "label": "阅读时长"
        }
      ]
    }
  ]
}
```

分类和数值逐项对应用户数据。模板中的 activity、minutes 都是示例数据列名；数据列改名时，同步修改 xAxis 和 series[].dataKey。时间趋势使用 line，xAxis 引用实际日期列名。字段对应关系按下文“图表与图片组合”校验。

### 图片优先展示

用户主要想看图片时，单张直接使用 Image，多张使用 ImageGroup，让图片紧接简短引导出现。caption 是可选短语，叠放在图片左下角；没有短语时只显示图片。

```widget
{
  "type": "Image",
  "src": "https://example.com/replace-with-real-image.jpg",
  "alt": "用户提供的户外风景图片",
  "caption": "周末去户外"
}
```

纯图片展示优先合并为一个 ImageGroup，children 只放 Image。前端使用统一 5:4 缩略图横向排列，窄屏可横向滑动，点击查看完整图片并切换。需要每张图对应说明、参数或对比时，使用下面的图文组合；Image 和 ImageGroup 都可以放在 Card、Row、Col 内。

The rest: https://github.com/xerrors/Yuxi/blob/HEAD/backend/yuxi/modules/extensions/skills/builtin/chat-widgets/SKILL.md