Chatbot UI

To deploy Chatbot UI to the cloud, you need to set up a Supabase backend and a Vercel frontend.

1. Backend Setup (Supabase)

1. Create a new project at Supabase.
2. In Project Settings > General, note the Project Ref and Project ID.
3. In Settings > API, note the Project URL and Anon key (anon public) and Service role key (service_role).
4. Enable Email in Authentication > Providers (disabling 'Confirm email' is recommended for personal use).
5. Configure the migration file supabase/migrations/20240108234540_setup.sql:
   • project_url (line 53): Use your Supabase Project URL.
   • service_role_key (line 54): Use your Supabase Service role key.
6. Link and push to Supabase:

   supabase login
   supabase link --project-ref <project-id>
   supabase db push

2. Frontend Setup (Vercel)

1. Import your GitHub repository to Vercel.
2. Set Framework Preset to Next.js.
3. Add the following Environment Variables:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
   • SUPABASE_SERVICE_ROLE_KEY
   • NEXT_PUBLIC_OLLAMA_URL (if using local Ollama models)
   • OPENAI_API_KEY (optional)
   • AZURE_OPENAI_API_KEY (optional)
   • AZURE_OPENAI_ENDPOINT (optional)
   • AZURE_GPT_45_VISION_NAME (optional)
4. Click Deploy.

# Link your hosted project to Supabase
supabase link --project-ref <project-id>

# Push migrations to the live database
supabase db push

To run Chatbot UI locally, follow these steps to clone the repository, install dependencies, and set up a local Supabase instance for data storage.

1. Clone and Install

git clone https://github.com/mckaywrigley/chatbot-ui.git
cd chatbot-ui
npm install

2. Setup Supabase Locally

You must have Docker installed. Then, install the Supabase CLI based on your OS:

MacOS/Linux:

brew install supabase/tap/supabase

Windows:

scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

Start Supabase in the project root:

supabase start

3. Configure Environment and SQL

1. Create your local env file:

   cp .env.local.example .env.local

2. Run supabase status to get your API URL. Use this value for NEXT_PUBLIC_SUPABASE_URL in .env.local.
3. Edit supabase/migrations/20240108234540_setup.sql:
   • Replace project_url (line 53) with http://supabase_kong_chatbotui:8000 (default).
   • Replace service_role_key (line 54) with the value from supabase status.

4. Run the App

Ensure you are using a compatible Node version (v18+).

npm run chat

• Chat UI: http://localhost:3000
• Backend GUI: http://localhost:54323/project/default/editor

git clone https://github.com/mckaywrigley/chatbot-ui.git
cd chatbot-ui
npm install
# ... follow remaining steps in guide

This project uses Prettier for code formatting and the @trivago/prettier-plugin-sort-imports plugin for managing import order.

Formatting Rules

• Line Endings: Uses lf (Unix style).
• Semicolons: Disabled (semi: false).
• Quotes: Uses double quotes (singleQuote: false).
• Indentation: Uses spaces instead of tabs (useTabs: false) with a tabWidth of 2.
• Arrow Function Parens: Avoids parentheses around single arrow function arguments (arrowParens: 'avoid').
• Trailing Commas: Disabled (trailingComma: 'none').

Import Sorting Configuration

Imports are automatically sorted according to a specific hierarchy. The order follows this pattern:

1. Styles (.scss, .css)
2. React and Next.js core modules
3. Third-party modules
4. Local types and configuration (@/types, @/config)
5. Library and hooks (@/lib, @/hooks)
6. UI components and general components (@/components/ui, @/components)
7. Registry, styles, and app directory (@/registry, @/styles, @/app)
8. Relative imports (./ or ../)

Sorting features enabled:

• importOrderSortSpecifiers: true: Sorts members within a single import statement.
• importOrderBuiltinModulesToTop: true: Moves built-in Node.js modules to the top.
• importOrderMergeDuplicateImports: true: Merges multiple imports from the same module into one.
• importOrderCombineTypeAndValueImports: true: Combines type-only imports with value imports from the same module.

module.exports = {
  endOfLine: 'lf',
  semi: false,
  useTabs: false,
  singleQuote: false,
  arrowParens: 'avoid',
  tabWidth: 2,
  trailingComma: 'none',
  importOrder: [
    '^.+\.scss$',
    '^.+\.css$',
    '^(react/(.*)$)|^(react$)',
    '^(next/(.*)$)|^(next$)',
    '<THIRD_PARTY_MODULES>',
    '',
    '^types$',
    '^@/types/(.*)$',
    '^@/config/(.*)$',
    '^@/lib/(.*)$',
    '^@/hooks/(.*)$',
    '^@/components/ui/(.*)$',
    '^@/components/(.*)$',
    '^@/registry/(.*)$',
    '^@/styles/(.*)$',
    '^@/app/(.*)$',
    '',
    '^[./]'
  ],
  importOrderSeparation: false,
  importOrderSortSpecifiers: true,
  importOrderBuiltinModulesToTop: true,
  importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
  importOrderMergeDuplicateImports: true,
  importOrderCombineTypeAndValueImports: true
}

Use getServerProfile() in server-side components or API routes to fetch the authenticated user's profile from the Supabase profiles table.

This function automatically:

1. Initializes a Supabase client using NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.
2. Retrieves the current user via Supabase Auth.
3. Fetches the corresponding row from the profiles table where user_id matches the authenticated user.
4. Injects relevant API keys from the server's environment variables into the returned profile object.

Note: This function will throw an error if the user is not authenticated or if no profile exists in the database.

import { getServerProfile } from '@/lib/server/server-chat-helpers'

export default async function ServerComponent() {
  try {
    const profile = await getServerProfile();
    // profile now contains database fields + injected environment API keys
    console.log(profile);
  } catch (error) {
    console.error("Failed to load profile:", error.message);
  }
}