├── .eslintrc.json ├── prettier.config.js ├── src ├── app │ ├── ThemeProvider.tsx │ ├── favicon.ico │ ├── HomePageThemeToggler.tsx │ ├── notes │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── NavBar.tsx │ ├── sign-in │ │ └── [[...sign-in]] │ │ │ └── page.tsx │ ├── sign-up │ │ └── [[...sign-up]] │ │ │ └── page.tsx │ ├── layout.tsx │ ├── page.tsx │ ├── globals.css │ └── api │ │ ├── chat │ │ └── route.ts │ │ └── notes │ │ └── route.ts ├── assets │ ├── logo-black.png │ ├── logo-full.png │ └── logo-white.png ├── lib │ ├── utils.ts │ ├── db │ │ ├── pinecone.ts │ │ └── prisma.ts │ ├── validation │ │ └── note.ts │ └── openai.ts ├── middleware.ts └── components │ ├── ui │ ├── loading-button.tsx │ ├── label.tsx │ ├── textarea.tsx │ ├── input.tsx │ ├── button.tsx │ ├── card.tsx │ ├── dialog.tsx │ └── form.tsx │ ├── AIChatButton.tsx │ ├── ThemeToggleButton.tsx │ ├── Note.tsx │ ├── AIChatBox.tsx │ └── AddEditNoteDialog.tsx ├── postcss.config.js ├── next.config.js ├── .env.template ├── components.json ├── prisma └── schema.prisma ├── .gitignore ├── tailwind.config.ts ├── public ├── vercel.svg └── next.svg ├── tsconfig.json ├── README.md ├── package.json └── tailwind.config.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "prettier"] 3 | } 4 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ["prettier-plugin-tailwindcss"], 3 | }; 4 | -------------------------------------------------------------------------------- /src/app/ThemeProvider.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | export { ThemeProvider } from "next-themes"; 4 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyTlei/nextjs-ai-note-app/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyTlei/nextjs-ai-note-app/HEAD/src/assets/logo-black.png -------------------------------------------------------------------------------- /src/assets/logo-full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyTlei/nextjs-ai-note-app/HEAD/src/assets/logo-full.png -------------------------------------------------------------------------------- /src/assets/logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyTlei/nextjs-ai-note-app/HEAD/src/assets/logo-white.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | remotePatterns: [{ hostname: "img.clerk.com" }], 5 | }, 6 | }; 7 | 8 | module.exports = nextConfig; 9 | -------------------------------------------------------------------------------- /src/app/HomePageThemeToggler.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import ThemeToggleButton from "@/components/ThemeToggleButton"; 4 | 5 | export default function HomePageThemeToggler() { 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /src/middleware.ts: -------------------------------------------------------------------------------- 1 | import { authMiddleware } from "@clerk/nextjs"; 2 | 3 | export default authMiddleware({ 4 | publicRoutes: ["/"], 5 | }); 6 | 7 | export const config = { 8 | matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"], 9 | }; 10 | -------------------------------------------------------------------------------- /src/app/notes/layout.tsx: -------------------------------------------------------------------------------- 1 | import NavBar from "./NavBar"; 2 | 3 | export default function Layout({ children }: { children: React.ReactNode }) { 4 | return ( 5 | <> 6 | 7 |
{children}
8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /.env.template: -------------------------------------------------------------------------------- 1 | DATABASE_URL="" 2 | 3 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= 4 | CLERK_SECRET_KEY= 5 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in 6 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up 7 | NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/notes 8 | NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/notes 9 | 10 | OPENAI_API_KEY= 11 | PINECONE_API_KEY= -------------------------------------------------------------------------------- /src/lib/db/pinecone.ts: -------------------------------------------------------------------------------- 1 | import { Pinecone } from "@pinecone-database/pinecone"; 2 | 3 | const apiKey = process.env.PINECONE_API_KEY; 4 | 5 | if (!apiKey) { 6 | throw new Error("PINECONE_API_KEY is not defined"); 7 | } 8 | 9 | const pinecone = new Pinecone({ environment: "gcp-starter", apiKey }); 10 | 11 | export const notesIndex = pinecone.Index("nextjs-ai-note-app"); 12 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "src/app/global.css", 9 | "baseColor": "slate", 10 | "cssVariables": true 11 | }, 12 | "aliases": { 13 | "components": "@/components", 14 | "utils": "@/lib/utils" 15 | } 16 | } -------------------------------------------------------------------------------- /src/app/sign-in/[[...sign-in]]/page.tsx: -------------------------------------------------------------------------------- 1 | import { SignIn } from "@clerk/nextjs"; 2 | 3 | export const metadata = { 4 | title: "SecondBrain - Sign In", 5 | }; 6 | 7 | export default function SignInPage() { 8 | return ( 9 |
10 | 11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /src/app/sign-up/[[...sign-up]]/page.tsx: -------------------------------------------------------------------------------- 1 | import { SignUp } from "@clerk/nextjs"; 2 | 3 | export const metadata = { 4 | title: "SecondBrain - Sign Up", 5 | }; 6 | 7 | export default function SignUpPage() { 8 | return ( 9 |
10 | 11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | generator client { 2 | provider = "prisma-client-js" 3 | } 4 | 5 | datasource db { 6 | provider = "mongodb" 7 | url = env("DATABASE_URL") 8 | } 9 | 10 | model Note { 11 | id String @id @default(auto()) @map("_id") @db.ObjectId 12 | title String 13 | content String? 14 | userId String 15 | createdAt DateTime @default(now()) 16 | updatedAt DateTime @updatedAt 17 | 18 | @@map("notes") 19 | } 20 | -------------------------------------------------------------------------------- /src/lib/validation/note.ts: -------------------------------------------------------------------------------- 1 | import { z } from "zod"; 2 | 3 | export const createNoteSchema = z.object({ 4 | title: z.string().min(1, { message: "Title is required" }), 5 | content: z.string().optional(), 6 | }); 7 | 8 | export type CreateNoteSchema = z.infer; 9 | 10 | export const updateNoteSchema = createNoteSchema.extend({ 11 | id: z.string().min(1), 12 | }); 13 | 14 | export const deleteNoteSchema = z.object({ 15 | id: z.string().min(1), 16 | }); 17 | -------------------------------------------------------------------------------- /src/components/ui/loading-button.tsx: -------------------------------------------------------------------------------- 1 | import { Loader2 } from "lucide-react"; 2 | import { Button, ButtonProps } from "./button"; 3 | 4 | type LoadingButtonProps = { 5 | loading: boolean; 6 | } & ButtonProps; 7 | 8 | export default function LoadingButton({ 9 | children, 10 | loading, 11 | ...props 12 | }: LoadingButtonProps) { 13 | return ( 14 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | .env 31 | 32 | # vercel 33 | .vercel 34 | 35 | # typescript 36 | *.tsbuildinfo 37 | next-env.d.ts 38 | -------------------------------------------------------------------------------- /src/components/AIChatButton.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import AIChatBox from "./AIChatBox"; 3 | import { Button } from "./ui/button"; 4 | import { Bot } from "lucide-react"; 5 | 6 | export default function AIChatButton() { 7 | const [chatBoxOpen, setChatBoxOpen] = useState(false); 8 | 9 | return ( 10 | <> 11 | 15 | setChatBoxOpen(false)} /> 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /src/lib/db/prisma.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from "@prisma/client"; 2 | 3 | const prismaClientSingleton = () => { 4 | const prisma = new PrismaClient(); 5 | return prisma; 6 | }; 7 | 8 | type PrismaClientSingleton = ReturnType; 9 | 10 | const globalForPrisma = globalThis as unknown as { 11 | prisma: PrismaClientSingleton | undefined; 12 | }; 13 | 14 | const prisma = globalForPrisma.prisma ?? prismaClientSingleton(); 15 | 16 | export default prisma; 17 | 18 | if (process.env.NODE_ENV !== "production") { 19 | globalForPrisma.prisma = prisma; 20 | } 21 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from 'tailwindcss' 2 | 3 | const config: Config = { 4 | content: [ 5 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}', 6 | './src/components/**/*.{js,ts,jsx,tsx,mdx}', 7 | './src/app/**/*.{js,ts,jsx,tsx,mdx}', 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 13 | 'gradient-conic': 14 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | } 20 | export default config 21 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/openai.ts: -------------------------------------------------------------------------------- 1 | import OpenAi from "openai"; 2 | 3 | const apiKey = process.env.OPENAI_API_KEY; 4 | 5 | if (!apiKey) { 6 | throw new Error("OPENAI_API_KEY is not defined"); 7 | } 8 | 9 | const openai = new OpenAi({ apiKey }); 10 | 11 | export default openai; 12 | 13 | export async function getEmbedding(text: string) { 14 | const response = await openai.embeddings.create({ 15 | model: "text-embedding-ada-002", 16 | input: text, 17 | }); 18 | 19 | const embedding = response.data[0].embedding; 20 | 21 | if (!embedding) { 22 | throw new Error("Error generating embedding"); 23 | } 24 | 25 | return embedding; 26 | } 27 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Inter } from "next/font/google"; 3 | import "./globals.css"; 4 | import { ClerkProvider } from "@clerk/nextjs"; 5 | import { ThemeProvider } from "@/app/ThemeProvider"; 6 | 7 | const inter = Inter({ subsets: ["latin"] }); 8 | 9 | export const metadata: Metadata = { 10 | title: "SecondBrain", 11 | description: "Note App powered by AI", 12 | }; 13 | 14 | export default function RootLayout({ 15 | children, 16 | }: { 17 | children: React.ReactNode; 18 | }) { 19 | return ( 20 | 21 | 22 | 23 | {children} 24 | 25 | 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/app/notes/page.tsx: -------------------------------------------------------------------------------- 1 | import Note from "@/components/Note"; 2 | import prisma from "@/lib/db/prisma"; 3 | import { auth } from "@clerk/nextjs"; 4 | 5 | export const metadata = { 6 | title: "SecondBrain - Notes", 7 | }; 8 | 9 | export default async function NotesPage() { 10 | const { userId } = auth(); 11 | 12 | if (!userId) throw Error("userId undefined"); 13 | 14 | const allNotes = await prisma.note.findMany({ 15 | where: { userId }, 16 | }); 17 | 18 | return ( 19 |
20 | {allNotes.map((note) => ( 21 | 22 | ))} 23 | {allNotes.length === 0 &&
{"You don't have any notes yet."}
} 24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | import { cva, type VariantProps } from "class-variance-authority" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const labelVariants = cva( 10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" 11 | ) 12 | 13 | const Label = React.forwardRef< 14 | React.ElementRef, 15 | React.ComponentPropsWithoutRef & 16 | VariantProps 17 | >(({ className, ...props }, ref) => ( 18 | 23 | )) 24 | Label.displayName = LabelPrimitive.Root.displayName 25 | 26 | export { Label } 27 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface TextareaProps 6 | extends React.TextareaHTMLAttributes {} 7 | 8 | const Textarea = React.forwardRef( 9 | ({ className, ...props }, ref) => { 10 | return ( 11 |