Here is the folder structure of this app.

quill/
  |- prisma/
    |-- schema.prisma
  |- public/
  |- src/
    |-- app/
      |--- _trpc/
      |--- api/
      |--- auth-callback/
      |--- dashboard/
      |--- pricing/
      |--- favicon.ico
      |--- globals.css
      |--- layout.tsx
      |--- page.tsx
    |-- components/
      |--- chat/
      |--- ui/
      |--- billing-form.tsx
      |--- dashboard.tsx
      |--- delete-file-modal.tsx
      |--- icons.tsx
      |--- max-width-wrapper.tsx
      |--- mobile-nav.tsx
      |--- navbar.tsx
      |--- pdf-fullscreen.tsx
      |--- pdf-renderer.tsx
      |--- providers.tsx
      |--- upgrade-button.tsx
      |--- upload-button.tsx
      |--- user-account-nav.tsx
    |-- config/
      |--- infinite-query.ts
      |--- links.ts
      |--- message.ts
      |--- stripe.ts
    |-- db/
      |--- index.ts
    |-- lib/
      |--- validators/
      |--- openai.ts
      |--- pinecone.ts
      |--- stripe.ts
      |--- uploadthing.ts
      |--- utils.ts
    |-- trpc/
      |--- index.ts
      |--- trpc.ts
    |-- types/
      |--- message.ts
    |-- proxy.ts
  |- .env.example
  |- .env/.env.local
  |- .gitignore
  |- components.json
  |- environment.d.ts
  |- eslint.config.mjs
  |- next.config.mjs
  |- package.json
  |- pnpm-lock.yaml
  |- pnpm-workspace.yaml
  |- postcss.config.js
  |- prisma.config.ts
  |- tailwind.config.ts
  |- tsconfig.json
  |- vercel.ts

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env.local file in root directory.
4. Contents of .env.local:

# .env.local

# disabled next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# kinde keys and urls
KINDE_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXX
KINDE_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
KINDE_ISSUER_URL=https://example.kinde.com
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

# neon db uri
DATABASE_URL="postgresql://<user>:<password>@<hostname>:<port>/quill?sslmode=require"

# uploadthing token
UPLOADTHING_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# app base url
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# pinecone api key
PINECONE_API_KEY=xxxxxxxxxx-xxxxx-xxxx-xxxxxx-xxxxxxxxxxx

# openai api key
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# stripe secret key, price id and webhook secret
STRIPE_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_PRICE_ID=price_XXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

• Environment Variable: NEXT_TELEMETRY_DISABLED=1
• Instructions:
  • Open your Next.js project.
  • Locate the .env.local file.
  • Add or update the line NEXT_TELEMETRY_DISABLED=1 to disable Next.js telemetry.

• Environment Variables:
  • KINDE_CLIENT_ID
  • KINDE_CLIENT_SECRET
  • KINDE_ISSUER_URL
  • KINDE_SITE_URL
  • KINDE_POST_LOGOUT_REDIRECT_URL
  • KINDE_POST_LOGIN_REDIRECT_URL
• Instructions:
  • Visit Kinde's website and sign in to your account.
  • Navigate to your account settings or developer dashboard to find the API credentials.
  • Retrieve the following:
    • KINDE_CLIENT_ID
    • KINDE_CLIENT_SECRET
    • KINDE_ISSUER_URL
  • For redirect URLs:
    • KINDE_SITE_URL
    • KINDE_POST_LOGOUT_REDIRECT_URL
    • KINDE_POST_LOGIN_REDIRECT_URL

• Environment Variable: DATABASE_URL="postgresql://<user>:<password>@<hostname>:<port>/quill?sslmode=require"
• Instructions:
  • Access your PostgreSQL database management interface.
  • Locate the database connection details.
  • Construct the URI following the provided template and replace the placeholders with your actual database credentials.

• Environment Variables:
  • UPLOADTHING_TOKEN
• Instructions:
  • Visit the Uploadthing developer dashboard and Log in to your account.
  • Create a new application and navigate to the API key section and generate a token.
  • Retrieve UPLOADTHING_TOKEN.

• Environment Variable: NEXT_PUBLIC_BASE_URL=http://localhost:3000
• Instructions:
  • Simply set NEXT_PUBLIC_BASE_URL=http://localhost:3000 in your .env.local file.

• Environment Variable: PINECONE_API_KEY=xxxxxxxxxx-xxxxx-xxxx-xxxxxx-xxxxxxxxxxx
• Instructions:
  • Visit Pinecone's official website and log in to your account.
  • Navigate to the API or developer section to find your API key.
  • Retrieve PINECONE_API_KEY.

• Environment Variable: OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
• Instructions:
  • Log in to your OpenAI account on the official website.
  • Navigate to the API or developer dashboard.
  • Retrieve your API key.

• Environment Variables:
  • STRIPE_SECRET_KEY
  • STRIPE_PRICE_ID
  • STRIPE_WEBHOOK_SECRET
• Instructions:
  • Log in to your Stripe account.
  • Navigate to the API or developer section.
  • Retrieve the following:
    • STRIPE_SECRET_KEY
    • STRIPE_PRICE_ID
    • STRIPE_WEBHOOK_SECRET

13. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or pnpm dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

Useful resources and dependencies that are used in quill.

• @ai-sdk/openai: ^3.0.29
• @hookform/resolvers: ^5.2.2
• @kinde-oss/kinde-auth-nextjs: ^2.12.0
• @langchain/openai: ^0.0.28
• @langchain/pinecone: ^0.0.4
• @mantine/hooks: ^9.0.2
• @pinecone-database/pinecone: ^2.2.0
• @prisma/adapter-pg: ^7.4.1
• @prisma/client: ^7.5.0
• @radix-ui/react-avatar: ^1.1.11
• @radix-ui/react-dialog: ^1.1.15
• @radix-ui/react-dropdown-menu: ^2.0.6
• @radix-ui/react-progress: ^1.1.8
• @radix-ui/react-slot: ^1.2.4
• @radix-ui/react-tooltip: ^1.0.7
• @radix-ui/react-visually-hidden: ^1.2.4
• @tailwindcss/typography: ^0.5.19
• @tanstack/react-query: ^5.28.14
• @trpc/client: ^11.16.0
• @trpc/next: ^11.16.0
• @trpc/react-query: ^11.16.0
• @trpc/server: ^11.16.0
• @types/node: ^25
• @types/pg: ^8.20.0
• @types/react: 19.2.14
• @types/react-dom: 19.2.3
• @uploadthing/react: ^7.3.3
• @vercel/config: ^0.0.41
• @vercel/functions: ^3.4.3
• ai: ^6.0.81
• autoprefixer: ^10.5.0
• class-variance-authority: ^0.7.1
• clsx: ^2.1.1
• date-fns: ^4.1.0
• dotenv: ^17.4.2
• eslint: ^9
• eslint-config-next: 16.1.6
• langchain: ^0.1.33
• lucide-react: ^1.0.1
• next: 16.2.3
• next-themes: ^0.4.6
• openai: ^6.32.0
• pdf-parse: ^2.4.5
• pg: ^8.20.0
• postcss: ^8
• prisma: ^7.4.1
• react: 19.2.5
• react-dom: 19.2.4
• react-dropzone: ^15.0.0
• react-hook-form: ^7.51.2
• react-loading-skeleton: ^3.5.0
• react-markdown: ^10.1.0
• react-pdf: ^9.2.1
• react-resize-detector: ^12.3.0
• react-textarea-autosize: ^8.5.9
• simplebar-react: ^3.3.2
• sonner: ^2.0.7
• stripe: ^22.0.2
• tailwind-merge: ^3.5.0
• tailwindcss: ^3.3.0
• tailwindcss-animate: ^1.0.7
• typescript: ^6
• uploadthing: ^7.7.4
• zod: ^4.3.6

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!

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

Check out Next.js deployment documentation for more details.

You can also give this repository a star to show more people and they can use this repository.

(back to top)