Get Started- Complete documentation overview

Pre-built React components for building AI-powered interfaces quickly.

Available Components

Component Philosophy

AI components are designed to be:

  • Reusable - Work in any context
  • Customizable - Easy to style and extend
  • Accessible - Follow accessibility best practices
  • Performant - Optimized for smooth interactions

Quick Start

Install Dependencies

All components use standard React and Next.js patterns. No additional dependencies required beyond what's already in the boilerplate.

Basic Usage

import ChatInterface from "@/components/ai/ChatInterface";
import SubscriptionStatus from "@/components/ai/SubscriptionStatus";

export default function AIPage() {
  return (
    <div>
      <SubscriptionStatus />
      <ChatInterface />
    </div>
  );
}

Component Structure

All AI components follow this structure:

src/components/ai/ ├── ChatInterface.tsx # Main chat UI ├── ChatMessage.tsx # Individual message component ├── ChatSidebar.tsx # Conversation sidebar ├── SubscriptionStatus.tsx # Subscription status display └── TypingIndicator.tsx # Loading indicators

Styling

Components use TailwindCSS and DaisyUI classes, matching the core ShipSafe design system:

  • Colors - Use theme colors (primary, base-content, etc.)
  • Spacing - Consistent padding and margins
  • Responsive - Mobile-first design
  • Dark mode - Automatic theme support

Customization

All components accept props for customization:

<ChatInterface
  className="custom-chat"
  messageClassName="custom-message"
  inputPlaceholder="Ask me anything..."
/>

Next Steps