AI SaaS starterPro
A complete AI product on mocks, routed by state in one component: sign in with an email code, onboarding in three steps, the chat app with model picker and tool calls, credits every message spends, billing, and settings for the profile, API keys and usage.
On this page
Installation
The template installs as a folder under components/chatcn/pro/ai-saas-starter/: the router, the auth and onboarding screens, billing, settings and the mock backend.
Usage
import { AiSaasStarter } from "@/components/chatcn/pro/ai-saas-starter/ai-saas-starter"
<AiSaasStarter product="Quire" defaultRoute="sign-in" />Routing is state, so the whole product runs in one preview. To ship it, map route to your router and replace saas-mock.ts: the transport with your AI SDK route, the threads and histories with your database, the code check and purchases with your auth and billing calls. The screens take plain props and never import a runtime.
Examples
Signed in
On the Free plan with 12 credits: the first question runs a web search and answers with a table. A few messages later the banner offers more credits, or a switch to a cheaper model.
What is inside
- Sign in with an email code: one real input under six drawn cells, so paste, autofill and screen readers see a single field. A wrong code (000000 in the demo) says how to fix it; resend unlocks after 30 s.
- Onboarding in three steps: name the workspace, pick a use case, pick a default model with its cost per message.
- The chat app on
ChatLayout,ChatSidebarand the freeChatbotblock, on AI SDKuseChatwith a mock transport: reasoning, a streamed web search and a Markdown answer. - Credits on
CreditBalance: every message spends its model's cost up front.RateLimitBannerwarns when a few messages are left and offers Buy credits or a cheaper model once they run out. - Billing with
CreditTopUp,InAppPlanPickerand invoices. An upgrade adds the difference in credits right away. - Settings on
SettingsPanel: profile and appearance, workspace API keys with the secret shown once and a two step revoke, a bring your own key field onApiKeyInput, and usage onUsageMeter.
Props
| Prop | Type | Notes |
|---|---|---|
product | string | Wordmark and headings. Default "Quire" |
defaultRoute | "sign-in" | "verify" | "onboarding" | "chat" | "billing" | "settings" | Default sign-in |
autoStart | boolean | Send the first message when the chat opens, for demos |
user | { name, email } | The signed in account |
credits | number | Balance at the start. Default 24 |
plans, defaultPlanId | PickerPlan[], string | For billing. Default Free, Pro, Team |
packs | CreditPack[] | Credit packs for the top up |
models, providers, modelCredits | ModelOption[], ModelProvider[], Record<string, number> | The composer's model picker and the cost per message |
threads | ChatThread[] | The sidebar at the start |
layout | "auto" | "desktop" | "mobile" | Force the phone layout inside a device frame |
Keyboard
| Key | Action |
|---|---|
Enter | Send the code, continue onboarding, send a message |
Shift+Enter | New line in the composer |
Cmd+B or Ctrl+B | Collapse or expand the sidebar |
Cmd+Shift+O or Ctrl+Shift+O | New chat |
Escape | Cancel creating an API key, close menus and dialogs |
Accessibility
- Every screen has one heading level 1. Onboarding moves focus to the step heading, so screen readers hear the new step.
- Errors sit under their field, linked with
aria-describedby, with an icon and words, never color alone. - The code field is one input with
autocomplete="one-time-code"; the cells are decoration. - Credits, key creation and revokes are announced politely. The composed chat parts keep their own live regions.
Motion
- Moving between screens is instant: the route changes from keys and clicks alike.
- The composed parts keep their own motion: the drawer, menus and dialogs, the streaming thread, rolling credits and prices.
- Under reduced motion only short fades remain.