Companion.ai - A Modern Next.js 14 SaaS Companion AI Platform.

📔 Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Buy Me a Coffee
• Follow Me
• Learn More
• Deploy on Vercel
• Give A Star
• Star History
• Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

companion-ai/
  |- app/
    |-- (auth)/
        |--- (routes)/
            |---- sign-in/[[...sign-in]]/
            |---- sign-up/[[...sign-up]]/
        |--- layout.tsx
    |-- (chat)/
        |--- (routes)/
            |---- chat/[chatId]/
        |--- layout.tsx
    |-- (root)/
        |--- (routes)/
            |---- companion/[companionId]/
            |---- settings/
            |---- page.tsx
        |--- layout.tsx
    |-- api/
        |--- chat/
        |--- companion/
        |--- stripe/
        |--- webhook/
    |-- apple-icon.png
    |-- favicon.ico
    |-- globals.css
    |-- icon1.png
    |-- icon2.png
    |-- layout.tsx
  |- components/
    |-- ui/
    |-- bot-avatar.tsx
    |-- categories.tsx
    |-- chat-form.tsx
    |-- chat-header.tsx
    |-- chat-message.tsx
    |-- chat-messages.tsx
    |-- clerk-theme-provider.tsx.tsx
    |-- companion-form.tsx
    |-- companions.tsx
    |-- image-upload.tsx
    |-- mobile-sidebar.tsx
    |-- mode-toggle.tsx
    |-- navbar.tsx
    |-- pro-modal.tsx
    |-- providers.tsx
    |-- search-input.tsx
    |-- sidebar.tsx
    |-- subscription-button.tsx
    |-- user-avatar.tsx
  |- config/
    |-- index.ts
  |- constants/
    |-- index.ts
  |- hooks/
    |-- use-debounce.tsx
    |-- use-pro-modal.tsx
  |- lib/
    |-- db.ts
    |-- memory.ts
    |-- rate-limit.ts
    |-- stripe.ts
    |-- subscription.ts
    |-- utils.ts
  |- prisma/
    |-- schema.prisma
  |- public/
    |-- empty.png
    |-- placeholder.svg
  |- schema/
    |-- index.ts
  |- scripts/
    |-- seed.ts
  |- .env
  |- .env.example
  |- .eslintrc.json
  |- .gitignore
  |- .npmrc
  |- components.json
  |- environment.d.ts
  |- middleware.ts
  |- next.config.js
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

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

# .env

# disabled next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# clerk auth redirect urls
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=/

# aiven db url
DATABASE_URL="mysql://<username>:<password>@<host>:<port>/companion-ai?ssl-mode=REQUIRED"

# cloudinary cloud name
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=xxxxxxxxxxxx
NEXT_PUBLIC_CLOUDINARY_PRESET_NAME=xxxxxxxxxxx

# pinecone vector db credentials
PINECONE_INDEX="companion"
PINECONE_API_KEY=xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx

# upstash redis url and token
UPSTASH_REDIS_REST_URL="https://xxxxxxxxx-xxxxx.upstash.io"
UPSTASH_REDIS_REST_TOKEN="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

# open ai key
OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# replicate api token
REPLICATE_API_TOKEN=r8_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# stripe api secret key & webhook secret
STRIPE_API_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# next public app url
NEXT_PUBLIC_APP_URL=http://localhost:3000

5. Clerk Authentication Keys:

• Visit the Clerk dashboard: https://clerk.dev
• Log in to your Clerk account or sign up if you don't have one.
• Go to the "Projects" section and select your project.
• Navigate to the "API Keys" tab.
• Copy the "Publishable Key" and replace NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY in the .env file with the copied key.
• Copy the "Secret Key" and replace CLERK_SECRET_KEY in the .env file with the copied key.

6. OpenAI API Key:

Visit OpenAI and sign up for an account. Once registered, you can find your API key in the API section of your account settings. Copy the key and set it as the OPENAI_API_KEY in your project's environment.

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

7. Replicate API Token:

Sign up or log in to Replicate. Once logged in, navigate to your account settings, and you'll find your API token. Copy the token and set it as the REPLICATE_API_TOKEN in your project's environment.

REPLICATE_API_TOKEN=r8_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

8. Cloudinary Configuration:

• Visit the Cloudinary dashboard: https://cloudinary.com
• Log in to your Cloudinary account or sign up if you don't have one.
• Obtain your Cloud Name and Preset Name from the dashboard.
• Update the .env file with the following entries:

  NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name
  NEXT_PUBLIC_CLOUDINARY_PRESET_NAME=your_preset_name

9. Pinecone Vector Database Integration:

• Access the Pinecone dashboard: https://pinecone.io
• Log in to your Pinecone account or create a new one.
• Retrieve your Pinecone Index and API Key from the dashboard.
• Update the .env file with the following entries:

  PINECONE_INDEX=your_companion_index
  PINECONE_API_KEY=your_pinecone_api_key

10. Upstash Redis Configuration:

• Visit the Upstash dashboard: https://upstash.com
• Log in to your Upstash account or create a new one.
• Obtain the Upstash Redis REST URL and REST Token.
• Update the .env file with the following entries:

  UPSTASH_REDIS_REST_URL=your_upstash_redis_rest_url
  UPSTASH_REDIS_REST_TOKEN=your_upstash_redis_rest_token

11. Aiven Database URL:

If you don't have an Aiven account, sign up here. After creating an account, set up a MySQL database. In the Aiven dashboard, find your database connection details and construct the DATABASE_URL in the following format:

DATABASE_URL="mysql://<username>:<password>@<host>:<port>/companion-ai?ssl-mode=REQUIRED"

12. Stripe API and Webhook Keys:

For Stripe, sign up or log in to your Stripe Dashboard. Once logged in, go to Developers > API keys to find your API secret key and webhook secret. Set them as STRIPE_API_SECRET_KEY and STRIPE_WEBHOOK_SECRET in your project's environment.

STRIPE_API_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

13. App Base URL:

Set the base URL of your application as NEXT_PUBLIC_APP_URL in your project's environment.

NEXT_PUBLIC_APP_URL=http://localhost:3000

14. Open terminal in root directory. Run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

15. Run the Seed Script:

In the same terminal, run the following command to execute the seed script:

node scripts/seed.js

This command uses node to execute the JavaScript file (scripts/seed.js) and writes category data in mysql database.

16. Verify Data in Database:

Once the script completes, check your MySQL database to ensure that the category data has been successfully seeded.

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

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

📷 Screenshots

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

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.

💎 Acknowledgements

Useful resources and dependencies that are used in Companion.ai.

• Thanks to CodeWithAntonio: https://codewithantonio.com/
• @clerk/nextjs: ^4.29.3
• @hookform/resolvers: ^3.3.4
• @prisma/client: ^5.8.0
• @radix-ui/react-avatar: ^1.0.4
• @radix-ui/react-dialog: ^1.0.5
• @radix-ui/react-label: ^2.0.2
• @radix-ui/react-progress: ^1.0.3
• @radix-ui/react-select: ^2.0.0
• @radix-ui/react-slot: ^1.0.2
• @clerk/themes: ^1.7.9
• @hookform/resolvers: ^3.3.4
• @pinecone-database/pinecone: ^2.0.1
• @prisma/client: ^5.8.1
• @radix-ui/react-alert-dialog: ^1.0.5
• @radix-ui/react-avatar: ^1.0.4
• @radix-ui/react-dialog: ^1.0.5
• @radix-ui/react-dropdown-menu: ^2.0.6
• @radix-ui/react-label: ^2.0.2
• @radix-ui/react-select: ^2.0.0
• @radix-ui/react-separator: ^1.0.3
• @radix-ui/react-slot: ^1.0.2
• @upstash/ratelimit: ^1.0.0
• @upstash/redis: ^1.28.1
• ai: ^2.2.31
• axios: ^1.6.5
• class-variance-authority: ^0.7.0
• clsx: ^2.1.0
• dotenv: ^16.3.1
• langchain: ^0.1.4
• lucide-react: ^0.311.0
• next: 14.0.4
• next-cloudinary: ^5.19.0
• next-themes: ^0.2.1
• openai: ^4.24.7
• openai-edge: ^1.2.2
• query-string: ^8.1.0
• react: ^18
• react-dom: ^18
• react-hook-form: ^7.49.3
• react-spinners: ^0.13.8
• replicate: ^0.25.2
• sonner: ^1.3.1
• stripe: ^14.13.0
• tailwind-merge: ^2.2.0
• tailwindcss-animate: ^1.0.7
• zod: ^3.22.4
• zustand: ^4.5.0

☕ Buy Me a Coffee

🚀 Follow Me

📚 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 Next.js deployment documentation for more details.

⭐ Give A Star

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

🌟 Star History

(back to top)