Skip to content
Version: 1.0.0 Last Updated: 2026-05-14 Status: Active

Frontend Platform (bast-admin-ui)

React/TypeScript monorepo powering the Bast AI admin dashboard, chat interface, and design system.

Repository Overview

The bast-admin-ui repository is a pnpm workspace monorepo containing all frontend applications and shared packages for the Bast AI platform.

Applications

App Port Technology Description
admin-ui :3000 React + Vite Main admin dashboard for CAT configuration, org management, analytics
bff :4000 Express + tRPC Backend-for-frontend proxy, auth cookie management, API aggregation
chat-ui-beta :3001 React + Vite End-user chat interface for conversational AI interactions
bast-ux :3002 Vite UX component playground and design system showcase

Shared Packages

Package Description
@bast/shared-styles Design tokens, CSS utilities, React UI components (NeuCard, NeuButton, etc.)

Architecture

bast-admin-ui/
├── apps/
│   ├── admin-ui/          # Main admin dashboard
│   │   ├── src/
│   │   │   ├── components/  # Feature-grouped (auth/, platform/, setup/, cat-builder/)
│   │   │   ├── constants/   # String constants (strings.ts)
│   │   │   ├── lib/         # Utilities (auth, trpc, validation, typed-storage)
│   │   │   ├── hooks/       # Custom React hooks
│   │   │   └── App.tsx      # Router + lazy loading
│   │   └── vitest.config.ts
│   ├── bff/               # Backend-for-frontend
│   │   ├── src/
│   │   │   ├── routers/     # tRPC routers (cat, org, user, analytics)
│   │   │   └── middleware/  # Auth, proxy, CORS
│   │   └── package.json
│   ├── chat-ui-beta/      # Chat interface
│   └── bast-ux/           # Component playground
└── packages/
    └── shared-styles/     # Design system
        ├── src/
        │   ├── tokens/      # CSS custom properties
        │   ├── components/  # Neu* component library
        │   └── utilities/   # CSS utility classes
        └── package.json

Technology Stack

Layer Technologies
Language TypeScript 5.x
Framework React 18+
Build Vite, pnpm workspaces
Styling Tailwind CSS v4, CSS custom properties
State tRPC + React Query (server), React Context (client)
API Layer tRPC (type-safe), Express middleware
Auth httpOnly cookies via BFF, WorkOS/Google/MS OAuth
Testing Vitest

Key Patterns

Component Architecture

  • Named exports only (no default exports)
  • Barrel files for feature directories
  • Lazy loading at route level via React.lazy()
  • Design system components from @bast/shared-styles

State Management

  • tRPC + React Query for all server state
  • Auth context (useAuth()) for authentication
  • Typed localStorage via lib/typed-storage.ts
  • Demo mode gated behind VITE_DEMO_MODE env var

Styling

  • Tailwind CSS v4 with design system tokens
  • CSS custom properties for theming (--bg-elevated, --primary-text)
  • Type ramp classes for typography (type-h1 through type-body-sm)

Development

# Install dependencies
pnpm install

# Start all services
pnpm --filter @bast/admin-ui dev        # :3000
pnpm --filter @bast/bff dev             # :4000
pnpm --filter @bast/chat-ui-beta dev    # :3001
pnpm --filter bast-ux dev               # :3002

# Build & test
pnpm --filter @bast/admin-ui build
pnpm --filter @bast/admin-ui test
pnpm --filter @bast/admin-ui test:coverage