SaasRock 1.7.0 - Chatbots, Themes, Form Builder, and B2B2C Sites with TanStack Start
- Name
- Alexandro MartΓnez
#tanstack#ai#shadcn#chatbot#react-router#themes
Hello! Finally, 1.7 with a bunch of useful features!
Watch the introduction video: https://www.loom.com/share/76d7fa9e347e4772af001aa69c31790f
| Feature | Editions | Read Docs |
|---|---|---|
| π€ Chatbots with AI SDK | MVP, Core, Pro | Docs |
| π¨ Account Themes with Tweakcn | MVP, Core, Pro | Docs |
| π Form Builder | Core, Pro | Docs |
| π B2B2C Sites with TanStack Start | Pro | Docs |
π€ Chatbots with AI SDK
Built-in AI assistant using Vercel AI SDK. Access via bot icon in nav bar or full chat pages.
Three contexts:
| Context | Route | Auth | Tools |
|---|---|---|---|
| Tenant | /app/:tenant/chat |
Required | session, info, navigate, logs |
| Admin | /admin/chat |
Admin only | accounts, users, stats, navigate |
| Marketing | Homepage dialog | None | features, pricing |
Features: Streaming responses, reasoning display, tool visualization, code highlighting, persistent history.
AI Monitoring (Admin > AI): Token count, cost tracking, usage analytics.
π¨ Account Themes
Per-tenant theme customization. Copy/paste from tweakcn.com.
Presets: Default, Zinc, Blue, Tangerine, Sunset Horizon, Catppuccin
28 color tokens (light + dark): primary, secondary, accent, background, foreground, card, muted, border, input, ring, destructive, popover, sidebar.
Options: Font family, border radius, sidebar style (Inset/Full), force dark sidebar.
π Form Builder
Drag-and-drop forms with 25+ elements. Pro edition includes AI generation.
Elements:
- Inputs: text, email, phone, number, URL, textarea, password, rich text
- Selection: select, multi-select, radio, checkbox, switch
- Date/Time: date, time, datetime
- Special: file upload, signature pad, rating, NPS, slider, color picker, hidden, address
- Layout: heading, paragraph, divider, spacer, image, page break
Actions: Email, Webhook, Redirect, API
Features: Multi-step, conditional logic, submission limits, public URLs (/f/slug or /tenant/f/slug)
π B2B2C Sites with TanStack Start
Two-project architecture for consumer-facing sites. SaasRock (React Router v7) as backend API, TanStack Start as frontend.
The backend exposes API routes at /api/site/{type}/* and the frontend communicates via X-Site-Key and X-Site-Id headers.
20+ built-in themes: blue, emerald, violet, claude, ocean-breeze, vercel, twitter, and more. Each theme includes light/dark mode colors, border radius, font family, and sidebar variant.
API Routes:
| Endpoint | Method | Purpose |
|---|---|---|
/info |
GET | Site configuration (branding, copy) |
/auth/request-otp |
POST | Request OTP code |
/auth/verify-otp |
POST | Verify OTP code |
/auth/verify-password |
POST | Email/password auth |
/me |
GET | Current user info |
SiteId Resolution:
| Strategy | Example | How siteId is extracted |
|---|---|---|
| path | app.com/acme-corp/ |
First path segment |
| subdomain | acme-corp.app.com/ |
Subdomain |
| domain | acme-corp.com/ |
Full domain |
Mock API: Develop the frontend without the backend by setting USE_MOCK_API=true. Includes mock responses for site info, OTP requests, and verification.
Deprecation Notice
To-be-removed in v1.8:
- β Entity Builder
- β Onboarding Flows
- β Workflows
- β Page Block Builder - Use shadcn registries instead
The way most of these features were built is not compatible with how fast you can generate code/ui with Claude Code.
MVP edition already has this removed.
Let me know your thoughts!
-Alex
