CETKING ONE WEBSITE — website + Rav Singh AI as one interface

Named by Ravneet, 10 Oct 2026. Not a plain website, not a ChatGPT-style chatbot, and never a help-desk bubble in the corner: Rav is the main interface and the website is what he shows. Built on https://ai.cetking.com now; later it becomes https://cetking.com. Ideas merged from Claude (stage + director, Rav dock, pills as menu) and three other AIs (Arc / Apple bottom sheet, Claude-Artifacts / v0 generative cards, Perplexity command bar, Notion-style inline AI, Mission Control home, draggable divider, Conversation | Workspace toggle, expandable cards, intent-based routing, Maps-style sheet with a 72px peek, search and chat as one box, exam tiles as the first screen, "stats are the stage, Rav is the caption").

The idea in one line

The website is the stage, Rav is the director. What you say to Rav changes the stage; what you tap on the stage tells Rav where you are. Both always stay in step — one student session (exam, target, weak topics, last mock, CAP target) shared by both. Chat does not "answer and link"; chat changes the page: "Show me CAP III vacant seats in Pune" puts that table on the stage, highlights the row, Rav explains it, and the address becomes /cap?round=3&city=pune — so the page is still a real page.

The building blocks

1. Rav bar / dock (bottom of the phone) — replaces the chat bubble and the hamburger menu. At rest: a glowing bar ("Ask Rav — what do you want to crack today?") with Rav's latest line and 3 page-aware pills above it. Swipe up: it becomes a sheet with the conversation (like Arc Search / Apple's new Siri). Swipe down: the stage takes the full screen. It never shrinks into a bubble and has no launcher icon. Three heights, like Google Maps: Peek (default, ~72px: the type box + one line of context, e.g. "DI accuracy 41%. Drill?"), Half (conversation with the stage still visible above — the student sees the site move), Full (long explanations). Swipe down and the stage is where they left it, already updated. Search and chat are the same box: "jbims cutoff" just loads the table; "am I safe for JBIMS?" loads the table and Rav answers on it. (Claude dock + Perplexity command bar + Arc sheet.)
2. Desktop split — left ~2/3 the stage (real website pages, shown as cards, not long blogs), right ~1/3 Rav as a fixed rail (not a widget), already aware of the page (on /cap he knows the round, on /mocks he has the last score). A slim website top bar stays (exam switcher, dates, login, WhatsApp) — that is what keeps it from feeling like ChatGPT. The stage opens on Mission Control: the student's own next steps ("Continue Breakup Ch 2", "Mock on Sunday", "CAP round deadline in 6 days"), not a generic home page. The divider can be dragged: shrink Rav to a thin strip while solving, widen it to talk.
3. Chat moves the stage, stage talks back — "show IIM cutoffs" slides the cutoff page on stage; opening Breakup Ch 2 makes Rav say "Want 5 quick questions on this?". Every stage view has its own normal web address (Google can index it, links can be shared).
4. Generative cards — Rav answers with working cards, not walls of text: target card, 10-day revision plan as a tappable calendar, shortcut/video/question cards (same pastel card system as /veda). A card can be pinned to the stage or saved to My Profile. (Claude Artifacts / v0 / Gemini dynamic view.) How, cheaply: the cards are ready-made components in our code (Vercel AI SDK style). For a typed question the AI only chooses which card and with which settings; the code fills it with real data from Supabase. For pill taps no AI is used at all. A card can expand to ~90% of the screen with a "Back to Rav" chevron, so content feels primary while Rav stays the engine.
5. Inline AI on content pages — select a paragraph in a G Strategy page, White Book note or question solution → a small Rav button → "Explain simpler" / "Rav's shortcut" / "2 quick questions". The answer appears right there in the page; no chat window. (Notion AI / Apple Writing Tools.)
6. Stats are the stage, Rav is the caption — percentile trend, topic accuracy, coins, CAP chances stay as charts/tables on the stage; Rav only narrates the change ("Quant up 6. Opening the two sets that caused it."). If the answer is a table, it goes on the stage and the thread gets one sentence and the action — never a table typed out as text.
7. First screen is a plan, not a blank chat — a new visitor sees exam tiles on the stage with Rav's line ("Which exam are you preparing for?"); tapping a tile fills both sides. A returning student lands on the next best action: today's drill, the unfinished mock analysis, the CAP deadline.
8. Rav's glow — when Rav is doing something (opening a page, building a card) the screen edge glows in Rav's colour for a moment, so the student feels the AI acting (Apple Intelligence edge glow).

Mobile variants to try before choosing

• A. Rav dock / command bar (block 1) — recommended start.
• B. Conversation | Workspace toggle at the top — full screen for the work, Rav one tap away.
• C. Chat-first with expandable cards — the chat is the page; cards open to ~90%. (One AI warns against chat-only on mobile — it loses the stats, tables and the habit of a site. Keep C only if it tests clearly better on the phone.) All three are built as clickable phone mock-ups (instead of Figma) and Ravneet picks on his phone.

Journeys to design first (one rich card each)

1. Practice / Arena: "Test me on 5 tough Geometry questions" → question cards on stage; "hint" gives a nudge, never the answer (practice only — no hints in timed mocks or leaderboard battles).
2. Cutoffs & college fit: "Compare JBIMS and Symbiosis cutoffs" → sortable table + bar chart on stage; "I got 98.5 in CET, my options?" → college predictor card with sliders (category, city), using the cutoffs already in Supabase.
3. Shortcuts & books: "Show me Breakup" → the /veda shortcut card open on stage.
4. Past papers: "Explain the 2024 CET RC passage" → passage on stage, Rav's step-by-step beside it with the key lines highlighted.
5. My plan: "10-day revision plan for MAH CET" → tappable calendar card, save to profile.

How it is wired (for developers)

• Rav returns an intent plus a short line, e.g. {"intent":"show_cutoffs","colleges":["JBIMS","SIBM"],"line":"JBIMS needs more in VARC..."}. Pills send the same intents directly — no AI call.
• One shared app state holds the current intent; the stage listens and shows the matching ready-made card/page (<CutoffCompare colleges=[...]/>), and also updates the address bar.
• Cards are our own React components filled from Supabase (Vercel AI SDK style tool calls); the AI never writes the card's numbers.
• Phone layout: stage and Rav share one screen area and slide with smooth animation (no iframes, no chat widget embed). The desktop rail and the phone sheet are the same component at two screen sizes; the type box is part of every page template.

Rules (from Ravneet's earlier decisions — do not break)

• Pills before menus. Every Rav reply ends with ~4 next-step pills; the pills are the navigation. Pills are page actions ("Filter JBIMS", "Open today's drill", "Explain this cutoff"), not FAQs. On phones they sit just above the type box.
• Never put ai.cetking.com in an iframe or a corner bubble on another site — that is the help desk we are avoiding. (The floating bot on old cetking.com is only a temporary bridge.)
• Every page opens with Rav speaking about that page (page-aware hook lines), English only.
• Token rule: pill steps, page moves, plans and cards are built by code from Supabase (zero AI cost). The AI is used only when the student types his own question. "Code calculates, the AI talks."
• Privacy: the AI never sees name, phone or email.
• Exam honesty: inline AI and the Rav drawer work in practice, books and solutions — never inside a timed mock (help unlocks after the mock is submitted).
• SEO: every stage state is a real page with its own address; old links keep working.
• One identity: same Cetking ID, coins and progress everywhere (AUTH-CONTRACT.md).

Build order (each step is a blue preview → "go live")

1. Rav dock on phones + Rav panel on desktop across ai.cetking.com, with page-aware pills (scripted, zero tokens). Hamburger menu replaced by pills.
2. Chat moves the stage — Rav can open any page/card; pages tell Rav what's open.
3. Generative cards — revision-plan calendar, save to profile, pin to stage.
4. Inline AI on Veda / Shabda / Tarka pages and the iimking G Strategy pages.
5. Edge glow + polish, then move the whole thing to cetking.com (see SESSION-CARRYOVER.md for keeping logins).

Next step

Clickable phone mock-ups of mobile variants A, B and C (plus the desktop Mission Control split) for Ravneet to try on his phone before step 1 is built.