AI-powered transit planning intelligence. McBrien analyzes networks, generates reports, and models scenarios so transit planners can focus on decisions instead of dashboards.
Named after William C. McBrien, the long-serving chairman of the Toronto Transportation Commission who championed the construction of Canada's first subway.
This is an npm-workspaces monorepo:
apps/
mcbrien/ Main React + Vite web app (chat UI, landing page, embed demos)
services/
agent/ Backend agent service
Requires Node.js 20+ and npm 10+.
# Install all workspace dependencies
npm install
# Start the McBrien web app dev server
npm run devThe dev server runs at http://localhost:5173 (or the next free port).
| Command | What it does |
|---|---|
npm run dev |
Start the McBrien app in dev mode |
npm run build |
Type-check and bundle agent + app for production |
npm run preview |
Preview the production build locally |
npm run deploy |
Deploy the McBrien app |
apps/mcbrien is the user-facing surface. Routes:
/— Landing page with hero, features, McBrien historical card/chat— Main chat interface/embed— Embed demo page (floating widget + inline sidebar)/privacy— Privacy policy
- Conversation chat with mock streaming, follow-ups, pinned insights, and a summary view
- Find incomplete work — quick way to jump back to a half-finished conversation
- Privacy mode — replaces sidebar titles, conversation previews, and "continue where you left off" cards with redacted dashes; auto-enables when screen sharing is detected via
getDisplayMedia - Embeddable widget + sidebar — drop McBrien into existing transit tools (
/embedshowcases both) - Theme — light and dark modes, system preference by default
- Serif typography toggle — preference persists across sessions in
localStorage
- React 19 + Vite 6
- React Router (browser router)
- Tailwind CSS v4 with custom CSS variables for theming
- Lucide icons
- Lora (Google Fonts) for serif headlines
- Cloudflare Workers for deployment
Backend agent service. See services/agent for its own README and setup.
- Inline styles are used heavily for component-local design (chat surfaces, landing page sections). Tailwind utilities are reserved for layout primitives and dark-mode overrides via
html.dark .…rules inglobals.css. - Dark mode uses a class on
<html>(html.dark) toggled throughThemeContextand persisted tolocalStorageundermcbrien-theme. - Accent color is the magenta
#b03488(referenced asBin components). - Serif stack is
'Lora', 'Tiempos Headline', Georgia, serif. The.mcb-serifclass applies the serif with!importantso it cascades into markdown-rendered children.
Proprietary — © 2026 McBrien Transit. All rights reserved.