Create charts and interactive artifacts with Widget
Turn project material into charts, diagrams, mockups, or small tools, then check their content and behavior.
Core capabilitiesTurn data into a viewable artifact#
Use @Widget for charts, diagrams, interface sketches, and small interactive tools. The result appears in the conversation and can expand into the adjacent Widget panel for inspection and further changes.
This example creates a three-month ticket chart. All data is included, so no attachment is required.
Prepare the example data#
These are tutorial examples, not real business statistics. The unit is tickets.
month,tickets
2026-04,42
2026-05,58
2026-06,50
The expected total is 150. The highest month is 2026-05, with 58 tickets. Use these values to verify the result instead of judging only its appearance.
Create your first Widget#
Type @ in the composer, select Widget, and paste this complete task:
Create a ticket-volume Widget using all of this data:
month,tickets
2026-04,42
2026-05,58
2026-06,50
Show a column chart sorted by month and a table of the same data.
Title it "Three months of tickets". Use tickets as the unit and start the axis at 0.
Label every column with its raw value. Show the total and highest month.
Label the source: "Onevium tutorial example data, not real business statistics".
Add an "All months / April and June only" switch; update the chart and total together.
Do not connect to external data APIs, invent other months, or make forecasts.
After generation finishes, inspect the inline artifact. Hover above it and click Expand to view the larger result in the Widget panel.
Verify the data and interaction#
| Action | Expected result |
|---|---|
| Show all months | Three columns and table rows with 42, 58, and 50; total 150 |
| Check the highest month | 2026-05, with 58 tickets |
| Switch to April and June only | Only 42 and 50 remain; total 92, not the previous 150 |
| Switch back to all months | All three months and the original total return |
| Check title, unit, and source | They match the request and explicitly identify example data |
If the switch does not change the chart or numbers, the interaction has not passed. A static appearance is not proof that filtering works.
Refine it in the same conversation#
For example, send:
Keep all data and filter logic in the Widget you just created.
Display the months as April, May, and June, and add a percentage-of-total column to the table.
Calculate percentages for the current filtered selection, with one decimal place.
Do not change the raw ticket counts or the example-source label.
Test the switch again to confirm that totals and percentages update together. For precise changes, identify the Widget title, the relevant label, and its intended replacement.
A plain SVG artifact persisted in a conversation may offer Edit, which opens a canvas with automatic saving. HTML and template-based charts do not all support the same canvas editor; continue requesting changes in the conversation for those formats.
Enlarge and edit a Mermaid diagram#
Mermaid describes a diagram as text and renders it in the conversation. For a small practice task, ask:
Show a Mermaid flowchart for this example documentation workflow:
Receive request → Draft → Review → Publish.
Keep the four steps in that order. This is an illustration, not an executed workflow.
- When the diagram has finished rendering, click it or Enlarge diagram. Zoom and drag to inspect the labels and connections.
- Choose Open in canvas on the diagram or its enlarged view. The panel shows Mermaid source alongside a preview; a narrow panel stacks them.
- Change the label
ReviewtoReview and verify links. Wait for the preview to render correctly, then click Save diagram. - Confirm Saved, return to the original conversation, and check that only the intended label changed. Reopen the diagram to confirm the saved source.
Save diagram updates the Mermaid block in its original conversation message. It does not create a project file, and it is separate from the automatic saving used by the SVG canvas. To keep a project copy, ask the assistant to save the Mermaid source as a named .mmd file and verify that file.
If the panel says Preview only: the original message could not be identified, it cannot edit or save back to a message. If saving fails because the original diagram may have changed, copy your edited source before leaving, reopen the current diagram, and compare the changes before trying again. Do not treat the visible preview as proof that saving succeeded.
Configure diagram types and content#
Open Settings → Tools → Charts and interactive content → Configure. Turn on the tool group first if Configure is unavailable. This dialog separates three choices:
| Choice | What it controls |
|---|---|
| Common and more diagram types | The Mermaid types described to the model, such as Flowchart, Sequence, ER, or Gantt; choose the types your task needs |
| Interactive content | Guidance modules for HTML controls, Chart.js charts, UI mockups, SVG illustrations, simple diagrams, and Drawio swimlanes |
| Prompt detail level | Lean, Balanced, or Rich changes the detail of the generation instructions; it is not image resolution or a diagram zoom setting |
For the ticket example above, keep Charts (Chart.js) and Interactive controls (HTML) available. For the Mermaid practice task, enable Flowchart. These settings guide subsequent generation; they do not redraw existing conversation artifacts.
Selecting no Mermaid types removes Mermaid guidance, but enabled SVG or HTML modules can still support other visual outputs. Some additional diagram types have fixed-theme or dependency notes, and syntax errors in these types may require manual correction. Check the type’s note and the actual preview before saving. See the Tools settings reference for broader tool controls.
Copy an image, download, or retain source#
The completed Widget artifact's toolbar offers Copy image and Download. These export an image; the download is PNG. They do not automatically provide editable HTML or SVG source.
To retain an editable version, ask separately:
Save this Widget's editable source as artifacts/tickets-widget.html in this project.
Preserve the example data and filtering behavior, and return the actual file path.
If the artifact is not HTML, first explain its format and an appropriate way to save it.
Do not publish it to a website.
Verify that the file exists and opens again. Automatic saving in the SVG canvas updates the conversation artifact; it does not by itself create a project file.
Troubleshoot a Widget#
| Symptom | What to do |
|---|---|
| There is no artifact to expand | Check whether the tool finished and returned a Widget rather than just a code explanation |
| Numbers are incorrect | Repeat the dataset and calculation rules. Fix logic before adjusting appearance |
| A filter does nothing | Specify the action and expected result, such as “April and June only should total 92” |
| There is no Edit button | Check the artifact type. Request edits in the conversation rather than assuming every type supports the SVG canvas |
| The downloaded result is not interactive | PNG is a static image. Save and open editable source when you need interaction |
| Mermaid Save diagram is unavailable | Check that the panel identifies the original message, the source has changed, and the preview is valid |
| Mermaid saving fails | Copy the edited source before leaving; reopen the original diagram and compare its current content |
Next steps#
See the tools menu for other capabilities. Verify real web-data sources with the browser, and inspect source files and changes using files, terminal, and Review.