Working with the AI assistant

The editor's right pane includes a Claude-backed assistant that can read your template, edit the HTML, swap fonts, change formats, and save when you confirm. This page is how to get the most out of it.

The mental model

The assistant has tools — small, well-scoped operations it invokes one at a time:

It picks the right tool itself. You don't need to memorize them — but knowing what's available helps you write prompts that fit.

Prompts that work

Be specific about what you want, not how

✅ "Add a 'Late fee: 5%' note below the total, right-aligned, in red." ❌ "Modify the HTML to add a span with class text-red-500 after the totals row."

The model can write better HTML than your description of HTML. Tell it the intent, let it pick the markup.

Reference what's on screen

✅ "Make the customer name larger — same size as the invoice number." ✅ "Move the logo from the top-left to the top-right."

You're looking at the preview. So is the model (via read_document). Talk about what's visible.

Iterate small

Instead of dropping a 200-word brief, send 3 focused turns:

1. "Lay out an invoice with a top header (number + dates), then the billed-to/from section, then items table, then total."
2. "Add a 'PAID' badge in the top-right when paid is true."
3. "Make the section headers all caps with letter-spacing."

Each turn lets you steer. A long brief commits the model to one interpretation.

Attach images for visual references

Drop a PNG/JPEG/PDF (up to 5 MB / 25 MB respectively) into the chat. The model sees it. Great for:

• "Match this invoice style I got from a competitor"
• "Use the same color palette as this brand guide"
• "Recreate this layout but with my variables"

Patterns the assistant follows by default

Worth knowing so you understand what it's doing:

1. It calls read_document first when it doesn't already know the current state. That costs a small amount of AI credits but saves a lot of incorrect edits.
2. It prefers edit_html over replace_html. Re-emitting the whole body costs many more output tokens, and small surgical edits are reviewable in the diff sidebar.
3. It calls replace_html only for full redesigns or when scaffolding an empty body.
4. It keeps set_variables aligned with the HTML. If it adds {{customer.email}}, it also updates the sample variables so the preview renders.
5. It doesn't save automatically. You stay in working-draft mode until you confirm.
6. For canvas charts, it sets Chart.defaults.devicePixelRatio = 4 so they render sharp at print resolution.

When to use save

Save when you're happy. Until then, you can iterate freely — the working draft lives in your browser and is sent to the assistant on each turn. Refreshing the page loses the unsaved draft, so save anything you want to keep.

If you ask the assistant to "save and generate a test PDF", it calls save first, then you can hit the "Test generate" button from the editor's top bar.

Tokens, credits, and budgets

Every assistant turn debits AI credits proportionally to the tokens consumed:

• Input tokens (your message + system prompt + tool results read back)
• Output tokens (its reply + tool calls)
• Cache reads/writes (yes, even cache hits cost — they're processed)

A typical short edit ("add a paid badge") consumes a handful of credits. A full template redesign with multiple replace_html calls can easily consume several dozen. Keep an eye on the gauge in the top bar.

When to drop the assistant and go manual

It's a tool, not a religion. Reach for the keyboard when:

• You're making a trivial CSS tweak (one class change — you'll type it faster than you'll describe it)
• You're debugging a specific Handlebars expression — easier to read the code than to ask
• The change is mechanical and repetitive (renaming 12 occurrences — edit_html with replace_all: true works, but Cmd-D in the editor is instant)

Suggested first prompts for common templates

Use these as starting points, then iterate:

Next steps

• Modeling your variables → — keep the contract small once your template stabilizes.
• Designing templates that survive PDF rendering →
• Monitoring usage & credits →