Installation

npm install -g moorcheh-chat-boilerplate

Usage

Create a new project:

npx moorcheh-chat-boilerplate

Or if installed globally:

moorcheh-chat-boilerplate

Follow the prompts to:

1. Enter your project name
2. The boilerplate will be copied to a new directory
3. Navigate to your project and install dependencies

cd your-project-name
npm install
npm run dev

What's Included

• Next.js 15 with React 19
• Tailwind CSS for styling
• Radix UI components
• Framer Motion for animations
• Chat components pre-built and ready to use
• Moorcheh AI integration setup
• TypeScript configuration
• ESLint configuration

Features

• AI Chat Interface - Pre-built chat components
• Modern UI - Beautiful, responsive design with Tailwind CSS
• TypeScript - Full type safety
• Mobile Responsive - Works on all devices
• Dark Mode - Built-in theme switching
• Fast Development - Hot reload and Turbopack support

Configuration

After creating your project, you'll need to configure the Moorcheh AI integration:

1. Get Your Moorcheh API Key

1. Visit Moorcheh Console
2. Sign up or log in to your account
3. Create a new Namespace and upload documents or select an existing one
4. Copy your API key from the Moorcheh API

2. Configure API Settings

1. Set your API key as an environment variable:

NEXT_PUBLIC_MOORCHEH_API_KEY=your_api_key_here

2. Configure your API request in config/api-config.json:
   • Visit Moorcheh Console Playground
   • Configure your namespace, model, and other settings
   • Export the complete JSON configuration
   • Paste it into config/api-config.json

The boilerplate will automatically handle the query and chatHistory fields while using your namespace and model configuration.

3. Customize Appearance (Optional)

Option 1: Interactive Setup (Recommended) Visit http://localhost:3000/landing to use the interactive setup flow that guides you through:

• Branding configuration (app name, company, etc.)
• Theme selection (10+ themes available)
• Typography settings (primary, heading, mono fonts)
• Live preview of your changes

Option 2: Manual Configuration Edit config/appearance.json directly to customize:

• Branding: App name, title, subtitle, company info
• Themes: Choose from 10+ available themes
• Fonts: Configure primary, heading, and monospace fonts

See the documentation files in your generated project for detailed customization guides.

Project Structure

your-project/
├── app/                    # Next.js app directory
├── components/            # React components
│   ├── chat/             # Chat-specific components
│   └── ui/               # Reusable UI components
├── config/               # API configuration
├── customize/            # Theme and font customization
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions
└── public/               # Static assets

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT