What's in this repo
| |
|---|
| 🌐 Marketing site | public/index.html — hero with trust microbar, persona cards, interactive product preview, format showcase, proof section, founding-member offer, FAQ, big-wordmark footer |
| 📞 Contact page | public/contact.html — Supabase-backed form |
| 🎛️ Studio app | public/app.html — authenticated dashboard with real CRUD on saved_ideas (RLS-secured) |
| 🔐 Auth modal | public/auth.js — signup, signin, and early-access waitlist |
| 🔌 MCP server | api/mcp.js — a Streamable-HTTP MCP endpoint. Point Claude (or any MCP client) at it and search the outlier corpus, fetch a post, or decode one, from inside a chat |
| 🧠 Outlier decoder | api/decode.js — breaks a breakout post into its mechanism: hook, tension, payoff, reusable template. Cached by content hash so a given post is paid for once, ever, across all users |
| 🧩 Pattern library | api/patterns.js — aggregates every decode by mechanism, so recurring hooks surface on their own instead of being read once and forgotten |
| ⚙️ Serverless APIs | api/*.js — waitlist (+ welcome email), contact, checkout, outliers curation, auth-config, founding-count |
| 🗄️ Database schema | schema.sql — Supabase tables + Row-Level-Security policies |
| 🚀 Deploy | Vercel (vercel.json) — auto-routes for serverless functions + clean URLs |
Connect it to Claude
Sona exposes its research over the Model Context Protocol, so an AI client can
query the outlier corpus directly instead of you copy-pasting into a chat.
Add it as a custom connector:
https://buildwithsona.com/api/mcp
Three tools are exposed:
| Tool | What it does |
|---|
search_outliers | Search posts that beat their own creator's baseline, with the real engagement figure and outlier multiple |
get_outlier | Fetch one post in full, including the source URL |
decode_post | Break a post down into hook, tension, payoff, and a reusable template |
The two read tools are open — the catalog is already public via /api/outliers.
decode_post spends model credit, so it stays disabled unless MCP_TOKEN is set
and sent as a bearer token.
Stack
- Frontend — Vanilla HTML/CSS/JS, no framework, Geist + Geist Mono via Google Fonts
- Backend — Supabase (Postgres + Auth + RLS)
- Hosting — Vercel (static + serverless functions on Node.js)
- Payments — Polar (merchant of record) checkout links via
/api/checkout; /api/polar-webhook records subscriptions
- Email — Resend or any SMTP host (Spacemail, etc.), selected by which env vars are set
- AI — Claude Haiku for the decoder; nothing writes posts for you
- Theme — Clock-based auto switching (7am–7pm light, else dark) — no manual toggle
Setup
1. Clone & install (no dependencies required)
git clone https://github.com/davidtost5/sona.git
cd sona
The marketing site is fully static — open public/index.html in a browser to preview. The serverless functions and auth need the steps below to work end-to-end.
2. Provision Supabase
- Create a project at supabase.com
- Authentication → Sign In / Providers → Email → toggle off Confirm email (so signup → app is instant)
- SQL Editor → New query → paste
schema.sql → Run
3. Set environment variables in Vercel
Vercel → your project → Settings → Environment Variables → add:
| Variable | Where to find it |
|---|
SUPABASE_URL | Supabase → Settings → Data API → Project URL |
SUPABASE_ANON_KEY | Supabase → Settings → Data API → anon · public |
SUPABASE_SERVICE_ROLE_KEY | Supabase → Settings → Data API → service_role · secret (server-only) |
POLAR_LINK_CREATOR_MONTHLY, POLAR_LINK_CREATOR_ANNUAL, POLAR_LINK_PRO_MONTHLY, POLAR_LINK_PRO_ANNUAL | Polar → Products → Checkout Links |
POLAR_WEBHOOK_SECRET | Polar → Settings → Webhooks → your endpoint |
POLAR_PORTAL_URL | https://polar.sh/<your-org-slug>/portal |
4. Deploy
vercel --prod
Visit your domain. Sign up → land in /app. Click Save on any Discover card → check Supabase → there's a row tied to your user.
Folder structure
.
├── api/ # Vercel serverless functions
│ ├── _supabase.js # shared admin client (server-only)
│ ├── auth-config.js # public Supabase config for the browser
│ ├── checkout.js # Polar checkout link for each plan
│ ├── contact.js # contact-form persistence
│ ├── founding-count.js # real seat counter (returns 0 until first sale)
│ └── waitlist.js # waitlist persistence
├── public/ # Vercel output dir (static site)
│ ├── index.html # marketing site
│ ├── app.html # authenticated studio
│ ├── contact.html # contact page
│ ├── auth.js # client-side Supabase auth modal
│ ├── data.js # form → API plumbing
│ └── logo.svg # brand mark (also referenced as favicon)
├── schema.sql # one-time Supabase setup
├── vercel.json # routes + headers
└── README.md
Brand
Built by David Tost, Founder of Sona.
Logo: dark squircle, S-wave mark, indigo sparkle. The "S" is the brand letter and the wave is the sona (sound) it represents.
