Skip to content
Get packs

Chat Widgets for Inline Display

Lets the agent show images, cards, bar/line charts and input forms directly inside chat replies

Source Download skill
Repository
xerrors/Yuxi
Stars
7,576
Licence
MIT
Files
1 file

What it does

When installed, the agent answers ordinary chat requests with visual widgets instead of plain text only. It can show one image or a gallery of images, put images beside explanatory text in a card, draw bar or line charts from numbers it already has, and present a short form that collects the details it needs before continuing. The skill is a set of formatting rules and JSON templates; the chat front end renders them. Plain text answers stay as Markdown.

Great for

  • People who want charts or image galleries inside a chat answer rather than in a separate file
  • Users comparing categories or viewing a trend who want a quick visual
  • Teams building a chat interface that supports the Yuxi widget format

Skip it if

  • Tasks that need a real file, spreadsheet or saved report, since the skill says widgets need no files or scripts and only render in chat
  • Chat clients that do not render this widget fenced-JSON format, where the output will appear as raw code blocks
  • Sensitive data displayed in charts or forms, because the widget content is shown in the conversation and form submissions are sent back as messages

Try asking

  • “Compare reading time across four activities and show the result as a bar chart”
  • “Show these two photos side by side with a short description of each”
  • “Display the generated images as a gallery with captions”
  • “Ask me for my travel destination, date and pace in a short form before planning”
Step-by-step guide: how to use Chat Widgets for Inline DisplayInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    chat-widgets.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip chat-widgets.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip chat-widgets.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent real data or image URLs; the templates are placeholders and the skill says to show only existing or clearly labelled sample data
  • Ask for a chart or gallery explicitly in the final answer, since widgets placed only before tool calls may not be seen by the user
  • Check that the target chat app renders the widget fence before relying on it

What's inside

  • SKILL.md

Redistributed unmodified from xerrors/Yuxi under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.