AI API Cost Optimizer for Indie Builders

AI Prompts to Build This

Copy these build prompts into Claude, Cursor, or your AI coding tool. Create a free account to unlock the full research behind them.

1. 1. Project Setup

   Build the weekend MVP of "SpendLens": a proxy and dashboard that shows exactly where your AI API money goes.
   
   Stack: Next.js (App Router), TypeScript, Tailwind, Supabase (Postgres, Row Level Security, Auth with email magic link), Upstash Redis for the response cache, Edge Functions for the proxy. Deploy on Vercel.
   Providers: OpenAI chat completions only this weekend.
   
   Tables (Row Level Security on, each account reads only its own rows):
   - api_keys(id, user_id, provider, encrypted_key, label)
   - proxied_calls(id, user_id, provider, model, input_tokens, output_tokens, cost_cents, cached, created_at)
   - cost_rates(id, provider, model, price_per_1k_input_cents, price_per_1k_output_cents, effective_date)
   
   Screens: /login, /keys, /dashboard.
   Env vars (names only): NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY (server only), ENCRYPTION_KEY, UPSTASH_REDIS_REST_URL, UPSTASH_REDIS_REST_TOKEN.
   
   Do not build: billing or plans, Anthropic or Gemini support, email alerts, a pricing-sync job (seed cost_rates by hand), teams.
   Done when: npm run dev starts, you can sign in, and the three tables exist with Row Level Security on.

2. 2. Core Feature

   Build the one feature that proves SpendLens: swap one base URL and see the real cost of every call.
   1. /api/proxy/openai accepts the same request shape as OpenAI chat completions.
   2. Look up the caller's stored OpenAI key, hash the request body, and check Redis for a cached response within a configurable TTL. On a hit, return it and log a proxied_calls row with cached true and cost_cents 0.
   3. On a miss, forward the request with the stored key, read the input and output token counts from the response, look up the model's row in cost_rates, compute cost_cents, insert a proxied_calls row, cache the response, and return the original provider response unchanged.
   4. For streaming responses, add up token counts as chunks arrive.
   5. /dashboard shows a 30-day spend chart by model, the 10 most expensive calls this week, a banner on any day that beat the trailing 7-day average by more than 50%, and a "cache savings this month" card priced as if the cached calls had been paid.
   Rules: never log prompt content by default.
   Empty state: with no keys, show the key form and the one-line change to the base URL.
   Done when: pointing a test app at the proxy shows its calls and costs in /dashboard, and repeating the same call is served from cache at zero cost.

3. 3. Landing Page

   Build a one-page landing site for SpendLens, an AI API cost tracker for indie builders.
   Hero: "See every dollar you're spending across OpenAI, Anthropic and Gemini, in one dashboard." Sub: "Swap one line of code. No new SDK, no lock-in." One button: Join the waitlist.
   Sections: a live demo (an animated chart filling in), the problem (separate provider dashboards), how it works in four steps (connect your providers, swap one line, see the real picture, act on the suggestions), and an FAQ on data security (encrypted keys, prompt content never logged by default) and provider coverage.
   Waitlist: store the email in a waitlist table in Supabase. No other service.
   Style: Geist, near-black background, one accent color, generous whitespace.
   Done when: the page renders on a phone and a submitted email appears in the waitlist table.

4. 4. Branding Package

   Use a design or image tool for this one. A coding agent cannot draw a logo.
   Brand for SpendLens: a wordmark and an icon that suggest a lens over a stack of coins.
   Colors: near-black, off-white and one accent. Type: Geist for the interface and Geist Mono for dollar amounts.
   Deliverables: wordmark, icon, a stacked-area chart style guide, and one launch graphic.
   Done when: each deliverable is saved in one folder and the icon reads at 32 px.