Opik frontend

If you would like to contribute to the Opik frontend, please refer to the Contribution guide.

Project Structure

src/
├── api/              # API client and endpoint definitions
├── constants/        # Application-wide constants
├── contexts/         # React context providers
├── hooks/            # Shared custom hooks
├── lib/              # Utility libraries
├── plugins/          # Plugin integrations (e.g. Comet)
├── store/            # Zustand stores
├── types/            # Shared TypeScript types
│
├── ui/               # Base UI components (shadcn/ui + Radix)
├── shared/           # Shared business components (no API calls)
│
├── v1/               # Opik 1 — feature-organized navigation
│   ├── layout/       # App shell, sidebar, header
│   ├── pages/        # Route-level page components
│   └── pages-shared/ # Components shared across v1 pages
│
├── v2/               # Opik 2 — project-first navigation
│   ├── layout/       # App shell, sidebar, header
│   ├── pages/        # Route-level page components
│   └── pages-shared/ # Components shared across v2 pages
│
├── router.tsx        # Route definitions
└── index.tsx         # App entry point

Import rules

ui → shared (one-way only)
ui → shared → v1/pages-shared → v1/pages (one-way only)
ui → shared → v2/pages-shared → v2/pages (one-way only)
v1/ CANNOT import from v2/; v2/ CANNOT import from v1/
Validate with: npm run deps:validate

Environment Variables

Frontend (Runtime)

The following environment variables can be used to configure the Nginx container at runtime (see apps/opik-frontend/patch-nginx.conf.sh):

Variable	Default	Description
`NGINX_PID`	`/run/nginx.pid`	Path to the Nginx PID file.
`OTEL_COLLECTOR_HOST`	`otel-collector`	Hostname of the OpenTelemetry collector.
`OTEL_COLLECTOR_PORT`	`4317`	Port of the OpenTelemetry collector.
`OTEL_TRACES_EXPORTER`	`otlp`	Exporter type for OpenTelemetry.
`OTEL_EXPORTER_OTLP_TRACES_ENDPOINT`	`http://${OTEL_COLLECTOR_HOST}:${OTEL_COLLECTOR_PORT}`	Full endpoint URL for OTLP traces.
`NGINX_PORT`	`8080`	Port Nginx listens on.
`OTEL_TRACE`	`off`	Enable (`on`) or disable (`off`) OpenTelemetry tracing.
`NGINX_EXTRA_ACCESS_LOG`	(empty)	Additional access log configuration. e.g. `access_log syslog:server=otel-collector:5140 logger-json;`
`NGINX_EXTRA_ERROR_LOG`	(empty)	Additional error log configuration. e.g. `error_log syslog:server=otel-collector:5140 error;`

Backend (Build/Runtime)

The following variables are defined in the backend Dockerfile (apps/opik-backend/Dockerfile):

Variable	Default	Description
`OPIK_VERSION`	(Required)	Version of the Opik application (Build ARG & ENV).
`STORE_PASSWORD`	`changeit`	Truststore password for RDS certificates (Build ARG).