Pro + AI plan only. The brand kit agent is a Claude-powered assistant that can read your kit files, propose edits, and write changes back, all inside a chat panel in the kit editor. It is metered against the AI credits you have purchased as top-ups; there is no monthly AI allowance.

If you are on the free plan or Pro (no AI), the agent panel is hidden. See Credits and billing for how to subscribe to Pro + AI and how top-ups work.

Where it lives

Open any project's kit editor (/projects/{id}/kit). On Pro + AI you see a right-rail panel titled "Brand kit agent" with:

• A budget chip at the top showing your current top-up balance.
• A "Top up" link next to the chip, plus a "Clear" link to reset the saved conversation.
• A transcript area in the middle. The conversation is persisted per project: refreshing the page brings it back, and prior turns are replayed to the agent so it remembers what you were working on.
• A compose box at the bottom with a Send button. Above the compose box is a small estimate line ("Est. ~X input tokens for this turn.") that turns ember when a turn is unusually expensive.

[Screenshot: the kit editor with the agent panel on the right, mid-conversation, showing a tool block expanded.]

Send a message

1. Type your request into the compose box (placeholder text: "Describe what to change (Cmd/Ctrl+Enter to send)").
2. Press Cmd+Enter or Ctrl+Enter, or click "Send".

The Send button is disabled while the agent is working. A Cancel button appears next to it.

What works well:

• "Change the body background to a soft mint green."
• "The brand bar feels heavy. Make it half the current height and use a lighter accent."
• "Add a footer with my company name in small grey text."
• "Read kit.css and tell me which colours are hardcoded versus using a variable."

What does not work:

• Uploading images. The agent cannot create binary files. Upload logos and backgrounds yourself from the Assets section.
• Editing your project's markdown content. The agent only touches the kit.

What you see while it runs

As the agent works, the transcript fills in three kinds of blocks:

• Assistant text: ordinary chat. The agent explains what it is about to do.
• Tool blocks: a collapsible row labelled with the tool name (read_file, write_file, list_files, preview) and a running... indicator while in flight, or error if the tool failed. Click the arrow to expand and see the tool input plus its output.
• Usage chips: a small line under the most-recent bubble showing the input and output token counts for that round trip.

When the turn finishes you see a divider with the stop reason and, if the agent wrote anything, the list of files it changed (for example: "Turn complete (end_turn). Files changed: kit.css, kit.json").

Files are updated live

When the agent writes to kit.css (or kit.json, scaffold.html), your editor refreshes to show the new contents and the preview iframe re-renders. You see the change happen in real time.

If you do not like the result, revert it: open the History drawer in the kit editor header and revert to the snapshot from before the agent edit, or just type your own follow-up to the agent ("undo that, keep the previous background instead").

Cancel mid-turn

Click Cancel while the agent is streaming. The stream stops within a second. Anything the agent already finished (e.g. a write_file that already saved) stays. Tokens already used are charged; partial work that did not save is dropped.

When budget runs out

The budget chip at the top of the agent panel shows your top-up balance. Every turn drains it; when it reaches zero, a lockout modal opens with a "Top up" CTA. Click it to add credits. While the lockout is active, the Send button stays disabled.

See Credits and billing for how top-ups work.

Self-contained rule

The agent is required to keep the kit self-contained. That means: no remote stylesheets, no remote scripts, no remote fonts. If you ask it to "add a Google Fonts import for Inter", it will refuse and propose an alternative (for example, inlining the font as base64 or sticking with a system font stack). This is intentional. Published pages need to render with the network off.

Etiquette

• Be specific. "Make it look modern" gives mediocre results. "Reduce the brand bar height by half and switch the accent to teal" gives much better results.
• Iterate. Send one or two changes at a time, look at the preview, then send the next. Bigger asks cost more credits and produce less predictable results.
• Use named drafts as save points. Before a big experimental ask, "Save draft" with a name like pre-experiment. If the result is wrong, revert from History.