SupabaseAuthWithSSR

Quickstart

git clone https://github.com/ElectricCodeGuy/SupabaseAuthWithSSR.git
cd SupabaseAuthWithSSR
npm install
cp .env.local.example .env.local   # fill in the keys below
npm run dev

1. Database — open the Supabase SQL Editor and run database/setup.sql. That's the whole schema; it's safe to re-run.
2. Storage — create a private bucket named userfiles (Storage → Create Bucket). The RLS policies are already in setup.sql.
3. Keys — add to .env.local:

4. Sign up at http://localhost:3000/signup with a real email and click the confirmation link.
5. (Optional) Make yourself admin to unlock /admin:

UPDATE public.users SET is_admin = true WHERE email = 'you@example.com';

Upgrading an existing install? Just re-run database/setup.sql — it is idempotent (IF NOT EXISTS / CREATE OR REPLACE throughout), so it adds only what's new in v5: user_memories, users.is_admin, the message_parts.usage JSON column, chat_sessions.settings, the hybrid match_documents function, and the Anthropic model catalog (Sonnet 5, Opus 4.8, Fable 5 with official API pricing).

The Tour

💬 Multi-step tool turns with live reasoning

One prompt can fan out into web searches, document lookups, chart rendering, PDF creation and artifact writing — all in a single assistant turn (the hero screenshot above shows exactly that). Each tool call renders as its own card with expandable reasoning, and every step is persisted incrementally, so the full trace survives a reload. Chats title themselves (a fast Haiku call after the first exchange), and the model you pick is stored on the conversation, so each chat keeps its own model.

🎨 Artifacts: a versioned document workspace

Ask for a document and it opens in a side panel next to the chat, streaming in live as the AI writes. Every create/update is automatically a version — with a version browser, copy, and Markdown download. There are no extra tables behind this: each version is the stored tool call. On desktop the panel pushes the chat aside; on mobile it's a slide-over.

📊 Charts + 📄 PDFs from real data

The AI renders bar, line, area and pie charts with a colorblind-safe palette, tooltips, legends and a data-table fallback. Below, it researched SaaS churn benchmarks on the web, checked the user's documents for internal numbers, charted the spread — then wrote the same analysis into a polished PDF report and saved it to the user's files:

The createPDF tool renders style-templated documents (report/memo/letter/contract — cover page, table of contents, callouts, tables) with @react-pdf/renderer. The built-in file manager previews any PDF, and uploads are OCR'd, embedded and indexed for RAG automatically:

🧠 Memory & model control

Long-term memory. Tell the assistant to remember something and it persists across all chats — injected into every system prompt. View, add, edit and delete memories in the AI settings modal.

Database-driven model selection. Models live in the ai_models table with pricing metadata — the picker shows a plain-language description and an approximate cost per answer. Ships with Sonnet 5 (default), Opus 4.8 and Fable 5.

💰 Usage dashboard — every token accounted for

Every generation step (each tool call is its own step) stores its token usage and cache metadata as JSON on the message itself. The /usage page turns that into range-filtered KPIs with period-over-period deltas, tokens per day, cache hit rate over time, and cost by model:

Because usage is attributed per step, spend breaks down by tool and by conversation — and any assistant message expands into its individual steps, each with its own model, tools, token counts and cache hit rate:

🛡️ Admin dashboard

Users with is_admin = true get the organization view: org-wide totals and daily volume, top users by cost, cost by model, and a user management table (rename, grant/revoke admin) with per-user usage. Every mutation re-verifies the caller is an admin server-side before touching the service-role client:

🗂️ Conversations, profile & the signed-out state

Conversation management. Search, rename, favorite, share or delete any conversation — favorites pin to the sidebar, history groups by day.

A profile page with real data. Identity, role, default model, 30-day spend, memories and recent activity — one server round-trip.

Even signed-out visitors get a designed experience instead of a broken shell — locked nav items, a blurred preview of the chat rail behind a sign-in card, and honest CTAs:

The AI Tool Suite

Every tool follows the same pattern — a server-side definition in app/api/chat/tools/, registration in the chat route + tooltypes.ts (typed UI parts via InferUITools), and a dedicated React component that renders the call in the chat. Tool calls persist as message_parts rows, so the full trace (inputs, outputs, errors) survives a reload.

How the artifacts panel works: the document content travels in the tool input, so the panel gets live typewriter streaming for free from the SDK's input-streaming states, and every create/update is automatically a persisted version. On desktop the panel is an in-flow flex sibling that pushes the chat aside (width animates 0 ↔ 45%); on mobile it's a slide-over. It auto-opens on new versions, remembers when you dismissed it, and lets you pin and browse older versions.

How the caching works: the system prompt is split into a static block (instructions + tool definitions) with an Anthropic cacheControl breakpoint, and a dynamic block (date, memories, artifact state) that stays out of the cache. Each generation step re-places a moving breakpoint on the last message, so in a 10-step tool turn, steps 2–10 read the whole conversatio