Starter templates
A starter template is a ready mix of kits, pages, words, tabs and a style. People pick one in onboarding ("How do you want to start?"), or the owner switches to one later from HQ (the Starters block). What a template makes is an ordinary blueprint: every page, tab, word and colour stays a setting that the owner can edit on the page or ask the AI to change. Switching is one saved version, so it can be undone in History.
| Business starter | Personal starter | |
|---|---|---|
| Feels like | The chat app: one chat list, no tab bar | A soft, personal home |
| Style | Messenger (extends Classic; chat-app colours, glass bars, light and dark) | Soft (cream and rose, rounded type, roomy) |
| Navigation | dashboard.nav: "list": the chat list is home; HQ, AI, Calls, Games, Services and Apps are rows in it | Tabs: Home, Chats, Calls, Plans, Photos (HQ and AI in the top bar) |
| Kits | direct-chat, group-chat, channels, support, calls, trivia, quiz-board, survey-showdown, charades, party-pack, game-maker, polls, wheel, tv, coins, leaderboards, vip, verified, appointments, analytics | direct-chat, group-chat, calls, gallery, guestbook, group-plan, polls, analytics |
Business starter #
- Home is the chat list, exactly like the chat app: your picture (opens your spaces), the title "Chats", New chat and Search icons, All / Unread / Channels chips, then rows: HQ (accent square with a live line such as "Bloom Studio · 12 members · 48 messages this week"), AI, the first chat, then Calls, Games, Services and Apps (a folder tile of their first four icons and a count), then every other chat. Rows have 54px gradient-initial avatars (square for channels and cases), "You:" previews, unread and @ counts, pins, and hold for Pin / Mute / Mark read. There is no bottom tab bar; the owner can turn one on in HQ → Navigation.
- Wide screens: the list on the left (380px) and the open chat, page or AI on the right.
- The open chat is the page
chat-screen(talk.screen), made of oneconversationblock withbackground: "chatBg"andsend: "icon": the chat app's bar (Back, picture, name, members, call, video and info icons), the chat colour behind the messages, and a round send button. Replies, threads, reactions, edits, photos and read receipts come from the Chats kit settings. Add blocks around the conversation (rules, a pinned card, a poll) to change every chat screen at once. - Calls: call buttons (Call us, Video call, New call) and the recent calls log (missed in red, tap to call back, video button). A team room for the owner.
- Game Night (page
games, the chat app's games lobby from docs/LOBBY.md, made withgamesLobbyPage): a header with your coins, a showcase of Trivia Night, Quiz Board and Survey Showdown with a PLAY button, Live now, House games as bright posters (small, medium or large), Quick play (Polls, Wheel, Show on TV, Make a game), Big wins, Your record and the weekly leaderboard. In the chat list its row is alobby.row(a child of the chats block) with a mosaic of the poster art. No slots or casino games. - Services (the chat app's services page): a header card (the space's logo or first letter on a rounded square, its name in small capitals over "How can we help?", a line and Message us / Book), "This week" banners swiped sideways, Services cards with prices and buttons, Support rows, Find us as an icon grid, and Team links only the team sees. Section titles are small capitals over cards.
- Apps (the chat app's apps page): sections Games, For members and For the team, each a card of soft-tinted 56px icons, four across, with a short status line under each name ("6 to play", "Vote now") and a LIVE badge; plus your coins.
- HQ (managers): Overview (members, active people, messages, page views, plays, forms and bookings over 7/14/30 days with change and sparklines), Quick actions, Waiting for you (proposals), Analytics, four leaderboards (coins this week, most active, top players, all time), Members, Invite, Access, Pages, Library, Styles, Starters, History, Blueprint.
- Customers can call the business: "Call us" rings the owner without the customer seeing anyone's number.
Personal starter #
- Home: a header with your picture, a line about you, Message me and Sign my guestbook; a Now card; glossy Highlights tiles; Links with soft icons.
- Chats and Calls with your people, plus a Hangout room.
- Plans: a to-do board (its own
todocollection), a Journal only you see (its ownjournalcollection), and With others (group plans, polls). - Photos: the gallery.
- HQ: overview, quick actions, analytics, friends and family, invite, access, pages, starters, history.
Photo book starter #
Your photos made into a book you flip through, in the Album style. Tabs: Book (the book fills itself from the Gallery, a chapter per month), Photos, Albums (every #tag is a book), Chats, Guestbook; HQ and the AI in the top bar. Details in PHOTOBOOK.md.
Editing a page #
Every page has an Edit button for people who manage the space. Edit mode turns the page into its own editor:
- Rename the page in the title.
- Each part sits in a frame with its name, move up / down, settings and more (Duplicate, Remove).
- Headers, tiles and service sections stay live: tap a button, tile or service to edit it, or "+" to add one. Hold to move or remove.
- Settings open as a sheet built from the block's description: text, numbers, switches, lists, icon picker, colour picker, links with page chips, choices, and Who sees it (roles).
- Add to page offers headings, text, services or links, app tiles, a header, a picture, a button, a card, a number, a list, a poll, a wheel, a call button and a line.
- Save saves the whole page as one version (Undo in History). Cancel asks before throwing changes away.
Native on phones #
- iOS and Android use the system tab bar through expo-router native tabs (UITabBar, Material bottom navigation) with SF Symbols and Material icons, an unread badge on the chats tab, and the tab bar minimising on scroll (iOS).
- Pages, conversations and the AI are pushed on a native stack: they slide in and swipe back.
- Screens use large titles that collapse into a bar as you scroll, automatic insets on iOS, and action sheets (ActionSheetIOS) and page sheets for menus and forms.
- Haptics follow the style's
motion.haptics(off, light, full). - The web on a phone gets the same tabs drawn in the style. Wide screens get a sidebar (or the classic dashboard when a space has three panes or fewer).
- Lists are virtualised (FlatList with small batches); kit renderers load lazily.
Blocks the templates add #
All are described in convex/lib/templates/blocks.ts, so the AI, the editor and the docs catalog read the same descriptions.
| Block | What it is |
|---|---|
hero | Page header. look: "band" (colour band, round picture) or "card" (the chat app's header: rounded logo, eyebrow in small capitals over the title, soft glow). Buttons are its children (button, call, tile) |
tiles / tile | App-style grid. size small or large, tone solid / soft / glossy, frame: "card", heading: "label". A tile's note is a status line on small tiles; badge: "Live" draws a red LIVE pill |
links / link | Service or link section. layout list, cards, grid, icons (the app grid on a card) or banners (swiped sideways); heading, tone; each link has title, note, price, tag, action, icon, tint, image |
chats | The chat list (full screen when it is a page's only block). Its children are custom rows for pages, matched by href (a lobby.row for #games). search header / field / off, filters, compose, rowsTop and rowsUnder (page ids or "ai") place page rows in the list |
conversation | (Chats kit) One chat with its bar. On the page talk.screen names, it is every opened chat. background, send: "icon", calls, details, header |
hq.navigation | HQ → Navigation: the bottom tab bar switch and the order of the panes |
calls.recent | Call buttons (children: call) and the recent calls log |
hq.overview | HQ KPIs over 7/14/30 days |
hq.starters | Switch the space to a starter template |
Links (href) take #page-id, https://…, chat:<conversation key>, ai, mailto: and tel:. A link to a page that doesn't exist is dimmed for managers and hidden for others, so removing a kit never breaks a page.
Navigation #
blueprint.dashboard.panes is the app's pages in order. blueprint.dashboard.nav picks how they show:
"tabs"(default): on phones the first five panes are tabs, the rest buttons in the top bar. Each page'sicon(an icon name fromsrc/icons/icons.json) is its tab icon."list": the chat app's way. No tab bar; home is the chat list and the panes are rows in it (placed by the chats block'srowsTopandrowsUnder). Wide screens keep the list on the left.
The owner switches it in HQ → Navigation, or asks the AI.
Built only from blocks and settings #
A template is plain blueprint data. Every block kind and prop it uses is in the block catalog the AI reads, and every setting (dashboard.nav, talk.screen) is in the AI guide, so the AI can build the same starter, or a new one, from scratch. tests/templates.test.ts checks this for every template.
Making another template #
Add a TemplateDef in convex/lib/templates/ (see types.ts) and list it in TEMPLATES in index.ts. Tests in tests/templates.test.ts check every template makes a valid space, its tabs have icons, its links resolve, every kit can still be removed, and switching twice is stable.
Server functions #
blueprint.onboard({ name, space: { …, template } }): makes the space from a template.kits/templates/templates.apply({ template })(manage): switches an existing space.kits/templates/templates.overview({ days })(manage): HQ overview numbers.kits/templates/templates.recentCalls(): the signed-in person's calls in this space.
| Feeds starter | |
|---|---|
| Feels like | A social app (Instagram, Threads, X) |
| Style | Pulse (extends Classic; white by day, true black by night, hot pink and violet, bold type) |
| Tabs (phone) | Home, Explore, New, Activity, Profile |
| In the top bar | Messages, HQ, AI |
| Kits | feed, photos, stories, profiles, gallery, direct-chat, outside-feeds, polls, analytics |
Feeds starter #
Built only from general blocks the AI also uses, so anyone can ask the AI for the same thing (or any part of it).
- Home: a stories row, a box to post, then a switcher: For you (every feed of the space, newest first) and Following (people you follow, with Who to follow).
- Explore: search with trending #tags, tiles to Photos, Gallery, From outside and Polls, and a grid of the week's top photos and videos.
- New: a switcher of composers: Post, Photo, Story (gone in 24 hours). Your own posts as a grid below.
- Activity: a switcher of Activity (likes, replies, mentions, follows) and Saved.
- Profile: your profile (photo, @handle, bio, followers, Edit profile), then Posts, Photos and People.
- Messages: the chat list (direct and group chats).
- HQ: overview, quick actions (Ask the AI, New post, Pull in feeds, Gallery), analytics, people, invite, access, pages, starters, library, styles, history.
- Everything inside a post comes with the feed blocks: composer, avatars, replies and threads, reactions, reposts, quotes, edit and delete, saves, full-screen media. Taking out a kit (say Stories) takes its blocks off these pages too.
Picker covers (showcase) #
A template can carry showcase: { tagline, gradient: [colour, colour], stickers: [emoji…], shots: [{ icon, title, note, tint }] }. The picker (onboarding and HQ's Starters) draws a bright gradient cover with floating emoji, the tagline and a tilted phone showing the shots. Plain views, no images to download. The emoji bob gently only on the picked card, only while the app is in front and the person allows motion. Without showcase the picker shows the plain card. checkShowcase keeps it in limits (tagline 60, 6 stickers, 3 shots).
The switcher block #
switcher shows one child block at a time under a segmented control: For you / Following, Posts / Photos / People, Activity / Saved, Menu / Reviews. Props: labels (one per child; a missing one uses the child's title), look (segments · tabs · pills), start. Only the open part is drawn, so the others' live data isn't loaded until opened. In Edit mode all parts show so each can be changed.