Code Monkey home page Code Monkey logo

next13-ai-companion's Introduction

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

Copy of Copy of Copy of Copy of Fullstack Twitter Clone (1)

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=

PINECONE_API_KEY=
PINECONE_ENVIRONMENT=
PINECONE_INDEX=

UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=

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

Seed categories:

node scripts/seed.ts

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-companion's People

Contributors

antonioerdeljac avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

next13-ai-companion's Issues

Subscription plan not updating from Stripe Webhooks

I put my payments in test mode and whenever I purchase with stripe everything works and goes through but it returns me to my website without pro version and the user is still on free plan after paying... How to fix this?

This is using stripe webhooks. Pretty much everything on the pro-modal.tsx page and the (root)/(routes)/settings/page.tsx is default.
Successful Payment
image

Site redirects to dashboard and user is still on free plan instead of pro plan
image

Duplicated `writeToHistory` call in chat route API.

In https://github.com/AntonioErdeljac/next13-ai-companion/blob/master/app/api/chat/%5BchatId%5D/route.ts

In line 127 we have do memoryManager.writeToHistory('' + response.trim(), companionKey); again, although we just do it above.

    const cleaned = resp.replaceAll(',', '');
    const chunks = cleaned.split('\n');
    const response = chunks[0];

    await memoryManager.writeToHistory('' + response.trim(), companionKey);

Can anyone help explain why do we need to do it twice?

QS error

The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("query-string")' call instead.
To convert this file to an ECMAScript module, add the field "type": "module" to 'c:/path/ai-companion/package.json'.ts(1479)

I have installed all the dependencies using npm yet I get this error. I use Node 20 version

Node.js API is used (MessageChannel at line: 121) which is not supported in the Edge Runtime.

./node_modules/scheduler/cjs/scheduler.production.min.js
 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

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/next/dist/esm/client/script.js
./node_modules/next/dist/esm/shared/lib/router/router.js
./node_modules/next/dist/esm/client/router.js
./node_modules/next/router.js
./node_modules/@clerk/nextjs/dist/esm/pages/ClerkProvider.js
./node_modules/@clerk/nextjs/dist/esm/components.client.js
./node_modules/@clerk/nextjs/dist/esm/index.js

Prisma Schema probelm

Prisma schema loaded from prisma/schema.prisma
Error: Prisma schema validation - (get-dmmf wasm)
Error code: P1012
error: Error validating field category in model Companion: The relation field category on model Companion is missing an opposite relation field on the model Category. Either run prisma format or add it manually.
I keep getting this error when I try to generate prisma in my project. |
30 |
31 | category Category @relation(fields: [categoryId], references: [id]) - Cannot validate this line
32 | categoryId String
|

Getting issue in [ChatId]

<ChatClient companion={companion} />

in this props showing error of Ts can anyone please help me in this .

error "Type '{ messages: { id: string; role: Role; content: string; createdAt: Date; updatedAt: Date; companionId: string; userId: string; }[]; _count: { messages: number; }; } & { id: string; userId: string; ... 8 more ...; categoryId: string; }' is not assignable to type '{ id: string; userId: string; userName: string; src: string; name: string; description: string; instructions: string; seed: string; createdAt: Date; updatedAt: Date; categoryId: string; } & { ...; }'.
Type '{ messages: { id: string; role: Role; content: string; createdAt: Date; updatedAt: Date; companionId: string; userId: string; }[]; _count: { messages: number; }; } & { id: string; userId: string; ... 8 more ...; categoryId: string; }' is not assignable to type '{ messages: { id: string; text: string; isUserMessage: boolean; createdAt: Date; updatedAt: Date; userId: string | null; fileId: string | null; }[]; _count: { messages: number; }; }'.
Types of property 'messages' are incompatible.
Type '{ id: string; role: Role; content: string; createdAt: Date; updatedAt: Date; companionId: string; userId: string; }[]' is not assignable to type '{ id: string; text: string; isUserMessage: boolean; createdAt: Date; updatedAt: Date; userId: string | null; fileId: string | null; }[]'.
Type '{ id: string; role: Role; content: string; createdAt: Date; updatedAt: Date; companionId: string; userId: string; }' is missing the following properties from type '{ id: string; text: string; isUserMessage: boolean; createdAt: Date; updatedAt: Date; userId: string | null; fileId: string | null; }': text, isUserMessage, fileIdts(2322)
client.tsx(15, 3): The expected type comes from property 'companion' which is declared here on type 'IntrinsicAttributes & ChatClientProps'"

and in clients.tsx

const [messages, setMessages] = useState<ChatMessageProps[]>(companion.messages);

Argument of type '{ id: string; text: string; isUserMessage: boolean; createdAt: Date; updatedAt: Date; userId: string | null; fileId: string | null; }[]' is not assignable to parameter of type 'ChatMessageProps[] | (() => ChatMessageProps[])'.
Type '{ id: string; text: string; isUserMessage: boolean; createdAt: Date; updatedAt: Date; userId: string | null; fileId: string | null; }[]' is not assignable to type 'ChatMessageProps[]'.
Property 'role' is missing in type '{ id: string; text: string; isUserMessage: boolean; createdAt: Date; updatedAt: Date; userId: string | null; fileId: string | null; }' but required in type 'ChatMessageProps'.ts(2345)

1
2

Prisma schema validation error

When adding model category I get error. Can someone help how to resolve it?
Error code: P1012
error: Type "Companion" is neither a built-in type, nor refers to another model, custom type, or enum.
--> schema.prisma:20
|
19 | name String
20 | companions Companion[]
|

Validation Error Count: 1
[Context: getDmmf]

Prisma CLI Version : 5.8.0


model Category {
id String @id @default(uuid())
name String
companions Companion[]
}

There is no issue if I just add model User

model User {
id Int @id @default(autoincrement())
email String @unique
name String?
}

No chat response in the deployed project

I didn't have any problems chatting locally, but after deploying the project, I couldn't get a chat response. After I ask a question, the loader appears on the AI ​​side, but after 15-20 seconds, my message returns to the input field and I do not receive any response.

I checked the logs in Vercel, it looks like a timeout error, but I couldn't find how to solve it, can you help?

Vercel Logs

[POST] /api/chat/c471f01d-6426-4895-bbfb-d92ee95d928c?nxtPchatId=c471f01d-6426-4895-bbfb-d92ee95d928c status=504

Task timed out after 10.00 seconds

Screenshot 2024-01-08 at 18 27 08

Is Pinecone even used in this.....? (confusing)

I see lib/memory.ts implements the Pinecone Client and defines the vectorSearch function, but when running the app, my Pinecone index is displaying 0 vectors (see below)

From the Console logs it appears the chat history is just being handled by an array of strings, which is a huge problem for prompts > 2048 tokens.

Great tutorial btw.

image

unknown api key error for cloudinary

image

hi, guys, I got an unknown api key error when I upload an avatar for a companion to next-cloudinary, and I am sure that I've gave a correct uploadPreset to CldUploadButton, where and how should I configure CLOUDINARY_API_KEY? how can I fix this?

PineconeClient

Hi Antonio and anybody els that can help :)

When trying to connect my Index (Pinecone) i dont get a message to import PineconeClient, its now Pincone only.
when trying to import the PineconeClient it gets "overstruck" automaticlly, do you know why?

"pasted"

import { Pinecone } from "@pinecone-database/pinecone";

const pinecone = new Pinecone();
await pinecone.init({
environment: "gcp-starter",
apiKey: "----",
});
const index = pinecone.Index("companion");

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.