OpenFrame OSS Frontend
OpenFrame OSS Frontend is the primary web application for the OpenFrame platform — a unified, AI-driven interface for Managed Service Providers (MSPs). It replaces expensive proprietary MSP software with intelligent open-source alternatives, bringing device management, ticketing, monitoring, scripts, and AI assistance into a single cohesive operational interface.
Built and maintained by Flamingo, this project is the human-facing layer of the OpenFrame ecosystem — connecting backend services into an AI-first MSP experience.
Features
| Feature |
Description |
| Device Management |
Unified device model, remote shell, file manager, remote desktop via MeshCentral |
| Customer Management |
Per-organization AI configuration, guardrails templates, aggregated device counts |
| Ticketing |
Kanban boards, AI-assisted replies, approval workflows, assignment management |
| Knowledge Base |
Article management, folder organization, attachment handling |
| Mingo AI (Technician) |
Streaming AI assistant with tool execution, context awareness, and approval flows |
| Customer AI (Fae) |
Embeddable AI for client-facing portals |
| Monitoring |
Fleet MDM policies, osquery live query campaigns, query execution |
| Scripts |
Script library, scheduling, execution history |
| Audit Logs |
Organization and device-level log viewer with cursor-based pagination |
| Settings & Billing |
Tenant config, SSO, API keys, subscription management |
| Onboarding |
Step-by-step guided setup for new tenants |
| Feature Flags |
Runtime-configurable feature toggles via Zustand |
Technology Stack
flowchart TD
FE["Next.js 16 App Router (React 19)"]
FE --> TS["TypeScript 5.8"]
FE --> GQL["GraphQL — graphql + Relay v20"]
FE --> RQ["TanStack Query v5"]
FE --> ZS["Zustand v5"]
FE --> TW["Tailwind CSS v3"]
FE --> FC["openframe-frontend-core"]
FE --> API["API Service Core"]
FE --> Chat["AI / Chat Service"]
FE --> Auth["Authorization Service"]
FE --> Fleet["Fleet MDM"]
FE --> Mesh["MeshCentral"]
Core Dependencies
| Package |
Version |
Purpose |
next |
^16.2.4 |
SSR + App Router framework |
react |
^19.2.0 |
UI library |
react-relay |
^20.1.1 |
GraphQL fragment system |
@tanstack/react-query |
^5.90.16 |
Server-state caching and pagination |
zustand |
^5.0.8 |
Client-side state management |
tailwindcss |
^3.4.17 |
Utility-first CSS |
@xterm/xterm |
^6.0.0 |
Terminal emulator for remote shell |
@monaco-editor/react |
^4.7.0 |
Script editor |
zod |
^4.3.6 |
Runtime schema validation |
@flamingo-stack/openframe-frontend-core |
^0.0.480 |
Shared UI component library |
Architecture
OpenFrame OSS Frontend acts as the presentation and orchestration layer on top of OpenFrame backend services.
flowchart LR
Browser["User Browser"] --> Frontend["OpenFrame OSS Frontend"]
Frontend -->|"GraphQL /api/graphql"| ApiService["API Service Core"]
Frontend -->|"REST /chat/api"| ChatService["AI / Chat Service"]
Frontend -->|"OAuth 2.0"| AuthService["Authorization Service"]
Frontend -->|"/tools/fleetmdm-server"| Fleet["Fleet MDM"]
Frontend -->|"/tools/meshcentral"| Mesh["MeshCentral"]
ApiService --> DataLayer["MongoDB / Cassandra / Apache Pinot"]
ChatService --> StreamLayer["Kafka / NATS"]
Application Domain Structure
The application is organized by feature domain under src/app:
flowchart TD
App["src/app"]
App --> Customers["customers/"]
App --> Devices["devices/"]
App --> Tickets["tickets/"]
App --> KnowledgeBase["knowledge-base/"]
App --> Logs["logs-page/"]
App --> Monitoring["monitoring/"]
App --> Scripts["scripts/"]
App --> Settings["settings/"]
App --> Mingo["mingo/"]
App --> Onboarding["onboarding/"]
App --> Lib["src/lib/ — API, Auth, Relay, MeshCentral"]
App --> Stores["src/stores/ — Zustand global state"]
State Management
The application uses three complementary state management approaches:
| Pattern |
Technology |
Used For |
| Server state |
TanStack Query v5 |
REST API calls, optimistic mutations, cursor pagination |
| GraphQL fragments |
Relay v20 |
Logs, scripts, notifications (streaming + pagination) |
| Client UI state |
Zustand v5 |
Feature flags, onboarding, Mingo chat, device filters |
Quick Start
Prerequisites: Node.js 18+, npm 9+, Git. See the Prerequisites Guide for full details.
# 1. Clone the repository
git clone https://github.com/flamingo-stack/openframe-oss-frontend.git
cd openframe-oss-frontend
# 2. Install dependencies
npm install
# 3. Configure environment
cp .env.example .env.local
# Edit .env.local with your backend URLs
# 4. Start the development server
npm run dev
Open http://localhost:3000 in your browser.
Minimum Environment Variables
NEXT_PUBLIC_TENANT_HOST_URL=https://your-tenant.openframe.dev
NEXT_PUBLIC_SHARED_HOST_URL=https://api.openframe.dev
NEXT_PUBLIC_APP_MODE=oss-tenant
NEXT_PUBLIC_APP_URL=http://localhost:3000
Refer to your environment configuration for actual backend URLs.
Available Scripts
| Script |
Description |
npm run dev |
Start development server with hot reload |
npm run build |
Generate schema enums + Relay artifacts + Next.js production build |
npm run start |
Start production server (after build) |
npm run lint |
Run ESLint (the fast pass; rules come from the core library's shared config) |
npm run lint:fix |
ESLint autofix |
npm run lint:types |
ESLint type-aware pass (slow — needs an 8 GB heap) |
npm run format:fix |
Auto-fix formatting with Prettier |
npm run type-check |
TypeScript type checking without emitting |
npm run relay |
Compile Relay GraphQL fragments |
npm run relay:watch |
Watch and recompile Relay fragments on change |
npm run fetch-schema |
Fetch the latest GraphQL schema from the backend |
Documentation
📚 See the Documentation for comprehensive guides including getting started tutorials, development workflows, architecture overviews, and API references.
OpenFrame OSS is supported through the OpenMSP Slack community — the primary channel for discussions, questions, and collaboration.
We do not use GitHub Issues or Discussions. All support and coordination happens in Slack.
Contributing
We welcome contributions! Please read the Contributing Guidelines before opening a pull request.
Key points:
- All code must be TypeScript with strict typing
- Follow the Conventional Commits format
- Run
npm run type-check, npm run lint, and npm run relay before submitting
- Coordinate in the OpenMSP Slack community before starting large features
它是 OpenFrame 平台的主 Web 应用——一个面向托管服务提供商(MSP)的统一 AI 驱动控制面板,定位为昂贵专有 MSP 软件的开源替代品。