Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aftabrehan/jarvis-ai

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.
https://github.com/aftabrehan/jarvis-ai

ai artificial-intelligence code-generation image-generation music-generation mysql nextjs open-ai prisma react reactjs saas saas-ai stripe video-generation

Last synced: 3 months ago
JSON representation

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.

Host: GitHub
URL: https://github.com/aftabrehan/jarvis-ai
Owner: aftabrehan
License: mit
Created: 2024-01-28T16:58:16.000Z (12 months ago)
Default Branch: master
Last Pushed: 2024-03-16T06:54:11.000Z (10 months ago)
Last Synced: 2024-03-16T07:38:43.873Z (10 months ago)
Topics: ai, artificial-intelligence, code-generation, image-generation, music-generation, mysql, nextjs, open-ai, prisma, react, reactjs, saas, saas-ai, stripe, video-generation
Language: TypeScript
Homepage: https://jarvis-wex.vercel.app
Size: 5.38 MB
Stars: 4
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Jarvis AI - A Modern SaaS AI Platform

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 🔥](https://aftabrehan.com/portfolio/modern-saas-ai-platform) | [Live Preview 🚀](https://jarvis-wex.vercel.app) |
| -------------------------------------------------------------------------------- | ---------------------------------------------------------------- |

## Features

- Tailwind design
- Tailwind animations and effects
- Full responsiveness
- Clerk Authentication (Email, Google, 9+ Social Logins)
- Client form validation and handling using react-hook-form
- Server error handling using react-toast
- Image Generation Tool (Open AI)
- Video Generation Tool (Replicate AI)
- Conversation Generation Tool (Open AI)
- Music Generation Tool (Replicate AI)
- Page loading state
- Stripe monthly subscription
- Free tier with API limiting
- Writing POST, DELETE, and GET routes in route handlers (app/api)
- Fetching data in server react components by directly accessing the database (WITHOUT API! like Magic!)
- Handling relations between Server and Child components!
- Folder structure in Next 13 App Router
- Reusable layouts

## Getting Started

1. Ensure that **Git** and **NodeJS (18.x.x)** are installed on your system.
2. Clone this repository to your local machine.

```
git clone https://github.com/aftabrehan/jarvis-ai.git
```

3. Create a `.env` file in the **root** directory and add the following contents to your `.env` file:

```env
# 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://:@:/?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
```

#### 4. Clerk Authentication Keys

- Visit the Clerk dashboard: [https://clerk.com](https://clerk.com)
- Log in to your Clerk account or sign up if you don't have one.
- Navigate to the "Projects" section and select your project.
- Go to the "API Keys" tab.
- Copy the "Publishable Key" and replace `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` in the `.env.local` file with the copied key.
- Copy the "Secret Key" and replace CLERK_SECRET_KEY in the `.env.local` file with the copied key.

#### 5. OpenAI API Key

Visit [OpenAI](https://platform.openai.com/signup) 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.

```env
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

#### 6. Replicate API Token

Sign up or log in to [Replicate](https://replicate.ai/). 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.

```env
REPLICATE_API_TOKEN=r8_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

#### 7. Stripe API and Webhook Keys

For Stripe, sign up or log in to your [Stripe Dashboard](https://dashboard.stripe.com/register). Once logged in, create new project, get **secret key** by visiting [dashboard.stripe.com/apikeys](https://dashboard.stripe.com/apikeys), and then get **webhook secret** by visiting [dashboard.stripe.com/webhook](https://dashboard.stripe.com/webhook). Then, set them as `STRIPE_API_SECRET_KEY` and `STRIPE_WEBHOOK_SECRET` in your project's environment.

```env
STRIPE_API_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

#### 8. App Base URL

Set the base URL of your application as `NEXT_PUBLIC_APP_URL` in your project's environment.

```env
NEXT_PUBLIC_APP_URL=http://localhost:3000
```

#### 9. Crisp Website ID

Sign up on [Crisp](https://crisp.chat/en) 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.

```env
NEXT_PUBLIC_CRISP_WEBSITE_ID=xxxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx
```

#### 10. PlanetScale/Aiven Database URL

Create [PlanetScale](https://planetscale.com) or [Aiven](https://aiven.io) 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:

```env
DATABASE_URL="mysql://:@:/?ssl-mode=REQUIRED"
```

11. Open terminal in root directory. Run `npm install --legacy-peer-deps` or `yarn install --legacy-peer-deps`.
12. Setup Prisma by adding `MySQL` Database (PlanetScale/Aiven). Run `npx prisma db push` or `yarn prisma db push` to push the queries in the database.
13. Now, the app is fully configured 👍, and you can start using this app with either `npm run dev` or `yarn dev`.

> [!IMPORTANT]
> Keep your API keys and configuration values secure and do not expose them publicly.

## Screenshots:

![Modern UI/UX](/.github/images/main-image.png 'Modern UI/UX')

![Dashboard](/.github/images/dashboard-page.png 'Dashboard')

![Conversation Generation](/.github/images/coversation-page.png 'Conversation Generation')

![Music Generation](/.github/images/music-page.png 'Music Generation')

![Image Generation](/.github/images/image-page.png 'Image Generation')

![Video Generation](/.github/images/video-page.png 'Video Generation')

![Code Generation](/.github/images/code-page.png 'Code Generation')

> [!NOTE]
> This project is designed exclusively for portfolio purposes, and you are welcome to utilize it as you deem fit.