App Component Props

This page documents all props for App type components based on the type definitions in packages/mdxui/src/types/app-types.ts.

Base App Props

All app types extend from BaseApp with these common properties:

interface BaseApp {
  /** App display name */
  name: string
  /** Brief description of the application */
  description?: string
  /** Default views/pages to include in the app */
  defaultViews?: string[]
  /** Default panels/widgets to display in the app */
  defaultPanels?: string[]
  /** Navigation items for the app sidebar */
  navigation?: NavItem[]
  /** Application shell layout configuration */
  shell?: {
    /** Display the sidebar navigation */
    sidebar?: boolean  // default: true
    /** Display the header bar */
    header?: boolean  // default: true
    /** Start with sidebar collapsed */
    sidebarCollapsed?: boolean  // default: false
  }
  /** Theme configuration */
  theme?: {
    /** Theme preset name */
    preset?: string
    /** Theme color mode */
    mode?: 'light' | 'dark' | 'system'
    /** Custom theme overrides */
    custom?: Record<string, string>
  }
}

Dashboard App

Analytics, KPIs, and business intelligence.

interface DashboardApp extends BaseApp {
  config?: {
    /** Key metrics to display on dashboard */
    metrics?: string[]  // default: ['revenue', 'users', 'growth', 'retention']
    /** Default time period for metrics */
    defaultPeriod?: 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'  // default: 'month'
    /** Enable real-time metric updates */
    realtime?: boolean  // default: false
    /** Default chart types to display */
    charts?: string[]
  }
}

Default views: overview, analytics, reports Default panels: metrics, charts, recent-activity

Developer App

API keys, webhooks, usage metrics, and documentation.

interface DeveloperApp extends BaseApp {
  config?: {
    /** Display API keys management section */
    showAPIKeys?: boolean  // default: true
    /** Display webhooks configuration section */
    showWebhooks?: boolean  // default: true
    /** Display API usage metrics and analytics */
    showUsage?: boolean  // default: true
    /** Display API request logs */
    showLogs?: boolean  // default: true
    /** Display API documentation section */
    showDocs?: boolean  // default: true
    /** Base URL for API endpoints */
    apiBaseUrl?: string
    /** Available API versions (e.g., ["v1", "v2"]) */
    apiVersions?: string[]
  }
}

Default views: overview, api-keys, webhooks, usage, docs Default panels: api-keys, usage-metrics, recent-requests

Admin App

CRUD operations, user management, roles, and permissions.

interface AdminApp extends BaseApp {
  config?: {
    /** Database collections available for CRUD operations */
    collections?: string[]  // default: ['users', 'roles', 'permissions']
    /** Display user management interface */
    showUsers?: boolean  // default: true
    /** Display role management interface */
    showRoles?: boolean  // default: true
    /** Display audit log viewer */
    showAuditLogs?: boolean  // default: true
    /** Display system settings panel */
    showSettings?: boolean  // default: true
    /** Enable bulk edit/delete operations */
    enableBulkOps?: boolean  // default: true
  }
}

Default views: users, roles, permissions, audit-logs, settings Default panels: user-stats, recent-activity, system-health

SaaS App

Multi-tenant product applications.

interface SaaSApp extends BaseApp {
  config?: {
    /** Enable multi-tenant architecture */
    multiTenant?: boolean  // default: true
    /** Display workspace/organization switcher */
    showWorkspaceSwitcher?: boolean  // default: true
    /** Display billing and subscription management */
    showBilling?: boolean  // default: true
    /** Display team member management */
    showTeam?: boolean  // default: true
    /** Display third-party integrations */
    showIntegrations?: boolean  // default: true
    /** Available pricing tiers (e.g., ["free", "pro", "enterprise"]) */
    pricingTiers?: string[]
    /** Feature flags for toggling functionality */
    features?: Record<string, boolean>
  }
}

Default views: dashboard, workspace, team, billing, integrations Default panels: usage, team-activity, billing-summary

Data App

Datasets, data sources, and ETL pipelines.

interface DataApp extends BaseApp {
  config?: {
    /** Display datasets browser */
    showDatasets?: boolean  // default: true
    /** Display data sources management */
    showSources?: boolean  // default: true
    /** Display ETL pipelines and transformations */
    showPipelines?: boolean  // default: true
    /** Display SQL/query explorer */
    showQueryExplorer?: boolean  // default: true
    /** Display data quality metrics */
    showQuality?: boolean  // default: true
    /** Supported data source types (e.g., ["postgres", "mysql", "s3"]) */
    sourceTypes?: string[]
    /** Maximum dataset size limit */
    maxDatasetSize?: string
  }
}

Default views: datasets, sources, pipelines, explorer, quality Default panels: dataset-stats, pipeline-status, data-quality

Headless App

MCP servers, AI agents, and API-first applications.

interface HeadlessApp extends BaseApp {
  config?: {
    /** Display MCP (Model Context Protocol) servers */
    showMCPServers?: boolean  // default: true
    /** Display AI agents management */
    showAgents?: boolean  // default: true
    /** Display interactive API playground */
    showPlayground?: boolean  // default: true
    /** Display API schema explorer */
    showSchema?: boolean  // default: true
    /** GraphQL API endpoint URL */
    graphqlEndpoint?: string
    /** REST API endpoint URL */
    restEndpoint?: string
    /** Supported API protocols */
    protocols?: Array<'rest' | 'graphql' | 'grpc' | 'websocket'>
  }
}

Default views: servers, agents, playground, schema, docs Default panels: api-status, recent-requests, schema-explorer

CRM App

Contacts, companies, deals, and pipeline management.

interface CRMApp extends BaseApp {
  config?: {
    /** Display contacts management */
    showContacts?: boolean  // default: true
    /** Display companies/accounts management */
    showCompanies?: boolean  // default: true
    /** Display deals/opportunities tracking */
    showDeals?: boolean  // default: true
    /** Display sales pipeline visualization */
    showPipeline?: boolean  // default: true
    /** Display activities and tasks */
    showActivities?: boolean  // default: true
    /** Display email integration features */
    showEmail?: boolean  // default: false
    /** Sales pipeline stages (e.g., ["lead", "qualified", "proposal", "closed"]) */
    pipelineStages?: string[]
    /** Currency code for deal values */
    currency?: string  // default: 'USD'
  }
}

Default views: contacts, companies, deals, pipeline, activities Default panels: pipeline-overview, recent-deals, activities

Booking App

Calendar, appointments, scheduling, and availability.

interface BookingApp extends BaseApp {
  config?: {
    /** Display calendar view */
    showCalendar?: boolean  // default: true
    /** Display appointments list */
    showAppointments?: boolean  // default: true
    /** Display availability management */
    showAvailability?: boolean  // default: true
    /** Display booking page builder */
    showBookingPages?: boolean  // default: true
    /** Enable appointment reminders */
    enableReminders?: boolean  // default: true
    /** Enable waiting list for fully booked slots */
    enableWaitingList?: boolean  // default: false
    /** Available appointment durations in minutes */
    durationOptions?: number[]  // default: [15, 30, 45, 60]
    /** Default timezone (e.g., "America/New_York") */
    timezone?: string
  }
}

Default views: calendar, appointments, availability, booking-pages Default panels: upcoming-appointments, availability, booking-stats

Support App

Tickets, inbox, knowledge base, and customer support.

interface SupportApp extends BaseApp {
  config?: {
    /** Display ticket inbox view */
    showInbox?: boolean  // default: true
    /** Display all tickets list */
    showTickets?: boolean  // default: true
    /** Display knowledge base articles */
    showKnowledgeBase?: boolean  // default: true
    /** Enable live chat support */
    showLiveChat?: boolean  // default: false
    /** Display customer profiles */
    showCustomers?: boolean  // default: true
    /** Available ticket statuses */
    ticketStatuses?: string[]  // default: ['open', 'pending', 'resolved', 'closed']
    /** Available ticket priorities */
    ticketPriorities?: string[]  // default: ['low', 'medium', 'high', 'urgent']
    /** Enable SLA (Service Level Agreement) tracking */
    enableSLA?: boolean  // default: false
  }
}

Default views: inbox, tickets, knowledge-base, customers Default panels: ticket-queue, customer-info, kb-articles

Agency App

Clients, projects, deliverables, and time tracking.

interface AgencyApp extends BaseApp {
  config?: {
    /** Display clients management */
    showClients?: boolean  // default: true
    /** Display projects management */
    showProjects?: boolean  // default: true
    /** Display task management */
    showTasks?: boolean  // default: true
    /** Display time tracking interface */
    showTimeTracking?: boolean  // default: true
    /** Display invoicing and billing */
    showInvoicing?: boolean  // default: true
    /** Display proposal creation and management */
    showProposals?: boolean  // default: false
    /** Available project statuses */
    projectStatuses?: string[]  // default: ['planning', 'active', 'on-hold', 'completed']
    /** Time tracking method */
    timeTrackingMethod?: 'manual' | 'timer' | 'both'  // default: 'both'
  }
}

Default views: clients, projects, tasks, time-tracking, invoices Default panels: project-status, time-entries, invoice-summary

Ops App

Incidents, monitoring, SLAs, and on-call management.

interface OpsApp extends BaseApp {
  config?: {
    /** Display incident management */
    showIncidents?: boolean  // default: true
    /** Display monitoring and alerts */
    showMonitoring?: boolean  // default: true
    /** Display on-call schedule */
    showOnCall?: boolean  // default: true
    /** Display public status page */
    showStatusPage?: boolean  // default: true
    /** Display postmortem reports */
    showPostmortems?: boolean  // default: false
    /** Incident severity levels */
    severityLevels?: string[]  // default: ['sev1', 'sev2', 'sev3', 'sev4']
    /** Alert notification channels (e.g., ["slack", "email", "pagerduty"]) */
    alertChannels?: string[]
    /** Enable automatic incident escalation */
    enableAutoEscalation?: boolean  // default: true
  }
}

Default views: incidents, monitoring, on-call, status-page, postmortems Default panels: incident-timeline, alert-status, on-call-schedule

Agent App

AI agent management, MCP tools, and prompt engineering.

interface AgentApp extends BaseApp {
  config?: {
    /** Display AI agents list */
    showAgents?: boolean  // default: true
    /** Display MCP tools management */
    showMCPTools?: boolean  // default: true
    /** Display prompt templates */
    showPrompts?: boolean  // default: true
    /** Display agent execution logs */
    showRuns?: boolean  // default: true
    /** Display training data management */
    showTrainingData?: boolean  // default: false
    /** Supported AI model providers (e.g., ["openai", "anthropic"]) */
    modelProviders?: string[]
    /** Available agent types (e.g., ["chat", "task", "research"]) */
    agentTypes?: string[]
    /** Enable agent testing playground */
    enablePlayground?: boolean  // default: true
  }
}

Default views: agents, tools, prompts, runs, playground Default panels: agent-status, recent-runs, tool-usage

Workflow App

Automation builder, triggers, actions, and integrations.

interface WorkflowApp extends BaseApp {
  config?: {
    /** Display workflows list */
    showWorkflows?: boolean  // default: true
    /** Display visual workflow builder */
    showBuilder?: boolean  // default: true
    /** Display workflow execution history */
    showRuns?: boolean  // default: true
    /** Display integrations marketplace */
    showIntegrations?: boolean  // default: true
    /** Display workflow templates */
    showTemplates?: boolean  // default: true
    /** Available workflow triggers (e.g., ["webhook", "schedule", "manual"]) */
    triggers?: string[]
    /** Available workflow actions (e.g., ["http", "email", "database"]) */
    actions?: string[]
    /** Enable drag-and-drop workflow builder */
    enableVisualBuilder?: boolean  // default: true
  }
}

Default views: workflows, builder, runs, integrations, templates Default panels: workflow-status, recent-runs, integration-health

Infra App

Compute, storage, network, and cloud infrastructure.

interface InfraApp extends BaseApp {
  config?: {
    /** Display compute resources (VMs, containers) */
    showCompute?: boolean  // default: true
    /** Display storage resources (volumes, buckets) */
    showStorage?: boolean  // default: true
    /** Display network resources (VPCs, load balancers) */
    showNetwork?: boolean  // default: true
    /** Display database resources */
    showDatabases?: boolean  // default: true
    /** Display infrastructure monitoring */
    showMonitoring?: boolean  // default: true
    /** Display cost analysis and optimization */
    showCosts?: boolean  // default: true
    /** Supported cloud providers (e.g., ["aws", "gcp", "azure"]) */
    cloudProviders?: string[]
    /** Enable infrastructure-as-code features */
    enableIaC?: boolean  // default: false
  }
}

Default views: compute, storage, network, databases, monitoring, costs Default panels: resource-usage, cost-breakdown, alerts

Platform App

Apps, deployments, environments, and platform engineering.

interface PlatformApp extends BaseApp {
  config?: {
    /** Display applications management */
    showApps?: boolean  // default: true
    /** Display deployment history and status */
    showDeployments?: boolean  // default: true
    /** Display environments management */
    showEnvironments?: boolean  // default: true
    /** Display services and microservices */
    showServices?: boolean  // default: true
    /** Display CI/CD pipelines */
    showPipelines?: boolean  // default: true
    /** Display observability (logs, metrics, traces) */
    showObservability?: boolean  // default: true
    /** Available deployment environments */
    environments?: string[]  // default: ['development', 'staging', 'production']
    /** Enable GitOps workflows */
    enableGitOps?: boolean  // default: false
  }
}

Default views: apps, deployments, environments, services, pipelines Default panels: deployment-status, service-health, pipeline-runs

ClientPortal App

Client-facing portal with projects, invoices, and deliverables.

interface ClientPortalApp extends BaseApp {
  config?: {
    /** Display client projects */
    showProjects?: boolean  // default: true
    /** Display invoices and payments */
    showInvoices?: boolean  // default: true
    /** Display deliverables and file sharing */
    showDeliverables?: boolean  // default: true
    /** Display messaging interface */
    showMessages?: boolean  // default: true
    /** Display support ticket system */
    showSupport?: boolean  // default: false
    /** Enable client feedback forms */
    enableFeedback?: boolean  // default: true
    /** Enable client file uploads */
    enableUploads?: boolean  // default: true
    /** Allow custom branding per client */
    customBranding?: boolean  // default: true
  }
}

Default views: projects, invoices, deliverables, messages Default panels: project-status, recent-invoices, new-messages

VibeCode App

Chat + Preview + Code three-panel development environment.

interface VibeCodeApp extends BaseApp {
  config?: {
    /** Display AI chat panel */
    showChat?: boolean  // default: true
    /** Display live preview panel */
    showPreview?: boolean  // default: true
    /** Display code editor panel */
    showCode?: boolean  // default: true
    /** Default three-panel layout arrangement */
    defaultLayout?: 'horizontal' | 'vertical' | 'grid'  // default: 'horizontal'
    /** Enable AI-powered code generation */
    enableAIGeneration?: boolean  // default: true
    /** Enable real-time preview updates */
    enableLivePreview?: boolean  // default: true
    /** Supported programming languages */
    languages?: string[]
    /** Available editor color themes */
    editorThemes?: string[]
  }
}

Default views: editor Default panels: chat, preview, code

Common Types

NavItem

Navigation item structure used across all apps:

interface NavItem {
  label: string
  href: string
  icon?: string
  description?: string
  children?: NavItem[]
}

App Component Props

On this page