Repository: ayusshrathore/ai-saas
Branch: main
Commit: 623dba771e01
Files: 76
Total size: 97.7 KB
Directory structure:
gitextract_d84y1w4g/
├── .eslintrc.json
├── .github/
│ └── workflows/
│ └── npm-gulp.yml
├── .gitignore
├── LICENSE
├── README.md
├── app/
│ ├── (auth)/
│ │ ├── (routes)/
│ │ │ ├── sign-in/
│ │ │ │ └── [[...sign-in]]/
│ │ │ │ └── page.tsx
│ │ │ └── sign-up/
│ │ │ └── [[...sign-up]]/
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── (dashboard)/
│ │ ├── (routes)/
│ │ │ ├── code/
│ │ │ │ ├── constants.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── conversation/
│ │ │ │ ├── constants.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── dashboard/
│ │ │ │ └── page.tsx
│ │ │ ├── image/
│ │ │ │ ├── constants.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── music/
│ │ │ │ ├── constants.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── settings/
│ │ │ │ └── page.tsx
│ │ │ └── video/
│ │ │ ├── constants.tsx
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── (landing)/
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── api/
│ │ ├── code/
│ │ │ └── route.ts
│ │ ├── conversation/
│ │ │ └── route.ts
│ │ ├── image/
│ │ │ └── route.ts
│ │ ├── music/
│ │ │ └── route.ts
│ │ ├── stripe/
│ │ │ └── route.ts
│ │ ├── video/
│ │ │ └── route.ts
│ │ └── webhook/
│ │ └── route.ts
│ ├── globals.css
│ └── layout.tsx
├── components/
│ ├── bot-avatar.tsx
│ ├── crisp-chat.tsx
│ ├── crisp-provider.tsx
│ ├── empty.tsx
│ ├── free-counter.tsx
│ ├── heading.tsx
│ ├── landing-content.tsx
│ ├── landing-hero.tsx
│ ├── landing-navbar.tsx
│ ├── loader.tsx
│ ├── mobile-sidebar.tsx
│ ├── modal-provider.tsx
│ ├── navbar.tsx
│ ├── pro-modal.tsx
│ ├── sidebar.tsx
│ ├── subscription-button.tsx
│ ├── toaster-provider.tsx
│ ├── ui/
│ │ ├── avatar.tsx
│ │ ├── badge.tsx
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── dialog.tsx
│ │ ├── form.tsx
│ │ ├── input.tsx
│ │ ├── label.tsx
│ │ ├── progress.tsx
│ │ ├── select.tsx
│ │ └── sheet.tsx
│ └── user-avatar.tsx
├── components.json
├── constants.ts
├── hooks/
│ └── use-pro-modal.tsx
├── lib/
│ ├── api-limit.ts
│ ├── prismadb.ts
│ ├── stripe.ts
│ ├── subscription.ts
│ └── utils.ts
├── middleware.ts
├── next.config.js
├── package.json
├── postcss.config.js
├── prisma/
│ └── schema.prisma
├── tailwind.config.js
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.json
================================================
{
"extends": "next/core-web-vitals"
}
================================================
FILE: .github/workflows/npm-gulp.yml
================================================
name: NodeJS with Gulp
on:
push:
branches: [ "main" ]
pull_request:
branches: [ "main" ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x, 16.x, 18.x]
steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- name: Build
run: |
npm install
gulp
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
.env
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2023 Ayush Rathore
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# AI-SaaS - AI-Powered Software-as-a-Service Application
[](https://opensource.org/licenses/MIT)
[](https://opensource.org/licenses/MIT)
[](https://nextjs.org/)
[](https://openai.com/)
[](https://replicate.ai/)
[](https://tailwindcss.com/)
[](https://prisma.io/)
[](https://stripe.com/)
AI-SaaS is an advanced and adaptable Software-as-a-Service (SaaS) application that harnesses the capabilities of cutting-edge technologies, including Next.js, OpenAI, Replicate, Tailwind CSS, Prisma, and Stripe. The primary goal of this application is to empower users by offering AI-powered services that facilitate easy access and utilization of artificial intelligence in their projects and workflows.
## Features
- **AI Services**: AI-SaaS provides an extensive array of AI services, including conversation, code generation, image generation, music generation, and video generation. These services are accessible through an intuitive and user-friendly interface.
- **Next.js**: AI-SaaS is built on the Next.js framework, offering server-side rendering, routing, and other essential features out of the box. This ensures superior performance and search engine optimization (SEO) for the application.
- **OpenAI Integration**: The application seamlessly integrates with OpenAI's powerful AI models and APIs, enabling users to leverage state-of-the-art AI capabilities. From generating human-like text to answering questions, AI-SaaS harnesses the full potential of OpenAI.
- **Replicate**: AI-SaaS employs Replicate to enhance model reproducibility and facilitate seamless experimentation with various AI models. This ensures the AI models used in the application are robust and reliable.
- **Tailwind CSS**: The UI of AI-SaaS is meticulously styled using Tailwind CSS, a utility-first CSS framework. This enables easy customization and consistent design throughout the application.
- **Prisma**: The application utilizes Prisma as its ORM (Object-Relational Mapping) tool, simplifying database access and management. This enhances the efficiency of handling user data and preferences.
- **Stripe Integration**: AI-SaaS seamlessly incorporates Stripe for secure and efficient payment processing. Users can subscribe to premium plans and access additional AI services based on their subscription level.
## Screenshots
<img width="1470" alt="Screenshot 2023-07-30 at 11 33 59 AM" src="https://github.com/ayusshrathore/ai-saas/assets/61450246/017f21c8-a8d2-4b70-b21b-60c1d03a28e0">
<img width="1470" alt="Screenshot 2023-07-30 at 11 40 43 AM" src="https://github.com/ayusshrathore/ai-saas/assets/61450246/a232dd89-9a6b-4f6d-bc6b-99ec9281fc78">
<img width="1470" alt="Screenshot 2023-07-30 at 11 41 18 AM" src="https://github.com/ayusshrathore/ai-saas/assets/61450246/a8f04ec9-2a3b-407a-8f18-3c948d1fa592">
<img width="1470" alt="Screenshot 2023-07-30 at 11 41 53 AM" src="https://github.com/ayusshrathore/ai-saas/assets/61450246/028ab744-870c-42d5-aa5a-78fa19a6d334">
<img width="1470" alt="Screenshot 2023-07-30 at 11 42 23 AM" src="https://github.com/ayusshrathore/ai-saas/assets/61450246/46e095c6-b369-4eb2-9e1e-e219e1703565">
<img width="1470" alt="Screenshot 2023-07-30 at 11 42 38 AM" src="https://github.com/ayusshrathore/ai-saas/assets/61450246/18f5b2d2-25b0-4b41-ad5b-1c47301a3196">
<img width="1470" alt="Screenshot 2023-07-30 at 11 42 50 AM" src="https://github.com/ayusshrathore/ai-saas/assets/61450246/1292a4f1-e101-4837-90bd-6018f8f61288">
## Getting Started
To run AI-SaaS locally, follow these steps:
1. **Clone the repository**:
```bash
git clone https://github.com/ayusshrathore/ai-saas.git
cd ai-saas
```
2. **Install dependencies**:
```bash
npm install
# or
yarn install
```
3. **Configure environment variables**:
To ensure proper functionality, set up environment variables for API keys and other sensitive information. Create a `.env` file in the root directory and populate it with the necessary variables. For reference, consult the `.env.example` file for the required variables.
4. **Run the application**:
```bash
npm run dev
# or
yarn dev
```
The application should now be running locally at `http://localhost:3000`.
## Deployment
AI-SaaS can be deployed to various hosting platforms that support Next.js applications. Before deployment, make sure you have configured the necessary environment variables for production.
## Contributions
Contributions to AI-SaaS are highly appreciated! If you encounter any bugs or have suggestions for new features, please feel free to open an issue or submit a pull request.
When contributing, adhere to the existing code style and include comprehensive test cases for new features.
## License
AI-SaaS is released under the [MIT License](https://opensource.org/licenses/MIT).
## Acknowledgments
AI-SaaS is built with the invaluable support and integration of several open-source projects and technologies. I extend my gratitude to the developers and maintainers of Next.js, OpenAI, Replicate, Tailwind CSS, Prisma, and Stripe for their significant contributions to the development community.
[](https://app.netlify.com/sites/superlative-malabi-796b55/deploys)
================================================
FILE: app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsx
================================================
import { SignIn } from "@clerk/nextjs";
export default function Page() {
return <SignIn />;
}
================================================
FILE: app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsx
================================================
import { SignUp } from "@clerk/nextjs";
export default function Page() {
return <SignUp />;
}
================================================
FILE: app/(auth)/layout.tsx
================================================
import React from "react";
const AuthLayout = ({ children }: { children: React.ReactNode }) => {
return <div className="flex items-center justify-center h-full">{children}</div>;
};
export default AuthLayout;
================================================
FILE: app/(dashboard)/(routes)/code/constants.tsx
================================================
import * as z from "zod";
export const formSchema = z.object({
prompt: z.string().min(1, {
message: "Prompt is required.",
}),
});
================================================
FILE: app/(dashboard)/(routes)/code/page.tsx
================================================
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import axios from "axios";
import { Code } from "lucide-react";
import { useRouter } from "next/navigation";
import { ChatCompletionRequestMessage } from "openai";
import { useState } from "react";
import { useForm } from "react-hook-form";
import ReactMarkdown from "react-markdown";
import * as z from "zod";
import { BotAvatar } from "@/components/bot-avatar";
import { Empty } from "@/components/empty";
import { Heading } from "@/components/heading";
import { Loader } from "@/components/loader";
import { Button } from "@/components/ui/button";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { UserAvatar } from "@/components/user-avatar";
import { cn } from "@/lib/utils";
import useProModal from "@/hooks/use-pro-modal";
import { toast } from "react-hot-toast";
import { formSchema } from "./constants";
const CodePage = () => {
const router = useRouter();
const proModal = useProModal();
const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
prompt: "",
},
});
const isLoading = form.formState.isSubmitting;
const onSubmit = async (values: z.infer<typeof formSchema>) => {
console.log(values);
try {
const userMessage: ChatCompletionRequestMessage = {
role: "user",
content: values.prompt,
};
const newMessages = [...messages, userMessage];
const response = await axios.post("/api/code", {
messages: newMessages,
});
setMessages((current) => [...current, userMessage, response.data]);
form.reset();
} catch (error: any) {
console.log(error);
if (error?.response?.status === 403) {
proModal.onOpen();
} else {
toast.error("Something went wrong.");
}
} finally {
router.refresh();
}
};
return (
<div>
<Heading
title="Code Generation"
description="Our most advanced AI Code Generation model."
icon={Code}
iconColor="text-green-700"
bgColor="bg-green-700/10"
/>
<div className="px-4 lg:px-8">
<div>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2"
>
<FormField
name="prompt"
render={({ field }) => (
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<Input
{...field}
placeholder="Start typing here..."
className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={isLoading}
/>
</FormControl>
</FormItem>
)}
/>
<Button className="col-span-12 lg:col-span-2 w-full" disabled={isLoading}>
Generate
</Button>
</form>
</Form>
</div>
<div className="space-y-4 mt-4">
{isLoading && (
<div className="p-8 rounded-lg w-full flex items-center justify-center bg-muted">
<Loader />
</div>
)}
{messages.length === 0 && !isLoading && <Empty label="Start typing to have a conversation." />}
<div className="flex flex-col-reverse gap-y-4">
{messages.map((message, index) => (
<div
key={index}
className={cn(
"p-8 w-full flex items-start gap-x-8 rounded-lg",
message.role === "user" ? "bg-white border border-black/10" : "bg-muted"
)}
>
{message.role === "user" ? <UserAvatar /> : <BotAvatar />}
<ReactMarkdown
className="text-sm overflow-hidden leading-7"
components={{
pre: ({ node, ...props }) => (
<div className="overflow-auto w-full my-2 bg-black/10 p-2 rounded-lg">
<pre {...props} />
</div>
),
code: ({ node, ...props }) => <code className="rounded-sm p-1 bg-black/10" {...props} />,
}}
>
{message.content || ""}
</ReactMarkdown>
</div>
))}
</div>
</div>
</div>
</div>
);
};
export default CodePage;
================================================
FILE: app/(dashboard)/(routes)/conversation/constants.tsx
================================================
import * as z from "zod";
export const formSchema = z.object({
prompt: z.string().min(1, {
message: "Prompt is required.",
}),
});
================================================
FILE: app/(dashboard)/(routes)/conversation/page.tsx
================================================
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import axios from "axios";
import { MessageSquare } from "lucide-react";
import { useRouter } from "next/navigation";
import { ChatCompletionRequestMessage } from "openai";
import { useState } from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { BotAvatar } from "@/components/bot-avatar";
import { Empty } from "@/components/empty";
import { Heading } from "@/components/heading";
import { Loader } from "@/components/loader";
import { Button } from "@/components/ui/button";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { UserAvatar } from "@/components/user-avatar";
import { cn } from "@/lib/utils";
import useProModal from "@/hooks/use-pro-modal";
import { toast } from "react-hot-toast";
import { formSchema } from "./constants";
const ConversationPage = () => {
const router = useRouter();
const proModal = useProModal();
const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
prompt: "",
},
});
const isLoading = form.formState.isSubmitting;
const onSubmit = async (values: z.infer<typeof formSchema>) => {
console.log(values);
try {
const userMessage: ChatCompletionRequestMessage = {
role: "user",
content: values.prompt,
};
const newMessages = [...messages, userMessage];
const response = await axios.post("/api/conversation", {
messages: newMessages,
});
setMessages((current) => [...current, userMessage, response.data]);
form.reset();
} catch (error: any) {
console.log(error);
if (error?.response?.status === 403) {
proModal.onOpen();
} else {
toast.error("Something went wrong.");
}
} finally {
router.refresh();
}
};
return (
<div>
<Heading
title="Conversation"
description="Our most advanced AI conversation model."
icon={MessageSquare}
iconColor="text-violet-500"
bgColor="bg-violet-500/10"
/>
<div className="px-4 lg:px-8">
<div>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2"
>
<FormField
name="prompt"
render={({ field }) => (
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<Input
{...field}
placeholder="Start typing here..."
className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={isLoading}
/>
</FormControl>
</FormItem>
)}
/>
<Button className="col-span-12 lg:col-span-2 w-full" disabled={isLoading}>
Generate
</Button>
</form>
</Form>
</div>
<div className="space-y-4 mt-4">
{isLoading && (
<div className="p-8 rounded-lg w-full flex items-center justify-center bg-muted">
<Loader />
</div>
)}
{messages.length === 0 && !isLoading && <Empty label="Start typing to have a conversation." />}
<div className="flex flex-col-reverse gap-y-4">
{messages.map((message, index) => (
<div
key={index}
className={cn(
"p-8 w-full flex items-start gap-x-8 rounded-lg",
message.role === "user" ? "bg-white border border-black/10" : "bg-muted"
)}
>
{message.role === "user" ? <UserAvatar /> : <BotAvatar />}
<p className="text-sm">{message.content}</p>
</div>
))}
</div>
</div>
</div>
</div>
);
};
export default ConversationPage;
================================================
FILE: app/(dashboard)/(routes)/dashboard/page.tsx
================================================
"use client";
import {
ArrowRight,
Code,
ImageIcon,
MessageSquare,
Music,
VideoIcon,
} from "lucide-react";
import { useRouter } from "next/navigation";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";
const tools = [
{
label: "Conversation",
icon: MessageSquare,
color: "text-violet-500",
bgColor: "bg-violet-500/10",
href: "/conversation",
},
{
label: "Music Generation",
icon: Music,
color: "text-emerald-500",
bgColor: "bg-emerald-500/10",
href: "/music",
},
{
label: "Image Generation",
icon: ImageIcon,
color: "text-pink-700",
bgColor: "bg-pink-700/10",
href: "/image",
},
{
label: "Video Generation",
icon: VideoIcon,
color: "text-orange-700",
bgColor: "bg-orange-700/10",
href: "/video",
},
{
label: "Code Generation",
icon: Code,
color: "text-green-700",
bgColor: "bg-green-700/10",
href: "/code",
},
];
const DashboardPage = () => {
const router = useRouter();
return (
<div>
<div className="mb-8 space-y-4">
<h2 className="text-2xl md:text-4xl font-bold text-center">
Explore the power of AI
</h2>
<p className="text-muted-foreground font-light text-sm md:text-lg text-center">
Prometheus is a platform that allows you to generate music, videos,
and code using the power of AI.
</p>
</div>
<div className="px-4 md:px-20 lg:px-32 space-y-4">
{tools.map((tool) => (
<Card
onClick={() => router.push(tool.href)}
key={tool.href}
className={
"p-4 border-black/5 flex items-center justify-between hover:shadow-md transition cursor-pointer"
}
>
<div className="flex items-center gap-x-4">
<div className={cn("p-2 w-fit rounded-md", tool.bgColor)}>
<tool.icon className={cn("w-8 h-8", tool.color)} />
</div>
<div className="font-semibold">{tool.label}</div>
</div>
<ArrowRight className="w-5 h-5" />
</Card>
))}
</div>
</div>
);
};
export default DashboardPage;
================================================
FILE: app/(dashboard)/(routes)/image/constants.tsx
================================================
import * as z from "zod";
export const formSchema = z.object({
prompt: z.string().min(1, {
message: "Image Prompt is required.",
}),
amount: z.string().min(1),
resolution: z.string().min(1),
});
export const amountOptions = [
{
value: "1",
label: "1 Photo",
},
{
value: "2",
label: "2 Photos",
},
{
value: "3",
label: "3 Photos",
},
{
value: "4",
label: "4 Photos",
},
{
value: "5",
label: "5 Photos",
},
];
export const resolutionOptions = [
{
value: "256x256",
label: "256x256",
},
{
value: "512x512",
label: "512x512",
},
{
value: "1024x1024",
label: "1024x1024",
},
];
================================================
FILE: app/(dashboard)/(routes)/image/page.tsx
================================================
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import axios from "axios";
import { Download, ImageIcon } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { Empty } from "@/components/empty";
import { Heading } from "@/components/heading";
import { Loader } from "@/components/loader";
import { Button } from "@/components/ui/button";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Card, CardFooter } from "@/components/ui/card";
import useProModal from "@/hooks/use-pro-modal";
import Image from "next/image";
import { toast } from "react-hot-toast";
import { amountOptions, formSchema, resolutionOptions } from "./constants";
const ImagePage = () => {
const router = useRouter();
const proModal = useProModal();
const [images, setImages] = useState<string[]>([]);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
prompt: "",
amount: "1",
resolution: "512x512",
},
});
const isLoading = form.formState.isSubmitting;
const onSubmit = async (values: z.infer<typeof formSchema>) => {
console.log(values);
try {
setImages([]);
const response = await axios.post("/api/image", values);
const urls = response.data.map((image: { url: string }) => image.url);
setImages(urls);
form.reset();
} catch (error: any) {
console.log(error);
if (error?.response?.status === 403) {
proModal.onOpen();
} else {
toast.error("Something went wrong.");
}
} finally {
router.refresh();
}
};
return (
<div>
<Heading
title="Image Generation"
description="Our most advanced AI Image Generation model."
icon={ImageIcon}
iconColor="text-pink-700"
bgColor="bg-pink-700/10"
/>
<div className="px-4 lg:px-8">
<div>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2"
>
<FormField
name="prompt"
render={({ field }) => (
<FormItem className="col-span-12 lg:col-span-6">
<FormControl className="m-0 p-0">
<Input
{...field}
placeholder="Start typing here..."
className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={isLoading}
/>
</FormControl>
</FormItem>
)}
/>
<FormField
name="amount"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-12 lg:col-span-2">
<Select disabled={isLoading} onValueChange={field.onChange} value={field.value} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue defaultValue={field.value} />
</SelectTrigger>
</FormControl>
<SelectContent>
{amountOptions.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
</FormItem>
)}
/>
<FormField
name="resolution"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-12 lg:col-span-2">
<Select disabled={isLoading} onValueChange={field.onChange} value={field.value} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue defaultValue={field.value} />
</SelectTrigger>
</FormControl>
<SelectContent>
{resolutionOptions.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
</FormItem>
)}
/>
<Button className="col-span-12 lg:col-span-2 w-full" disabled={isLoading}>
Generate
</Button>
</form>
</Form>
</div>
<div className="space-y-4 mt-4">
{isLoading && (
<div className="p-20">
<Loader />
</div>
)}
{images.length === 0 && !isLoading && <Empty label="Start typing to generate images." />}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mt-8">
{images.map((image, index) => (
<Card key={index} className="rounded-lg overflow-hidden">
<div className="relative aspect-square">
<Image src={image} fill alt="image" />
</div>
<CardFooter className="p-2">
<Button onClick={() => window.open(image)} variant="secondary" className="w-full">
<Download className="h-4 w-4" />
Download
</Button>
</CardFooter>
</Card>
))}
</div>
</div>
</div>
</div>
);
};
export default ImagePage;
================================================
FILE: app/(dashboard)/(routes)/music/constants.tsx
================================================
import * as z from "zod";
export const formSchema = z.object({
prompt: z.string().min(1, {
message: "Prompt is required.",
}),
});
================================================
FILE: app/(dashboard)/(routes)/music/page.tsx
================================================
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import axios from "axios";
import { Music } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { Empty } from "@/components/empty";
import { Heading } from "@/components/heading";
import { Loader } from "@/components/loader";
import { Button } from "@/components/ui/button";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import useProModal from "@/hooks/use-pro-modal";
import { toast } from "react-hot-toast";
import { formSchema } from "./constants";
const MusicPage = () => {
const router = useRouter();
const proModal = useProModal();
const [music, setMusic] = useState("");
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
prompt: "",
},
});
const isLoading = form.formState.isSubmitting;
const onSubmit = async (values: z.infer<typeof formSchema>) => {
console.log(values);
try {
setMusic("");
const response = await axios.post("/api/music");
setMusic(response.data.audio);
form.reset();
} catch (error: any) {
console.log(error);
if (error?.response?.status === 403) {
proModal.onOpen();
} else {
toast.error("Something went wrong.");
}
} finally {
router.refresh();
}
};
return (
<div>
<Heading
title="Music Generation"
description="Our most advanced AI Music Generation model."
icon={Music}
iconColor="text-emerald-500"
bgColor="bg-emerald-500/10"
/>
<div className="px-4 lg:px-8">
<div>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2"
>
<FormField
name="prompt"
render={({ field }) => (
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<Input
{...field}
placeholder="Start typing here..."
className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={isLoading}
/>
</FormControl>
</FormItem>
)}
/>
<Button className="col-span-12 lg:col-span-2 w-full" disabled={isLoading}>
Generate
</Button>
</form>
</Form>
</div>
<div className="space-y-4 mt-4">
{isLoading && (
<div className="p-8 rounded-lg w-full flex items-center justify-center bg-muted">
<Loader />
</div>
)}
{!music && !isLoading && <Empty label="Start typing to generate music." />}
{music && (
<audio controls className="w-full mt-8">
<source src={music} />
</audio>
)}
</div>
</div>
</div>
);
};
export default MusicPage;
================================================
FILE: app/(dashboard)/(routes)/settings/page.tsx
================================================
import { Heading } from "@/components/heading";
import { SubscriptionButton } from "@/components/subscription-button";
import { checkSubscription } from "@/lib/subscription";
import { Settings } from "lucide-react";
const SettingsPage = async () => {
const isPro = await checkSubscription();
return (
<div>
<Heading title="Settings" description="Manage account settings." icon={Settings} iconColor="text-gray-700" bgColor="bg-gray-700/10" />
<div className="px-4 lg:px-8 space-y-4">
<div className="text-muted-foreground text-sm">
{isPro ? "You are currently on a pro plan." : "You are currently on a free plan."}
</div>
<SubscriptionButton isPro={isPro} />
</div>
</div>
);
};
export default SettingsPage;
================================================
FILE: app/(dashboard)/(routes)/video/constants.tsx
================================================
import * as z from "zod";
export const formSchema = z.object({
prompt: z.string().min(1, {
message: "Prompt is required.",
}),
});
================================================
FILE: app/(dashboard)/(routes)/video/page.tsx
================================================
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import axios from "axios";
import { Video } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { Empty } from "@/components/empty";
import { Heading } from "@/components/heading";
import { Loader } from "@/components/loader";
import { Button } from "@/components/ui/button";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import useProModal from "@/hooks/use-pro-modal";
import { toast } from "react-hot-toast";
import { formSchema } from "./constants";
const VideoPage = () => {
const router = useRouter();
const proModal = useProModal();
const [video, setVideo] = useState("");
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
prompt: "",
},
});
const isLoading = form.formState.isSubmitting;
const onSubmit = async (values: z.infer<typeof formSchema>) => {
console.log(values);
try {
setVideo("");
const response = await axios.post("/api/music");
setVideo(response.data.audio);
form.reset();
} catch (error: any) {
console.log(error);
if (error?.response?.status === 403) {
proModal.onOpen();
} else {
toast.error("Something went wrong.");
}
} finally {
router.refresh();
}
};
return (
<div>
<Heading
title="Video Generation"
description="Our most advanced AI Video Generation model."
icon={Video}
iconColor="text-orange-700"
bgColor="bg-orange-700/10"
/>
<div className="px-4 lg:px-8">
<div>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2"
>
<FormField
name="prompt"
render={({ field }) => (
<FormItem className="col-span-12 lg:col-span-10">
<FormControl className="m-0 p-0">
<Input
{...field}
placeholder="Start typing here..."
className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={isLoading}
/>
</FormControl>
</FormItem>
)}
/>
<Button className="col-span-12 lg:col-span-2 w-full" disabled={isLoading}>
Generate
</Button>
</form>
</Form>
</div>
<div className="space-y-4 mt-4">
{isLoading && (
<div className="p-8 rounded-lg w-full flex items-center justify-center bg-muted">
<Loader />
</div>
)}
{!video && !isLoading && <Empty label="Start typing to generate videos." />}
{video && (
<video className="w-full aspect-video mt-8 rounded-lg border bg-black" controls>
<source src={video} />
</video>
)}
</div>
</div>
</div>
);
};
export default VideoPage;
================================================
FILE: app/(dashboard)/layout.tsx
================================================
import Navbar from "@/components/navbar";
import Sidebar from "@/components/sidebar";
import { getApiLimitCount } from "@/lib/api-limit";
import { checkSubscription } from "@/lib/subscription";
const DashboardLayout = async ({ children }: { children: React.ReactNode }) => {
const apiLimitCount = await getApiLimitCount();
const isPro = await checkSubscription();
return (
<div className="h-full relative">
<div className="hidden h-full md:flex md:flex-col md:fixed md:w-72 md:inset-y-0 bg-gray-900">
<Sidebar apiLimitCount={apiLimitCount} isPro={isPro} />
</div>
<main className="md:pl-72">
<Navbar />
{children}
</main>
</div>
);
};
export default DashboardLayout;
================================================
FILE: app/(landing)/layout.tsx
================================================
const LandingLayout = ({ children }: { children: React.ReactNode }) => {
return (
<main className="h-full bg-[#111827] overflow-auto">
<div className="mx-auto max-w-screen-xl h-full">{children}</div>
</main>
);
};
export default LandingLayout;
================================================
FILE: app/(landing)/page.tsx
================================================
import LandingContent from "@/components/landing-content";
import { LandingHero } from "@/components/landing-hero";
import { LandingNabvbar } from "@/components/landing-navbar";
function LandingPage() {
return (
<div className="h-full">
<LandingNabvbar />
<LandingHero />
<LandingContent />
</div>
);
}
export default LandingPage;
================================================
FILE: app/api/code/route.ts
================================================
import { checkApiLimit, increaseApiLimit } from "@/lib/api-limit";
import { checkSubscription } from "@/lib/subscription";
import { auth } from "@clerk/nextjs";
import { NextResponse } from "next/server";
import { ChatCompletionRequestMessage, Configuration, OpenAIApi } from "openai";
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openAi = new OpenAIApi(configuration);
const instructionMessage: ChatCompletionRequestMessage = {
role: "system",
content: "You are a code generator. You must answer only in markdown code snippets. Use code comments for explanations.",
};
export async function POST(req: Request) {
try {
const { userId } = auth();
const body = await req.json();
const { messages } = body;
if (!userId) {
return new NextResponse("Unauthorized", { status: 401 });
}
if (!configuration) {
return new NextResponse("OpenAI API Key not configured", { status: 500 });
}
if (!messages) {
return new NextResponse("Missing messages", { status: 400 });
}
const isAllowed = await checkApiLimit();
const isPro = await checkSubscription();
if (!isAllowed && !isPro) {
return new NextResponse("API Limit Exceeded", { status: 403 });
}
const response = await openAi.createChatCompletion({
model: "gpt-3.5-turbo",
messages: [instructionMessage, ...messages],
});
if (!isPro) {
await increaseApiLimit();
}
return NextResponse.json(response.data.choices[0].message, { status: 200 });
} catch (error) {
console.log("[CODE_ERROR]", error);
return new NextResponse("Internal Server Error", { status: 500 });
}
}
================================================
FILE: app/api/conversation/route.ts
================================================
import { auth } from "@clerk/nextjs";
import { NextResponse } from "next/server";
import { Configuration, OpenAIApi } from "openai";
import { checkApiLimit, increaseApiLimit } from "@/lib/api-limit";
import { checkSubscription } from "@/lib/subscription";
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openAi = new OpenAIApi(configuration);
export async function POST(req: Request) {
try {
const { userId } = auth();
const body = await req.json();
const { messages } = body;
if (!userId) {
return new NextResponse("Unauthorized", { status: 401 });
}
if (!configuration) {
return new NextResponse("OpenAI API Key not configured", { status: 500 });
}
if (!messages) {
return new NextResponse("Missing messages", { status: 400 });
}
const isAllowed = await checkApiLimit();
const isPro = await checkSubscription();
if (!isAllowed && !isPro) {
return new NextResponse("API Limit Exceeded", { status: 403 });
}
const response = await openAi.createChatCompletion({
model: "gpt-3.5-turbo",
messages,
});
if (!isPro) {
await increaseApiLimit();
}
return NextResponse.json(response.data.choices[0].message, { status: 200 });
} catch (error) {
console.log("[CONVERSATION_ERROR]", error);
return new NextResponse("Internal Server Error", { status: 500 });
}
}
================================================
FILE: app/api/image/route.ts
================================================
import { checkApiLimit, increaseApiLimit } from "@/lib/api-limit";
import { checkSubscription } from "@/lib/subscription";
import { auth } from "@clerk/nextjs";
import { NextResponse } from "next/server";
import { Configuration, OpenAIApi } from "openai";
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openAi = new OpenAIApi(configuration);
export async function POST(req: Request) {
try {
const { userId } = auth();
const body = await req.json();
const { prompt, amount = 1, resolution = "512x512" } = body;
if (!userId) {
return new NextResponse("Unauthorized", { status: 401 });
}
if (!configuration) {
return new NextResponse("OpenAI API Key not configured", { status: 500 });
}
if (!prompt) {
return new NextResponse("Missing prompt", { status: 400 });
}
if (!amount) {
return new NextResponse("Missing amount", { status: 400 });
}
if (!resolution) {
return new NextResponse("Missing resolution", { status: 400 });
}
const isAllowed = await checkApiLimit();
const isPro = await checkSubscription();
if (!isAllowed && !isPro) {
return new NextResponse("API Limit Exceeded", { status: 403 });
}
const response = await openAi.createImage({
prompt,
n: parseInt(amount, 10),
size: resolution,
});
if (!isPro) {
await increaseApiLimit();
}
return NextResponse.json(response.data.data, { status: 200 });
} catch (error) {
console.log("[CONVERSATION_ERROR]", error);
return new NextResponse("Internal Server Error", { status: 500 });
}
}
================================================
FILE: app/api/music/route.ts
================================================
import { checkApiLimit, increaseApiLimit } from "@/lib/api-limit";
import { checkSubscription } from "@/lib/subscription";
import { auth } from "@clerk/nextjs";
import { NextResponse } from "next/server";
import Replicate from "replicate";
const replicate = new Replicate({
auth: process.env.REPLICATE_API_TOKEN!,
});
export async function POST(req: Request) {
try {
const { userId } = auth();
const body = await req.json();
const { prompt } = body;
if (!userId) {
return new NextResponse("Unauthorized", { status: 401 });
}
if (!prompt) {
return new NextResponse("Prompt is required", { status: 400 });
}
const isAllowed = await checkApiLimit();
const isPro = await checkSubscription();
if (!isAllowed && !isPro) {
return new NextResponse("API Limit Exceeded", { status: 403 });
}
const response = await replicate.run("riffusion/riffusion:8cf61ea6c56afd61d8f5b9ffd14d7c216c0a93844ce2d82ac1c9ecc9c7f24e05", {
input: {
prompt_a: prompt,
},
});
if (!isPro) {
await increaseApiLimit();
}
return NextResponse.json(response, { status: 200 });
} catch (error) {
console.log("[MUSIC_ERROR]", error);
return new NextResponse("Internal Server Error", { status: 500 });
}
}
================================================
FILE: app/api/stripe/route.ts
================================================
import { auth, currentUser } from "@clerk/nextjs";
import { NextResponse } from "next/server";
import prismadb from "@/lib/prismadb";
import { stripe } from "@/lib/stripe";
import { absoluteUrl } from "@/lib/utils";
const settingsUrl = absoluteUrl("/settings");
export async function GET() {
try {
const { userId } = auth();
const user = await currentUser();
if (!userId || !user) {
return new NextResponse("Unauthorized", { status: 401 });
}
const userSubscription = await prismadb.userSubscription.findUnique({
where: {
userId,
},
});
if (userSubscription && userSubscription.stripeCustomerId) {
const stripeSession = await stripe.billingPortal.sessions.create({
customer: userSubscription.stripeCustomerId,
return_url: settingsUrl,
});
return new NextResponse(JSON.stringify({ url: stripeSession.url }), { status: 200 });
}
const stripeSession = await stripe.checkout.sessions.create({
success_url: settingsUrl,
cancel_url: settingsUrl,
payment_method_types: ["card"],
mode: "subscription",
billing_address_collection: "auto",
customer_email: user.emailAddresses[0].emailAddress,
line_items: [
{
price_data: {
currency: "USD",
product_data: {
name: "Prometheus Pro",
description: "Prometheus Pro",
},
unit_amount: 2000,
recurring: {
interval: "month",
},
},
quantity: 1,
},
],
metadata: {
userId,
},
});
return new NextResponse(JSON.stringify({ url: stripeSession.url }), { status: 200 });
} catch (error) {
console.log("[STRIPE_ERROR]", error);
return new NextResponse("Internal Server Error", { status: 500 });
}
}
================================================
FILE: app/api/video/route.ts
================================================
import { checkApiLimit, increaseApiLimit } from "@/lib/api-limit";
import { checkSubscription } from "@/lib/subscription";
import { auth } from "@clerk/nextjs";
import { NextResponse } from "next/server";
import Replicate from "replicate";
const replicate = new Replicate({
auth: process.env.REPLICATE_API_TOKEN!,
});
export async function POST(req: Request) {
try {
const { userId } = auth();
const body = await req.json();
const { prompt } = body;
if (!userId) {
return new NextResponse("Unauthorized", { status: 401 });
}
if (!prompt) {
return new NextResponse("Prompt is required", { status: 400 });
}
const isAllowed = await checkApiLimit();
const isPro = await checkSubscription();
if (!isAllowed && !isPro) {
return new NextResponse("API Limit Exceeded", { status: 403 });
}
const response = await replicate.run("anotherjesse/zeroscope-v2-xl:9f747673945c62801b13b84701c783929c0ee784e4748ec062204894dda1a351", {
input: {
prompt,
},
});
if (!isPro) {
await increaseApiLimit();
}
return NextResponse.json(response, { status: 200 });
} catch (error) {
console.log("[VIDEO_ERROR]", error);
return new NextResponse("Internal Server Error", { status: 500 });
}
}
================================================
FILE: app/api/webhook/route.ts
================================================
import { headers } from "next/headers";
import Stripe from "stripe";
import prismadb from "@/lib/prismadb";
import { stripe } from "@/lib/stripe";
import { NextResponse } from "next/server";
export async function POST(req: Request) {
const body = await req.text();
const signature = headers().get("Stripe-Signature") as string;
let event: Stripe.Event;
try {
event = stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET!);
} catch (error: any) {
return new NextResponse(`Webhook Error: ${error.message}`, { status: 400 });
}
const session = event.data.object as Stripe.Checkout.Session;
if (event.type === "checkout.session.completed") {
const subscription = await stripe.subscriptions.retrieve(session.subscription as string);
if (!session?.metadata?.userId) {
return new NextResponse("Unauthorized", { status: 401 });
}
await prismadb.userSubscription.create({
data: {
userId: session.metadata.userId,
stripeSubscriptionId: subscription.id,
stripeCustomerId: subscription.customer as string,
stripePriceId: subscription.items.data[0].price.id,
stripeCurrentPeriodEnd: new Date(subscription.current_period_end * 1000),
},
});
}
if (event.type === "invoice.payment_succeeded") {
const subscription = await stripe.subscriptions.retrieve(session.subscription as string);
await prismadb.userSubscription.update({
where: {
stripeSubscriptionId: subscription.id,
},
data: {
stripePriceId: subscription.items.data[0].price.id,
stripeCurrentPeriodEnd: new Date(subscription.current_period_end * 1000),
},
});
}
return new NextResponse("OK", { status: 200 });
}
================================================
FILE: app/globals.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body,
:root {
height: 100%;
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--primary: 248 90% 66%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--ring: 215 20.2% 65.1%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 85.7% 97.3%;
--ring: 217.2 32.6% 17.5%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
================================================
FILE: app/layout.tsx
================================================
import { ClerkProvider } from "@clerk/nextjs";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import CrispProvider from "@/components/crisp-provider";
import { ModalProvider } from "@/components/modal-provider";
import { ToasterProvider } from "@/components/toaster-provider";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Prometheus AI",
description: "An AI platform.",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<html lang="en">
<body className={inter.className}>
<ModalProvider />
<ToasterProvider />
<CrispProvider />
{children}
</body>
</html>
</ClerkProvider>
);
}
================================================
FILE: components/bot-avatar.tsx
================================================
import { Avatar, AvatarImage } from "./ui/avatar";
export const BotAvatar = () => {
return (
<Avatar className="h-8 w-8">
<AvatarImage className="p-1" src="/logo.png" />
</Avatar>
);
};
================================================
FILE: components/crisp-chat.tsx
================================================
"use client";
import { Crisp } from "crisp-sdk-web";
import { useEffect } from "react";
export const CrispChat = () => {
useEffect(() => {
Crisp.configure(process.env.CRISP_WEBSITE_ID!);
}, []);
return null;
};
================================================
FILE: components/crisp-provider.tsx
================================================
import { CrispChat } from "./crisp-chat";
export const CrispProvider = () => {
return <CrispChat />;
};
export default CrispProvider;
================================================
FILE: components/empty.tsx
================================================
import Image from "next/image";
interface EmptyProps {
label: string;
}
export const Empty = ({ label }: EmptyProps) => {
return (
<div className="h-full p-20 flex flex-col items-center justify-center">
<div className="relative h-72 w-72">
<Image alt="Empty" src="/empty.png" fill />
<p className="text-muted-foreground text-sm text-center">{label}</p>
</div>
</div>
);
};
================================================
FILE: components/free-counter.tsx
================================================
"use client";
import { FC, useEffect, useState } from "react";
import { MAX_FREE_COUNTS } from "@/constants";
import useProModal from "@/hooks/use-pro-modal";
import { Zap } from "lucide-react";
import { Button } from "./ui/button";
import { Card, CardContent } from "./ui/card";
import { Progress } from "./ui/progress";
interface FreeCounterProps {
apiLimitCount: number;
isPro: boolean;
}
export const FreeCounter: FC<FreeCounterProps> = ({ apiLimitCount = 0, isPro = false }) => {
const [mounted, setMounted] = useState(false);
const proModal = useProModal();
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}
if (isPro) {
return null;
}
return (
<div className="px-3">
<Card className="bg-white/10 border-0">
<CardContent className="py-6">
<div className="text-center text-sm text-white mb-4 space-y-2">
<p>
{apiLimitCount} / {MAX_FREE_COUNTS} Free Generations
</p>
<Progress className="h-3" value={(apiLimitCount / MAX_FREE_COUNTS) * 100} />
</div>
<Button variant="premium" className="w-full" onClick={proModal.onOpen}>
Upgrade <Zap className="w-4 h-4 ml-2 fill-white" />
</Button>
</CardContent>
</Card>
</div>
);
};
export default FreeCounter;
================================================
FILE: components/heading.tsx
================================================
import { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";
interface HeadingProps {
title: string;
description: string;
icon: LucideIcon;
iconColor?: string;
bgColor?: string;
}
export const Heading = ({
title,
description,
icon: Icon,
iconColor,
bgColor,
}: HeadingProps) => {
return (
<div className="px-4 lg:px-8 flex items-center gap-x-3 mb-8">
<div className={cn("p-2 w-fit rounded-md", bgColor)}>
<Icon className={cn("w-10 h-10", iconColor)} />
</div>
<div>
<h2 className="text-3xl font-bold">{title}</h2>
<p className="text-sm text-muted-foreground">{description}</p>
</div>
</div>
);
};
================================================
FILE: components/landing-content.tsx
================================================
"use client";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
const testimonials = [
{
name: "John Doe",
avatar: "A",
title: "Software Engineer",
description: "This is the best application I've ever used!",
},
{
name: "John Doe",
avatar: "A",
title: "Software Engineer",
description: "This is the best application I've ever used!",
},
{
name: "John Doe",
avatar: "A",
title: "Software Engineer",
description: "This is the best application I've ever used!",
},
{
name: "John Doe",
avatar: "A",
title: "Software Engineer",
description: "This is the best application I've ever used!",
},
];
export const LandingContent = () => {
return (
<div className="px-10 pb-20">
<h2 className="text-center text-4xl text-white font-extrabold mb-10">Testimonials</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{testimonials.map((item) => (
<Card key={item.description} className="bg-[#192339] border-none text-white">
<CardHeader>
<CardTitle className="flex items-center gap-x-2">
<div>
<p className="text-lg ">{item.name}</p>
<p className="text-zinc-400 text-sm">{item.title}</p>
</div>
</CardTitle>
<CardContent className="pt-4 px-0">{item.description}</CardContent>
</CardHeader>
</Card>
))}
</div>
</div>
);
};
export default LandingContent;
================================================
FILE: components/landing-hero.tsx
================================================
"use client";
import { useAuth } from "@clerk/nextjs";
import Link from "next/link";
import TypewriterComponent from "typewriter-effect";
import { Button } from "./ui/button";
export const LandingHero = () => {
const { isSignedIn } = useAuth();
return (
<div className="text-white font-bold py-36 text-center space-y-5">
<div className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl space-y-5 font-extrabold">
<h1>The Best AI Tool for</h1>
<div className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
<TypewriterComponent
options={{
strings: ["Chatbot.", "Photo Generation.", "Music Generation.", "Code Generation.", "Video Generation."],
autoStart: true,
loop: true,
}}
/>
</div>
</div>
<div className="text-sm md:text-xl font-light text-zinc-400">Create content using the power of AI.</div>
<div>
<Link href={isSignedIn ? "/dashboard" : "/sign-up"}>
<Button variant="premium" className="md:textlg p-4 md:p-6 rounded-full font-semibold">
Start Generating For Free
</Button>
</Link>
</div>
<div className="text-zinc-400 text-xs md:text-sm font-normal">No credit card required. Cancel anytime.</div>
</div>
);
};
================================================
FILE: components/landing-navbar.tsx
================================================
"use client";
import { useAuth } from "@clerk/nextjs";
import { Montserrat } from "next/font/google";
import Image from "next/image";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { Button } from "./ui/button";
const font = Montserrat({
weight: "600",
subsets: ["latin"],
});
export const LandingNabvbar = () => {
const { isSignedIn } = useAuth();
return (
<nav className="p-4 bg-transparent flex items-center justify-between">
<Link href="/" className="flex items-center">
<div className="relative h-8 w-8 mr-4">
<Image fill src="/logo.png" alt="Logo" />
</div>
<h1 className={cn("text-2xl font-bold text-white", font.className)}>Prometheus</h1>
</Link>
<div className="flex items-center gap-x-2">
<Link href={isSignedIn ? "/dashboard" : "/sign-up"}>
<Button variant="outline" className="rounded-full">
Get Started
</Button>
</Link>
</div>
</nav>
);
};
================================================
FILE: components/loader.tsx
================================================
import Image from "next/image";
export const Loader = () => {
return (
<div className="h-full flex flex-col gap-y-4 items-center justify-center">
<div className="w-10 h-10 relative animate-spin">
<Image alt="Logo" src="/logo.png" fill />
</div>
<p className="text-muted-foreground text-sm">Prometheus is thinking...</p>
</div>
);
};
================================================
FILE: components/mobile-sidebar.tsx
================================================
"use client";
import { Menu } from "lucide-react";
import { useEffect, useState } from "react";
import Sidebar from "./sidebar";
import { Button } from "./ui/button";
import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
const MobileSidebar = ({ apiLimitCount = 0, isPro = false }: { apiLimitCount: number; isPro: boolean }) => {
const [isMounted, setIsMounted] = useState(false);
useEffect(() => {
setIsMounted(true);
}, []);
if (!isMounted) {
return null;
}
return (
<Sheet>
<SheetTrigger>
<Button variant="ghost" size="icon" className="md:hidden">
<Menu />
</Button>
</SheetTrigger>
<SheetContent side="left" className="p-0">
<Sidebar apiLimitCount={apiLimitCount} isPro={isPro} />
</SheetContent>
</Sheet>
);
};
export default MobileSidebar;
================================================
FILE: components/modal-provider.tsx
================================================
"use client";
import { useEffect, useState } from "react";
import ProModal from "./pro-modal";
export const ModalProvider = () => {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}
return (
<>
<ProModal />
</>
);
};
================================================
FILE: components/navbar.tsx
================================================
import { UserButton } from "@clerk/nextjs";
import { getApiLimitCount } from "@/lib/api-limit";
import { checkSubscription } from "@/lib/subscription";
import MobileSidebar from "./mobile-sidebar";
const Navbar = async () => {
const apiLimitCount = await getApiLimitCount();
const isPro = await checkSubscription();
return (
<div className="flex items-center p-4">
<MobileSidebar apiLimitCount={apiLimitCount} isPro={isPro} />
<div className="flex w-full justify-end">
<UserButton afterSignOutUrl="/" />
</div>
</div>
);
};
export default Navbar;
================================================
FILE: components/pro-modal.tsx
================================================
"use client";
import axios from "axios";
import { useState } from "react";
import useProModal from "@/hooks/use-pro-modal";
import { cn } from "@/lib/utils";
import { Check, Code, ImageIcon, MessageSquare, Music, VideoIcon, Zap } from "lucide-react";
import { toast } from "react-hot-toast";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { Card } from "./ui/card";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./ui/dialog";
export const ProModal = () => {
const proModal = useProModal();
const [loading, setLoading] = useState(false);
const tools = [
{
label: "Conversation",
icon: MessageSquare,
color: "text-violet-500",
bgColor: "bg-violet-500/10",
},
{
label: "Music Generation",
icon: Music,
color: "text-emerald-500",
bgColor: "bg-emerald-500/10",
},
{
label: "Image Generation",
icon: ImageIcon,
color: "text-pink-700",
bgColor: "bg-pink-700/10",
},
{
label: "Video Generation",
icon: VideoIcon,
color: "text-orange-700",
bgColor: "bg-orange-700/10",
},
{
label: "Code Generation",
icon: Code,
color: "text-green-700",
bgColor: "bg-green-700/10",
},
];
const onSubscribe = async () => {
try {
setLoading(true);
const response = await axios.get("/api/stripe");
window.location.href = response.data.url;
} catch (error) {
console.log("[STRIPE_CLIENT_ERROR]", error);
toast.error("Something went wrong.");
} finally {
setLoading(false);
}
};
return (
<Dialog open={proModal.isOpen} onOpenChange={proModal.onClose}>
<DialogContent>
<DialogHeader>
<DialogTitle className="flex justify-center flex-col items-center pb-2 gap-y-4">
<div className="flex items-center gap-x-2 font-bold py-1">
Upgrade to Prometheus Pro
<Badge variant="premium" className="uppercase text-sm py-1">
pro
</Badge>
</div>
</DialogTitle>
<DialogDescription className="text-center pt-2 space-y-2 text-zinc-900 font-medium">
{tools.map((tool) => (
<Card key={tool.label} className="p-3 border-black/5 flex items-center justify-between">
<div className="flex items-center gap-x-4">
<div className={cn("p-2 flex w-fit rounded-md", tool.bgColor)}>
<tool.icon className={cn("h-6 w-6", tool.color)} />
</div>
<div className="font-semibold text-sm">{tool.label}</div>
</div>
<Check className="text-primary w-5 h-5" />
</Card>
))}
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button disabled={loading} size="lg" variant="premium" className="w-full" onClick={onSubscribe}>
Upgrade <Zap className="w-4 h-4 ml-2 fill-white" />
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};
export default ProModal;
================================================
FILE: components/sidebar.tsx
================================================
"use client";
import { Code, ImageIcon, LayoutDashboard, MessageSquare, Music, Settings, VideoIcon } from "lucide-react";
import { Montserrat } from "next/font/google";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { FC } from "react";
import { cn } from "@/lib/utils";
import FreeCounter from "./free-counter";
const montserrat = Montserrat({ weight: "600", subsets: ["latin"] });
const routes = [
{
label: "Dashboard",
icon: LayoutDashboard,
href: "/dashboard",
color: "text-sky-500",
},
{
label: "Conversation",
icon: MessageSquare,
href: "/conversation",
color: "text-violet-500",
},
{
label: "Image Generation",
icon: ImageIcon,
href: "/image",
color: "text-pink-700",
},
{
label: "Video Generation",
icon: VideoIcon,
href: "/video",
color: "text-orange-700",
},
{
label: "Music Generation",
icon: Music,
href: "/music",
color: "text-emerald-500",
},
{
label: "Code Generation",
icon: Code,
href: "/code",
color: "text-green-700",
},
{
label: "Settings",
icon: Settings,
href: "/settings",
},
];
interface SidebarProps {
apiLimitCount: number;
isPro: boolean;
}
const Sidebar: FC<SidebarProps> = ({ apiLimitCount = 0, isPro = false }) => {
const pathname = usePathname();
return (
<div className="space-y-4 py-4 flex flex-col h-full bg-[#111827] text-white">
<div className="px-3 py-2 flex-1">
<Link href="/dashboard" className="flex items-center pl-3 mb-14">
<div className="relative w-8 h-8 mr-4">
<Image fill alt="Logo" src="/logo.png" />
</div>
<h1 className={cn("text-2xl font-bold", montserrat.className)}>Prometheus</h1>
</Link>
<div className="space-y-1">
{routes.map((route) => (
<Link
href={route.href}
key={route.href}
className={cn(
"text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:text-white hover:bg-white/10 rounded-lg transition",
pathname === route.href ? "bg-white/10 text-white" : "text-zinc-400"
)}
>
<div className="flex items-center flex-1">
<route.icon className={cn("w-5 h-5 mr-3", route.color)} />
{route.label}
</div>
</Link>
))}
</div>
</div>
<FreeCounter apiLimitCount={apiLimitCount} isPro={isPro} />
</div>
);
};
export default Sidebar;
================================================
FILE: components/subscription-button.tsx
================================================
"use client";
import axios from "axios";
import { Zap } from "lucide-react";
import { FC, useState } from "react";
import { toast } from "react-hot-toast";
import { Button } from "./ui/button";
interface SubscriptionButtonProps {
isPro: boolean;
}
export const SubscriptionButton: FC<SubscriptionButtonProps> = ({ isPro = false }) => {
const [loading, setLoading] = useState(false);
const onClick = async () => {
try {
setLoading(true);
const response = await axios.get("/api/stripe");
window.location.href = response.data.url;
} catch (error) {
console.log("[BILLING_ERROR]", error);
toast.error("Something went wrong.");
} finally {
setLoading(false);
}
};
return (
<Button disabled={loading} variant={isPro ? "default" : "premium"} onClick={onClick}>
{isPro ? "Manage Subscription" : "Upgrade to Pro"}
{!isPro && <Zap className="w-4 h-4 ml-2 fill-white" />}
</Button>
);
};
================================================
FILE: components/toaster-provider.tsx
================================================
"use client";
import { Toaster } from "react-hot-toast";
export const ToasterProvider = () => {
return <Toaster />;
};
================================================
FILE: components/ui/avatar.tsx
================================================
"use client"
import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"
import { cn } from "@/lib/utils"
const Avatar = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root
ref={ref}
className={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
className
)}
{...props}
/>
))
Avatar.displayName = AvatarPrimitive.Root.displayName
const AvatarImage = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Image>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Image
ref={ref}
className={cn("aspect-square h-full w-full", className)}
{...props}
/>
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName
const AvatarFallback = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Fallback>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted",
className
)}
{...props}
/>
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
export { Avatar, AvatarImage, AvatarFallback }
================================================
FILE: components/ui/badge.tsx
================================================
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";
const badgeVariants = cva(
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
outline: "text-foreground",
premium: "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-primary-foreground border-0",
},
},
defaultVariants: {
variant: "default",
},
}
);
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
function Badge({ className, variant, ...props }: BadgeProps) {
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
}
export { Badge, badgeVariants };
================================================
FILE: components/ui/button.tsx
================================================
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
premium: "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white border-0",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
});
Button.displayName = "Button";
export { Button, buttonVariants };
================================================
FILE: components/ui/card.tsx
================================================
import * as React from "react"
import { cn } from "@/lib/utils"
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm",
className
)}
{...props}
/>
))
Card.displayName = "Card"
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(" flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
================================================
FILE: components/ui/dialog.tsx
================================================
"use client"
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"
const Dialog = DialogPrimitive.Root
const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = ({
className,
...props
}: DialogPrimitive.DialogPortalProps) => (
<DialogPrimitive.Portal className={cn(className)} {...props} />
)
DialogPortal.displayName = DialogPrimitive.Portal.displayName
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
/>
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName
const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
)}
{...props}
/>
)
DialogHeader.displayName = "DialogHeader"
const DialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
DialogFooter.displayName = "DialogFooter"
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
DialogDescription.displayName = DialogPrimitive.Description.displayName
export {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
}
================================================
FILE: components/ui/form.tsx
================================================
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
Controller,
ControllerProps,
FieldPath,
FieldValues,
FormProvider,
useFormContext,
} from "react-hook-form"
import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"
const Form = FormProvider
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
name: TName
}
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue
)
const FormField = <
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
...props
}: ControllerProps<TFieldValues, TName>) => {
return (
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>
)
}
const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext)
const itemContext = React.useContext(FormItemContext)
const { getFieldState, formState } = useFormContext()
const fieldState = getFieldState(fieldContext.name, formState)
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>")
}
const { id } = itemContext
return {
id,
name: fieldContext.name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
}
}
type FormItemContextValue = {
id: string
}
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue
)
const FormItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const id = React.useId()
return (
<FormItemContext.Provider value={{ id }}>
<div ref={ref} className={cn("space-y-2", className)} {...props} />
</FormItemContext.Provider>
)
})
FormItem.displayName = "FormItem"
const FormLabel = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
const { error, formItemId } = useFormField()
return (
<Label
ref={ref}
className={cn(error && "text-destructive", className)}
htmlFor={formItemId}
{...props}
/>
)
})
FormLabel.displayName = "FormLabel"
const FormControl = React.forwardRef<
React.ElementRef<typeof Slot>,
React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
return (
<Slot
ref={ref}
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-invalid={!!error}
{...props}
/>
)
})
FormControl.displayName = "FormControl"
const FormDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
const { formDescriptionId } = useFormField()
return (
<p
ref={ref}
id={formDescriptionId}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
)
})
FormDescription.displayName = "FormDescription"
const FormMessage = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message) : children
if (!body) {
return null
}
return (
<p
ref={ref}
id={formMessageId}
className={cn("text-sm font-medium text-destructive", className)}
{...props}
>
{body}
</p>
)
})
FormMessage.displayName = "FormMessage"
export {
useFormField,
Form,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
FormField,
}
================================================
FILE: components/ui/input.tsx
================================================
import * as React from "react"
import { cn } from "@/lib/utils"
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
export { Input }
================================================
FILE: components/ui/label.tsx
================================================
"use client"
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName
export { Label }
================================================
FILE: components/ui/progress.tsx
================================================
"use client"
import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"
import { cn } from "@/lib/utils"
const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
<ProgressPrimitive.Root
ref={ref}
className={cn(
"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
className
)}
{...props}
>
<ProgressPrimitive.Indicator
className="h-full w-full flex-1 bg-primary transition-all"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>
</ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName
export { Progress }
================================================
FILE: components/ui/select.tsx
================================================
"use client"
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown } from "lucide-react"
import { cn } from "@/lib/utils"
const Select = SelectPrimitive.Root
const SelectGroup = SelectPrimitive.Group
const SelectValue = SelectPrimitive.Value
const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
)}
position={position}
{...props}
>
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
)}
>
{children}
</SelectPrimitive.Viewport>
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName
const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
ref={ref}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...props}
/>
))
SelectLabel.displayName = SelectPrimitive.Label.displayName
const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName
const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
export {
Select,
SelectGroup,
SelectValue,
SelectTrigger,
SelectContent,
SelectLabel,
SelectItem,
SelectSeparator,
}
================================================
FILE: components/ui/sheet.tsx
================================================
"use client"
import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"
const Sheet = SheetPrimitive.Root
const SheetTrigger = SheetPrimitive.Trigger
const SheetClose = SheetPrimitive.Close
const SheetPortal = ({
className,
...props
}: SheetPrimitive.DialogPortalProps) => (
<SheetPrimitive.Portal className={cn(className)} {...props} />
)
SheetPortal.displayName = SheetPrimitive.Portal.displayName
const SheetOverlay = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
ref={ref}
/>
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
const sheetVariants = cva(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
{
variants: {
side: {
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
bottom:
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
right:
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
},
},
defaultVariants: {
side: "right",
},
}
)
interface SheetContentProps
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
VariantProps<typeof sheetVariants> {}
const SheetContent = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Content>,
SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
ref={ref}
className={cn(sheetVariants({ side }), className)}
{...props}
>
{children}
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName
const SheetHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className
)}
{...props}
/>
)
SheetHeader.displayName = "SheetHeader"
const SheetFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
SheetFooter.displayName = "SheetFooter"
const SheetTitle = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold text-foreground", className)}
{...props}
/>
))
SheetTitle.displayName = SheetPrimitive.Title.displayName
const SheetDescription = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
SheetDescription.displayName = SheetPrimitive.Description.displayName
export {
Sheet,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
}
================================================
FILE: components/user-avatar.tsx
================================================
import { useUser } from "@clerk/nextjs";
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
export const UserAvatar = () => {
const { user } = useUser();
return (
<Avatar className="h-8 w-8">
<AvatarImage src={user?.profileImageUrl} />
<AvatarFallback>
{user?.firstName?.charAt(0)}
{user?.lastName?.charAt(0)}
</AvatarFallback>
</Avatar>
);
};
================================================
FILE: components.json
================================================
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "app/globals.css",
"baseColor": "slate",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
================================================
FILE: constants.ts
================================================
export const MAX_FREE_COUNTS = 5;
================================================
FILE: hooks/use-pro-modal.tsx
================================================
import { create } from "zustand";
interface useProModalStore {
isOpen: boolean;
onOpen: () => void;
onClose: () => void;
}
export const useProModal = create<useProModalStore>((set) => ({
isOpen: false,
onOpen: () => set({ isOpen: true }),
onClose: () => set({ isOpen: false }),
}));
export default useProModal;
================================================
FILE: lib/api-limit.ts
================================================
import { auth } from "@clerk/nextjs";
import { MAX_FREE_COUNTS } from "@/constants";
import prismadb from "./prismadb";
export const increaseApiLimit = async () => {
const { userId } = auth();
if (!userId) {
return;
}
const userApiLimit = await prismadb.userApiLimit.findUnique({
where: {
userId,
},
});
if (!userApiLimit) {
await prismadb.userApiLimit.create({
data: {
userId,
count: 1,
},
});
} else {
await prismadb.userApiLimit.update({
where: {
userId,
},
data: {
count: userApiLimit.count + 1,
},
});
}
};
export const checkApiLimit = async () => {
const { userId } = auth();
if (!userId) {
return false;
}
const userApiLimit = await prismadb.userApiLimit.findUnique({
where: {
userId,
},
});
if (!userApiLimit || userApiLimit.count < MAX_FREE_COUNTS) {
return true;
} else {
return false;
}
};
export const getApiLimitCount = async () => {
const { userId } = auth();
if (!userId) {
return 0;
}
const userApiLimit = await prismadb.userApiLimit.findUnique({
where: {
userId,
},
});
if (!userApiLimit) {
return 0;
} else {
return userApiLimit.count;
}
};
================================================
FILE: lib/prismadb.ts
================================================
import { PrismaClient } from "@prisma/client";
declare global {
var prisma: PrismaClient | undefined;
}
const prismadb = globalThis.prisma || new PrismaClient();
if (process.env.NODE_ENV !== "production") globalThis.prisma = prismadb;
export default prismadb;
================================================
FILE: lib/stripe.ts
================================================
import Stripe from "stripe";
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
apiVersion: "2022-11-15",
typescript: true,
});
================================================
FILE: lib/subscription.ts
================================================
import { auth } from "@clerk/nextjs";
import prismadb from "./prismadb";
const DAY_IN_MS = 1000 * 60 * 60 * 24;
export const checkSubscription = async () => {
const { userId } = auth();
if (!userId) {
return false;
}
const userSubscription = await prismadb.userSubscription.findUnique({
where: {
userId,
},
select: {
stripeSubscriptionId: true,
stripeCurrentPeriodEnd: true,
stripeCustomerId: true,
stripePriceId: true,
},
});
if (!userSubscription) {
return false;
}
const isValid = userSubscription.stripePriceId && userSubscription.stripeCurrentPeriodEnd?.getTime()! + DAY_IN_MS > Date.now();
return !!isValid;
};
================================================
FILE: lib/utils.ts
================================================
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
export function absoluteUrl(path: string) {
return `${process.env.NEXT_PUBLIC_APP_URL}${path}`;
}
================================================
FILE: middleware.ts
================================================
import { authMiddleware } from "@clerk/nextjs";
// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/nextjs/middleware for more information about configuring your middleware
export default authMiddleware({
publicRoutes: ["/", "/api/webhook"],
});
export const config = {
matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};
================================================
FILE: next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ["oaidalleapiprodscus.blob.core.windows.net"],
},
};
module.exports = nextConfig;
================================================
FILE: package.json
================================================
{
"name": "ai-saas",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@clerk/nextjs": "^4.23.0",
"@hookform/resolvers": "^3.1.1",
"@prisma/client": "^5.0.0",
"@radix-ui/react-avatar": "^1.0.3",
"@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-select": "^1.2.2",
"@radix-ui/react-slot": "^1.0.2",
"@types/node": "20.4.3",
"@types/react": "18.2.15",
"@types/react-dom": "18.2.7",
"autoprefixer": "10.4.14",
"axios": "^1.4.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"crisp-sdk-web": "^1.0.19",
"eslint": "8.45.0",
"eslint-config-next": "13.4.12",
"lucide-react": "^0.263.0",
"next": "13.4.12",
"openai": "^3.3.0",
"postcss": "8.4.27",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.45.2",
"react-hot-toast": "^2.4.1",
"react-markdown": "^8.0.7",
"replicate": "^0.12.3",
"stripe": "^12.16.0",
"tailwind-merge": "^1.14.0",
"tailwindcss": "3.3.3",
"tailwindcss-animate": "^1.0.6",
"typescript": "5.1.6",
"typewriter-effect": "^2.20.1",
"zod": "^3.21.4",
"zustand": "^4.3.9"
},
"devDependencies": {
"prisma": "^5.0.0"
}
}
================================================
FILE: postcss.config.js
================================================
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: prisma/schema.prisma
================================================
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
relationMode = "prisma"
}
model UserApiLimit {
id String @id @default(cuid())
userId String @unique
count Int @default(0)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model UserSubscription {
id String @id @default(cuid())
userId String @unique
stripeCustomerId String? @unique @map(name: "stripe_customer_id")
stripeSubscriptionId String? @unique @map(name: "stripe_subscription_id")
stripePriceId String? @unique @map(name: "stripe_price_id")
stripeCurrentPeriodEnd DateTime? @map(name: "stripe_current_period_end")
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
================================================
FILE: tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
}
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
gitextract_d84y1w4g/ ├── .eslintrc.json ├── .github/ │ └── workflows/ │ └── npm-gulp.yml ├── .gitignore ├── LICENSE ├── README.md ├── app/ │ ├── (auth)/ │ │ ├── (routes)/ │ │ │ ├── sign-in/ │ │ │ │ └── [[...sign-in]]/ │ │ │ │ └── page.tsx │ │ │ └── sign-up/ │ │ │ └── [[...sign-up]]/ │ │ │ └── page.tsx │ │ └── layout.tsx │ ├── (dashboard)/ │ │ ├── (routes)/ │ │ │ ├── code/ │ │ │ │ ├── constants.tsx │ │ │ │ └── page.tsx │ │ │ ├── conversation/ │ │ │ │ ├── constants.tsx │ │ │ │ └── page.tsx │ │ │ ├── dashboard/ │ │ │ │ └── page.tsx │ │ │ ├── image/ │ │ │ │ ├── constants.tsx │ │ │ │ └── page.tsx │ │ │ ├── music/ │ │ │ │ ├── constants.tsx │ │ │ │ └── page.tsx │ │ │ ├── settings/ │ │ │ │ └── page.tsx │ │ │ └── video/ │ │ │ ├── constants.tsx │ │ │ └── page.tsx │ │ └── layout.tsx │ ├── (landing)/ │ │ ├── layout.tsx │ │ └── page.tsx │ ├── api/ │ │ ├── code/ │ │ │ └── route.ts │ │ ├── conversation/ │ │ │ └── route.ts │ │ ├── image/ │ │ │ └── route.ts │ │ ├── music/ │ │ │ └── route.ts │ │ ├── stripe/ │ │ │ └── route.ts │ │ ├── video/ │ │ │ └── route.ts │ │ └── webhook/ │ │ └── route.ts │ ├── globals.css │ └── layout.tsx ├── components/ │ ├── bot-avatar.tsx │ ├── crisp-chat.tsx │ ├── crisp-provider.tsx │ ├── empty.tsx │ ├── free-counter.tsx │ ├── heading.tsx │ ├── landing-content.tsx │ ├── landing-hero.tsx │ ├── landing-navbar.tsx │ ├── loader.tsx │ ├── mobile-sidebar.tsx │ ├── modal-provider.tsx │ ├── navbar.tsx │ ├── pro-modal.tsx │ ├── sidebar.tsx │ ├── subscription-button.tsx │ ├── toaster-provider.tsx │ ├── ui/ │ │ ├── avatar.tsx │ │ ├── badge.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── dialog.tsx │ │ ├── form.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── progress.tsx │ │ ├── select.tsx │ │ └── sheet.tsx │ └── user-avatar.tsx ├── components.json ├── constants.ts ├── hooks/ │ └── use-pro-modal.tsx ├── lib/ │ ├── api-limit.ts │ ├── prismadb.ts │ ├── stripe.ts │ ├── subscription.ts │ └── utils.ts ├── middleware.ts ├── next.config.js ├── package.json ├── postcss.config.js ├── prisma/ │ └── schema.prisma ├── tailwind.config.js └── tsconfig.json
SYMBOL INDEX (28 symbols across 25 files)
FILE: app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsx
function Page (line 3) | function Page() {
FILE: app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsx
function Page (line 3) | function Page() {
FILE: app/(landing)/page.tsx
function LandingPage (line 5) | function LandingPage() {
FILE: app/api/code/route.ts
function POST (line 18) | async function POST(req: Request) {
FILE: app/api/conversation/route.ts
function POST (line 14) | async function POST(req: Request) {
FILE: app/api/image/route.ts
function POST (line 13) | async function POST(req: Request) {
FILE: app/api/music/route.ts
function POST (line 11) | async function POST(req: Request) {
FILE: app/api/stripe/route.ts
function GET (line 10) | async function GET() {
FILE: app/api/video/route.ts
function POST (line 11) | async function POST(req: Request) {
FILE: app/api/webhook/route.ts
function POST (line 8) | async function POST(req: Request) {
FILE: app/layout.tsx
function RootLayout (line 17) | function RootLayout({ children }: { children: React.ReactNode }) {
FILE: components/empty.tsx
type EmptyProps (line 3) | interface EmptyProps {
FILE: components/free-counter.tsx
type FreeCounterProps (line 12) | interface FreeCounterProps {
FILE: components/heading.tsx
type HeadingProps (line 5) | interface HeadingProps {
FILE: components/sidebar.tsx
type SidebarProps (line 59) | interface SidebarProps {
FILE: components/subscription-button.tsx
type SubscriptionButtonProps (line 9) | interface SubscriptionButtonProps {
FILE: components/ui/badge.tsx
type BadgeProps (line 24) | interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, Varia...
function Badge (line 26) | function Badge({ className, variant, ...props }: BadgeProps) {
FILE: components/ui/button.tsx
type ButtonProps (line 34) | interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEleme...
FILE: components/ui/form.tsx
type FormFieldContextValue (line 18) | type FormFieldContextValue<
type FormItemContextValue (line 65) | type FormItemContextValue = {
FILE: components/ui/input.tsx
type InputProps (line 5) | interface InputProps
FILE: components/ui/sheet.tsx
type SheetContentProps (line 58) | interface SheetContentProps
FILE: constants.ts
constant MAX_FREE_COUNTS (line 1) | const MAX_FREE_COUNTS = 5;
FILE: hooks/use-pro-modal.tsx
type useProModalStore (line 3) | interface useProModalStore {
FILE: lib/subscription.ts
constant DAY_IN_MS (line 5) | const DAY_IN_MS = 1000 * 60 * 60 * 24;
FILE: lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
function absoluteUrl (line 8) | function absoluteUrl(path: string) {
Condensed preview — 76 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (110K chars).
[
{
"path": ".eslintrc.json",
"chars": 40,
"preview": "{\n \"extends\": \"next/core-web-vitals\"\n}\n"
},
{
"path": ".github/workflows/npm-gulp.yml",
"chars": 471,
"preview": "name: NodeJS with Gulp\n\non:\n push:\n branches: [ \"main\" ]\n pull_request:\n branches: [ \"main\" ]\n\njobs:\n build:\n "
},
{
"path": ".gitignore",
"chars": 373,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "LICENSE",
"chars": 1070,
"preview": "MIT License\n\nCopyright (c) 2023 Ayush Rathore\n\nPermission is hereby granted, free of charge, to any person obtaining a c"
},
{
"path": "README.md",
"chars": 5793,
"preview": "# AI-SaaS - AI-Powered Software-as-a-Service Application\n\n["
},
{
"path": "app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsx",
"chars": 97,
"preview": "import { SignIn } from \"@clerk/nextjs\";\n\nexport default function Page() {\n return <SignIn />;\n}\n"
},
{
"path": "app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsx",
"chars": 97,
"preview": "import { SignUp } from \"@clerk/nextjs\";\n\nexport default function Page() {\n return <SignUp />;\n}\n"
},
{
"path": "app/(auth)/layout.tsx",
"chars": 213,
"preview": "import React from \"react\";\n\nconst AuthLayout = ({ children }: { children: React.ReactNode }) => {\n return <div classNam"
},
{
"path": "app/(dashboard)/(routes)/code/constants.tsx",
"chars": 140,
"preview": "import * as z from \"zod\";\n\nexport const formSchema = z.object({\n prompt: z.string().min(1, {\n message: \"Prompt is re"
},
{
"path": "app/(dashboard)/(routes)/code/page.tsx",
"chars": 4868,
"preview": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport axios from \"axios\";\nimport { Code } from \"l"
},
{
"path": "app/(dashboard)/(routes)/conversation/constants.tsx",
"chars": 140,
"preview": "import * as z from \"zod\";\n\nexport const formSchema = z.object({\n prompt: z.string().min(1, {\n message: \"Prompt is re"
},
{
"path": "app/(dashboard)/(routes)/conversation/page.tsx",
"chars": 4333,
"preview": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport axios from \"axios\";\nimport { MessageSquare "
},
{
"path": "app/(dashboard)/(routes)/dashboard/page.tsx",
"chars": 2018,
"preview": "\"use client\";\n\nimport {\n\tArrowRight,\n\tCode,\n\tImageIcon,\n\tMessageSquare,\n\tMusic,\n\tVideoIcon,\n} from \"lucide-react\";\nimpor"
},
{
"path": "app/(dashboard)/(routes)/image/constants.tsx",
"chars": 630,
"preview": "import * as z from \"zod\";\n\nexport const formSchema = z.object({\n\tprompt: z.string().min(1, {\n\t\tmessage: \"Image Prompt is"
},
{
"path": "app/(dashboard)/(routes)/image/page.tsx",
"chars": 6223,
"preview": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport axios from \"axios\";\nimport { Download, Imag"
},
{
"path": "app/(dashboard)/(routes)/music/constants.tsx",
"chars": 140,
"preview": "import * as z from \"zod\";\n\nexport const formSchema = z.object({\n prompt: z.string().min(1, {\n message: \"Prompt is re"
},
{
"path": "app/(dashboard)/(routes)/music/page.tsx",
"chars": 3394,
"preview": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport axios from \"axios\";\nimport { Music } from \""
},
{
"path": "app/(dashboard)/(routes)/settings/page.tsx",
"chars": 776,
"preview": "import { Heading } from \"@/components/heading\";\nimport { SubscriptionButton } from \"@/components/subscription-button\";\ni"
},
{
"path": "app/(dashboard)/(routes)/video/constants.tsx",
"chars": 140,
"preview": "import * as z from \"zod\";\n\nexport const formSchema = z.object({\n prompt: z.string().min(1, {\n message: \"Prompt is re"
},
{
"path": "app/(dashboard)/(routes)/video/page.tsx",
"chars": 3433,
"preview": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport axios from \"axios\";\nimport { Video } from \""
},
{
"path": "app/(dashboard)/layout.tsx",
"chars": 734,
"preview": "import Navbar from \"@/components/navbar\";\nimport Sidebar from \"@/components/sidebar\";\nimport { getApiLimitCount } from \""
},
{
"path": "app/(landing)/layout.tsx",
"chars": 263,
"preview": "const LandingLayout = ({ children }: { children: React.ReactNode }) => {\n return (\n <main className=\"h-full bg-[#111"
},
{
"path": "app/(landing)/page.tsx",
"chars": 363,
"preview": "import LandingContent from \"@/components/landing-content\";\nimport { LandingHero } from \"@/components/landing-hero\";\nimpo"
},
{
"path": "app/api/code/route.ts",
"chars": 1694,
"preview": "import { checkApiLimit, increaseApiLimit } from \"@/lib/api-limit\";\nimport { checkSubscription } from \"@/lib/subscription"
},
{
"path": "app/api/conversation/route.ts",
"chars": 1433,
"preview": "import { auth } from \"@clerk/nextjs\";\nimport { NextResponse } from \"next/server\";\nimport { Configuration, OpenAIApi } fr"
},
{
"path": "app/api/image/route.ts",
"chars": 1654,
"preview": "import { checkApiLimit, increaseApiLimit } from \"@/lib/api-limit\";\nimport { checkSubscription } from \"@/lib/subscription"
},
{
"path": "app/api/music/route.ts",
"chars": 1297,
"preview": "import { checkApiLimit, increaseApiLimit } from \"@/lib/api-limit\";\nimport { checkSubscription } from \"@/lib/subscription"
},
{
"path": "app/api/stripe/route.ts",
"chars": 1875,
"preview": "import { auth, currentUser } from \"@clerk/nextjs\";\nimport { NextResponse } from \"next/server\";\n\nimport prismadb from \"@/"
},
{
"path": "app/api/video/route.ts",
"chars": 1296,
"preview": "import { checkApiLimit, increaseApiLimit } from \"@/lib/api-limit\";\nimport { checkSubscription } from \"@/lib/subscription"
},
{
"path": "app/api/webhook/route.ts",
"chars": 1764,
"preview": "import { headers } from \"next/headers\";\nimport Stripe from \"stripe\";\n\nimport prismadb from \"@/lib/prismadb\";\nimport { st"
},
{
"path": "app/globals.css",
"chars": 1615,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nhtml,\nbody,\n:root {\n height: 100%;\n}\n\n@layer base {\n :root"
},
{
"path": "app/layout.tsx",
"chars": 826,
"preview": "import { ClerkProvider } from \"@clerk/nextjs\";\nimport type { Metadata } from \"next\";\nimport { Inter } from \"next/font/go"
},
{
"path": "components/bot-avatar.tsx",
"chars": 196,
"preview": "import { Avatar, AvatarImage } from \"./ui/avatar\";\n\nexport const BotAvatar = () => {\n\treturn (\n\t\t<Avatar className=\"h-8 "
},
{
"path": "components/crisp-chat.tsx",
"chars": 219,
"preview": "\"use client\";\n\nimport { Crisp } from \"crisp-sdk-web\";\nimport { useEffect } from \"react\";\n\nexport const CrispChat = () =>"
},
{
"path": "components/crisp-provider.tsx",
"chars": 138,
"preview": "import { CrispChat } from \"./crisp-chat\";\n\nexport const CrispProvider = () => {\n return <CrispChat />;\n};\n\nexport defau"
},
{
"path": "components/empty.tsx",
"chars": 396,
"preview": "import Image from \"next/image\";\n\ninterface EmptyProps {\n\tlabel: string;\n}\n\nexport const Empty = ({ label }: EmptyProps) "
},
{
"path": "components/free-counter.tsx",
"chars": 1361,
"preview": "\"use client\";\n\nimport { FC, useEffect, useState } from \"react\";\n\nimport { MAX_FREE_COUNTS } from \"@/constants\";\nimport u"
},
{
"path": "components/heading.tsx",
"chars": 656,
"preview": "import { LucideIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface HeadingProps {\n\ttitle: string;\n"
},
{
"path": "components/landing-content.tsx",
"chars": 1580,
"preview": "\"use client\";\n\nimport { Card, CardContent, CardHeader, CardTitle } from \"./ui/card\";\n\nconst testimonials = [\n {\n nam"
},
{
"path": "components/landing-hero.tsx",
"chars": 1354,
"preview": "\"use client\";\n\nimport { useAuth } from \"@clerk/nextjs\";\nimport Link from \"next/link\";\nimport TypewriterComponent from \"t"
},
{
"path": "components/landing-navbar.tsx",
"chars": 1008,
"preview": "\"use client\";\n\nimport { useAuth } from \"@clerk/nextjs\";\nimport { Montserrat } from \"next/font/google\";\nimport Image from"
},
{
"path": "components/loader.tsx",
"chars": 353,
"preview": "import Image from \"next/image\";\n\nexport const Loader = () => {\n\treturn (\n\t\t<div className=\"h-full flex flex-col gap-y-4 "
},
{
"path": "components/mobile-sidebar.tsx",
"chars": 851,
"preview": "\"use client\";\n\nimport { Menu } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\n\nimport Sidebar from \"."
},
{
"path": "components/modal-provider.tsx",
"chars": 331,
"preview": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport ProModal from \"./pro-modal\";\n\nexport const ModalProv"
},
{
"path": "components/navbar.tsx",
"chars": 593,
"preview": "import { UserButton } from \"@clerk/nextjs\";\n\nimport { getApiLimitCount } from \"@/lib/api-limit\";\nimport { checkSubscript"
},
{
"path": "components/pro-modal.tsx",
"chars": 3186,
"preview": "\"use client\";\n\nimport axios from \"axios\";\nimport { useState } from \"react\";\n\nimport useProModal from \"@/hooks/use-pro-mo"
},
{
"path": "components/sidebar.tsx",
"chars": 2629,
"preview": "\"use client\";\n\nimport { Code, ImageIcon, LayoutDashboard, MessageSquare, Music, Settings, VideoIcon } from \"lucide-react"
},
{
"path": "components/subscription-button.tsx",
"chars": 967,
"preview": "\"use client\";\n\nimport axios from \"axios\";\nimport { Zap } from \"lucide-react\";\nimport { FC, useState } from \"react\";\nimpo"
},
{
"path": "components/toaster-provider.tsx",
"chars": 123,
"preview": "\"use client\";\n\nimport { Toaster } from \"react-hot-toast\";\n\nexport const ToasterProvider = () => {\n return <Toaster />;\n"
},
{
"path": "components/ui/avatar.tsx",
"chars": 1419,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } fr"
},
{
"path": "components/ui/badge.tsx",
"chars": 1201,
"preview": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \""
},
{
"path": "components/ui/button.tsx",
"chars": 1838,
"preview": "import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport *"
},
{
"path": "components/ui/card.tsx",
"chars": 1878,
"preview": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n Rea"
},
{
"path": "components/ui/dialog.tsx",
"chars": 3966,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from"
},
{
"path": "components/ui/form.tsx",
"chars": 4085,
"preview": "import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/r"
},
{
"path": "components/ui/input.tsx",
"chars": 824,
"preview": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n extends React.InputHTMLA"
},
{
"path": "components/ui/label.tsx",
"chars": 724,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type "
},
{
"path": "components/ui/progress.tsx",
"chars": 791,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\n\nimport { cn "
},
{
"path": "components/ui/select.tsx",
"chars": 4370,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, C"
},
{
"path": "components/ui/sheet.tsx",
"chars": 4445,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type"
},
{
"path": "components/user-avatar.tsx",
"chars": 385,
"preview": "import { useUser } from \"@clerk/nextjs\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"./ui/avatar\";\n\nexport cons"
},
{
"path": "components.json",
"chars": 323,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n \"style\": \"default\",\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {\n"
},
{
"path": "constants.ts",
"chars": 34,
"preview": "export const MAX_FREE_COUNTS = 5;\n"
},
{
"path": "hooks/use-pro-modal.tsx",
"chars": 326,
"preview": "import { create } from \"zustand\";\n\ninterface useProModalStore {\n isOpen: boolean;\n onOpen: () => void;\n onClose: () ="
},
{
"path": "lib/api-limit.ts",
"chars": 1274,
"preview": "import { auth } from \"@clerk/nextjs\";\n\nimport { MAX_FREE_COUNTS } from \"@/constants\";\nimport prismadb from \"./prismadb\";"
},
{
"path": "lib/prismadb.ts",
"chars": 265,
"preview": "import { PrismaClient } from \"@prisma/client\";\n\ndeclare global {\n var prisma: PrismaClient | undefined;\n}\n\nconst prisma"
},
{
"path": "lib/stripe.ts",
"chars": 149,
"preview": "import Stripe from \"stripe\";\n\nexport const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {\n apiVersion: \"2022-11-"
},
{
"path": "lib/subscription.ts",
"chars": 697,
"preview": "import { auth } from \"@clerk/nextjs\";\n\nimport prismadb from \"./prismadb\";\n\nconst DAY_IN_MS = 1000 * 60 * 60 * 24;\n\nexpor"
},
{
"path": "lib/utils.ts",
"chars": 270,
"preview": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: C"
},
{
"path": "middleware.ts",
"chars": 446,
"preview": "import { authMiddleware } from \"@clerk/nextjs\";\n\n// This example protects all routes including api/trpc routes\n// Please"
},
{
"path": "next.config.js",
"chars": 168,
"preview": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n\timages: {\n\t\tdomains: [\"oaidalleapiprodscus.blob.core.wind"
},
{
"path": "package.json",
"chars": 1421,
"preview": "{\n \"name\": \"ai-saas\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next"
},
{
"path": "postcss.config.js",
"chars": 82,
"preview": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "prisma/schema.prisma",
"chars": 755,
"preview": "generator client {\n provider = \"prisma-client-js\"\n}\n\ndatasource db {\n provider = \"mysql\"\n url = env(\"DATABASE_URL\")\n "
},
{
"path": "tailwind.config.js",
"chars": 2124,
"preview": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: [\"class\"],\n content: [\n './pages/**/*.{ts"
},
{
"path": "tsconfig.json",
"chars": 641,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sk"
}
]
About this extraction
This page contains the full source code of the ayusshrathore/ai-saas GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 76 files (97.7 KB), approximately 27.3k tokens, and a symbol index with 28 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.