KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #ai-agent #developer-tools #claude-code #codex #deepseek-harness #ai-agents #react #mcp #rust

jarvis-ai

★ 42 Open GitHub ↗

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.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

#### 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://<username>:<password>@<host>:<port>/<database_name>?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](https://raw.githubusercontent.com/aftabrehan/jarvis-ai/master/.github/images/main-image.png 'Modern UI/UX')

![Dashboard](https://raw.githubusercontent.com/aftabrehan/jarvis-ai/master/.github/images/dashboard-page.png 'Dashboard')

![Conversation Generation](https://raw.githubusercontent.com/aftabrehan/jarvis-ai/master/.github/images/coversation-page.png 'Conversation Generation')

![Music Generation](https://raw.githubusercontent.com/aftabrehan/jarvis-ai/master/.github/images/music-page.png 'Music Generation')

![Image Generation](https://raw.githubusercontent.com/aftabrehan/jarvis-ai/master/.github/images/image-page.png 'Image Generation')

![Video Generation](https://raw.githubusercontent.com/aftabrehan/jarvis-ai/master/.github/images/video-page.png 'Video Generation')

![Code Generation](https://raw.githubusercontent.com/aftabrehan/jarvis-ai/master/.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.

jarvis-ai

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README