AICraft Studio - Complete Documentation

Version: 1.0.0
Author: Tareq Aziz
Company: GSCodes
Support: support@gscodes.dev

Introduction
Requirements
Installation
File Structure
Configuration
Customization
Components
Pages
Deployment
Troubleshooting
Support
Credits

Introduction

AICraft Studio is a premium AI SaaS starter template built with Next.js 15, React 19, Tailwind CSS 4, and shadcn/ui. It provides a complete foundation for building modern AI-powered applications with a stunning glassy dark/light mode UI.

Key Features

✅ Next.js 15 with App Router and Server Components
✅ React 19 with latest features
✅ Tailwind CSS 4 for modern styling
✅ shadcn/ui component library
✅ TypeScript for type safety
✅ Framer Motion for animations
✅ Dark/Light Mode with next-themes
✅ Fully Responsive mobile-first design
✅ SEO Optimized with proper metadata
✅ 30+ Pre-built Pages ready to use

Requirements

Before installing AICraft Studio, ensure you have:

Node.js: Version 20.x or higher (Download)
npm: Version 10.x or higher (comes with Node.js)
Git: For version control (Download)
Code Editor: VS Code recommended (Download)

Recommended VS Code Extensions

ESLint
Prettier
Tailwind CSS IntelliSense
TypeScript and JavaScript Language Features

Installation

Step 1: Extract Files

Extract the downloaded ZIP file to your desired location:

unzip aicraft-studio.zip
cd aicraft-studio

Step 2: Install Dependencies

npm install

This will install all required packages listed in package.json.

Step 3: Environment Setup

Copy the example environment file:

cp .env.example .env.local

Edit .env.local with your configuration:

NEXT_PUBLIC_APP_URL=https://aicraft.gscodes.dev
NEXT_PUBLIC_APP_NAME="AICraft Studio"

# Optional: Add your API keys
OPENAI_API_KEY=your_openai_key
ANTHROPIC_API_KEY=your_anthropic_key

Step 4: Run Development Server

npm run dev

Open https://aicraft.gscodes.dev in your browser.

Step 5: Build for Production

npm run build
npm run start

File Structure

frontend/
├── app/                          # Next.js App Router
│   ├── (app)/                   # Application routes (dashboard)
│   │   └── app/
│   │       ├── overview/        # Dashboard overview
│   │       ├── chat/            # Chat interface
│   │       ├── image/           # Image generation
│   │       ├── audio/           # Audio generation
│   │       ├── video/           # Video generation
│   │       ├── history/         # Generation history
│   │       ├── library/         # Saved items
│   │       ├── account/         # Account management
│   │       └── settings/        # Settings pages
│   │           ├── page.tsx     # Profile settings
│   │           ├── billing/     # Billing & plans
│   │           ├── team/        # Team management
│   │           ├── api-keys/    # API key management
│   │           ├── security/    # Security settings
│   │           └── notifications/ # Notification preferences
│   ├── (marketing)/             # Marketing routes
│   │   ├── page.tsx            # Homepage
│   │   ├── features/           # Features page
│   │   ├── pricing/            # Pricing page
│   │   ├── use-cases/          # Use cases
│   │   ├── blog/               # Blog listing & posts
│   │   ├── docs/               # Documentation
│   │   ├── about/              # About page
│   │   ├── careers/            # Careers page
│   │   ├── contact/            # Contact page
│   │   └── [legal pages]/      # Privacy, Terms, etc.
│   ├── (auth)/                  # Authentication routes
│   │   ├── login/              # Login page
│   │   ├── register/           # Signup page
│   │   └── forgot-password/    # Password reset
│   ├── layout.tsx              # Root layout
│   └── globals.css             # Global styles
├── components/                  # React components
│   ├── app/                    # Dashboard components
│   │   ├── sidebar.tsx         # App sidebar
│   │   └── topbar.tsx          # App topbar
│   ├── marketing/              # Marketing components
│   │   ├── navbar.tsx          # Marketing navbar
│   │   └── footer.tsx          # Marketing footer
│   ├── ui/                     # shadcn/ui components
│   └── providers/              # Context providers
│       ├── theme-provider.tsx  # Theme context
│       └── sidebar-provider.tsx # Sidebar context
├── lib/                        # Utilities
│   └── utils.ts               # Helper functions
├── public/                     # Static assets
│   ├── mockup.png             # Hero image
│   └── [other assets]
├── types/                      # TypeScript types
│   └── index.ts               # Type definitions
├── .env.example               # Environment template
├── components.json            # shadcn/ui config
├── next.config.ts             # Next.js config
├── package.json               # Dependencies
├── tailwind.config.ts         # Tailwind config
└── tsconfig.json              # TypeScript config

Configuration

Theme Configuration

The default theme is set to light mode. To change it:

File: app/layout.tsx

<ThemeProvider
  attribute="class"
  defaultTheme="light"  // Change to "dark" or "system"
  enableSystem
  disableTransitionOnChange
>

Brand Colors

Customize your brand colors in app/globals.css:

:root {
  --primary: 262 83% 58%;        /* Purple */
  --accent: 262 90% 50%;         /* Vibrant Purple */
  --background: 0 0% 100%;       /* White */
  --foreground: 222.2 84% 4.9%;  /* Dark text */
}

.dark {
  --primary: 262 83% 58%;
  --accent: 262 90% 50%;
  --background: 222.2 84% 4.9%;  /* Dark background */
  --foreground: 210 40% 98%;     /* Light text */
}

Gradient Customization

The accent gradient is defined in globals.css:

.accent-gradient {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
}

App Name & Branding

Update the app name throughout:

Root Layout (app/layout.tsx):

export const metadata: Metadata = {
  title: "Your App Name – AI SaaS Starter UI",
  description: "Your description here",
};

Navbar (components/marketing/navbar.tsx and components/app/sidebar.tsx):

<span>Your App Name</span>

Customization

Adding a New Page

Marketing Page

Create file: app/(marketing)/your-page/page.tsx
Add to navbar: components/marketing/navbar.tsx

const navItems = [
  // ... existing items
  { title: "Your Page", href: "/your-page" },
]

Dashboard Page

Create file: app/(app)/app/your-page/page.tsx
Add to sidebar: components/app/sidebar.tsx

const mainNav = [
  // ... existing items
  { title: "Your Page", href: "/app/your-page", icon: YourIcon },
]

Adding shadcn/ui Components

npx shadcn@latest add [component-name]

Examples:

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog

Custom Fonts

The template uses Inter from Google Fonts. To change:

File: app/layout.tsx

import { YourFont } from "next/font/google";

const yourFont = YourFont({
  variable: "--font-your-font",
  subsets: ["latin"],
});

Logo Replacement

Replace these files in /public:

logo.png - Main logo (recommended: 200x200px)
favicon.ico - Browser favicon (16x16, 32x32)

Components

Core Components

Sidebar (`components/app/sidebar.tsx`)

Collapsible navigation sidebar with:

Main navigation items
Secondary navigation
Support links
Settings/Account links
Toggle button

Props:

Uses useSidebar() context for state management

Topbar (`components/app/topbar.tsx`)

Top navigation bar with:

Workspace switcher
Search bar
Theme toggle
Notifications
User menu

Marketing Navbar (`components/marketing/navbar.tsx`)

Marketing site navigation with:

Logo and branding
Navigation menu
Theme switcher
CTA buttons
Mobile menu

UI Components

All UI components are from shadcn/ui and located in components/ui/:

button.tsx - Button variants
card.tsx - Card containers
dialog.tsx - Modal dialogs
dropdown-menu.tsx - Dropdown menus
form.tsx - Form components
input.tsx - Input fields
select.tsx - Select dropdowns
switch.tsx - Toggle switches
tabs.tsx - Tab navigation
And 20+ more...

Pages

Marketing Pages

Route	Description
`/`	Homepage with hero, features, and CTAs
`/features`	Detailed feature showcase
`/pricing`	Pricing plans and comparison
`/use-cases`	Use case examples
`/blog`	Blog listing
`/blog/[slug]`	Individual blog post
`/docs`	Documentation hub
`/about`	About page
`/careers`	Careers page
`/contact`	Contact form
`/privacy`	Privacy policy
`/terms`	Terms of service
`/cookie-policy`	Cookie policy

Dashboard Pages

Route	Description
`/app/overview`	Dashboard with stats and activity
`/app/chat`	AI chat interface
`/app/image`	Image generation tool
`/app/audio`	Audio/voice generation
`/app/video`	Video generation
`/app/history`	Generation history
`/app/library`	Saved/favorited items
`/app/account`	Account management
`/app/settings`	Profile settings
`/app/settings/billing`	Billing & subscription
`/app/settings/team`	Team management
`/app/settings/api-keys`	API key management
`/app/settings/security`	Security settings
`/app/settings/notifications`	Notification preferences

Authentication Pages

Route	Description
`/login`	Login page
`/register`	Signup page
`/forgot-password`	Password reset

Deployment

Vercel (Recommended)

Push code to GitHub
Visit vercel.com
Import your repository
Vercel auto-detects Next.js
Add environment variables
Deploy!

Netlify

Install Netlify CLI: npm install -g netlify-cli
Build: npm run build
Deploy: netlify deploy --prod

Docker

Create Dockerfile:

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Build and run:

docker build -t aicraft-studio .
docker run -p 3000:3000 aicraft-studio

Troubleshooting

Port Already in Use

# Use a different port
npm run dev -- -p 3001

Module Not Found Errors

# Clear cache and reinstall
rm -rf node_modules .next
npm install

Hydration Errors

Usually caused by browser extensions
Template includes suppressHydrationWarning for theme-related mismatches
Check browser console for specific errors

Build Errors

# Check TypeScript errors
npm run build

# Fix linting issues
npm run lint

Styling Issues

Clear browser cache
Check if Tailwind classes are correct
Verify globals.css is imported in layout.tsx

Support

Getting Help

Email: support@gscodes.dev
Documentation: View Online Docs
Help Center: Visit Help Center

Before Contacting Support

Check this documentation
Review the CHANGELOG.md
Search for similar issues
Gather error messages and screenshots

What to Include in Support Requests

AICraft Studio version
Node.js version (node --version)
npm version (npm --version)
Browser and OS
Steps to reproduce the issue
Error messages (full text)
Screenshots if applicable

Credits

Created By

Created by Tareq Aziz (Lead Engineer)
Company: GSCodes
Website: https://gscodes.dev

Technologies Used

Next.js - React framework
React - UI library
Tailwind CSS - CSS framework
shadcn/ui - Component library
Radix UI - Headless components
Framer Motion - Animation library
Lucide Icons - Icon library
next-themes - Theme management
React Hook Form - Form handling
Zod - Schema validation
Sonner - Toast notifications

Image Credits

Demo images from Unsplash (for demonstration only)
Replace with your own licensed images before production

License

This template is licensed under the Regular License. See LICENSE.md for full terms.

Last Updated: January 15, 2026
Version: 1.0.0