Skip to content
STACK IT FAST

Umami

Curated OSSHybridWeb AnalyticsSolo

Audited from github.com/umami-software/umami

Privacy-focused, open-source web analytics platform and Google Analytics alternative built with Next.js, React, and PostgreSQL.

Language
TypeScript
Database
PostgreSQL
Hosting
Docker
License
MIT
Running for
4 years
Team
Solo

Why this architecture

Umami provides cookie-free, GDPR-compliant website metrics and session replays with simple self-hosting and zero data monetization.

Tech stack by layer

8 technologies · audited Sep 17, 2026
Frontend & UI
  • Next.jsFull-stack application framework serving analytics dashboards and API collection routes
  • ReactInteractive analytics interface rendering timeseries charts, maps, and conversion funnels
Backend & APIs
  • TypeScriptType-safe codebase powering tracker compilation, collection APIs, and MCP servers
Data & Persistence
  • PrismaORM client managing database models, migrations, and read replicas for analytics entities
  • PostgreSQLPrimary relational persistence layer storing accounts, websites, events, and sessions
  • ClickHouseHigh-volume columnar analytical store used in enterprise deployments for event queries
  • RedisIn-memory cache for visitor sessions, IP anonymization salts, and rate limiting
Infrastructure & Deploy
  • DockerProduction alpine container images packaging Next.js standalone builds and database scripts

Umami architecture diagram

Open SVG
Umami architecture diagramTracked sites → Umami app (collect events); Dashboard → Umami app (REST); Umami app → PostgreSQL (Prisma); Umami app → ClickHouse (event queries); Umami app → Redis (cache)CLIENTSSERVICESDATA & STORAGETracked sitestracker scriptDashboardReactUmami appNext.js App RouterPostgreSQLPrismaClickHousehigh-volume eventsRedissessions · saltscollect eventsRESTPrismaevent queriescache
How the main components of Umami connect, drawn from the audited repository.
Diagram as text
  • Tracked sites (tracker script) → Umami app (Next.js App Router): collect events
  • Dashboard (React) → Umami app (Next.js App Router): REST
  • Umami app (Next.js App Router) → PostgreSQL (Prisma): Prisma
  • Umami app (Next.js App Router) → ClickHouse (high-volume events): event queries
  • Umami app (Next.js App Router) → Redis (sessions · salts): cache

Key architectural decisions

4 decisions
  1. 01

    Dual Persistence Support for PostgreSQL and ClickHouse

    Decouples relational query models through Prisma while offering high-throughput columnar event ingestion via native ClickHouse drivers for large deployments.

  2. 02

    Standalone Rollup Build for Privacy-First Tracker Script

    Compiles a lightweight, zero-dependency tracking snippet (under 3KB) using Rollup that collects analytics without setting persistent user cookies.

  3. 03

    Built-in Model Context Protocol Server

    Exposes analytics stats, real-time traffic queries, and metric aggregations to AI agents through a dedicated MCP server package (@umami/mcp).

  4. 04

    Session Replay Integration with rrweb

    Incorporates a privacy-conscious DOM session recorder in src/recorder using rrweb to capture user navigation funnels and playback sessions.

How Umami is built

How Umami is structured

Umami is architected as a full-stack Next.js monorepo:

  • src/app: The Next.js 16 App Router application organizing web dashboard pages, settings, and public shareable analytics views.
  • src/tracker: The standalone client-side tracking script compiled separately via Rollup (rollup.tracker.config.js) to provide an ultra-lightweight, cookie-free telemetry beacon.
  • src/recorder: An integrated session replay recorder leveraging rrweb to capture user journey interactions while masking sensitive inputs.
  • src/queries: Abstract database query interfaces with implementations for both PostgreSQL (via Prisma) and ClickHouse (@clickhouse/client).
  • packages/api-client: An auto-generated TypeScript SDK communicating with Umami REST endpoints.
  • packages/mcp: A Model Context Protocol server (@modelcontextprotocol/server) providing conversational AI assistants with direct access to live traffic and event queries.

Frontend

The frontend interface in src/app delivers a modern, clean analytics dashboard:

  • Interactive Visualizations: Built with Chart.js (chart.js, chartjs-adapter-date-fns) for timeseries traffic charts and react-simple-maps for geographical visitor origin maps.
  • Component Architecture: Uses React 19, Lucide React icons, and custom components styled with Tailwind CSS and Framer Motion (motion).
  • Data Hydration: Queries analytics data asynchronously using TanStack Query (@tanstack/react-query) and manages client settings with Zustand.
  • Internationalization: Full multi-language localization managed through next-intl.

Backend & APIs

The backend leverages Next.js Route Handlers and Node.js server scripts:

  • Telemetry Ingestion: The /api/send endpoint ingests high-frequency beacon payloads, parses user agents (ua-parser-js), checks bot patterns (isbot), resolves IP geolocations via MaxMind GeoIP databases, and hashes session IDs without storing raw IPs.
  • Reporting APIs: REST endpoints expose aggregated metrics for pageviews, unique visitors, referral channels, browser versions, operating systems, and custom conversion events.
  • MCP Server: Enables AI coding tools like Claude or Cursor to inspect active visitors and funnel drop-offs using standardized tool schemas.

Data & persistence

Umami supports multiple data storage configurations to accommodate diverse scaling requirements:

  • PostgreSQL: The primary transactional store using Prisma ORM (@prisma/client, @prisma/adapter-pg) with support for read replicas (@prisma/extension-read-replicas).
  • ClickHouse: An optional columnar storage engine for enterprise installations processing millions of pageviews per day.
  • Kafka & Redis: Pluggable Kafka message queues (kafkajs) buffer bursts of incoming analytics events, while Redis manages caching and IP salt rotations.

Realtime / collaboration

Umami features a realtime dashboard view displaying live concurrent visitors:

  • Web clients poll lightweight heartbeat and realtime endpoints to track active page sessions and recent URL clicks.
  • Dashboards can be made public via unique shareable tokens without requiring login credentials.

Build, test & deploy

The build pipeline is configured using pnpm and modern tooling:

  • Tracker scripts are bundled with Rollup, minified with Terser, and versioned into public/script.js.
  • Next.js is compiled using Turbopack into a standalone deployment bundle.
  • Code quality is checked using Biome (biome lint, biome format).
  • Testing includes Vitest unit tests, Playwright API integration tests (playwright.api.config.ts), and end-to-end browser flows.
  • Multi-stage Docker images (Dockerfile) package the application on Alpine Linux for lightweight production deployments.

Self-hosting notes

Umami is one of the simplest analytics solutions to self-host:

  • Launch via Docker Compose with docker compose up -d, which starts the Umami web application container connected to PostgreSQL.
  • Setting DATABASE_URL connects to existing managed database services (Supabase, Neon, AWS RDS).
  • Optional environment variables configure reverse proxy headers (CLIENT_IP_HEADER), two-factor authentication secrets (TWO_FACTOR_ENCRYPTION_KEY), and MCP tool activation (MCP_ENABLED=1).

What to copy (and what not to)

What to copy:

  • Packaging the client-side tracking script as an independent Rollup build separate from the Next.js bundle to maintain an ultra-fast sub-3KB footprint.
  • Cookie-free session hashing that rotates daily salts to comply with GDPR and CCPA without user tracking consent banners.
  • Exposing analytics metrics to AI assistants via a native Model Context Protocol (MCP) server package.

What not to copy:

  • Combining high-throughput event ingestion routes directly within the same Next.js application process in large enterprise setups; separating collection beacons into edge functions or lightweight Go/Rust ingesters prevents web UI server saturation.

Sources & repo audit

Audited
Sep 17, 2026
Commit
ec0ff50
License
MIT

Independent analysis of repository at github.com/umami-software/umami. Spotted an inaccuracy? Use the claim form to request a correction.

Show this stack on your README or website
Tech stack of Umami
[![Tech stack of Umami on STACK IT FAST](https://stackitfast.com/badge/umami.svg)](https://stackitfast.com/project/umami)

Paste it into your README. It shows your current stack and links to this page.

Use this stack

Scaffold it with your agent

Paste this prompt into Claude Code, Cursor, Windsurf or AGY to start a project with Umami's architecture.

  1. 1Copy the promptThe full markdown spec, with every layer and decision.
  2. 2Open your AI toolClaude Code, Cursor, Windsurf or Copilot, in a new repo.
  3. 3Paste and scaffoldUse it as the first instruction; review before you ship.
use-this-stack.md · 58 lines · 5.7 KB
# MISSION: Scaffold "Umami" Production Architecture
You are an expert Senior Staff Software Architect and Full-Stack Engineer. Your mission is to scaffold and implement a production-grade, highly reliable, and modular codebase following the proven architecture of **Umami**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Umami
- **What It Does**: Privacy-focused, open-source web analytics platform and Google Analytics alternative built with Next.js, React, and PostgreSQL.
- **Domain & Category**: Web Analytics
- **Production Scale**: Solo
- **Development Mode**: HYBRID
- **Architectural Rationale**: Umami provides cookie-free, GDPR-compliant website metrics and session replays with simple self-hosting and zero data monetization.
- **Live Website Reference**: https://umami.is
- **Source Repository**: https://github.com/umami-software/umami
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: TypeScript, Next.js, React, Prisma, PostgreSQL, ClickHouse, Redis, Docker
- **Primary Language(s)**: TypeScript, JavaScript, CSS, Dockerfile, Shell
- **License of the reference repo**: MIT
- **Frontend**: Next.js — Full-stack application framework serving analytics dashboards and API collection routes; React — Interactive analytics interface rendering timeseries charts, maps, and conversion funnels
- **Backend & APIs**: TypeScript — Type-safe codebase powering tracker compilation, collection APIs, and MCP servers
- **Data & persistence**: Prisma — ORM client managing database models, migrations, and read replicas for analytics entities; PostgreSQL — Primary relational persistence layer storing accounts, websites, events, and sessions; ClickHouse — High-volume columnar analytical store used in enterprise deployments for event queries; Redis — In-memory cache for visitor sessions, IP anonymization salts, and rate limiting
- **Infrastructure & deploy**: Docker — Production alpine container images packaging Next.js standalone builds and database scripts
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/umami-software/umami @ ec0ff50)
1. **Dual Persistence Support for PostgreSQL and ClickHouse**: Decouples relational query models through Prisma while offering high-throughput columnar event ingestion via native ClickHouse drivers for large deployments.
2. **Standalone Rollup Build for Privacy-First Tracker Script**: Compiles a lightweight, zero-dependency tracking snippet (under 3KB) using Rollup that collects analytics without setting persistent user cookies.
3. **Built-in Model Context Protocol Server**: Exposes analytics stats, real-time traffic queries, and metric aggregations to AI agents through a dedicated MCP server package (@umami/mcp).
4. **Session Replay Integration with rrweb**: Incorporates a privacy-conscious DOM session recorder in src/recorder using rrweb to capture user navigation funnels and playback sessions.
---
## 4. NON-NEGOTIABLE ARCHITECTURAL GUARDRAILS
1. **Monorepo & Modular Separation**:
   - Structure as a Turborepo monorepo with strict package boundaries:
     - `apps/web`: Application UI, routing, layouts, and server endpoints.
     - `packages/ui`: Shared design tokens, CSS variables, and Radix UI primitive components.
     - `packages/db`: Database schemas, client singleton, declarative migrations, and seed scripts.
     - `packages/config`: Shared TypeScript, ESLint, and build configurations.
2. **Strict Type Safety & Zero `any` Policy**:
   - Enable `strict: true`, `noImplicitAny: true`, and `strictNullChecks: true`.
   - Validate ALL external inputs, API request bodies, and query parameters with **Zod** schemas before execution.
3. **Frontend & Rendering Guidelines**:
   - Utilize Next.js 15 App Router: default to React Server Components (RSC) for data fetching. Handle mutations through Server Actions with Zod validation. Keep 'use client' directives restricted strictly to interactive leaf components.
4. **Design System & Aesthetics**:
   - Keep every color, radius, shadow and font in a single token file (CSS variables) and consume tokens everywhere; never hardcode hex values in components.
   - Prefer crisp 1px borders and one subtle shadow scale over blurry default shadows. Pair one sans-serif for body/headings with one monospace for tags, badges, metrics, and code.
5. **Data Layer & Reliability**:
   - Write declarative schema definitions with foreign keys, composite indexes on queried filters, and automated timestamp triggers.
   - Use connection pooling and prepared statements for serverless database execution.
---
## 5. STEP-BY-STEP SCAFFOLDING ROADMAP
- **Phase 1: Workspace & Root Config**: Initialize package manager, monorepo configuration (`turbo.json`, `tsconfig.base.json`, `package.json`).
- **Phase 2: Database Schema & Client**: Set up the data layer (Prisma, PostgreSQL, ClickHouse, Redis): client, connection pool, models, and migration scripts.
- **Phase 3: Design Tokens & UI Primitives**: Build accessible `Button`, `Input`, `Card`, `Badge`, and layout wrappers inside `packages/ui`.
- **Phase 4: Core Application Routes & Handlers**: Implement primary authentication, user session handling, and application routes.
- **Phase 5: Quality Assurance & Build Verification**: Run `tsc --noEmit`, ESLint, Prettier, and smoke test suites to ensure zero compilation or runtime errors.
---
## 6. EXECUTION INSTRUCTIONS
1. Review all specifications, architectural guardrails, and stack choices above.
2. Present the full monorepo directory tree structure.
3. Systematically generate the complete, production-ready codebase according to the 5-phase roadmap above — starting with the root workspace setup, followed by the database schema, UI design system package, and full-stack application routes until the repository is fully scaffolded and ready to run.
Scaffolded something with this prompt?
Would you pick this stack for a web analytics project?

Copied 1 time

Frequently asked about Umami

Does Umami require cookies to track visitor analytics?

No, Umami generates anonymous rotating daily visitor hashes without storing cookies or personally identifiable information on client devices.

Can Umami run with ClickHouse instead of PostgreSQL?

Yes, Umami includes native ClickHouse query drivers and migration schemas in db/clickhouse designed for high-volume analytics workloads.

What is Umami built with?

Umami is a TypeScript Next.js app with a React dashboard, Prisma over PostgreSQL for primary storage, optional ClickHouse for high-volume event queries, and Redis for sessions and rate limiting.

Is Umami built with Next.js?

Yes. Next.js serves both the React analytics dashboard and the API routes that collect tracking events, and production Docker images package a Next.js standalone build.

Can I self-host Umami?

Yes. Umami ships production Docker images that package the Next.js standalone build with its database scripts, and it runs against your own PostgreSQL (or ClickHouse) database.

One email a month: new deep dives and stack trends

New source-audited architectures, head-to-head comparisons and the monthly stack report. No spam, unsubscribe anytime.

use-this-stack.md