BrixoAI
Studio Platform & Website
Overview
BrixoAI is an AI-first technology & creative studio platform — a fully custom-built website and SaaS scaffold showcasing services in AI, data engineering, web development, and UI/UX design.
The platform features a RAG-powered AI assistant (BrixoAI) that answers questions about the studio's services and capabilities using a curated knowledge base. An admin portal and client dashboard are backed by Supabase authentication and role-based access control.
Built end-to-end — from brand identity and design system to full-stack development and AI integration — the project demonstrates the exact capabilities it promotes.
Architecture & Technologies
The front end is built on Next.js 14 (App Router) with TypeScript and Tailwind CSS, deployed to Vercel. The UI is driven by a custom CSS design system — responsive grid layouts, animated geometric shapes, and component-level class naming for consistent visual language across all pages.
Authentication and access control are handled by Supabase (PostgreSQL), enabling role-based routing for admin users and a client-facing dashboard. Contact form emails are dispatched via Resend. The project is structured around a clean monorepo with a separate FastAPI service for AI inference.
The AI back end is a FastAPI service powered by LangChain, ChromaDB for vector storage, and Sentence Transformers for document embeddings. The RAG pipeline indexes Markdown knowledge-base files and retrieves context to augment LLM responses served through Groq.
RAG-Powered AI Assistant
BrixoAI is a context-aware chatbot embedded in the studio website. It uses a Retrieval-Augmented Generation (RAG) pipeline to answer questions about services, approach, pricing and project case studies from a curated set of Markdown knowledge-base documents.
The pipeline splits documents into overlapping chunks, encodes them with Sentence Transformers, and stores the resulting vectors in ChromaDB. At query time, the top-K most semantically relevant chunks are retrieved and injected into the system prompt alongside conversation history before being sent to the LLM.
Category-based routing directs questions about specific service areas — AI & Chatbots, Data Engineering, Web Development, Design & UX — to tailored prompt templates, keeping responses focused and accurate.
Click the bubble below to see a preview of the interface, or visit brixo-ai.com to use the live version.
Interactive demo · click to open
Brand Identity & Design System
The BrixoAI brand pairs a deep dark-indigo base with a bold coral-red accent, conveying technical precision and creative energy. Geometric floating shapes scattered across hero sections give the interface a sense of depth and motion without relying on heavy animation libraries.
A custom CSS design system underpins the entire UI — variables for colour, typography and spacing ensure consistent styling across components. Icons from Font Awesome and Phosphor are used throughout to reinforce content hierarchy and usability.
Typography
BrixoAI's typographic system uses a clean, modern sans-serif pairing — bold weights for headings to establish hierarchy, with lighter weights for body text to maintain readability across the dark-themed interface.
Colour Palette
A dark-indigo base paired with coral-red and electric-blue accents forms the BrixoAI visual identity — communicating technical authority and creative energy in equal measure.
Client Portal & Admin Dashboard
Supabase Auth powers secure login and session management across the platform. Role metadata stored in user profiles distinguishes admin users from standard clients — Next.js middleware enforces route protection and redirects unauthenticated requests before they reach protected pages.
The admin dashboard provides a central hub for managing client accounts and project data stored in Supabase's PostgreSQL database. The client-facing dashboard gives each user a personalised view of their active projects, status updates and shared deliverables.