Guide · Agent skill
How to use the Chat Widgets agent skill: inline images, charts and forms
Updated · written with AI from the project's own documentation and checked against our catalogue data
The chat-widgets skill, published in the xerrors/Yuxi repository under the MIT licence, lets an agent answer ordinary chat requests with visual elements: a single image or a gallery, an image beside explanatory text in a card, a bar or line chart built from numbers it already has, or a short form that collects details before it continues. This guide explains what the skill changes, how to install it, how to trigger it, and where it does not fit. You will be able to install it, ask for a chart or image set in plain language, and check whether your chat client will display the output correctly.
Chat Widgets for Inline Displayxerrors/Yuxi · MIT Download the skill Quick start
- 1Download the ZIP. Get the chat-widgets ZIP from the skill's page on this directory and unzip it so that SKILL.md is in the folder.
- 2Place the folder. Move it to ~/.claude/skills/ for personal use, or to the .claude/skills/ folder of a single project.
- 3Or upload it in the apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Ask for a visual. Make a plain request such as a chart comparing categories, a set of photos, or a short form to fill in.
- 5Check the final reply. Confirm the chart, images or form appear in the final answer, not only in a progress message.
- 6Replace placeholder sources. If an image or chart shows example data or placeholder links, supply the real source and ask for it to be redrawn.
What the skill makes the agent do
Without the skill, an agent answers in plain text. With it, the agent picks a visual structure that matches your goal and places it in the final reply. The skill is a set of formatting rules and JSON templates; the chat front end renders them. Plain text answers stay as Markdown.
The skill covers four cases: showing images, combining images with explanation or comparison, comparing categories or trends with a chart, and collecting several answers with a form.
- Images: one image uses a single Image; several images use an ImageGroup shown as a row of thumbnails.
- Image with text: a Card can hold an image next to a title and notes, arranged with Row and Col.
- Charts: bar charts for comparing categories, line charts for trends over time.
- Forms: text inputs, single-choice radio buttons, date pickers and a submit button.
Install the chat-widgets skill
Download the ZIP from the skill's page on this directory and unzip it. The skill is a single file, SKILL.md, so the folder you unzip should contain that file.
For personal use across projects, place the unzipped folder in ~/.claude/skills/. For one project only, place it in that project's .claude/skills/ folder.
In the Claude apps you can instead upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: the .claude/skills/ folder inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need to name the skill, a component or any JSON. The skill is meant to be read on its own when the purpose of a request matches it. Ask for what you want to see or fill in.
Ordinary text questions still get normal Markdown answers, so you do not need to suppress the widgets for every question.
- Compare categories: "Compare how many minutes I spent on papers, documentation, notes and web pages, as a chart."
- Show images: "Show me the three photos from the folder as a gallery."
- Explain a visual difference: "Put these two room photos side by side with a short note on the light in each."
- Collect details: "Ask me for the destination, date and pace before planning my trip."
Check the output and what it needs
The skill itself lists no required tools, runs no scripts and makes no network calls. Its templates are fenced blocks labelled widget that contain strict JSON. The widget content appears in the conversation, and the skill states that the components are rendered by the chat front end.
Widgets only appear in the final reply. Any widget written before a tool call may not be visible to you, so ask the agent to put the finished result in its final answer if a chart or image seems missing.
Images may be given by HTTPS or same-origin URLs, or by a sandbox absolute path. The skill uses placeholder examples that the agent should replace with real sources you provide or that it has confirmed exist.
- Requirements listed: none
- Runs scripts: no
- Uses network: no
- Files: SKILL.md only
Safety notes before you use it
Widget content is shown in the conversation. Do not put sensitive data into charts, images or forms unless you are comfortable with it appearing in the chat.
Form submissions are sent back to the conversation as a message. The skill says a submission first checks required fields and date ranges, then sends the field labels and values as one user message for the model to continue from.
- Avoid private figures in charts if the chat may be shared.
- Remember that form answers become part of the conversation.
- Widgets render only in clients that support this widget fenced-JSON format.
Tips for better results
Say what the visual is for. A request for a trend should mention time, and a request for a comparison should name the categories. The skill chooses bar charts for categories and line charts for trends.
Give real image sources or describe the images. The skill says alt text and captions follow your description until the agent has actually read the image.
- Name the unit you want, such as minutes or dollars, so the chart caption can state it.
- Ask for a single gallery rather than many separate images when you only want to browse.
- If a form asks for too much, say which answers you already have so it does not repeat them.
What people use it for
- Comparing time spent across several activities in a single bar chart.
- Showing a trend, such as daily values over a month, as a line chart.
- Displaying a gallery of generated or supplied images in one answer.
- Placing two photos side by side with a short comparison note.
- Collecting a destination, date and preference before the agent builds a plan.
Frequently asked questions
What is the chat-widgets agent skill?
It is a skill from the xerrors/Yuxi repository that tells an agent to answer chat requests with images, image cards, bar or line charts and short forms. The skill is a SKILL.md file of formatting rules and JSON templates, and the chat front end renders the output.
Is the chat-widgets skill free?
The skill is published under the MIT licence. This page does not list prices, so check the source repository for any terms beyond the licence.
What do I need to run chat-widgets?
The listing shows no required tools, no scripts and no network use. You do need a chat client that renders the widget fenced-JSON format, otherwise the output appears as raw code blocks.
Where do I install the skill folder?
Put it in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings, Capabilities, Skills.
Why does my chart not appear?
The widget may have been written before a tool call, and only the final reply shows it. Ask the agent to include the finished widget in its final answer. If you see raw code blocks, your chat client does not support this format.
When should I use a different tool instead?
Use another approach when you need a real file, a spreadsheet or a saved report, because the skill says widgets need no files and only render in chat. It is also a poor fit if the chart would show sensitive data, since widget content is visible in the conversation.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use chat-widgets if you want charts, image galleries or short forms inside a chat answer and your chat client renders this widget format. Pick something else if you need saved files, spreadsheets or reports, or if your client only shows plain Markdown.
Download the skill