> **How to use this prompt:** Copy everything below this line into a new Claude chat > that has the Truthifi MCP connected (`https://api.truthifi.com/mcp`), then follow > the instructions — by doing so you agree to the > [Truthifi Prompt Gallery Terms of Use](https://truthifi-connect.ai/prompt-gallery-terms). --- ``` ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TRUTHIFI PROMPT GALLERY -- USE RESPONSIBLY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • NOT FINANCIAL ADVICE -- AI-generated output is for informational purposes only. • YOUR DATA -- retrieved live via MCP for this session only. Not stored, logged, or transmitted beyond this conversation. • SHARING -- outputs may contain real spending data. Review before sharing publicly or with third parties. • MODIFICATIONS -- altering this prompt removes Truthifi's intended safeguards. Any such use is at your own risk. • LIABILITY -- Truthifi accepts no liability for AI-generated outputs or any decisions made based on them. By running this prompt you agree to the Truthifi Prompt Gallery Terms. Full terms: https://truthifi-connect.ai/prompt-gallery-terms ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ``` # Audit your subscriptions **Truthifi MCP Required** | MCP URL: `https://api.truthifi.com/mcp` | Version: 1.1.0 | 2026-06-01 --- ## 🎯 GOAL Fetch the user's full transaction history, identify every recurring charge, surface what's changed recently, and deliver a single self-contained HTML dashboard showing: what changed (with a year-over-year area chart), a category-filtered spend breakdown with bar chart and paginated subscription list, and on-demand access to broader spending/income/transfer summaries via three MCP-powered panels. --- ## 📋 CONTEXT & BACKGROUND Subscriptions accumulate on autopilot — services get added, prices drift up, cancellations get delayed. This prompt identifies recurring charges by merchant + amount pattern (not by any unreliable MCP tag), surfaces what's new, ended, or more expensive, and plots cumulative spend vs the prior year so trends are visible at a glance. Key rules: - **Monthly recurring**: ≥2 charges in different months at a consistent amount (±10%). - **Annual recurring**: consistent amount appearing ~once per 10–14 months. - **Newly detected**: `txnCount ≤ 2` (only seen 1–2 times so it's just becoming a recognizable pattern), OR a known subscription brand (Netflix, Spotify, Adobe, etc.) appearing for the first time. The intent is to surface charges that are just starting to look like a recurring subscription. - **Likely canceled**: ≥2 prior charges but none in the last 60 days — a previously regular charge that went quiet. - **Price went up**: most recent charge >5% above the median of prior charges. - **Sign convention**: subscriptions are costs. In the "What's changed" card, new/price-increase rows show `−$X/mo` (money leaving), canceled rows show `+$X/mo` (money saved). The headline net = ended savings minus new costs — positive means you're spending less overall. - **Period spend**: monthly subs = `mAmt × months_in_period`; annual subs = `yAmt` if renewed within period, else show `—`. - The output is a self-contained HTML file. Data is baked in at generation time. No runtime API calls except the Refresh button and on-demand panels. --- ## 🔌 TRUTHIFI MCP DEPENDENCIES **MCP server:** `https://api.truthifi.com/mcp` | Step | Tool | Purpose | Key Parameters | |------|------|---------|----------------| | 1 | `get_budget_flows` | Full transaction history + totals | `dateRange`: full available range from `maxAvailableDateRange`; `include`: `["accountId","date","description","amount","transactionCategory","maxAvailableDateRange"]`; `pageSize`: 500. Paginate until result count < pageSize or date range is covered (max 10 pages). Returns `subscriptions`, `earliestDate`, `spendTotal`, `incomeTotal`, `transferTotal` in a single JSON response. | > **Note:** Card 3's "Explore this" buttons use `sendPrompt()` to send a follow-up prompt into the Claude chat — not a direct API call from the HTML. No Steps 2–4 fire automatically. **Null guard:** If step 1 returns empty or errors, stop and show: "No spending data found. Check your Truthifi connections and try again." **Parsing:** Extract data from `mcp_tool_result` content blocks by type. Never parse raw MCP output with regex. Never rely on block position. --- ## 🙋 USER-CAPTURED DATA REGISTRY No user input required. Runs entirely on live MCP data. --- ## 🎨 DESIGN SYSTEM All colors as CSS custom properties in `:root`. No raw hex outside `:root`. **Font pairing:** Merriweather (serif, headlines — emotional weight) + Manrope (sans, data/UI — legibility). Numeric data uses Manrope with `font-feature-settings: 'tnum' 1`. ```css :root { /* Backgrounds */ --bg-page: #F4F6F8; --bg-surface: #FFFFFF; /* Text */ --ink-0: #011827; --ink-1: #626F79; --ink-2: #9CAAB4; --ink-disabled: #A5ACB1; /* Border */ --border: #E3E8ED; --border-light: #EEF1F4; /* Blue */ --blue: #0676C5; --blue-light: #E8F3FB; --blue-border: rgba(6,136,217,0.50); /* Semantic */ --green-bg: #E6F3E6; --green-dark: #3C843A; --green-mid: #51A64B; --amber: #D97706; --amber-light: #FEF3C7; /* Status badges (filled, no border) */ --badge-new-bg: #EDF9FF; --badge-new-text: #00A9FE; --badge-up-bg: #FFEBEE; --badge-up-text: #FB6561; --badge-ended-bg: #E6F3E6; --badge-ended-text: #51A64B; /* Cadence tags */ --tag-bg: #F7F8F8; --tag-text: #626F79; /* Signature card shadow */ --shadow-card: -4px 0 24px 0 rgba(177,0,124,0.12), 4px 0 24px 0 rgba(102,63,254,0.12), 0 -4px 24px 0 rgba(38,197,223,0.12), 4px 4px 24px 0 rgba(6,118,197,0.08); /* Category colors */ --cat-streaming: #6366f1; --cat-software: #0676C5; --cat-fitness: #059669; --cat-news: #D97706; --cat-music: #DB2777; --cat-education: #7C3AED; --cat-books: #0891B2; --cat-shopping: #EA580C; --cat-other: #94A3B8; /* Spacing (8px grid): --s1:8px --s2:16px --s3:24px --s4:32px --s5:40px --s6:48px */ /* Radius: --r-lg:16px --r-md:12px --r-sm:8px --r-pill:999px */ } ``` **Typography:** | Role | Font | Size | Weight | |------|------|------|--------| | Page title | Merriweather | 24px | 700 | | Card headline | Merriweather | 20px | 300 | | Body / UI | Manrope | 16px | 500 | | Secondary | Manrope | 14px | 400–500 | | Meta / caption | Manrope | 12px | 400 | | Button | Manrope | 14px | 800, `letter-spacing: -0.25px` | | Cadence tag | Manrope | 10px | 700, uppercase, `letter-spacing: 0.04em` | Fonts: `https://fonts.googleapis.com/css2?family=Merriweather:wght@300;700&family=Manrope:wght@400;500;700;800&display=swap` + Material Symbols Rounded. **Layout:** max-width 780px, centered; card padding 32px (desktop) / 24px (mobile); 16px gap between cards; 8px spacing grid. **Buttons:** - Primary: `height:42px; padding:0 16px; border-radius:100px; background:var(--blue); color:#fff; border:none; font:800 14px/24px Manrope; letter-spacing:-0.25px;` - Outline: same dimensions; `background:transparent; color:var(--blue); border:1px solid var(--blue-border);` --- ## 🖼️ VISUALIZATION SPEC ### Page header (not sticky) - Title: "Audit your subscriptions" — Merriweather Bold 24px - Right: solid "Refresh" + outline "Report a problem" (→ `https://app.truthifi.com/message-center`) - Below: Period dropdown (`This month` / `Last 3 months` / `Last 6 months` / `This year` / `All time`, white fill) + Account dropdown (populated from MCP account IDs, shown as `…XXXXXXXX`) - **Auto-period:** pick tightest bucket covering the data: ≤35d→month, ≤100d→3m, ≤190d→6m, ≤370d→year, >370d→all ### Card 1 — What's changed *(conditional: only if any `changed !== null`)* - **Headline** (Merriweather Light 20px): "Your subscription costs are up/down by **$X/mo** in the past [period]." Net = sum of `mAmt` for `ended` (savings) minus sum of `mAmt` for `new` (new costs). Positive net → costs are down; negative net → costs are up. `increase` excluded from net — no exact delta. Animated counter 800ms ease-out cubic. If net < $1 either direction: "Your subscription costs haven't changed in the past [period]." - **Period labels** use `periodLabel(p, 'headline')` — returns values designed to follow "in the past ___": `month`→"month", `3m`→"3 months", `6m`→"6 months", `year`→"year", `all`→"year or more". - **Always visible:** SVG area chart (see below) - **Top-right:** outline "Show details" / "Hide details" accordion toggle - **Collapsible (below chart):** changed subscription rows, paginated at 5 per page with shared "1–N of X" / Prev / Next controls. Each row: color dot · name + cadence tag · last-charged/since date · status badge · rate. **Rate display:** monthly subs show `+/−$X/mo`; annual subs show `+/−$X/yr` as the primary value with `≈ +/−$X/mo` as a smaller secondary line so the monthly equivalent is still visible for footing to the headline. **Sign convention:** `+` for "Likely canceled" (saving), `−` for "Newly detected" and "Price went up" (new cost). No color on rates. **Status badges** (filled, no border): `Newly detected` (#EDF9FF/#00A9FE) · `Price went up` (#FFEBEE/#FB6561) · `Likely canceled` (#E6F3E6/#51A64B) **Area chart:** - SVG `viewBox="0 0 700 120"`, `width:100%`. viewBox scaling handles resize — no resize listener needed. - Two cumulative series: this year (solid blue, 2px) vs last year (dashed grey `var(--ink-2)`, 1.5px), each with gradient fill. Last year drawn behind. - A sub is active in month M if `firstDate ≤ end of M AND lastDate ≥ start of M`. Monthly: `mAmt` per active month. Annual: `yAmt` in renewal month. If `firstDate` unknown, default `2020-01-01` (approximation — may overestimate last year for subs with unknown start dates). - X axis: month labels. Y axis: 3 grid lines, labels `$Xk` or `$X`. - Legend above chart: colored swatch + year label for each series. ### Card 2 — Spending overview From top to bottom: 1. **Headline** (always visible, Merriweather Light 20px): "You spent **$X** on subscriptions in the past [period]." Animated counter, re-animates on period/account change only. Top-right: outline "Show subscriptions" / "Hide subscriptions" — starts collapsed. - **Period label grammar** — `periodLabel(p, ctx)` returns different strings by context: - Headline (`ctx='headline'`): `month`→"month", `3m`→"3 months", `6m`→"6 months", `year`→"year", `all`→"year or more" — all designed to follow "in the past ___" - Inline (`ctx` omitted): `month`→"this month", `3m`→"last 3 months", `6m`→"last 6 months", `year`→"this year", `all`→"all time" 2. **Divider** 3. **Distribution bar** (always visible): 10px, `width:100%`, `flex-shrink:1` on segments so they scale to container width. Proportional segments by category color. Tooltip (`position:fixed`, follows cursor): "Category · $X [period] (N%)". Click a segment = activate that category filter (same as clicking its chip). Dimmed to 18% opacity for inactive categories. 4. **Legend** (always visible): 2-col grid `minmax(200px,1fr)`. Each row: color dot · category name · % · `·` · $amount. Hover = highlight bar segment (0.72 opacity). Click = activate that category filter. Inactive = 35% opacity. 5. **Collapsible section** (starts collapsed, "Show subscriptions" / "Hide subscriptions"): - **Category filter chips** — at the top of the collapsible section, above the subscription list. One chip per category ordered by spend desc. **Single-select exclusive:** clicking a chip shows only that category in the list and dims others in the bar/legend. Clicking the active chip resets to show all. No "All" chip needed — clicking the active chip is the reset. Active chip = category color fill, white text. Inactive = grey pill. - **Subscription list** — directly below chips. 5 rows/page; pagination "1–N of X" left, "← Prev" / "Next →" right. Row layout: `align-items:center` on row; category dot (`align-self:flex-start; margin-top:6px`) · info block (name 16px 500 + cadence tag, then last-charged 12px below) · rate+charges block (`align-self:center`, right-aligned). Annual subs outside current period: show `—` with tooltip "Renewed outside selected period." **Cadence tags:** `#F7F8F8` bg / `#626F79` text. **Row alignment:** `.sub-costs` declared once with `align-self:center` — no duplicate declarations. ### Card 3 — Also in your accounts *(always rendered)* - Headline: "Also in your accounts" → updates immediately after Step 1 completes to "Your other monthly expenses are about **$X** on average." `$X` = `spendTotal ÷ periodMonths(period)`, animated 800ms ease-out cubic. **No second MCP call.** - Top-right: outline "Show more features" / "Hide more features" — starts collapsed. - **Collapsed height:** card `padding-bottom:0`; bottom padding on header row and panels wrapper only. - Three panels: **General spending** (`shopping_bag`, blue) · **Income** (`trending_up`, green) · **Transfers** (`swap_horiz`, purple) - Each panel teaser: icon · label · description (populated from Step 1 totals) · **"Explore this"** primary button - **"Explore this" behaviour:** calls `sendPrompt(text)` — the global function available inside claude.ai that sends a message into the active chat as if the user typed it. Each panel has a pre-written period-aware follow-up prompt (e.g. "Using the Truthifi MCP, fetch my non-subscription expenses for the last 3 months and give me a clear breakdown..."). This kicks off a new Claude response in the conversation using the MCP, avoiding any cross-origin API calls from the HTML file. - **Fallback** (if `sendPrompt` is unavailable, e.g. file opened standalone): copy the follow-up prompt to clipboard and show "Copied — paste in chat" confirmation for 3 seconds. - No loading states, no error states, no API calls from within the HTML for these panels. **Concurrency:** only **one** MCP call fires on load (Step 1). `sendPrompt()` triggers a new Claude turn in the parent conversation — not an API call from the artifact. --- ## ⚙️ CONFIGURATION OPTIONS | Constant | Default | Purpose | |----------|---------|---------| | `PAGE_SIZE` | 5 | Rows per page | | `ENDED_CUTOFF_DAYS` | 60 | Days without charge → ended | | `NEW_WINDOW_DAYS` | 60 | Days window for "newly detected" | | `PRICE_INCREASE_PCT` | 0.05 | 5% threshold for "price went up" | | `ANIM_DURATION_MS` | 800 | Counter animation duration | | `RETRY_DELAY_MS` | 1500 | Base 429 retry delay | | `MAX_RETRIES` | 2 | Max retry attempts | --- ## 📝 THE PROMPT **Step 0 — Terms** Display before doing anything: > This prompt will access your Truthifi spending data. By proceeding you confirm you've read and agree to the [Truthifi Prompt Gallery Terms](https://truthifi-connect.ai/prompt-gallery-terms). > Type **yes** to proceed, **terms** to see key points, or **no** to cancel. - **yes** → proceed - **terms** → show the five bullet points from the banner above, then re-ask - **no** / anything else → "Understood. No data has been accessed." Stop all execution. --- **Step 1 — Fetch** Call `get_budget_flows` on `https://api.truthifi.com/mcp`. Use `maxAvailableDateRange` to determine the full date range. Paginate until: result count < `pageSize`, or range is covered, or 10 pages reached (note truncation if limit hit). Extract: `accountId`, `date`, `description`, `amount`, `transactionCategory`, `maxAvailableDateRange` from `mcp_tool_result` blocks by type — never by position, never with regex. From all fetched transactions, also compute: - `spendTotal` — sum of all non-recurring expense transaction amounts - `incomeTotal` — sum of all income/credit transaction amounts - `transferTotal` — sum of all transfer transaction amounts Return all five keys (`subscriptions`, `earliestDate`, `spendTotal`, `incomeTotal`, `transferTotal`) in the single JSON response per the shape in Step 4. This eliminates any need for secondary MCP calls. If empty or error: show null guard message and stop. --- **Step 2 — Identify recurring charges** Group transactions by normalized merchant name. Apply detection rules from Context & Background above. For each recurring charge, record: ``` name — cleaned merchant name. Strip: store numbers (" #1234"), transaction codes (" *ABC123", " L638N6Z23"), processor prefixes ("SQ *", "TST* "), ALL-CAPS. E.g. "NETFLIX.COM" → "Netflix"; "SQ *EQUINOX 0042" → "Equinox". category — see mapping below cadence — MONTHLY | ANNUAL mAmt — monthly equivalent (amount if MONTHLY; amount÷12 if ANNUAL) yAmt — annual equivalent (amount×12 if MONTHLY; amount if ANNUAL) lastDate — most recent charge (YYYY-MM-DD) firstDate — earliest known charge (YYYY-MM-DD) txnCount — total charges found accountId — account ID changed — new | ended | increase | null new: txnCount ≤ 2 OR recognized brand seen for first time ended: ≥2 prior charges, no charge in last 60 days increase: most recent charge >5% above prior median ``` **Category mapping** (match merchant name, not `transactionCategory`): | Category | Keywords (case-insensitive) | |----------|-----------------------------| | Streaming | netflix, hulu, disney, hbo, max, peacock, espn, paramount, apple tv, sling, fubo, youtube premium, prime video, tubi, mubi, criterion, showtime, starz | | Music | spotify, apple music, tidal, pandora, deezer, soundcloud, amazon music, sirius | | Software | adobe, microsoft, office 365, dropbox, icloud, google one, notion, figma, github, slack, zoom, openai, chatgpt, anthropic, claude, cursor, canva, grammarly, 1password, nordvpn, backblaze | | Fitness | equinox, peloton, planet fitness, classpass, strava, whoop, headspace, calm | | News | new york times, wall street journal, washington post, atlantic, economist, wired, bloomberg, substack | | Books | audible, kindle, scribd, kobo | | Education | duolingo, coursera, udemy, skillshare, masterclass, babbel, linkedin learning | | Shopping | amazon prime, instacart, shipt, doordash pass, walmart+, costco | | Other | everything else | --- **Step 3 — Auto-period** `daysSinceEarliest` = today − earliest transaction date. ≤35d → `month` · ≤100d → `3m` · ≤190d → `6m` · ≤370d → `year` · >370d → `all` --- **Step 4 — Generate HTML** Single self-contained file per visualization spec above. Data baked in as JS constants. No runtime MCP calls except Refresh and on-demand panels. ```js /* === SCRIPT === */ // -- CONSTANTS -- const PAGE_SIZE = 5, ENDED_CUTOFF_DAYS = 60, NEW_WINDOW_DAYS = 60, PRICE_INCREASE_PCT = 0.05, ANIM_DURATION_MS = 800, RETRY_DELAY_MS = 1500, MAX_RETRIES = 2; // -- DATA (baked in at generation time) -- const SUBS = [ /* populated from Step 2 */ ]; const SAMPLE_SUBS = [ /* copy of SUBS, used as Refresh fallback */ ]; const DEFAULT_PERIOD = 'year'; // replaced with Step 3 result // -- TOTALS (from Step 1 JSON — no second MCP call needed) -- // spendTotal, incomeTotal, transferTotal returned in same JSON as subscriptions. // Declared as const object; properties are mutated after Step 1 resolves (valid in JS). const TOTALS = { spend: 0, income: 0, transfer: 0 }; // -- PAGINATION STATE -- // PAGE_SIZE applies to both tables (card 1 changed rows, card 2 subscription list). // subPage: current page for card 2 subscription list — reset to 0 on every renderOverview call. // changedPage: current page for card 1 changed rows — reset to 0 on full re-render (renderAll), // but NOT reset when pagination buttons are clicked. Pass keepPage=true to renderChangedCard // from pagination handlers to preserve the current page across re-renders. // function renderChangedCard(keepPage) { if (!keepPage) changedPage = 0; ... } // Monthly: mAmt × months_in_period. // month→1, 3m→3, 6m→6, year→getMonth()+1, all→Math.round(daysCovered/30.44) // Annual: yAmt if lastDate within period window, else 0 (display '—' not '$0'). function periodSpend(sub) { ... } ``` **Step 1 JSON shape** — the model must return this exact structure: ```json { "subscriptions": [ ...array of subscription objects... ], "earliestDate": "YYYY-MM-DD", "spendTotal": 0, "incomeTotal": 0, "transferTotal": 0 } ``` `spendTotal` = sum of all non-recurring expense transactions. `incomeTotal` = sum of income/credit transactions. `transferTotal` = sum of transfer transactions. All numbers, no nulls. - CSS in labeled `<style>` block in `<head>`. JS in labeled `<script>` block before `</body>`. - All `.card-headline` elements: `overflow:hidden; word-break:break-word`. - DRY: extract repeated logic into named functions. Comment every function. - All variables `const`/`let` — no `var`. All merchant names via `textContent` not `innerHTML`. - No `localStorage`, `sessionStorage`, `eval()`, or external analytics. - Refresh button: disabled during fetch; ignores clicks while fetch in progress; re-enabled on completion or error. **Fine-print footer** (do not remove, hide, or reduce below 11px / low contrast): ```html <!-- AI DISCLAIMER — Do not remove, hide, or reduce below 11px / low contrast --> <footer style="max-width:780px;margin:0 auto;padding:24px 16px 40px;border-top:1px solid var(--border-light);"> <p style="font-family:'Manrope',sans-serif;font-size:11px;color:var(--ink-2);line-height:1.6;"> <strong style="font-weight:600;color:var(--ink-1);">AI-generated. Not financial advice.</strong> Recurring charge detection uses pattern matching — some charges may be missed or misclassified. Always verify against your official account statements. <a href="https://truthifi-connect.ai/prompt-gallery-terms" style="color:var(--ink-1);">Truthifi Prompt Gallery Terms</a> apply. Powered by <a href="https://truthifi.com" style="color:var(--ink-1);">Truthifi</a>. </p> </footer> <!-- END AI DISCLAIMER --> ``` Footer text: `var(--ink-2)` body, `var(--ink-1)` links and bold label. --- ## 🔒 SECURITY & PRIVACY REVIEW Before delivering the file, verify: no raw transaction data or account numbers outside the `SUBS` block; no `console.log` in final output; merchant names via `textContent`; no `eval()`; no `localStorage`/`sessionStorage`; external requests only to `fonts.googleapis.com`, `fonts.gstatic.com`, and `api.anthropic.com`; all variables `const`/`let`; no `{{UCD:...}}` placeholders remaining. --- ## ⚠️ AI DISCLAIMER & TRUTHIFI LIABILITY STATEMENT By using this prompt you acknowledge: output is not financial advice; results may vary between runs; generated files may contain real spending data — review before sharing; altering this prompt removes Truthifi's safeguards; Truthifi and Anthropic accept no liability for outputs or decisions made based on them. The fine-print footer must appear in the rendered output at ≥11px with sufficient contrast. It must not be hidden, commented out, or reduced. --- ## 📊 EXPECTED OUTPUT A single self-contained HTML file: page header (title + dropdowns + buttons) → Card 1 (what's changed + area chart) → Card 2 (spending overview + bar chart + subscription list) → Card 3 (also in your accounts, 3 on-demand panels) → footer. Works offline after generation. On-demand panels require an active Anthropic API connection. Typical output: 20–35 subscriptions for users with 13+ months of history. --- ## 💡 TIPS & VARIATIONS - **Filter by account** using the Account dropdown to isolate a specific card or bank account. - **Exclude categories** by clicking chips — useful for comparing software vs streaming spend. - **Year-over-year trend** is visible in the area chart in Card 1. - **On-demand context:** open "Also in your accounts" to compare subscription spend against total spending, income, and transfers. - **Refresh after canceling** to see updated totals. - **Share carefully** — the file contains real spending amounts. --- ## 🏷️ TAGS `spending` `subscriptions` `recurring` `budgeting` `autopay` `dashboard` `HTML` `interactive` `chart` `MCP`