Complete AI Tools (Chatbot, Image Generation, Music Generation, Video Generation, and Code Generation) SaaS Platform built using Next.js 14, Stripe, OpenAI, ReplicateAI, Crisp, Aiven, and Prisma.
View Project π₯ | Live Preview π |
---|
git clone https://github.com/aftabrehan/jarvis-ai.git
.env
file in the root directory and add the following contents to your .env
file:# Disable Next.js telemetry
NEXT_TELEMETRY_DISABLED=1
# Clerk redirect URIs
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
# Clerk redirect URIs
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
# OpenAI API key
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
# Replicate API token
REPLICATE_API_TOKEN=r8_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
# PlanetScale/Aiven database URL
DATABASE_URL="mysql://<username>:<password>@<host>:<port>/<database_name>?ssl-mode=REQUIRED"
# Stripe API/webhook secret keys
STRIPE_API_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
# App base URL
NEXT_PUBLIC_APP_URL=http://localhost:3000
# Crisp website ID
NEXT_PUBLIC_CRISP_WEBSITE_ID=xxxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
in the .env.local
file with the copied key..env.local
file with the copied key.Visit OpenAI and sign up for an account. Once registered, find your API key in the API section of your account settings. Copy the key and set it as the OPENAI_API_KEY
in your project's environment.
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Sign up or log in to Replicate. Once logged in, navigate to your account settings, and find your API token. Copy the token and set it as the REPLICATE_API_TOKEN
in your project's environment.
REPLICATE_API_TOKEN=r8_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
For Stripe, sign up or log in to your Stripe Dashboard. Once logged in, create new project, get secret key by visiting dashboard.stripe.com/apikeys, and then get webhook secret by visiting dashboard.stripe.com/webhook. Then, set them as STRIPE_API_SECRET_KEY
and STRIPE_WEBHOOK_SECRET
in your project's environment.
STRIPE_API_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Set the base URL of your application as NEXT_PUBLIC_APP_URL
in your project's environment.
NEXT_PUBLIC_APP_URL=http://localhost:3000
Sign up on Crisp and create a website. Once created, find your website ID in the Crisp dashboard and set it as NEXT_PUBLIC_CRISP_WEBSITE_ID
in your project's environment.
NEXT_PUBLIC_CRISP_WEBSITE_ID=xxxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx
Create PlanetScale or Aiven account. After creating an account, set up a MySQL
database. In the dashboard, find your database connection details and construct the DATABASE_URL
in the following format:
DATABASE_URL="mysql://<username>:<password>@<host>:<port>/<database_name>?ssl-mode=REQUIRED"
npm install --legacy-peer-deps
or yarn install --legacy-peer-deps
.MySQL
Database (PlanetScale/Aiven). Run npx prisma db push
or yarn prisma db push
to push the queries in the database.npm run dev
or yarn dev
.[!IMPORTANT] Keep your API keys and configuration values secure and do not expose them publicly.
[!NOTE] This project is designed exclusively for portfolio purposes, and you are welcome to utilize it as you deem fit.