ideasidea 001how it works
idea 001 · simple chatbot

How it works

A walkthrough of every moving part behind Srirama's Assistant — from the browser to the AI model and back, including the live database, serverless backend, and how it all ties together for under $20 a year.

Total cost~$12 / year
Statuslive
AI modelClaude Sonnet 4
HostingNetlify free tier
DatabaseSupabase free tier
system architecture
👤 User Browser Desktop / Mobile HTTPS request ☁ Cloudflare DNS · srirama.dev A record → 75.2.60.5 routes to ⬡ Netlify sensational-horse-4d8bae.netlify.app 📁 Static Files /public index.html ideas.html chat.html style.css / js λ Serverless Function /api/chat → /.netlify/functions/chat.js chat.js reads ANTHROPIC_API_KEY from env 🔄 Auto Deploy git push → rebuilds in ~30s 🔐 Env Variables ANTHROPIC_API_KEY SUPABASE_URL · SUPABASE_ANON_KEY 🧠 Anthropic Claude API claude-sonnet-4 max_tokens: 1024 api.anthropic.com/v1/messages POST /messages AI reply 🗄 Supabase PostgreSQL Database 📊 page_views home · ideas · chat → count 💡 idea_submissions name · email · idea · api_context East US · nano tier · free counter.js calls Supabase direct from browser insert idea ⌥ GitHub srirama-dev-portal main · private repo git push triggers deploy Legend: API call DB write/read deploy trigger
component breakdown
01
Cloudflare DNS

Handles domain registration and DNS for srirama.dev. Routes traffic to the right place when someone types the URL — the entry point for every visit to the site.

$12 / year
02
Netlify Hosting

Hosts and serves the website globally. Every code change pushed to GitHub automatically triggers a fresh deploy — no manual steps, no infrastructure to manage.

free tier
03
λ
Serverless Function

The secure backend that handles chat requests. Keeps the AI credentials safely server-side and acts as the bridge between the browser and the Anthropic API.

serverless
04
🧠
Anthropic Claude API

The AI brain behind the chatbot. Receives the conversation and generates intelligent, context-aware replies. You pay only for what you use — no fixed monthly AI cost.

pay per use
05
🗄
Supabase Database

The live database powering two things — the visitor counter on every page, and storing ideas submitted by visitors. Runs quietly in the background with zero configuration needed.

free tier
06
📱
Mobile Compatibility

The entire site is built to work seamlessly on any screen size — phones, tablets, desktops. No pinching, no zooming, no broken layouts. Feels native on both iOS and Android.

iOS + Android
request flow — what happens when you send a message
1
user types a message and hits send

chat.js appends the message to the local conversation history array and renders it immediately. A typing indicator with bouncing dots appears while waiting for a response.

2
browser POSTs to /api/chat

The full conversation history — every prior message in the session — is sent to the serverless endpoint so Claude has complete context for a relevant reply.

POST /api/chat → { messages: [{role, content}, ...], username: "muku" }
3
netlify routes to the serverless function

A redirect rule in netlify.toml maps /api/* to /.netlify/functions/:splat invisibly — the browser never sees the actual function path.

[[redirects]] from="/api/*" to="/.netlify/functions/:splat" status=200
4
function calls the anthropic API

chat.js prepends the system prompt, validates messages, then calls the Claude API. The API key is read from process.env — never sent to or visible in the browser.

model: "claude-sonnet-4-20250514" · max_tokens: 1024 · system: SYSTEM_PROMPT
5
claude generates a response

The model reads the system prompt and full conversation, generates a reply, and returns it as JSON to the serverless function which extracts the text and sends it back to the browser.

6
reply renders in the browser

chat.js removes the typing indicator, renders the reply with basic markdown support (bold, inline code), appends it to history, and scrolls to the bottom. Ready for the next message.

cost breakdown
ServiceWhat it doesPlanCost
CloudflareDNS + domain registration for srirama.devRegistrar$12 / year
NetlifyHosting, CDN, serverless functions, SSL, auto-deployFree tier$0
SupabasePostgreSQL for visitor counts and idea submissionsFree tier$0
Anthropic APIClaude AI model powering the chatbot responsesPay per use~$0–5 / mo
GitHubVersion control, source of truth for deploymentsFree (private)$0
Total (year 1, light usage)≈ $12–72 / year

Try it yourself

The chatbot is live — ask it anything. Check the ideas page to see what's being built next.