AI-App

A full-stack AI platform built with Next.js and TypeScript that provides access to multiple AI-powered generation tools through a unified web application.

The application combines AI APIs, authentication, usage limits, subscriptions, database persistence, and a responsive frontend into a single platform.

Features

• AI conversational chat
• AI code generation
• AI image generation
• AI music generation
• AI video generation
• User authentication
• Subscription-based access
• Usage limits for free users
• Persistent user and application data
• Responsive user interface
• Form validation
• Client-side state management
• AI API integrations

Tech Stack

Frontend

• Next.js
• React
• TypeScript
• Tailwind CSS
• Zustand
• React Hook Form
• Zod

Backend & Data

• Next.js API Routes
• Prisma ORM
• Database persistence
• Server-side API integration

AI

• OpenAI API
• Replicate

Authentication & Payments

• Clerk
• Stripe

UI & Utilities

• Radix UI
• Lucide React
• React Markdown
• React Hot Toast
• GSAP

Architecture

The application uses a full-stack Next.js architecture where the frontend communicates with server-side API routes responsible for authenticated AI requests and application logic.

                    ┌──────────────────────┐
                    │       Next.js        │
                    │ React + TypeScript   │
                    └──────────┬───────────┘
                               │
                    ┌──────────▼───────────┐
                    │    Application UI    │
                    │                      │
                    │ Chat / Code / Image  │
                    │ Music / Video        │
                    └──────────┬───────────┘
                               │
                         API Requests
                               │
                    ┌──────────▼───────────┐
                    │    Server Routes     │
                    │                      │
                    │ Authentication       │
                    │ Validation           │
                    │ Usage Limits         │
                    │ AI Requests          │
                    └──────┬───────┬───────┘
                           │       │
              ┌────────────┘       └────────────┐
              ▼                                 ▼
       ┌─────────────┐                   ┌─────────────┐
       │ OpenAI API  │                   │ Replicate   │
       │             │                   │ API         │
       └─────────────┘                   └─────────────┘

                    ┌──────────────────────┐
                    │       Prisma        │
                    │                      │
                    │ Persistent Data     │
                    └──────────────────────┘

                    ┌──────────────────────┐
                    │ Clerk / Stripe       │
                    │                      │
                    │ Auth + Subscriptions │
                    └──────────────────────┘

AI Features

Conversational AI

Provides an interactive chat interface powered by the OpenAI API.

Code Generation

Allows users to interact with AI functionality designed for generating code.

Image Generation

Uses Replicate-powered models to generate images from user input.

Music Generation

Provides AI-powered music generation through Replicate.

Video Generation

Provides AI-powered video generation through Replicate.

Authentication

Clerk handles user authentication and account management.

Protected functionality requires authenticated users before requests can be processed.

Usage Limits

The application implements usage restrictions for free users.

AI functionality is checked against the user's available usage before generation requests are processed.

Subscribed users receive continued access according to the application's subscription logic.

Subscriptions & Payments

Stripe is integrated to handle subscription functionality.

The application combines:

User authentication Subscription status Usage restrictions Paid access to AI functionality This provides an example of integrating authentication, application logic, and payment processing into a full-stack application.

Data Management

Prisma is used as the ORM for persistent application data.

The application separates database access from the frontend and uses server-side logic when interacting with persistent data.

Form Handling & Validation

React Hook Form is used for structured form management.

Zod provides schema-based validation for user input.

This combination helps keep form handling and input validation organized across the application.

State Management

Zustand is used for client-side application state.

This allows shared state to be managed across components without relying entirely on prop passing.

Getting Started

Prerequisites

Node.js A database supported by the Prisma configuration Clerk account OpenAI API key Replicate API token Stripe account

Installation

Clone the repository:

git clone https://github.com/imminent-byte/AI-App.git
cd AI-App

Install dependencies:

npm install

Create a .env file and configure the required environment variables.

Example:

DATABASE_URL=

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

OPENAI_API_KEY=
REPLICATE_API_TOKEN=

STRIPE_API_KEY=
STRIPE_WEBHOOK_SECRET=

Generate the Prisma client:

npx prisma generate

Run the development server:

npm run dev

Open:

http://localhost:3000

Project Structure

AI-App/
├── app/
├── components/
├── hooks/
├── lib/
├── prisma/
├── public/
├── constants.ts
├── middleware.ts
├── next.config.mjs
├── package.json
└── tsconfig.json

Future Improvements

Potential improvements include:

• Improved error handling for external AI providers
• Better handling of long-running generation requests
• Improved loading and progress states
• Additional AI providers and models
• More detailed usage analytics
• Automated testing
• Production monitoring and observability