AI-Character-Creator

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

From Scratch

Environmental setup:

Create Project:

npx create-next-app@latest ai-character-creator --typescript --eslint --tailwind

Run Shadcn CLI

npx shadcn-ui@latest init

Clerk Authentication

• create an account here
• Set Environment Keys in .env

  NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_aGXXXXXXXXXX
  CLERK_SECRET_KEY=sk_test_WFgWXXXXXXXXXXXXXXXX
  

• Install @clerk/nextjs

  npm install @clerk/nextjs
  

• Mount Updating app/layout.tsx with wrapper.
• Protect application creating middleware.ts file at the root
• build sign-up and sing-in pages.
• Add more environmental variables to .env

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

Adding button component from shadcn ui:

npx shadcn-ui@latest add button

Adding Dark mode

• installing next-themes

  npm i next-themes@latest
  

• creating a theme provider components/theme-provider.tsx

  "use client"
   
  import * as React from "react"
  import { ThemeProvider as NextThemesProvider } from "next-themes"
  import { type ThemeProviderProps } from "next-themes/dist/types"
    
  export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
  }
  

• Adding the ThemeProvider to root layout.

  <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
    {children}
  </ThemeProvider>
  

• Adding theme toggle following this

  npx shadcn-ui@latest add dropdown-menu
  

• Adding sheet component

  npx shadcn-ui@latest add sheet
  

Adding Search Filter

Display a form input field

npx shadcn-ui@latest add input

npm install query-string

Adding category filter

Initializing prisma

npm i -D prisma
npx prisma init

Creating an account with ‘planetscale’ Creating DB with prisma and mysql provider Modifying ‘prisma/schema.prisma’ file:

datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}

generator client {
  provider = "prisma-client-js"
}

After schema.prisma file is being edited:

npx prisma generate
npx prisma db push

checking db in localhost:

npx prisma studio

Seeding category names

node scripts/seed.ts

Adding character creation form

npx shadcn-ui@latest add form

Adding Textarea

npx shadcn-ui@latest add form

Adding separator

npx shadcn-ui@latest add separator

Adding Select component

npx shadcn-ui@latest add select

Setting up Cloudinary for image upload In .env file

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="CloudNameHere"

Installing package:

npm i next-cloudinary

Creating API routes

npm i axios
npx shadcn-ui@latest add toast

Creating chat ui

npm i ai

Creating a memory service

npm i @pinecone-database/pinecone
npm i @upstash/redis
npm i @upstash/ratelimit
npm i langchain

Setting up Pinecone: Name: character Dimentions: 1536

Adding environmental variables for Pinecone, Upstash and OpenAI

PINECONE_INDEX="character"
PINECONE_ENVIRONMENT="gcX-XXXXXX"
PINECONE_API_KEY="dccXXX-XXX-XXX-XXXX-XXXXX"

UPSTASH_REDIS_REST_URL="https://XXXXXXXXXXXXXXXXXXXXXXX"
UPSTASH_REDIS_REST_TOKEN="XXXXXXXXXXXXXXXXXxxx"

OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXX

Setting up stripe:

stripe listen --forward-to localhost:3000/api/webhook

Stripe UI:

npm i zustand
npx shadcn-ui@latest add dialog

This site is open source. Improve this page.