Skip to content
This repository was archived by the owner on Mar 8, 2026. It is now read-only.

README.md

Latest commit

 

History

History
97 lines (67 loc) · 3.82 KB

README.md

File metadata and controls

97 lines (67 loc) · 3.82 KB

BrainDrive Frontend

The web interface for BrainDrive - your user-owned AI platform.

The frontend includes PageBuilder, a drag-and-drop interface for building AI-powered applications using BrainDrive plugins. Create responsive, interactive pages without coding - from multi-model chat interfaces to AI-powered games and custom dashboards.

Note: The frontend requires the BrainDrive Backend to be running. See the Installation Guide for complete setup instructions.

BrainDrive PageBuilder

Features

  • Plugin Management: Browse, install, and manage plugins
  • Visual Editor: Drag-and-drop interface for arranging plugins on a canvas
  • Responsive Design: Support for desktop, tablet, and mobile layouts
  • Page Management: Create, edit, and organize pages
  • Route Management: Define and manage navigation routes
  • Component Configuration: Configure plugin properties through a user-friendly interface
  • Theme Support: Light and dark mode with customizable themes
  • Authentication: Secure user authentication and authorization
  • Real-time Preview: Instantly preview changes as you build
  • JSON Export/Import: Export and import configurations as JSON
  • Error Handling: Robust error boundaries and error reporting
  • Service Architecture: Modular service-based architecture for extensibility

Tech Stack

  • React (v18.3.1): A JavaScript library for building user interfaces
  • TypeScript: Typed JavaScript for better developer experience
  • Vite: Next-generation frontend tooling for fast development and optimized builds
  • Material UI (v5.14.4): React UI framework with Material Design components
  • React Router (v7.2.0): Declarative routing for React applications
  • React Grid Layout: Draggable and resizable grid layout
  • Axios: Promise-based HTTP client
  • Zod: TypeScript-first schema validation

Installation

See the Installation Guide for complete setup instructions including both frontend and backend.

Running the Application

Development Mode

To run the frontend in development mode with hot-reload:

npm run dev

This will start the development server at http://localhost:5173 (or another port if 5173 is in use).

Building for Production

npm run build

The built files will be in the dist directory.

Preview Production Build

npm run preview

Project Structure

  • src/: Source code
    • components/: Reusable UI components
    • contexts/: React context providers
    • features/: Feature-specific code
      • plugin-manager/: Plugin management feature
      • plugin-studio/: PageBuilder editor feature
    • hooks/: Custom React hooks
    • pages/: Page components
    • plugin/: Plugin system code
    • services/: Service layer for API communication
    • App.tsx: Main application component
    • main.tsx: Application entry point
    • routes.tsx: Application routes

Contributing

Interested in developing plugins or contributing to BrainDrive? See the Plugin Developer Quickstart.

Documentation

Full documentation is available at docs.braindrive.ai.

Questions?

Post at community.braindrive.ai. We're here to help build the future of user-owned AI together.

License

Licensed under the MIT License. Your AI. Your Rules.