Chatbot Platform

This is a minimal Chatbot Platform built as a technical task, demonstrating user authentication, project management, and integration with Large Language Models (LLMs) and file uploads.

Features

• User Registration and Login (JWT authenticated)
• Create, read, and delete projects/agents.
• Store and manage prompts for each project.
• Chat interface to interact with agents via the OpenRouter API.
• Upload files to a project, which are stored securely in OpenAI's infrastructure.

Core Technologies

This project is built with a modern, decoupled architecture featuring a React/TypeScript frontend (using Vite and React Bootstrap) and a Node.js/Express backend. Data is managed by a PostgreSQL database (via Supabase) through the Prisma ORM. File uploads are handled by the OpenAI Files API, while chat functionality is powered by LLMs accessed through the OpenRouter API.

---

Local Development Setup

Follow these steps to get the application running on your local machine.

Prerequisites

• Node.js (LTS version recommended)
• npm (comes with Node.js)
• A Supabase account (for the database)
• An OpenRouter.ai account (for the LLM API key)
• An OpenAI account (for the File Upload API key)

1. Backend Setup

1. Navigate to the server directory:

   cd chatbot-platform/server

2. Install backend dependencies:

   npm install

3. Create a .env file by copying the example:

   cp .env.example .env

4. Fill in the .env file with your credentials:

   • DATABASE_URL: Your Supabase database connection string.
   • JWT_SECRET: A strong, random secret key.
   • OPENROUTER_API_KEY: Your key from OpenRouter.ai.
   • OPENAI_API_KEY: Your key from OpenAI.
   • CLIENT_URL_PROD: Leave blank for now.
   • CLIENT_URL_LOCAL: Should be http://localhost:5173.

5. Apply Database Schema:

   npx prisma migrate dev --name init

6. Run the Backend Server:

   npm run dev

   The server will run on http://localhost:3000.

2. Frontend Setup

1. In a new terminal, navigate to the client directory:

   cd chatbot-platform/client

2. Install frontend dependencies:

   npm install

3. Create a local environment file:

   cp .env.example .env.local

   The file will be pre-filled with VITE_API_BASE_URL=http://localhost:3000, which is correct for local development.

4. Run the Frontend Server:

   npm run dev

   The application will be available at http://localhost:5173.

---

API Endpoints

The following API endpoints are available:

• POST /api/auth/register: User Registration
• POST /api/auth/login: User Login
• GET /api/projects: Get all projects for the logged-in user.
• POST /api/projects: Create a new project.
• DELETE /api/projects/:id: Delete a project.
• PUT /api/projects/:id: Update a project (used for prompts).
• POST /api/llm/:projectId/chat: Send a message to a project's agent.
• POST /api/llm/:projectId/files: Upload a file to a project.

---

Deployment

This application is designed to be deployed with a decoupled frontend and backend.

Backend (Render)

1. Push your code to a GitHub repository.
2. Create a new "Web Service" on Render and connect it to your repository.
3. Settings:
   • Build Command: npm install && npm run build
   • Start Command: npm start
4. Environment Variables: Add all the variables from your .env file to the Render environment settings. For CLIENT_URL_PROD, use the URL of your Vercel deployment (from the next step).

Frontend (Vercel)

1. Create a new "Project" on Vercel and connect it to the same GitHub repository.

2. Build & Development Settings: Vercel will likely detect that you are using Vite and configure this automatically. The output directory should be dist.

3. Environment Variables: Add one variable:

   • VITE_API_BASE_URL: Set this to the public URL of your backend on Render (e.g., https://your-backend.onrender.com).

4. Deploy. Vercel will automatically build and deploy your frontend.