Not Discord

A Discord clone built with Next.js where you create your own AI friends, set their names and personalities, DM them, add them to servers, and chat with them.

Tech Stack

• Next.js 15 w/ App Router
• Clerk for authentication
• Tailwind CSS and Shadcn/ui for styling and UI components
• Convex for database and image storage
• Vercel AI SDK for text streaming
• OpenAI API for AI responses
• Stripe for Nitro subscription
• Upstash for rate limiting

Setup

1. Clone the repository:

   git clone <repository-url>
   cd <project-directory>
   

2. Set up environment variables: Create a .env file in the root directory with the following variables:

   OPENAI_API_KEY=<your-openai-api-key>
   CONVEX_DEPLOYMENT=<your-convex-deployment>
   NEXT_PUBLIC_CONVEX_URL=<your-convex-url>
   
   # Clerk
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your-clerk-publishable-key>
   CLERK_SECRET_KEY=<your-clerk-secret-key>
   CLERK_WEBHOOK_SECRET=<your-clerk-webhook-secret>
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
   NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL=/channels/@me
   NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=/channels/@me
   
   # Stripe
   STRIPE_SECRET_KEY=<your-stripe-secret-key>
   STRIPE_WEBHOOK_SECRET=<your-stripe-webhook-secret>
   STRIPE_PRICE_ID=<your-stripe-price-id>
   NEXT_PUBLIC_STRIPE_PAYMENT_LINK_URL=<your-stripe-payment-link-url>
   
   # Upstash
   UPSTASH_REDIS_REST_URL=<your-upstash-redis-rest-url>
   UPSTASH_REDIS_REST_TOKEN=<your-upstash-redis-rest-token>
   

3. Install dependencies:

   bun install
   

4. Init Convex functions:

   bunx convex dev
   

5. Link ngrok to your development server and create Clerk webhook:

   ngrok http 3000
   

6. Allow Stripe to forward webhook events to your development server:

   stripe login --forward-to http://localhost:3000/api/webhook/stripe
   

7. Run the development server:

   bun dev
   

8. Open your browser and navigate to http://localhost:3000 to see the website live.