---
name: tweak
description: Makes small edits to an existing widget — change a label, value, color, badge, or list item — and re-displays it instantly, without a 20-60s regeneration. Use when the user asks to adjust, fix, restyle, or update part of a widget that was already generated or exists as JSON.
---

# Tweak a widget

For **small** changes to an existing widget: text, values, colors, badges,
adding/removing a list item. No generator round-trip.

For **structural** changes (different layout, new sections, another widget
kind), use `/widget-studio:make` instead — regenerate with a fuller prompt.

## Steps

1. **Get the current widget JSON.** In order of preference: the `widget` field
   of the most recent `generate_widget`/`display_widget` result in this
   conversation; a saved `--out` JSON file; or ask the user where it is.
   When saving an edited copy, keep only `{"name", "widget"}` — drop sibling
   `state`/`template`/`widgetJSX` fields, which still hold pre-edit values and
   would silently revert the tweak if anything re-hydrates from them.
2. **Edit the tree.** Component and prop schema:
   [../make/references/chatkit-widgets.md](../make/references/chatkit-widgets.md).
   Edit the hydrated `widget` tree, not the `state` object — the tree is what
   renders. Keep the edit minimal; don't reformat untouched nodes.
3. **Re-display.**
   - MCP tools available: call `display_widget` with the edited tree serialized
     as a JSON string (instant;
     inline UI or PNG handled automatically).
   - Otherwise: `widget-render --in edited.json --png widget.png` and show
     the PNG (CLI location and variants: `/widget-studio:preview`).
4. **Verify** the render before presenting: the change is applied, and nothing
   else moved.

## Common edits

- Status change: `Badge` → `label` + `color` (`success`/`warning`/`danger`/`info`).
- Recolor an accent: `background` on the accent `Box`, e.g. `"blue-500"` → `"green-500"`.
- Progress bars: two sibling Boxes with numeric `flex` ratios — adjust both so
  the ratio matches the new fraction.
- Theme: `"theme": "dark"` on the root Card forces dark; removing it follows
  the host theme.