Bifrost UI
A modern, production-ready web interface for the Bifrost AI Gateway - providing real-time monitoring, configuration management, and comprehensive observability for your AI infrastructure.
Overview
Bifrost UI is a React + Vite + TanStack Router web dashboard that serves as the control center for your Bifrost AI Gateway. It provides an intuitive interface to monitor AI requests, configure providers, manage MCP clients, and analyze performance metrics.
Key Features
- Real-time Log Monitoring - Live streaming dashboard with WebSocket integration
- Provider Management - Configure 15+ AI providers
- MCP Integration - Manage Model Context Protocol clients for advanced AI capabilities
- Plugin System - Extend functionality with custom plugins
- Analytics Dashboard - Request metrics, success rates, latency tracking, and token usage
- Modern UI - Dark/light mode, responsive design, and accessible components
- Documentation Hub - Built-in documentation browser and quick-start guides
Quick Start
Prerequisites
The UI is designed to work with the Bifrost HTTP transport backend. Get started with the complete setup:
Development
# Install dependencies
npm install
# Start development server
npm run dev
The development server runs on http://localhost:3000 and connects to your Bifrost HTTP transport backend (default: http://localhost:8080).
Environment Variables
# Development only - customize Bifrost backend port
BIFROST_PORT=8080
Architecture
Technology Stack
- Framework: React 19 + Vite + TanStack Router
- Language: TypeScript
- Styling: Tailwind CSS + Radix UI components
- State Management: Redux Toolkit with RTK Query
- Real-time: WebSocket integration
- HTTP Client: Axios with typed service layer
- Theme: Dark/light mode support
Integration Model
┌─────────────────┐ HTTP/WebSocket ┌──────────────────┐
│ Bifrost UI │ ◄─────────────────► │ Bifrost HTTP │
│ (React+Vite) │ │ Transport (Go) │
└─────────────────┘ └──────────────────┘
│ │
│ Build artifacts │
└────────────────────────────────────────┘
- Development: UI runs on port 3000, connects to Go backend on port 8080
- Production: UI built as static assets served directly by Go HTTP transport
- Communication: REST API + WebSocket for real-time features
Features
Real-time Log Monitoring
The main dashboard provides comprehensive request monitoring with live updates via WebSocket, advanced filtering, and detailed request/response inspection.
Provider Configuration
Manage all your AI providers from a unified interface with support for multiple API keys, custom network configuration, and provider-specific settings.
MCP Client Management
Model Context Protocol integration for advanced AI capabilities including tool integration and connection monitoring.
Plugin Ecosystem
Extend Bifrost with powerful plugins for observability, testing, caching, and custom functionality.
Available Plugins:
- Maxim Logger - Advanced LLM observability
- Response Mocker - Mock responses for testing
- Semantic Cache - Intelligent response caching
- OpenTelemetry - Distributed tracing
Development
Project Structure
ui/
├── app/ # TanStack Router pages
│ ├── page.tsx # Main logs dashboard
│ ├── config/ # Provider & MCP configuration
│ ├── docs/ # Documentation browser
│ └── plugins/ # Plugin management
├── components/ # Reusable UI components
│ ├── logs/ # Log monitoring components
│ ├── config/ # Configuration forms
│ └── ui/ # Base UI components (Radix)
├── hooks/ # Custom React hooks
├── lib/ # Utilities and services
│ ├── store/ # Redux store and API slices
│ ├── types/ # TypeScript definitions
│ └── utils/ # Helper functions
└── scripts/ # Build and deployment scripts
API Integration
The UI uses Redux Toolkit + RTK Query for state management and API communication with the Bifrost HTTP transport backend:
// Example API usage with RTK Query
import { useGetLogsQuery, useCreateProviderMutation, getErrorMessage } from "@/lib/store";
// Get real-time logs with automatic caching
const { data: logs, error, isLoading } = useGetLogsQuery({ filters, pagination });
// Configure provider with optimistic updates
const [createProvider] = useCreateProviderMutation();
const handleCreate = async () => {
try {
await createProvider({
provider: "openai",
keys: [{ value: "sk-...", models: ["gpt-4"], weight: 1 }],
// ... other config
}).unwrap();
// Success handling
} catch (error) {
console.error(getErrorMessage(error));
}
};
Component Guidelines
- Composition: Use Radix UI primitives for accessibility
- Styling: Tailwind CSS with CSS variables for theming
- Types: Full TypeScript coverage matching Go backend schemas
- Error Handling: Consistent error states and user feedback
Adding New Features
- Backend Integration: Add API endpoints to RTK Query slices in
lib/store/ - Type Definitions: Update types in
lib/types/ - UI Components: Build with Radix UI and Tailwind
- State Management: Use RTK Query for API state, React hooks for local state
- Real-time Updates: Integrate WebSocket events when applicable
Configuration
Provider Setup
The UI supports comprehensive provider configuration including API keys with model assignments, network settings, and provider-specific options.
Complete Provider Configuration Guide →
Governance & Access Control
Configure virtual keys, budget limits, rate limiting, and team-based access control through the UI.
Real-time Features
WebSocket connection provides live log streaming, connection status monitoring, automatic reconnection, and filtered real-time updates.
Monitoring & Analytics
The dashboard provides comprehensive observability including request metrics, token usage tracking, provider performance analysis, error categorization, and historical trend analysis.
Contributing
We welcome contributions! See our Contributing Guide for:
- Code conventions and style guide
- Development setup and workflow
- Adding new providers or features
- Plugin development guidelines
Documentation
Complete Documentation: https://docs.getbifrost.ai
Quick Links
- Gateway Setup - Get started in 30 seconds
- Provider Configuration - Multi-provider setup
- MCP Integration - External tool calling
- Plugin Development - Build custom plugins
- Architecture - System design and internals
Need Help?
Join our Discord for community support and discussions.
Get help with:
- Quick setup assistance and troubleshooting
- Best practices and configuration tips
- Community discussions and support
- Real-time help with integrations
Links
- Main Repository: github.com/maximhq/bifrost
- HTTP Transport: ../transports/bifrost-http
- Documentation: docs.getbifrost.ai
- Website: getbifrost.ai
License
Licensed under the Apache 2.0 License - see the LICENSE file for details.
Built with ❤️ by Maxim