MultiLLm ChatGPT

MultiLLm ChatGPT

Introduction

MultiLLm ChatGPt tool allows user to chat with different AI models. User can select any of the models among OpenAI, Claude, Mistral, or Llama 2 and talk to them.

MultiLLm ChatGPT

Quickstart Guide

Installation

  1. Clone the repository:

    terminal
    git clone https://github.com/1811-Labs-LLC/BuilderKit-Starter.git [YOUR_APP_NAME]
     
    cd [YOUR_APP_NAME]
     
    git checkout multillm-chatgpt

    Remove the origin remote to ensure that you can work locally without pushing the changes back to the original repository.

    terminal
    git remote remove origin

    However, note that after removing the remote, you won't be able to switch between the branches, so you'll need to clone the repository again if you want to work on another branch.

  2. Install dependencies:

    terminal
    npm install
  3. Environment Variables:

    Copy the required variables from .env.example to .env.local as mentioned and update the values.

    terminal
    cp .env.example .env.local

    Or, manually create a .env.local file in the root directory with the following env variables (make sure to update the values with your actual keys):

    .env.local
    # Host
    NEXT_PUBLIC_APP_URL=<your-app-url>
     
    # Supabase
    NEXT_PUBLIC_SUPABASE_URL=<your-supabase-url>
    NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-supabase-anon-key>
     
    # OpenAI
    OPENAI_API_KEY=<your-openai-api-key>
     
    # Claude
    ANTHROPIC_API_KEY=<your-anthropic-api-key>
     
    # Replicate
    REPLICATE_API_TOKEN=<your-replicate-api-key>
     
    # Google Analytics
    NEXT_PUBLIC_GOOGLE_ANALYTICS_KEY=<your-google-analytics-key>

Setup Supabase

If you have not setup the supabase yet, go through the detailed documentation to set up the supabase for BuilderKit.ai. Make sure that you are creating the user table as mentioned in the supabase setup doc as it is required for the tool.

  1. Create MultiLLM ChatGPT Table in Supabase:

    sql
    -- Create a table for MultiLLm ChatGPT
    create table multillm_chatgpt (
       id uuid not null default uuid_generate_v4(),
       created_at timestamp with time zone not null default now(),
       user_id uuid null,
       model text null,
       title text null,
       chat_history jsonb null,
       constraint multillm_chatgpt_pkey primary key (id),
       constraint multillm_chatgpt_user_id_fkey foreign key (user_id) references users (id)
    );
     
    -- Set up Row Level Security (RLS)
    alter table multillm_chatgpt
    enable row level security;
     
    create policy "Users can insert their own row." on multillm_chatgpt
    for insert with check (auth.uid() = user_id);
     
    create policy "Users can update own row" on multillm_chatgpt
    for update using (auth.uid() = user_id);
     
    create policy "Users can read own row" on multillm_chatgpt
    for select using (auth.uid() = user_id);
     
    -- Optional: Add policy to allow users to delete their own row
    create policy "Users can delete own row" on multillm_chatgpt
    for delete using (auth.uid() = user_id);

    For all the tables, we enable the RLS policy by default with necessary permissions as mentioned in the script.

  2. Sync Supabase Types:

    To sync the supabase table schema with your project follow the steps here.

Running the Application

  1. Run the development server:

    terminal
    npm run dev

    This will start the development server on http://localhost:3000 (opens in a new tab).

  2. Build for production:

    terminal
    npm run build

    This command compiles the application for production usage.

  3. Start the production server:

    terminal
    npm start

    This will start the application in production mode.

Additional Scripts

  • Prepare Husky for Git hooks:

    terminal
    npm run prepare
  • Validate the code with Linting, Formatting & Typecheck:

    terminal
    npm run validate

Make the tool publicly accessible by removing the login process

  1. Go to src/app/(dashboard)/layout.tsx and comment the following section from line:15 to line:20 as shown in the image below:

    Remove Layout Login Check
  2. Now, go to src/app/api/chat/route.tsx and comment the following section from line:18 to line:23 as shown in the image below:

    Remove Api Login Check

These sections reads the user data and checks if the user is signed in or not. By commenting this section it does not check the user validation.

Requirements