Back
ZJY

ZJY

Codofly AI Template - Complete Quick Start Guide for Beginners

Codofly AI Template - Complete Quick Start Guide for Beginners

title: 'Codofly AI Template - Complete Quick Start Guide for Beginners' description: 'Step-by-step guide to get your AI chatbot website up and running in 15 minutes. From environment setup to first deployment - everything you need to know.' author: name: 'ZJY' src: '/avatar.jpg' date: '2025-01-16' image: '/blog/banner.svg'

Codofly AI Template Quick Start Guide

Codofly AI Template - Complete Quick Start Guide for Beginners

Congratulations on purchasing the Codofly AI Template! This comprehensive guide will walk you through setting up your AI chatbot website from scratch. By the end of this tutorial, you'll have a fully functional AI chatbot website running locally and ready for deployment.

🎯 What You'll Build

After completing this guide, you'll have:

  • ✅ A fully functional AI chatbot website
  • ✅ User authentication system (GitHub, Google, Email)
  • ✅ Stripe payment integration
  • ✅ Database setup with Prisma
  • ✅ Local development environment
  • ✅ Ready for production deployment

📋 Prerequisites

Before we start, make sure you have:

🚀 Step 1: Project Setup (3 minutes)

1.1 Clone and Install Dependencies

# Clone your template (replace with your actual repository URL)
git clone https://github.com/yourusername/your-ai-template.git
cd your-ai-template

# Install dependencies using pnpm (recommended)
pnpm install

# Alternative: using npm
npm install

1.2 Verify Installation

# Check if everything is installed correctly
pnpm dev

You should see output like:

▲ Next.js 15.2.0
- Local:        http://localhost:3000
- Ready in 2.3s

Visit http://localhost:3000 to see your template running (it won't be fully functional yet without environment variables).

🔧 Step 2: Environment Variables Setup (5 minutes)

2.1 Create Environment File

Create a .env.local file in your project root:

# Create the environment file
touch .env.local

2.2 Required Environment Variables

Copy and paste this template into your .env.local file:

# ===========================================
# REQUIRED - Core Configuration
# ===========================================

# Database (PostgreSQL)
DATABASE_URL="postgresql://username:password@localhost:5432/your_database_name"

# NextAuth.js Configuration
NEXTAUTH_SECRET="your-super-secret-key-here-make-it-long-and-random"
NEXTAUTH_URL="http://localhost:3000"

# OpenAI API (Required for AI features)
OPENAI_API_KEY="sk-your-openai-api-key-here"

# Stripe Configuration (Required for payments)
STRIPE_SECRET_KEY="sk_test_your_stripe_secret_key"
STRIPE_PUBLISHABLE_KEY="pk_test_your_stripe_publishable_key"
STRIPE_WEBHOOK_SECRET="whsec_your_webhook_secret"

# ===========================================
# OPTIONAL - Authentication Providers
# ===========================================

# GitHub OAuth (Optional)
GITHUB_ID="your_github_client_id"
GITHUB_SECRET="your_github_client_secret"

# Google OAuth (Optional)
GOOGLE_CLIENT_ID="your_google_client_id"
GOOGLE_CLIENT_SECRET="your_google_client_secret"

# ===========================================
# OPTIONAL - Email Configuration
# ===========================================

# Resend Email Service (Recommended)
AUTH_RESEND_KEY="re_your_resend_api_key"
AUTH_RESEND_FROM="noreply@yourdomain.com"

# Alternative: SMTP Configuration
EMAIL_SERVER="smtp://username:password@smtp.gmail.com:587"
EMAIL_FROM="noreply@yourdomain.com"

# ===========================================
# OPTIONAL - Additional AI Models
# ===========================================

# Anthropic Claude (Optional)
ANTHROPIC_API_KEY="sk-ant-your-anthropic-key"

# Google Gemini (Optional)
GOOGLE_GENERATIVE_AI_API_KEY="your-google-gemini-key"

# ===========================================
# OPTIONAL - App Configuration
# ===========================================

# Public App URL (for production)
NEXT_PUBLIC_APP_URL="https://yourdomain.com"

2.3 How to Get Each API Key

🔑 OpenAI API Key

  1. Go to OpenAI Platform
  2. Sign in or create an account
  3. Click "Create new secret key"
  4. Copy the key (starts with sk-)

💳 Stripe Keys

  1. Go to Stripe Dashboard
  2. Sign up or log in
  3. Go to "Developers" → "API keys"
  4. Copy the "Publishable key" and "Secret key"
  5. For webhook secret, go to "Webhooks" → "Add endpoint" → Copy the signing secret

🐙 GitHub OAuth (Optional)

  1. Go to GitHub Settings
  2. Click "New OAuth App"
  3. Set Authorization callback URL: http://localhost:3000/api/auth/callback/github
  4. Copy Client ID and Client Secret

🔍 Google OAuth (Optional)

  1. Go to Google Cloud Console
  2. Create a new project or select existing
  3. Enable Google+ API
  4. Create OAuth 2.0 credentials
  5. Set authorized redirect URI: http://localhost:3000/api/auth/callback/google

🗄️ Step 3: Database Setup (3 minutes)

3.1 Choose a Database Provider

Option A: Local PostgreSQL (Advanced)

# Install PostgreSQL locally
# macOS with Homebrew:
brew install postgresql
brew services start postgresql

# Create database
createdb your_database_name

Option B: Free Cloud Database (Recommended for beginners)

Neon (Recommended)

  1. Go to Neon
  2. Sign up for free
  3. Create a new project
  4. Copy the connection string
  5. Replace DATABASE_URL in your .env.local

Supabase (Alternative)

  1. Go to Supabase
  2. Create a new project
  3. Go to Settings → Database
  4. Copy the connection string

3.2 Run Database Migrations

# Generate Prisma client
pnpm prisma generate

# Run database migrations
pnpm prisma db push

# Optional: Open Prisma Studio to view your database
pnpm prisma studio

You should see output like:

✅ Your database is now in sync with your schema.

🎨 Step 4: Customize Your Branding (2 minutes)

4.1 Update Site Information

Edit app/layout.tsx:

export const metadata: Metadata = {
  title: 'Your AI Chatbot - Intelligent Conversations',
  description:
    'Experience the future of AI-powered conversations with our advanced chatbot.',
  // ... rest of the configuration
};

4.2 Update Hero Section

Edit messages/en.json:

{
  "marketing": {
    "title": "Your AI Chatbot Name",
    "description": "Your unique value proposition for users",
    "hero": {
      "badge": "🤖 Your Custom Badge",
      "button": "Start Chatting"
    }
  }
}

4.3 Replace Images

  • Replace /public/logo.svg with your logo
  • Update /public/og.png with your site preview
  • Customize /public/avatar.jpg with your profile image

🚀 Step 5: Test Your Setup (2 minutes)

5.1 Start Development Server

pnpm dev

5.2 Test Core Features

  1. Visit Homepage: Go to http://localhost:3000
  2. Test Authentication: Click "Get started" and try logging in
  3. Test AI Chat: Go to /chat and send a message
  4. Test Payments: Go to /pricing and try a test purchase

5.3 Common Issues and Solutions

Issue: "Database connection failed"

Solution: Check your DATABASE_URL in .env.local

Issue: "OpenAI API error"

Solution: Verify your OPENAI_API_KEY is correct

Issue: "Stripe error"

Solution: Make sure you're using test keys (start with sk_test_)

Issue: "Authentication not working"

Solution: Check your OAuth provider configuration

🎉 Step 6: Deploy to Production (5 minutes)

6.1 Deploy to Vercel (Recommended)

  1. Push to GitHub:
git add .
git commit -m "Initial setup complete"
git push origin main
  1. Deploy to Vercel:
    • Go to Vercel
    • Import your GitHub repository
    • Add environment variables in Vercel dashboard
    • Deploy!

6.2 Environment Variables for Production

In Vercel dashboard, add these environment variables:

DATABASE_URL=your_production_database_url
NEXTAUTH_SECRET=your_production_secret
NEXTAUTH_URL=https://yourdomain.vercel.app
OPENAI_API_KEY=sk-your-openai-key
STRIPE_SECRET_KEY=sk_live_your_live_stripe_key
STRIPE_PUBLISHABLE_KEY=pk_live_your_live_stripe_key
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret

6.3 Configure Stripe Webhooks

  1. Go to Stripe Dashboard → Webhooks
  2. Add endpoint: https://yourdomain.vercel.app/api/stripe/webhook
  3. Select events: checkout.session.completed, invoice.payment_succeeded
  4. Copy the webhook secret to your environment variables

🔧 Advanced Configuration

Custom AI Models

Edit app/api/chat/route.ts to customize your chatbot:

export async function POST(req: Request) {
  const { messages } = await req.json();

  // Customize your system prompt
  const systemPrompt =
    'You are a helpful AI assistant for [Your Business]. Always be professional and helpful.';

  const response = await openai.chat.completions.create({
    model: 'gpt-4', // Change model here
    messages: [{ role: 'system', content: systemPrompt }, ...messages],
    stream: true,
  });

  // ... rest of implementation
}

Custom Pricing Plans

Edit constants/tier.tsx:

export const TIER = {
  FREE: {
    name: 'Free',
    price: 0,
    credits: 10,
    features: ['10 free messages', 'Basic support'],
  },
  PRO: {
    name: 'Pro',
    price: 19.99,
    credits: 1000,
    features: ['1000 messages', 'Priority support', 'Advanced features'],
  },
};

📊 Monitoring and Analytics

Built-in Analytics

The template includes:

  • Google Analytics integration
  • User behavior tracking
  • Revenue monitoring
  • Performance metrics

Database Monitoring

# View your database
pnpm prisma studio

# Check database status
pnpm prisma db status

🚨 Troubleshooting

Common Errors

"Module not found" errors

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

"Database schema out of sync"

# Reset and sync database
pnpm prisma db push --force-reset

"Environment variables not loading"

  • Make sure .env.local is in the project root
  • Restart your development server
  • Check for typos in variable names

Getting Help

If you encounter issues:

  1. Check the logs: Look at your terminal output for error messages
  2. Verify environment variables: Make sure all required variables are set
  3. Test individual components: Try each feature separately
  4. Check documentation: Refer to the official docs for each service

🎯 Next Steps

Congratulations! Your AI chatbot website is now running. Here's what to do next:

1. Customize Further

  • Update the design to match your brand
  • Add custom features
  • Configure additional AI models
  • Set up custom domains

2. Test Thoroughly

  • Test all user flows
  • Verify payment processing
  • Check mobile responsiveness
  • Test with real users

3. Launch Your Business

  • Set up analytics
  • Create marketing content
  • Launch on social media
  • Start acquiring customers

4. Scale and Optimize

  • Monitor performance
  • Gather user feedback
  • Add new features
  • Optimize for growth

📚 Additional Resources

🤝 Support

Need help? We're here for you:

  • Documentation: Check our comprehensive docs
  • Community: Join our Discord server
  • Email Support: Contact us at support@codofly.com
  • GitHub Issues: Report bugs and request features

Ready to build your AI business? You now have everything you need to launch your AI chatbot website. Start customizing, test thoroughly, and launch your business!

This guide covers the complete setup process for the Codofly AI Template. If you follow these steps carefully, you'll have a fully functional AI chatbot website running in under 15 minutes.

Codofly AI
Copyright © 2025 Codofly AI
All rights reserved
Made with ❤️ by zjy365
TwitterGitHub

Product

PricingBlogContact

Legal

Privacy PolicyTerms of Service

Social

TwitterGitHub

Codofly AI