Customization Overview

The AI SaaS Boilerplate is designed to be highly customizable, allowing you to adapt it to your specific business needs. This section covers the various ways you can customize the platform.

Customization Areas

Customization Philosophy

The boilerplate follows several key principles to make customization straightforward:

1. Modularity: Components and services are modular and loosely coupled
2. Configuration-Driven: Many aspects can be changed through configuration
3. Clean Architecture: Separation of concerns makes targeted changes easier
4. Documentation: Code is well-documented to facilitate modifications
5. Extensibility: Key extension points are provided for adding new features

UI Customization

You can customize the look and feel of the application to match your brand:

Branding Elements

• Logo: Replace the default logo with your own
• Colors: Modify the color scheme through Tailwind CSS configuration
• Typography: Change fonts and text styles
• Images: Replace placeholder images with your own visuals

Layout Customization

• Home Page: Modify the landing page sections and content
• Dashboard: Customize the dashboard layout and widgets
• Service Pages: Adjust the UI for individual AI service pages

For detailed instructions, see the UI Customization guide.

Adding New AI Services

The platform is designed to make it easy to add new AI services:

1. Create a new Lambda function for the service
2. Add a new CDK stack to deploy the Lambda
3. Create frontend components for the service UI
4. Add a new route in the Next.js app
5. Configure credit costs for the new service

For step-by-step instructions, see the Adding New AI Services guide.

Modifying the Pricing Model

You can adjust the pricing and subscription model to align with your business strategy:

Subscription Tiers

1. Modify Stripe products and prices in your Stripe dashboard
2. Update the CDK configuration with the new price IDs
3. Adjust the frontend components that display pricing information

Credit System

1. Modify credit costs for each service in the CDK configuration
2. Update credit allocation for each subscription tier
3. Adjust the credit purchase options if you offer credit packs

For detailed instructions, see the Modifying the Pricing Model guide.

Third-Party Integrations

You can extend the platform with additional third-party integrations:

API Integrations

1. Create a new Lambda function for the integration
2. Add authentication and API key management in Secrets Manager
3. Create frontend components to interact with the integration
4. Update the CDK code to deploy the new Lambda

Authentication Providers

1. Add new identity providers to Cognito (e.g., Facebook, Twitter)
2. Update the authentication UI to include the new providers
3. Configure the provider in the CDK code

For step-by-step instructions, see the Third-Party Integrations guide.

Customization Best Practices

When customizing the boilerplate, follow these best practices:

1. Start with configuration before modifying code
2. Make incremental changes and test frequently
3. Use feature branches for major customizations
4. Document your changes for future reference
5. Follow the established patterns in the codebase
6. Update tests to cover your customizations

Customization Examples

Here are some common customization scenarios:

Example 1: Adding a Text-to-Speech Service

// 1. Create a new Lambda function
// backend/text_to_speech/index.js
 
// 2. Add a new CDK stack
// infrastructure/lib/stacks/services/text-to-speech-stack.ts
 
// 3. Add the stack to the CDK app
// infrastructure/bin/app.ts
new TextToSpeechStack(app, `${appName}-TextToSpeechStack`, {
  userPool,
  serviceCredits,
  ...commonProps
});
 
// 4. Create frontend components
// frontend/components/dashboard/services/text-to-speech/...
 
// 5. Add a new route
// frontend/app/[locale]/dashboard/text-to-speech/page.tsx

Example 2: Modifying a Service Credit Cost

// cdk.context.json
{
  "services": {
    "image_generation": {
      "credit_cost": 10  // Changed from 5 to 10
    }
  }
}

Example 3: Adding a Custom Theme

// frontend/tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ... custom color palette
        },
        // ... other colors
      },
    },
  },
};

Next Steps

Choose the customization area you'd like to explore:

• UI Customization
• Adding New AI Services
• Modifying the Pricing Model
• Third-Party Integrations