antonioerdeljac / next13-ai-saas Goto Github PK

CSS 1.51% TypeScript 96.16% JavaScript 2.33%

next13-ai-saas's Introduction

Build a SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe | Full Tutorial 2023

This is a repository for Build a SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe | Full Tutorial 2023.

VIDEO TUTORIAL

Features:

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

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/AntonioErdeljac/next13-ai-saas.git

Install packages

npm i

Setup .env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

OPENAI_API_KEY=
REPLICATE_API_TOKEN=

DATABASE_URL=

STRIPE_API_KEY=
STRIPE_WEBHOOK_SECRET=

NEXT_PUBLIC_APP_URL="http://localhost:3000"

Setup Prisma

Add MySQL Database (I used PlanetScale)

npx prisma db push

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command	description
`dev`	Starts a development instance of the app

next13-ai-saas's People

Contributors

Stargazers

Watchers

Forkers

charles5991 diogoestima1998 riodel27 ajlborges gabouh pterameta martuico 21givenchy sunny0183 bathazarepaige mstf1985 igberroteran samxp2004 rossman22590 buyonjederrick shihab-wb420 oldbettie zettabyte918 bharat5604 atkallie irisscans93 ashkanbashiri nothumanff std1234 malufvideo swartex neidersinis1 pepe004 supernova3339 rd368 web-consult-ng supnim paulnsama7 dxb55 madarinhoo chirigg smtanimur gaedong2 groundbasesoft zanwaar samlak arianulislam sebastiancichos majiajue markjohnnah cgb-react 1921216468 shanshanqwer petersonfonseca 9amcoder 3lawix9 atulmaps kyrolabs educationsaasplatform clevercodx sandrodiegoadao arya09021998 chuanli11 forking-project nuelscript ebratz garhwalnaveen steveviko minddevelopmenthb mohssineserraji ivandi1980 antondashevsky anonymux1 itsbrex amtdev rn54n abaso007 letgobao shubhamskg cartooli phhien203 romeorayyy raucous01 asodog abdulwadudh zano247 lukasgeppert mangomanmm vladpaunescu kergosdyr zoli1212 deephalder angeloluidens tcsdevw474 mrpharderwijk r1q longervisioncanada thegeneth memnontithonus fael9202 shadowpkx surender0905 side-projectz vseletskyi buddhi-ashen

next13-ai-saas's Issues

TypeError: Cannot read properties of undefined (reading '_names')

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading '_names')

Call Stack
useController
node_modules\react-hook-form\dist\index.esm.mjs (394:0)
Controller
node_modules\react-hook-form\dist\index.esm.mjs (528:0)
renderWithHooks
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (10697:0)

InvalidCharacterError: Invalid character

Crisp chat has hard-coded web app ID (instead of environment variable)

components/crisp-chat.tsx

It would be better if this was configurable from environment variable.

Working Perfact , need to add file upload form

Here instead of text I want file upload and get base64 as the value
`const ConversationPage = () => {
const router = useRouter();
const proModal = useProModal();
const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);

const form = useForm<z.infer>({
resolver: zodResolver(formSchema),
defaultValues: {
prompt: ""
}
});

const isLoading = form.formState.isSubmitting;

const onSubmit = async (values: z.infer) => {
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) {
  if (error?.response?.status === 403) {
    proModal.onOpen();
  } else {
    toast.error("Something went wrong.");
  }
} finally {
  router.refresh();
}

}

return (

<Form {...form}>

<FormField
name="prompt"
render={({ field }) => (

<Input
className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
disabled={isLoading}
placeholder="How do I calculate the radius of a circle?"
{...field}
/>

)}
/>

Generate

{isLoading && (

)}
{messages.length === 0 && !isLoading && (

)}

{messages.map((message) => (
<div
key={message.content}
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" ? : }

{message.content}

))}

);
}`

INFO: Clerk: The request to /dashboard is being redirected because there is no signed-in user.

INFO: Clerk: The request to /dashboard is being redirected because there is no signed-in user, and the path is not included in ignoredRoutes or publicRoutes. To prevent this behavior, choose one of:

To make the route accessible to both signed in and signed out users, add "/dashboard" to the publicRoutes array passed to authMiddleware
To prevent Clerk authentication from running at all, pass ignoredRoutes: ["/((?!api|trpc))(_next|.+\..+)(.*)", "/dashboard"] to authMiddleware
Pass a custom afterAuth to authMiddleware, and replace Clerk's default behavior of redirecting unless a route is included in publicRoutes

For additional information about middleware, please visit https://clerk.com/docs/nextjs/middleware
(This log only appears in development mode, or if debug: true is passed to authMiddleware)

Someone please help me to solve this issue...

Unable to connect to branch in prisma..

Error:
Invalid prisma.userApiLimit.findUnique() invocation:

Error querying the database: Server error: `ERROR HY000 (1105): unavailable: unable to connect to branch 7dr2xxxxxx

`}
53 |

54 | const userApiLimit = await prismadb.userApiLimit.findUnique({
| ^
55 | where: {
56 | userId
57 | }`

Tailwind CSS with this package

There is something interfering with the use of tailwind css in this repo.

Prior to using this repo, I was able to style a section as follows:

   <section
      id="team"
      aria-labelledby="team"
      className="border-t border-gray-200 py-32 sm:py-16  select-none bg-gradient-to-b from-primary to-primary/75"
    >
      <Container >
        <div className="mx-auto">
          <div>
              <p className="text-dark text-3xl my-8  font-baron lowercase justify-center">meet the team
                <span className="relative z-10 rounded-full bg-lighter px-2 font-medium text-linkStyle text-xs ml-4 py-1">
                    in tr<span className="text-secondary">ai</span>ning
                </span>
              </p>
              <p className="text-dark text-lg mb-8  font-normal">This team </p>
          </div>
          <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-3 items-start">
            
            <div className="flex items-start ">
              <div className=" grid max-w-2xl grid-cols-1 gap-x-0 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 py-4 border-none hover:border-b-2 hover:border-accent hover:border-solid">
                <div className="">

Now, the page renders, but it ignores the bg and grid styling. Is there a way to retain tailwind template css with this repo?

xhr.js:256 POST http://localhost:3000/api/conversation 500 (Internal Server Error) error

I don't know why am I getting this error.

here is my code:

import {  useForm } from "react-hook-form"
import {zodResolver} from "@hookform/resolvers/zod"
import { FormControl, FormField, FormItem, Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";
import { useState } from "react";


const ConversationPage = () => {
    const router = useRouter();
    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>) => {
        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)
        } finally{
            router.refresh();
        }
    }

  return (
    <div>
      <Heading title="Conversation" description="Conversation with Coder-AI" icon={MessageSquare} iconColor="text-violet-500" bgColor="bg-violet-500/10" />
      <div className="px-4 lg:pg-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 className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent" placeholder="What is Java programming language?" disabled={isLoading} {...field} />
                                </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">
            <div className="flex flex-col-reverse gap-y-4">
                {messages.map((message) => (
                    <div key={message.content}>
                        {message.content}
                    </div>
                ))}
            </div>
        </div>
      </div>
    </div>
  )
}

export default ConversationPage

UserSubscription DB Not Updating After Successful Stripe Payment

After a successful Stripe payment, the UserSubscription database in Prisma is not updating as expected. I have thoroughly reviewed the schema and couldn't find any apparent issues. Seeking advice and guidance to troubleshoot and resolve the problem. Thank you!

After sign-up and sign-in i am getting error of Infinite redirect loop detected.

stripe error

[STRIPE_ERROR] StripeInvalidRequestError: Not a valid URL
at StripeError.generate (webpack-internal:///(rsc)/./node_modules/stripe/esm/Error.js:22:20)
at res.toJSON.then.Error_js__WEBPACK_IMPORTED_MODULE_0_.StripeAPIError.message (webpack-internal:///(rsc)/./node_modules/stripe/esm/RequestSender.js:102:82)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'StripeInvalidRequestError',
raw: {
code: 'url_invalid',
doc_url: 'https://stripe.com/docs/error-codes/url-invalid',
message: 'Not a valid URL',
param: 'success_url',
request_log_url: 'https://dashboard.stripe.com/test/logs/req_KBCi14Es8FtfVs?t=1709168698',
type: 'invalid_request_error',
headers: {
server: 'nginx',
date: 'Thu, 29 Feb 2024 01:04:58 GMT',
'content-type': 'application/json',
'content-length': '309',
connection: 'keep-alive',
'access-control-allow-credentials': 'true',
'access-control-allow-methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
'access-control-allow-origin': '',
'access-control-expose-headers': 'Request-Id, Stripe-Manage-Version, Stripe-Should-Retry, X-Stripe-External-Auth-Required, X-Stripe-Privileged-Session-Required',
'access-control-max-age': '300',
'cache-control': 'no-cache, no-store',
'content-security-policy': "report-uri https://q.stripe.com/csp-report?p=v1%2Fcheckout%2Fsessions; block-all-mixed-content; default-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; img-src 'self'; script-src 'self' 'report-sample'; style-src 'self'",
'idempotency-key': 'stripe-node-retry-38117a9d-6313-46f2-817a-47a9ca865b0e',
'original-request': 'req_KBCi14Es8FtfVs',
'request-id': 'req_KBCi14Es8FtfVs',
'stripe-version': '2023-10-16',
vary: 'Origin',
'x-stripe-routing-context-priority-tier': 'api-testmode',
'strict-transport-security': 'max-age=63072000; includeSubDomains; preload'
},
statusCode: 400,
requestId: 'req_KBCi14Es8FtfVs'
},
rawType: 'invalid_request_error',
code: 'url_invalid',
doc_url: 'https://stripe.com/docs/error-codes/url-invalid',
param: 'success_url',
detail: undefined,
headers: {
server: 'nginx',
date: 'Thu, 29 Feb 2024 01:04:58 GMT',
'content-type': 'application/json',
'content-length': '309',
connection: 'keep-alive',
'access-control-allow-credentials': 'true',
'access-control-allow-methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
'access-control-allow-origin': '',
'access-control-expose-headers': 'Request-Id, Stripe-Manage-Version, Stripe-Should-Retry, X-Stripe-External-Auth-Required, X-Stripe-Privileged-Session-Required',
'access-control-max-age': '300',
'cache-control': 'no-cache, no-store',
'content-security-policy': "report-uri https://q.stripe.com/csp-report?p=v1%2Fcheckout%2Fsessions; block-all-mixed-content; default-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; img-src 'self'; script-src 'self' 'report-sample'; style-src 'self'",
'idempotency-key': 'stripe-node-retry-38117a9d-6313-46f2-817a-47a9ca865b0e',
'original-request': 'req_KBCi14Es8FtfVs',
'request-id': 'req_KBCi14Es8FtfVs',
'stripe-version': '2023-10-16',
vary: 'Origin',
'x-stripe-routing-context-priority-tier': 'api-testmode',
'strict-transport-security': 'max-age=63072000; includeSubDomains; preload'
},
requestId: 'req_KBCi14Es8FtfVs',
statusCode: 400,
charge: undefined,
decline_code: undefined,
payment_intent: undefined,
payment_method: undefined,
payment_method_type: undefined,
setup_intent: undefined,
source: undefined
}
I am getting this error anyone help me to solve this error.

Signing out of account isn't redirecting to the landing page.

Add chat bar where chats are saved in the conversation tab

ERROR CODE 429

I created an openai api key
In the conversation ,I had gave the input after that it showing "Something Went Wrong" pop .
This is the ERROR I got :
[CONVERSATION_ERROR] Error: Request failed with status code 429
at createError (webpack-internal:///(sc_server)/./node_modules/openai/node_modules/axios/lib/core/createError.js:13:17)
at settle (webpack-internal:///(sc_server)/./node_modules/openai/node_modules/axios/lib/core/settle.js:14:16)
at IncomingMessage.handleStreamEnd (webpack-internal:///(sc_server)/./node_modules/openai/node_modules/axios/lib/adapters/http.js:275:21)
at IncomingMessage.emit (node:events:530:35)
at endReadableNT (node:internal/streams/readable:1696:12)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

When I am not authenticated and try to get to the dashboard page it won't redirect me to the log in page any tips on how to fix that?

constant.ts missing from dashboard

The site is down

https://next13-ai-saas.vercel.app is not working

Internal server error in conversation route

I did everything as shown in the video , still getting internal server error in conversation route . Can anyone solve this ????

Build failed while deployment

Has anybody faced this issue?

Cancelling paid plans (frontend and db)

On the stripe side of things the plans get cancelled, when a user clicks on cancel subscription, but in the database and the frontend that doesn't happen. I followed the tutorial, but I just realized that users, will still see that they are on a paid plan after cancelling the plan.

image generation 500 error

I fixed the openai api code for chat completions. how do I update the image? I tried to update the openai import and still didnt work. anyone?

Most of the imports are depreciated in new OpenAi version "^4.6.0"

In the new version I am not able to import { Configuration, OpenAIApi } from "openai".
It says that Module '"openai"' has no exported member 'Configuration'. Did you mean to use 'import Configuration from "openai"' instead?

I found these issues listed here openai/openai-node#217 (comment).

I followed the steps mentioned in the above link but I'm still getting these errors AxiosError {message: 'Request failed with status code 405', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

"import {Configuration, OpenAIApi} from "openai"" error

whenever I import those two commands they are telling me that something is wrong.

A Node.js API is used (setImmediate at line: 51) which is not supported in the Edge Runtime.

(base) PS F:\next13-ai-saas> yarn run build
yarn run v1.22.22
$ next build

info Loaded env from F:\next13-ai-saas.env
info Creating an optimized production build . [webpack.cache.PackFileCacheStrategy] Serializing big strings (101kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
warn Compiled with warnings

./node_modules/scheduler/cjs/scheduler.production.min.js
A Node.js API is used (setImmediate at line: 51) which is not supported in the Edge Runtime.
Learn more: https://nextjs.org/docs/api-reference/edge-runtime

Import trace for requested module:
./node_modules/scheduler/cjs/scheduler.production.min.js
./node_modules/scheduler/index.js
./node_modules/react-dom/cjs/react-dom.production.min.js
./node_modules/react-dom/index.js
./node_modules/@clerk/clerk-react/dist/esm/utils/useCustomElementPortal.js
./node_modules/@clerk/clerk-react/dist/esm/utils/index.js
./node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkProvider.js
./node_modules/@clerk/clerk-react/dist/esm/contexts/index.js
./node_modules/@clerk/clerk-react/dist/esm/index.js
./node_modules/@clerk/nextjs/dist/esm/client-boundary/controlComponents.js
./node_modules/@clerk/nextjs/dist/esm/index.js

./node_modules/scheduler/cjs/scheduler.production.min.js
A Node.js API is used (MessageChannel at line: 120) which is not supported in the Edge Runtime.
Learn more: https://nextjs.org/docs/api-reference/edge-runtime

./node_modules/scheduler/cjs/scheduler.production.min.js
A Node.js API is used (MessageChannel at line: 121) which is not supported in the Edge Runtime.
Learn more: https://nextjs.org/docs/api-reference/edge-runtime

./node_modules/@clerk/shared/dist/chunk-RSOCGYTF.mjs
A Node.js API is used (MessageEvent at line: 27) which is not supported in the Edge Runtime.
Learn more: https://nextjs.org/docs/api-reference/edge-runtime

Import trace for requested module:
./node_modules/@clerk/shared/dist/chunk-RSOCGYTF.mjs
./node_modules/@clerk/shared/dist/index.mjs
./node_modules/@clerk/clerk-react/dist/esm/components/uiComponents.js
./node_modules/@clerk/clerk-react/dist/esm/components/index.js
./node_modules/@clerk/clerk-react/dist/esm/index.js
./node_modules/@clerk/nextjs/dist/esm/client-boundary/controlComponents.js
./node_modules/@clerk/nextjs/dist/esm/index.js

info Linting and checking validity of types .Failed to compile.

./components/ui/dialog.tsx:14:3
Type error: Property 'className' does not exist on type 'DialogPortalProps'.

12 |
13 | const DialogPortal = ({

14 | className,
| ^
15 | ...props
16 | }: DialogPrimitive.DialogPortalProps) => (
17 | <DialogPrimitive.Portal className={cn(className)} {...props} />
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

i am getting 405 error i dnt y

"use client";
import axios from "axios";
import * as z from "zod";

import { Heading } from "@/components/heading";
import { Code2Icon } from "lucide-react";
import { useForm } from "react-hook-form";
import { formSchema } from "./constants";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { ChatCompletionRequestMessage } from "openai";
import Empty from "@/components/empty";
import Loader from "@/components/loader";
import { cn } from "@/lib/utils";
import UserAvatar from "@/components/avater-user";
import AvatarBot from "@/components/avatar-bot";
import ReactMarkdown from "react-markdown";

const CodeGenerationPage = () => {
const router = useRouter();
const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);

const form = useForm<z.infer>({
resolver: zodResolver(formSchema),
defaultValues: {
prompt: "",
},
});

const isLoading = form.formState.isSubmitting;

const onSubmit = async (values: z.infer) => {
console.log("Form Values:", values);
try {
const userMessage: ChatCompletionRequestMessage = {
role: "user",
content: values.prompt,
};
const newMessages = [...messages, userMessage];

  const response = await axios.post("/api/code", {
    messages: newMessages,
  });
  console.log("Axios Response:", response.data);

  setMessages((current) => [...current, userMessage, response.data]);
  form.reset({ prompt: "" });
} catch (error: any) {
  console.error(
    "Axios Request Error:",
    error.response?.status,
    error.response?.data
  );
} finally {
  router.refresh();
}

};

return (

<Form {...form}>

<FormField
name="prompt"
render={({ field }) => (

<Input
className="border-0 outline-none focus-visible:ring-0 focus-visible:transparent"
disabled={isLoading}
placeholder="Simple text here..."
{...field}
/>

)}
/>

Generate

{isLoading && (

)}

{messages.length === 0 && !isLoading && (

)}

{messages.map((message) => (
<div
key={message.content}
className={cn(
"w-full flex items-start justify-center p-9 ",
message.role === "user"
? "bg-primary text-white"
: "bg-muted text-black"
)}
>
{message.role === "user" ? : }
<ReactMarkdown
components={{
pre: ({ node, ...props }) => (

),
code: ({ node, ...props }) => (
<code className="bg-black/10 rounded-sm p-2" {...props} />
),
}}
className="overflow-hidden leading-6 text-sm"
>
{message.content || ""}

))}

);
};

export default CodeGenerationPage;
import { auth } from "@clerk/nextjs";
import { NextApiRequest, NextApiResponse } from "next";
import { Configuration, OpenAIApi, ChatCompletionRequestMessage } 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 helpful assistant.",
};

const postHandler = async (req: NextApiRequest, res: NextApiResponse) => {
try {
const { userId } = auth();
const body = await req.body;
const { messages } = body;

if (!userId) {
  return res.status(401).send("Unauthorized");
}

if (!configuration.apiKey) {
  return res.status(500).send("OpenAI API Key not configured.");
}

if (!messages) {
  return res.status(400).send("Messages are required");
}

const response = await openai.createChatCompletion({
  model: "gpt-3.5-turbo",
  messages: [instructionMessage, ...messages],
});

return res.status(200).json(response.data.choices[0].message);

} catch (error) {
console.error("[CODE_ERROR]", error);
return res.status(500).send("Internal Error");
}
};

export default postHandler;

No response from chat, just showing No conversation started.

@AntonioErdeljac can you help, I have clearly followed the steps you used to build but I have a challenge once I type a question I want to get answers, to result is displaying, you can please help me

Unable to capture the userSubscription data on prisma studio after completion of stripe transaction.

I'm not able to see the user subscription data after the checkout completion. It shows successful but doesn't get captured on the prisma studio. The userApiLimit gets updated but not the userSubscription. When the transaction completes, the webhook running on terminal doesn't show the 200 status code. I have attached the screen shots please help I have been trying to figure this out for 2 days. I have cloned the repo and tried my credentials to see if it gets captured but no luck same problem.

Webhook screenshot:

Prisma studio:

stripe transaction dashboard:

Button inside Button error

Thanks for this great tutorial. I wanted to point out one error that is occurring in the mobile-sidebar.tsx.
<Sheet> <SheetTrigger> <Button variant="ghost" size="icon" className="md:hidden"> <Menu /> </Button> </SheetTrigger> <SheetContent side="left" className="p-0"> <Sidebar isPro={isPro} apiLimitCount={apiLimitCount} /> </SheetContent> </Sheet>

the SheetTrigger contains a button so you end up with a inside a which throws a DOM error. Simple fix, remove the Button wrapper around Menu and it all continues to work, just minus the shading button ui.

Where can I add a font?

I previously imported 2 fonts as woff/woff2 files and saved them in my public folder. I've tried saving these files in each of the public and the app folders in this project structure, but can't find a way to use them within this project structure. Where can I add these font files within this project structure?

thank you
Mel

INFO: Clerk: The request to /api/stripe is being redirected because there is no signed-in user

/api/stripe doesnt return anything maybe Clerk block it

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 }));
    }

    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: "IDR",
            product_data: {
              name: "Braino AI Premium",
              description: "Unlimited AI Usage",
            },
            unit_amount: 50000,
            recurring: {
              interval: "month",
            },
          },
          quantity: 1,
        },
      ],
      metadata: {
        userId,
      },
    });

    return new NextResponse(JSON.stringify({ url: stripeSession.url }));
  } catch (error) {
    console.log("[STRIPE_ERROR]", error);
    return new NextResponse("Internal Error", { status: 500 });
  }
}

invalid url

Iam getting this error for when clicking on the manage subscription buttton from setting page where I have to add this return url and which url i have to add in this para can anyone give answer for this issue

Webhook error

Webhook Error: No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe?

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) {
    console.log(`Webhook Error: ${error.message}`);
    
    return new NextResponse(`Webhook Error: ${error.message}`, { status: 400 })
  }
}

Request error with api/conversation/route.ts

I'm getting this error from api/conversation/route.ts: error No HTTP methods exported in '/workspace/AI_SAAS/app/api/conversation/route.ts'. Export a named export for each HTTP method..
I'm also getting this error on the client side: { "message": "Request failed with status code 405", "name": "AxiosError", "stack": "AxiosError: Request failed with status code 405\n at settle (webpack-internal:///(app-pages-browser)/./node_modules/axios/lib/core/settle.js:24:12)\n at XMLHttpRequest.onloadend (webpack-internal:///(app-pages-browser)/./node_modules/axios/lib/adapters/xhr.js:121:66)", "config": { "transitional": { "silentJSONParsing": true, "forcedJSONParsing": true, "clarifyTimeoutError": false }, "adapter": [ "xhr", "http" ], "transformRequest": [ null ], "transformResponse": [ null ], "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1, "maxBodyLength": -1, "env": {}, "headers": { "Accept": "application/json, text/plain, */*", "Content-Type": "application/json" }, "method": "post", "url": "/api/conversation", "data": "{\"messages\":[{\"role\":\"user\",\"content\":\"what is the radius of the sun?\"}]}" }, "code": "ERR_BAD_REQUEST", "status": 405 }
Here's the file: (sorry, for some reason code styling is not formatted correctly)
`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) {
console.log(req);
try {
const { userId } = auth();
const body = await req.json();
const { messages } = body;
console.log(messages);

if (!userId) {
  return new NextResponse("Unauthorized", { status: 401 });
}
if (!configuration.apiKey) {
  return new NextResponse("OpenAI API key not configured", { status: 500 });
}
if (!messages) {
  return new NextResponse("Messages are required", { status: 400 });
}
const response = await openai.createChatCompletion({
  model: "gpt-3.5-turbo",
  messages,
});

return NextResponse.json(response.data.choices[0].message);

} catch (err) {
console.log("CONVERSATION ERROR", err);
return new NextResponse("Internal error", { status: 500 });
}
}
`

Is that possible to use OpenAI Assistant on conversation part?

Hello, I am new to this and I am seeking assistance. I have successfully deployed my project with the help of Antonio's tutorial. However, I am having difficulty integrating my OpenAI assistant into the conversation part. I think I should make some changes to the conversation route.ts, I read OpenAI assistant documentation but I got errors. Any help would be greatly appreciated.

Getting this error in route.ts in webhook

Headers timeout Error

I am generating a song using the replica AI. Inside the replica website I can see that the project starting and then completed but in mine web app I get a headers timeout Error after a minute or two that I pressed the generate button. CAN YOU TELL ME HOW TO FIX THAT?