Companion Ai

Crafting AI companions for authentic and engaging conversations.

#ai #artificial-intelligence #chatbot #chatgpt #companion #jarvis #jarvis-ai #javascript #js #next

Demo Download

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

:notebook_with_decorative_cover: 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

:bangbang: 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

:toolbox: Getting Started

Make sure Git and NodeJS is installed.
Clone this repository to your local computer.
Create .env file in root directory.
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

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.

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.

:camera: Screenshots

:gear: Tech Stack

:wrench: Stats

:raised_hands: 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.