openframe-oss-frontend README

The project's README from github.com/flamingo-stack/openframe-oss-frontend. As one markdown file: README.md.

OpenFrame

License

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.

Community & Support

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:

Built with 💛 by the Flamingo team

openframe-oss-frontend (flamingo-stack/openframe-oss-frontend)

Searching Database…

852 ·GitHub
Openframe-oss-frontend
Что это такое?Это основное веб-приложение платформы OpenFrame — единая панель управления с ИИ для провайдеров управляемых услуг (MSP), которая позиционируется как открытая альтернатива дорогому проприетарному ПО для MSP.
Так это вся MSP-платформа или только интерфейс поверх неё?Только интерфейс — это слой представления и оркестрации, который взаимодействует с отдельными бэкенд-сервисами OpenFrame. Логика сервера и базы данных находится вне этого репозитория.
Как запустить его у себя локально?Установите Node.js 18+, npm 9+ и Git, клонируйте репозиторий, заполните минимальный набор переменных окружения URL-ами ваших бэкендов, затем выполните npm run dev (или npm run build && npm run start для продакшена).
А где здесь искусственный интеллект?Два встроенных ассистента: Mingo для техников — потоковый ИИ с выполнением инструментов, пониманием контекста и процессами подтверждения — и Fae, встраиваемый ИИ для клиентских порталов. Кроме того, у каждой организации может быть своя конфигурация ИИ с шаблонами ограничений (guardrails).
Может ли он работать сам по себе, или ему нужны бэкенды OpenFrame?Нужны бэкенд-сервисы OpenFrame: их URL-ы берутся из переменных окружения, а GraphQL-схема подтягивается с бэкенда командой npm run fetch-schema, так что один интерфейс мало на что годится.
Могу ли я управлять компьютерами клиентов напрямую отсюда?Да — для каждого устройства доступна удалённая оболочка во встроенном в браузер терминале, файловый менеджер и удалённый рабочий стол через MeshCentral, плюс кампании live-запросов osquery сразу по всему парку машин и планировщик скриптов с историей выполнения.
На каких технологиях это построено?Next.js 16 на App Router с React 19, Relay v20 для GraphQL-фрагментов, TanStack Query v5 для серверного состояния, Zustand v5 для состояния интерфейса на клиенте и Tailwind CSS — плюс xterm для удалённой оболочки и Monaco как редактор скриптов.
В комплекте идёт своя библиотека компонентов?Нет — общие UI-компоненты берутся из пакета @flamingo-stack/openframe-frontend-core, и даже правила ESLint наследуются из общего конфига этой библиотеки.
Почему Flamingo сделала это открыто?Заявленная цель — заменить дорогое проприетарное ПО для MSP интеллектуальными open-source решениями. Это приложение — «человеческий» слой экосистемы OpenFrame, объединяющий её бэкенд-сервисы в единый MSP-опыт с ИИ во главе.
What are similar projects?CopilotKit, sim, herdr-web-ui, ant-design-pro, clevis, labtether, open-glean, NodePilot
Which topics is it in?monaco-editor, xterm, multi-tenancy, relay, tailwind, remote-access, audit-log, sso, ai-assistant, state-management, graphql, knowledge-base
Creator
flamingo-stack
Size
13.5 MB
Stars
852
Updated
CommitOct 19Release1.0.176Oct 19
Age
3mo
Commits · 90 Days