[{"data":1,"prerenderedAt":606},["ShallowReactive",2],{"guide-\u002Fdocs\u002Fguides\u002Fauthoring\u002Fworking-with-ai":3,"guides-all":535},{"id":4,"title":5,"body":6,"category":524,"description":525,"extension":526,"icon":527,"meta":528,"navigation":529,"order":530,"path":531,"seo":532,"stem":533,"__hash__":534},"guides\u002Fdocs\u002Fguides\u002Fauthoring\u002Fworking-with-ai.md","Working with the AI assistant",{"type":7,"value":8,"toc":505},"minimark",[9,13,17,22,30,145,148,152,157,160,167,171,174,180,184,187,204,207,211,214,226,230,233,292,298,301,312,316,323,334,340,365,369,372,402,406,409,473,477],[10,11,5],"h1",{"id":12},"working-with-the-ai-assistant",[14,15,16],"p",{},"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.",[18,19,21],"h2",{"id":20},"the-mental-model","The mental model",[14,23,24,25,29],{},"The assistant has ",[26,27,28],"strong",{},"tools"," — small, well-scoped operations it invokes one at a time:",[31,32,33,46],"table",{},[34,35,36],"thead",{},[37,38,39,43],"tr",{},[40,41,42],"th",{},"Tool",[40,44,45],{},"What it does",[47,48,49,61,71,81,91,101,115,125,135],"tbody",{},[37,50,51,58],{},[52,53,54],"td",{},[55,56,57],"code",{},"read_document",[52,59,60],{},"Reads the current state — body, fonts, variables, format.",[37,62,63,68],{},[52,64,65],{},[55,66,67],{},"edit_html",[52,69,70],{},"Targeted find\u002Freplace inside the body. The cheap operation.",[37,72,73,78],{},[52,74,75],{},[55,76,77],{},"replace_html",[52,79,80],{},"Replaces the entire body. Expensive — for full redesigns only.",[37,82,83,88],{},[52,84,85],{},[55,86,87],{},"set_framework",[52,89,90],{},"Picks the CSS framework (Tailwind \u002F Bootstrap \u002F UIKit \u002F None).",[37,92,93,98],{},[52,94,95],{},[55,96,97],{},"set_page",[52,99,100],{},"Changes format (A1–A6) and\u002For landscape.",[37,102,103,112],{},[52,104,105,108,109],{},[55,106,107],{},"add_font"," \u002F ",[55,110,111],{},"remove_font",[52,113,114],{},"Manages the Google Fonts attached to the document.",[37,116,117,122],{},[52,118,119],{},[55,120,121],{},"set_variables",[52,123,124],{},"Updates the sample variables used by the live preview.",[37,126,127,132],{},[52,128,129],{},[55,130,131],{},"save",[52,133,134],{},"Persists everything to the database.",[37,136,137,142],{},[52,138,139],{},[55,140,141],{},"get_integration_docs",[52,143,144],{},"Returns the curl\u002FHTTP integration snippet for this exact document.",[14,146,147],{},"It picks the right tool itself. You don't need to memorize them — but knowing what's available helps you write prompts that fit.",[18,149,151],{"id":150},"prompts-that-work","Prompts that work",[153,154,156],"h3",{"id":155},"be-specific-about-what-you-want-not-how","Be specific about what you want, not how",[14,158,159],{},"✅ \"Add a 'Late fee: 5%' note below the total, right-aligned, in red.\"\n❌ \"Modify the HTML to add a span with class text-red-500 after the totals row.\"",[14,161,162,163,166],{},"The model can write better HTML than your description of HTML. Tell it the ",[26,164,165],{},"intent",", let it pick the markup.",[153,168,170],{"id":169},"reference-whats-on-screen","Reference what's on screen",[14,172,173],{},"✅ \"Make the customer name larger — same size as the invoice number.\"\n✅ \"Move the logo from the top-left to the top-right.\"",[14,175,176,177,179],{},"You're looking at the preview. So is the model (via ",[55,178,57],{},"). Talk about what's visible.",[153,181,183],{"id":182},"iterate-small","Iterate small",[14,185,186],{},"Instead of dropping a 200-word brief, send 3 focused turns:",[188,189,190,194,201],"ol",{},[191,192,193],"li",{},"\"Lay out an invoice with a top header (number + dates), then the billed-to\u002Ffrom section, then items table, then total.\"",[191,195,196,197,200],{},"\"Add a 'PAID' badge in the top-right when ",[55,198,199],{},"paid"," is true.\"",[191,202,203],{},"\"Make the section headers all caps with letter-spacing.\"",[14,205,206],{},"Each turn lets you steer. A long brief commits the model to one interpretation.",[153,208,210],{"id":209},"attach-images-for-visual-references","Attach images for visual references",[14,212,213],{},"Drop a PNG\u002FJPEG\u002FPDF (up to 5 MB \u002F 25 MB respectively) into the chat. The model sees it. Great for:",[215,216,217,220,223],"ul",{},[191,218,219],{},"\"Match this invoice style I got from a competitor\"",[191,221,222],{},"\"Use the same color palette as this brand guide\"",[191,224,225],{},"\"Recreate this layout but with my variables\"",[18,227,229],{"id":228},"patterns-the-assistant-follows-by-default","Patterns the assistant follows by default",[14,231,232],{},"Worth knowing so you understand what it's doing:",[188,234,235,244,256,264,277,283],{},[191,236,237,243],{},[26,238,239,240,242],{},"It calls ",[55,241,57],{}," 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.",[191,245,246,255],{},[26,247,248,249,251,252,254],{},"It prefers ",[55,250,67],{}," over ",[55,253,77],{},"."," Re-emitting the whole body costs many more output tokens, and small surgical edits are reviewable in the diff sidebar.",[191,257,258,263],{},[26,259,239,260,262],{},[55,261,77],{}," only for full redesigns"," or when scaffolding an empty body.",[191,265,266,272,273,276],{},[26,267,268,269,271],{},"It keeps ",[55,270,121],{}," aligned with the HTML."," If it adds ",[55,274,275],{},"{{customer.email}}",", it also updates the sample variables so the preview renders.",[191,278,279,282],{},[26,280,281],{},"It doesn't save automatically."," You stay in working-draft mode until you confirm.",[191,284,285,291],{},[26,286,287,288],{},"For canvas charts, it sets ",[55,289,290],{},"Chart.defaults.devicePixelRatio = 4"," so they render sharp at print resolution.",[18,293,295,296],{"id":294},"when-to-use-save","When to use ",[55,297,131],{},[14,299,300],{},"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.",[14,302,303,304,308,309,311],{},"If you ask the assistant to ",[305,306,307],"em",{},"\"save and generate a test PDF\"",", it calls ",[55,310,131],{}," first, then you can hit the \"Test generate\" button from the editor's top bar.",[18,313,315],{"id":314},"tokens-credits-and-budgets","Tokens, credits, and budgets",[14,317,318,319,322],{},"Every assistant turn debits ",[26,320,321],{},"AI credits"," proportionally to the tokens consumed:",[215,324,325,328,331],{},[191,326,327],{},"Input tokens (your message + system prompt + tool results read back)",[191,329,330],{},"Output tokens (its reply + tool calls)",[191,332,333],{},"Cache reads\u002Fwrites (yes, even cache hits cost — they're processed)",[14,335,336,337,339],{},"A typical short edit (\"add a paid badge\") consumes a handful of credits. A full template redesign with multiple ",[55,338,77],{}," calls can easily consume several dozen. Keep an eye on the gauge in the top bar.",[341,342,355],"aside",{"className":343},[344,345,346,347,348,349,350,351,352,353,354],"not-prose","my-6","rounded-md","border","border-amber-200","bg-amber-50","text-amber-900","px-4","py-3","text-[14px]","leading-relaxed",[14,356,357,360,361,364],{},[26,358,359],{},"The 402 floor."," If you hit ",[55,362,363],{},"quota_exceeded"," mid-conversation, the model can't continue. The dashboard surfaces a \"Buy more credits\" CTA — but the practical fix is to switch to the editor and finish the edit by hand for now.",[18,366,368],{"id":367},"when-to-drop-the-assistant-and-go-manual","When to drop the assistant and go manual",[14,370,371],{},"It's a tool, not a religion. Reach for the keyboard when:",[215,373,374,381,388],{},[191,375,376,377,380],{},"You're making a ",[26,378,379],{},"trivial CSS tweak"," (one class change — you'll type it faster than you'll describe it)",[191,382,383,384,387],{},"You're ",[26,385,386],{},"debugging a specific Handlebars expression"," — easier to read the code than to ask",[191,389,390,391,394,395,397,398,401],{},"The change is ",[26,392,393],{},"mechanical and repetitive"," (renaming 12 occurrences — ",[55,396,67],{}," with ",[55,399,400],{},"replace_all: true"," works, but Cmd-D in the editor is instant)",[18,403,405],{"id":404},"suggested-first-prompts-for-common-templates","Suggested first prompts for common templates",[14,407,408],{},"Use these as starting points, then iterate:",[31,410,411,421],{},[34,412,413],{},[37,414,415,418],{},[40,416,417],{},"Template",[40,419,420],{},"Opening prompt",[47,422,423,433,443,453,463],{},[37,424,425,428],{},[52,426,427],{},"Invoice",[52,429,430],{},[305,431,432],{},"\"Lay out a professional invoice with header (invoice number, issue date, due date), billed-to + from section side-by-side, line items table, total. Use Inter Tight for headings, neutral colors, no shadows.\"",[37,434,435,438],{},[52,436,437],{},"Receipt",[52,439,440],{},[305,441,442],{},"\"Pocket-size receipt (A6), single column. Logo at top, then line items, total, thank-you message at the bottom.\"",[37,444,445,448],{},[52,446,447],{},"Quote \u002F Proposal",[52,449,450],{},[305,451,452],{},"\"Cover page with project name and client, then a single page summary, then a pricing breakdown table. Use a serif font for the title, sans for body.\"",[37,454,455,458],{},[52,456,457],{},"Contract",[52,459,460],{},[305,461,462],{},"\"Two-column legal-style contract. Headers in small caps, paragraphs justified. Pages numbered.\"",[37,464,465,468],{},[52,466,467],{},"Certificate",[52,469,470],{},[305,471,472],{},"\"Landscape A4 certificate of completion. Big centered name, decorative border, signature line at the bottom.\"",[18,474,476],{"id":475},"next-steps","Next steps",[215,478,479,489,497],{},[191,480,481,488],{},[26,482,483],{},[484,485,487],"a",{"href":486},"\u002Fdocs\u002Fguides\u002Fauthoring\u002Fmodeling-variables","Modeling your variables →"," — keep the contract small once your template stabilizes.",[191,490,491],{},[26,492,493],{},[484,494,496],{"href":495},"\u002Fdocs\u002Fguides\u002Fauthoring\u002Fdesign-for-pdf","Designing templates that survive PDF rendering →",[191,498,499],{},[26,500,501],{},[484,502,504],{"href":503},"\u002Fdocs\u002Fguides\u002Foperations\u002Fmonitoring-usage","Monitoring usage & credits →",{"title":506,"searchDepth":507,"depth":507,"links":508},"",2,[509,510,517,518,520,521,522,523],{"id":20,"depth":507,"text":21},{"id":150,"depth":507,"text":151,"children":511},[512,514,515,516],{"id":155,"depth":513,"text":156},3,{"id":169,"depth":513,"text":170},{"id":182,"depth":513,"text":183},{"id":209,"depth":513,"text":210},{"id":228,"depth":507,"text":229},{"id":294,"depth":507,"text":519},"When to use save",{"id":314,"depth":507,"text":315},{"id":367,"depth":507,"text":368},{"id":404,"depth":507,"text":405},{"id":475,"depth":507,"text":476},"authoring","Prompts and patterns to get good templates fast — what to ask, when to iterate, when to start over.","md","sparkles",{},true,4,"\u002Fdocs\u002Fguides\u002Fauthoring\u002Fworking-with-ai",{"title":5,"description":525},"docs\u002Fguides\u002Fauthoring\u002Fworking-with-ai","8PIztviag3l-zd_Zjb6Mlmy2YzWVDVU4GnC2iVNfP9o",[536,542,546,550,554,559,564,569,572,576,579,580,585,590,594,598,602],{"path":537,"title":538,"description":539,"category":540,"order":541},"\u002Fdocs\u002Fguides\u002Fai-mcp\u002Fchatgpt","ChatGPT (via Custom GPT Actions)","ChatGPT doesn't speak MCP natively yet — but you can give it the same powers through a Custom GPT pointed at the Transactional REST API.","ai-mcp",5,{"path":543,"title":544,"description":545,"category":540,"order":513},"\u002Fdocs\u002Fguides\u002Fai-mcp\u002Fclaude-code","Claude Code (CLI)","Connect Transactional to Claude Code so it can read your templates and generate PDFs from your terminal.",{"path":547,"title":548,"description":549,"category":540,"order":507},"\u002Fdocs\u002Fguides\u002Fai-mcp\u002Fclaude-desktop","Claude Desktop","Connect Transactional to Claude Desktop on macOS or Windows so Claude can read your templates and generate PDFs.",{"path":551,"title":552,"description":553,"category":540,"order":530},"\u002Fdocs\u002Fguides\u002Fai-mcp\u002Fcursor","Cursor","Wire Transactional into Cursor's MCP support so you can generate PDFs from inside your editor.",{"path":555,"title":556,"description":557,"category":540,"order":558},"\u002Fdocs\u002Fguides\u002Fai-mcp\u002Fgemini","Gemini Code Assist \u002F Gemini CLI","Connect Transactional to Google's Gemini agents through their MCP support.",6,{"path":560,"title":561,"description":562,"category":540,"order":563},"\u002Fdocs\u002Fguides\u002Fai-mcp\u002Ftools-reference","MCP tools reference","Every tool the Transactional MCP server exposes, with arguments, return shapes, and a prompt that typically triggers each one.",7,{"path":565,"title":566,"description":567,"category":540,"order":568},"\u002Fdocs\u002Fguides\u002Fai-mcp\u002Fuse-from-ai","Use Transactional from your AI assistant","Connect Transactional to Claude, Cursor, ChatGPT, or Gemini via MCP so your assistant can read your templates and generate PDFs directly.",1,{"path":495,"title":570,"description":571,"category":524,"order":507},"Designing templates that survive PDF rendering","PDFs are static — drop the animations, oversample your canvas charts, lean on vectors. The rules that make a template look sharp at print resolution.",{"path":573,"title":574,"description":575,"category":524,"order":568},"\u002Fdocs\u002Fguides\u002Fauthoring\u002Fhandlebars","Handlebars cheat sheet","The exact subset of Handlebars supported in Transactional templates — variables, conditionals, loops, and what NOT to reach for.",{"path":486,"title":577,"description":578,"category":524,"order":513},"Modeling your variables","When to make something a variable vs. inline. Keep the API contract small, your templates portable, and your integration code boring.",{"path":531,"title":5,"description":525,"category":524,"order":530},{"path":581,"title":582,"description":583,"category":584,"order":568},"\u002Fdocs\u002Fguides\u002Fgetting-started\u002Fquickstart","Quickstart — your first PDF in 5 minutes","Sign up, design a template, render your first PDF through the API. End-to-end in five minutes.","getting-started",{"path":586,"title":587,"description":588,"category":589,"order":568},"\u002Fdocs\u002Fguides\u002Fintegrations\u002Fnode-bun","Calling \u002Fv1\u002Fgenerate from Node.js & Bun","Production-grade integration using native fetch — retries, error handling, streaming the PDF to your storage.","integrations",{"path":591,"title":592,"description":593,"category":589,"order":507},"\u002Fdocs\u002Fguides\u002Fintegrations\u002Fphp-laravel","Calling \u002Fv1\u002Fgenerate from PHP & Laravel","cURL extension, Guzzle, or Laravel's HTTP client — render PDFs with retries and proper error handling.",{"path":595,"title":596,"description":597,"category":589,"order":513},"\u002Fdocs\u002Fguides\u002Fintegrations\u002Fpython","Calling \u002Fv1\u002Fgenerate from Python","urllib (stdlib), requests, or httpx with retry — render PDFs from Django, FastAPI, or any Python service.",{"path":503,"title":599,"description":600,"category":601,"order":568},"Monitoring usage & credits","Read the dashboard gauges, set sane alerts, and decide when to top up vs. upgrade.","operations",{"path":603,"title":604,"description":605,"category":601,"order":507},"\u002Fdocs\u002Fguides\u002Foperations\u002Fstoring-pdfs","Storing & serving the generated PDF","The \u002Fv1\u002Fgenerate URL is signed and short-lived. Patterns for keeping the PDF around — your bucket, your CDN, your DB.",1780347734026]