aisaasnextjstutorialcase-studyintegration6 min read
Building AI Products with SaaS & AI UX Kits
Admin•
Most AI products aren't just AI interfaces—they're full SaaS applications with authentication, dashboards, settings, and AI interactions. Building everything from scratch takes months. But what if you could combine proven UI kits to ship faster?
The AI Feedback Assistant is a live demo that shows how to combine the SaaS Starter Kit (for app shell and auth) with the AI UX Kit (for AI interactions) to build a complete product in days, not months.
🎯 The Challenge: Building Complete AI Products
When building an AI product, you need:
- SaaS foundation: Auth, navigation, settings, user management
- AI interactions: Prompt inputs, streaming responses, feedback loops
- Consistent design: Token-driven theming across all screens
- Accessibility: WCAG AA compliance throughout
- Mobile responsiveness: Works beautifully on all devices
Building this from scratch takes 8-12 weeks. Combining the SaaS Starter Kit and AI UX Kit reduces this to 1-2 weeks.
🏗️ Architecture: How the Kits Work Together
The AI Feedback Assistant demonstrates a clear separation of concerns:
┌─────────────────────────────────────────┐
│ SaaS Starter Kit │
│ ┌───────────────────────────────────┐ │
│ │ App Shell (Sidebar, Topbar) │ │
│ │ Auth Flows (Login, Signup) │ │
│ │ Settings Pages │ │
│ │ Dashboard Layouts │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘
│
│ Composes with
▼
┌─────────────────────────────────────────┐
│ AI UX Kit │
│ ┌───────────────────────────────────┐ │
│ │ Prompt Input Components │ │
│ │ Streaming Response Viewer │ │
│ │ Feedback Modals │ │
│ │ AI Configuration Panels │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ AI Feedback Assistant (Demo) │
│ Complete AI Product │
└─────────────────────────────────────────┘
🔐 Step 1: Setting Up Authentication (SaaS Starter Kit)
Start with the SaaS Starter Kit for your app foundation:
// app/layout.tsx
import { MainSidebar } from '@/components/ui/composites/main-sidebar'
import { Topbar } from '@/components/ui/composites/topbar'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<div className="flex h-screen">
<MainSidebar
activeMainNav="chat"
user={{
name: 'John Doe',
email: 'john@example.com',
}}
/>
<div className="flex-1 flex flex-col">
<Topbar />
<main className="flex-1 overflow-auto">
{children}
</main>
</div>
</div>
</body>
</html>
)
}
What You Get
- ✅ Sidebar navigation with user menu
- ✅ Topbar with notifications and search
- ✅ Responsive layout that collapses on mobile
- ✅ Accessible keyboard navigation
- ✅ Token-driven styling
💬 Step 2: Adding AI Interactions (AI UX Kit)
Now add AI components from the AI UX Kit:
// app/chat/page.tsx
import { PromptInput } from '@/components/ui/composites/prompt-input'
import { ResponseViewer } from '@/components/ui/composites/response-viewer'
import { FeedbackModal } from '@/components/ui/templates/modal/feedback-modal'
export default function ChatPage() {
const [messages, setMessages] = React.useState([])
const [showFeedback, setShowFeedback] = React.useState(false)
const [selectedResponseId, setSelectedResponseId] = React.useState(null)
const handlePromptSubmit = async (prompt: string, files: AttachedFile[]) => {
// Add user message
const userMessage = { id: Date.now(), role: 'user', content: prompt }
setMessages(prev => [...prev, userMessage])
// Stream AI response
const response = await streamAIResponse(prompt, files)
const aiMessage = { id: Date.now() + 1, role: 'assistant', content: response }
setMessages(prev => [...prev, aiMessage])
}
const handleFeedback = (responseId: string) => {
setSelectedResponseId(responseId)
setShowFeedback(true)
}
return (
<div className="flex flex-col h-full">
{/* Messages */}
<div className="flex-1 overflow-auto p-6 space-y-4">
{messages.map((message) => (
<div key={message.id} className={message.role === 'user' ? 'text-right' : 'text-left'}>
{message.role === 'assistant' ? (
<div className="inline-block max-w-3xl">
<ResponseViewer content={message.content} />
<button
onClick={() => handleFeedback(message.id)}
className="mt-2 text-sm text-secondary-600 hover:text-primary-600"
>
Rate this response
</button>
</div>
) : (
<div className="inline-block bg-primary-100 rounded-lg px-4 py-2">
{message.content}
</div>
)}
</div>
))}
</div>
{/* Prompt Input */}
<div className="p-6 border-t">
<PromptInput
onSubmit={handlePromptSubmit}
placeholder="Ask anything..."
actionButton="send"
/>
</div>
{/* Feedback Modal */}
<FeedbackModal
isOpen={showFeedback}
onClose={() => setShowFeedback(false)}
onSubmit={async (data) => {
await submitFeedback(selectedResponseId, data)
setShowFeedback(false)
}}
/>
</div>
)
}
What You Get
- ✅ Production-ready prompt input with file attachments
- ✅ Streaming response viewer with markdown support
- ✅ Feedback modal with star ratings
- ✅ Accessible keyboard navigation
- ✅ Mobile-responsive layout
⚙️ Step 3: Adding Settings Integration (SaaS Starter Kit)
Add AI configuration to your settings using SaaS Starter Kit patterns:
// app/settings/ai-integrations/page.tsx
import { MainSidebar } from '@/components/ui/composites/main-sidebar'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/primitives/card'
import { Input } from '@/components/ui/primitives/input'
import { Button } from '@/components/ui/primitives/button'
export default function AISettingsPage() {
return (
<div className="flex">
<MainSidebar activeMainNav="settings" activeSection="ai-integrations" />
<main className="flex-1 p-6">
<div className="max-w-2xl">
<h1 className="text-2xl font-bold mb-6">AI Integrations</h1>
<Card>
<CardHeader>
<CardTitle>API Configuration</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<label className="block text-sm font-medium mb-2">
OpenAI API Key
</label>
<Input
type="password"
placeholder="sk-..."
defaultValue="••••••••"
/>
</div>
<div>
<label className="block text-sm font-medium mb-2">
Model Selection
</label>
<select className="w-full px-3 py-2 border rounded-lg">
<option>GPT-4</option>
<option>GPT-3.5 Turbo</option>
<option>Claude 3</option>
</select>
</div>
<Button action="primary">Save Changes</Button>
</CardContent>
</Card>
</div>
</main>
</div>
)
}
🎨 Step 4: Ensuring Design Consistency
Both kits use the same token system, so everything looks cohesive:
// Both kits use the same tokens
// tailwind.config.js (shared)
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: 'var(--color-primary-50)',
600: 'var(--color-primary-600)',
},
secondary: {
100: 'var(--color-secondary-100)',
200: 'var(--color-secondary-200)',
},
},
},
},
}
This means:
- SaaS Starter Kit sidebar uses
primary-600for active states - AI UX Kit prompt input uses
primary-600for the send button - Both respect light/dark mode automatically
- Everything stays visually consistent
📱 Complete Example: Home Page with Prompt Screen
Combine both kits for a polished landing experience:
// app/home/page.tsx
import { Topbar } from '@/components/ui/composites/topbar' // SaaS Starter Kit
import { PromptScreen } from '@/components/ui/recipes/prompt-submission/prompt-screen' // AI UX Kit
export default function HomePage() {
return (
<div className="flex flex-col min-h-screen">
<Topbar isSticky />
<PromptScreen
heading="What can I help you with?"
placeholder="Ask anything..."
suggestedActions={[
{ id: '1', text: 'Summarize document', icon: 'DocumentIcon' },
{ id: '2', text: 'Generate code', icon: 'CodeBracketIcon' },
{ id: '3', text: 'Answer question', icon: 'QuestionMarkCircleIcon' },
]}
onPromptSubmit={(prompt) => {
router.push(`/chat?prompt=${encodeURIComponent(prompt)}`)
}}
/>
</div>
)
}
✅ Integration Checklist
When combining the kits, ensure:
- Shared token system - Both kits use the same Tailwind config
- Consistent navigation - Sidebar from SaaS Kit, AI components fit naturally
- Unified auth state - User data flows to both kit components
- Mobile responsiveness - Both kits work together on small screens
- Accessibility - Keyboard navigation works across combined components
- Error handling - Consistent error states and messages
🚀 Real-World Results
The AI Feedback Assistant demo shows:
- Complete product built in days, not months
- Consistent design across all screens
- Accessible to WCAG AA standards
- Mobile-responsive on all devices
- Production-ready patterns you can trust
See it live: AI Feedback Assistant Demo
💡 Key Takeaways
- Start with SaaS Starter Kit for app shell, auth, and settings
- Add AI UX Kit for prompt flows, streaming, and feedback
- Share token system for consistent theming
- Compose components from both kits naturally
- Ship faster by leveraging proven patterns
🎯 Get Both Kits
Build complete AI products faster:
- SaaS Starter Kit - App shell, auth, dashboards, settings
- AI UX Kit - Prompt flows, streaming, feedback, AI patterns
Or see them combined: AI Feedback Assistant Demo
❓ FAQ
Can I use the kits separately?
Yes! Use SaaS Starter Kit for non-AI SaaS products, or AI UX Kit for AI features in existing apps.
Do I need both kits for AI products?
For complete AI SaaS products, yes. SaaS Starter Kit provides the foundation, AI UX Kit provides AI-specific interactions.
How do I handle state management between kits?
Both kits are component libraries. Use your preferred state management (React Context, Zustand, Redux) to share user/auth state.
What about backend integration?
Both kits are frontend-only. You'll wire your own APIs for auth, AI calls, and data persistence.
Can I customize components from both kits?
Yes! All components use Tailwind and are fully customizable while maintaining accessibility.
