Web UI

Relevant source files

• CHANGELOG.md
• CONTRIBUTING.md
• README.md
• docs/SUMMARY.md
• docs/getting-started/quickstart.md
• docs/getting-started/third-party-integrations.md
• docs/how-to-guides/feast-on-kubernetes.md
• docs/how-to-guides/running-feast-in-production.md
• docs/project/maintainers.md
• docs/reference/feature-servers/offline-feature-server.md
• docs/reference/registries/README.md
• docs/reference/registries/hdfs.md
• docs/reference/registries/metadata.md
• docs/roadmap.md
• examples/quickstart/quickstart.ipynb
• infra/charts/feast/Chart.yaml
• infra/charts/feast/README.md
• infra/charts/feast/charts/feature-server/Chart.yaml
• infra/charts/feast/charts/feature-server/README.md
• infra/charts/feast/charts/feature-server/values.yaml
• infra/charts/feast/charts/transformation-service/Chart.yaml
• infra/charts/feast/charts/transformation-service/README.md
• infra/charts/feast/charts/transformation-service/values.yaml
• infra/charts/feast/requirements.yaml
• infra/feast-operator/README.md
• infra/feast-operator/config/samples/kustomization.yaml
• infra/templates/README.md.jinja2
• java/pom.xml
• sdk/python/feast/infra/registry/contrib/hdfs/__init__.py
• sdk/python/feast/infra/registry/contrib/hdfs/hdfs_registry_store.py
• sdk/python/tests/unit/infra/registry/test_sql_registry.py

The Feast Web UI is a React-based web application that provides a graphical interface for browsing and exploring the Feast feature registry. It enables users to discover features, feature views, entities, data sources, and their relationships without requiring direct interaction with the Python SDK or CLI.

For information about serving features for model inference, see Python Feature Server, Go Feature Server, and Java Feature Server.

Purpose and Capabilities

The Web UI provides the following capabilities:

• Feature Discovery: Browse and search feature views, entities, feature services, and data sources
• Metadata Inspection: View detailed metadata, schemas, tags, and descriptions for Feast objects
• Relationship Visualization: Visualize relationships between features, entities, and data sources
• Registry Exploration: Navigate the complete feature registry without writing code

The UI is currently in Beta status and is primarily designed for development and exploration workflows rather than production monitoring.

Sources: docs/SUMMARY.md160 README.md63-66 docs/roadmap.md76

Architecture Overview

The Web UI is a standalone React application that is bundled and served when users run the feast ui command from the Feast CLI. The CLI starts a local web server that serves the static files from the ui/build/ directory and provides API endpoints for the React application to fetch feature store metadata from the registry.

Sources: ui/package.json1-161 docs/getting-started/quickstart.md36 docs/reference/registries/README.md1-36

Package Structure

The UI is published as an npm package @feast-dev/feast-ui with the following structure:

Entry Point	Type	Path	Description
CommonJS	Main	./dist/feast-ui.cjs	Node.js compatible bundle
ES Module	Module	./dist/feast-ui.module.js	Modern JavaScript module
TypeScript	Types	./dist/FeastUI.d.ts	Type definitions

The package can be used both as a standalone application (via feast ui) and as a library that can be embedded in other applications.

Sources: ui/package.json8-10

Technology Stack

Core Dependencies

Dependency	Version	Purpose
react	18.3.1	UI framework
react-dom	18.3.1	DOM rendering
@elastic/eui	95.12.0	Component library and design system
@emotion/react	11.13.3	CSS-in-JS styling
react-query	3.39.3	Async state management and data fetching
react-router-dom	6.28.0	Client-side routing
reactflow	11.11.4	Interactive node-based diagrams
dagre	0.8.5	Graph layout algorithms
protobufjs	7.4.0	Protocol Buffer serialization
moment	2.29.1	Date/time manipulation
query-string	7.1.1	URL query parameter parsing
zod	3.11.6	Schema validation

Sources: ui/package.json25-46

Development Dependencies

The build system uses:

• TypeScript (5.7.2): Type checking and compilation
• Webpack (5.64.4): Module bundling for development
• Rollup (2.68.0): Library bundling for distribution
• Jest (29.7.0): Testing framework
• @happy-dom/jest-environment (16.7.3): DOM simulation for tests
• Prettier (3.5.3): Code formatting
• ESLint (8.3.0): Code linting

Sources: ui/package.json61-139

Protocol Buffer Integration

The UI uses Protocol Buffers to communicate with the Feast registry and ensure type safety across the system.

Proto Code Generation

The proto generation is handled by the generate-protos script:

This script:

1. Uses pbjs to generate JavaScript from .proto files in ../protos/feast/
2. Outputs a CommonJS static module to src/protos.js
3. Uses pbts to generate TypeScript definitions in src/protos.d.ts
4. Is executed before every build via the start, build, build:lib, and test scripts

Sources: ui/package.json49-56

Timestamp Handling

The UI provides utilities for converting Protocol Buffer timestamps to JavaScript Date objects:

The toDate function handles both Long and number types for timestamp seconds, ensuring compatibility across different protobuf implementations.

Sources: ui/src/utils/timestamp.ts1-14

Build System

Build Scripts

Script	Command	Purpose
start	npm run generate-protos && node scripts/start.js	Start development server
build	npm run generate-protos && node scripts/build.js	Production build for standalone app
build:lib	npm run generate-protos && rimraf ./dist && tsc --project ./tsconfig.build-lib.json && rollup -c	Library build for npm distribution
test	npm run generate-protos && node scripts/test.js	Run test suite
format	prettier --write .	Format code
format:check	prettier --check .	Check code formatting

Sources: ui/package.json48-56

Development Workflow

The development server is configured in ui/config/webpackDevServer.config.js1-109 and provides:

• Hot Module Replacement: Automatic browser refresh on code changes
• Source Maps: For debugging TypeScript in the browser
• Proxy Support: Can proxy API requests to a backend server
• HTTPS Support: Optional SSL configuration

Sources: ui/config/webpackDevServer.config.js1-109 ui/config/webpack.config.js1-753

Production Build

The production build:

1. Generates protobuf code
2. Compiles TypeScript to JavaScript
3. Bundles all modules using Webpack
4. Minifies JavaScript using Terser
5. Optimizes CSS using CssMinimizerPlugin
6. Generates source maps
7. Outputs static files to build/ directory

Sources: ui/config/webpack.config.js1-753

Library Build

For embedding the UI in other applications, the library build uses Rollup:

Rollup produces:

• CommonJS bundle (feast-ui.cjs): For Node.js environments
• ES Module bundle (feast-ui.module.js): For modern JavaScript bundlers
• TypeScript declarations (FeastUI.d.ts): For type checking

Sources: ui/package.json51

Testing Infrastructure

Test Configuration

The UI uses Jest with Happy DOM for testing:

Key testing configuration:

• Test Environment: @happy-dom/jest-environment for DOM simulation
• Test Pattern: src/**/*.{spec,test}.{js,jsx,ts,tsx}
• Transform: Babel for TypeScript/JSX, custom transforms for CSS and assets
• Setup: src/setupTests.ts configures testing library and polyfills
• MSW Integration: Mock Service Worker (2.7.0) for API mocking

Sources: ui/jest.config.js1-54 ui/src/setupTests.ts1-10

Transform Configuration

File Type	Transform	Output
.js, .jsx, .ts, .tsx	config/jest/babelTransform.js	Transpiled JavaScript
.css	config/jest/cssTransform.js	Empty object
Other assets	config/jest/fileTransform.js	Filename string

Sources: ui/jest.config.js19-24 ui/config/jest/cssTransform.js1-15 ui/config/jest/fileTransform.js1-30

Module Resolution

Jest is configured to transform node_modules that use ESM:

This ensures that ESM-only packages are properly transpiled for the CommonJS test environment.

Sources: ui/jest.config.js1

Running the Web UI

Starting the UI

The Web UI is started via the Feast CLI:

This command (implemented in the CLI at the feast command entrypoint):

1. Initializes a FeatureStore instance from the current repository's feature_store.yaml
2. Reads the registry (file-based, SQL, or remote) to load feature store metadata
3. Starts a local web server serving the React application from ui/build/
4. Opens the UI in the default web browser (typically at http://localhost:3000)

The UI communicates with the Feast Python SDK through the web server to retrieve and display metadata. Users can browse:

• Feature Views: Batch, stream, and on-demand feature definitions with schemas and transformations
• Entities: Join keys and entity metadata
• Feature Services: Grouped feature sets for models (e.g., driver_activity_v1)
• Data Sources: Batch and stream data source configurations (e.g., FileSource, BigQuerySource)
• Relationships: Visualize how features depend on entities and data sources using the reactflow library

The UI is read-only and does not modify the registry. For applying changes to feature definitions, users must use feast apply via the CLI or Python SDK.

Sources: README.md63-68 docs/getting-started/quickstart.md495-496 ui/package.json40

Deployment on Kubernetes

The Web UI can be deployed on Kubernetes using the Feast Operator. A sample configuration is available at infra/feast-operator/config/samples/v1_featurestore_with_ui.yaml:

The operator will:

1. Create a Deployment for the UI pods
2. Create a Service to expose the UI
3. Configure the UI to connect to the registry specified in the FeatureStore CR

The complete list of sample configurations, including the UI sample, is defined in infra/feast-operator/config/samples/kustomization.yaml1-6

Sources: infra/feast-operator/config/samples/kustomization.yaml1-6 infra/feast-operator/README.md1-166

Integration with Feast Core

Registry Access

The UI reads from the Feast registry to display metadata. It supports all registry implementations through the FeatureStore class:

• File Registry: Local file-based storage (default), S3, GCS, or HDFS
• SQL Registry: PostgreSQL, MySQL, SQLite via SqlRegistry
• Snowflake Registry: Snowflake-backed registry via SnowflakeRegistry
• Remote Registry: Remote gRPC registry server via RemoteRegistry

The registry type is configured in feature_store.yaml under the registry section. The UI automatically adapts to whatever registry backend is configured.

Sources: docs/reference/registries/README.md1-36 sdk/python/feast/infra/registry/contrib/hdfs/hdfs_registry_store.py1-122 sdk/python/tests/unit/infra/registry/test_sql_registry.py1-59

Feature Discovery

The UI enables discovery through:

1. List Views: Browse all feature views, entities, and data sources
2. Search: Find features by name, tags, or description
3. Detail Views: Inspect full metadata including schema, transformations, and TTL
4. Relationship Graphs: Visualize how features depend on entities and data sources

Sources: README.md236-241 docs/roadmap.md70-77

Node.js Version

The UI requires Node.js version 22.13.1 as specified in ui/.nvmrc1

For development, it is recommended to use a Node version manager (nvm) to ensure the correct version:

Sources: ui/.nvmrc1

Configuration Files

The UI build system uses several configuration files:

File	Purpose
config/webpack.config.js	Webpack bundler configuration for dev and prod
config/webpackDevServer.config.js	Development server settings
config/paths.js	Path resolution for build system
config/modules.js	Module resolution configuration
config/getHttpsConfig.js	HTTPS/SSL certificate handling
config/jest/babelTransform.js	Babel transform for Jest
config/jest/cssTransform.js	CSS mock for Jest
config/jest/fileTransform.js	Asset mock for Jest
jest.config.js	Jest test configuration
tsconfig.json	TypeScript compiler settings
tsconfig.build-lib.json	TypeScript settings for library build
rollup.config.js	Rollup bundler for library build

Sources: ui/config/webpack.config.js1-753 ui/config/webpackDevServer.config.js1-109 ui/config/paths.js1-76 ui/config/modules.js1-131 ui/jest.config.js1-54

Browser Support

The UI supports modern browsers as specified in the browserslist configuration:

This targets:

• Last 2 versions of major browsers
• Browsers with >0.5% market share
• Excludes dead browsers

Sources: ui/package.json58-60