How Products render as full applications - ProductApp, ProductView, ProductPanel

Product as App

A Product can render as a complete application with its own views, panels, and navigation. The rendering adapts based on the product type - SaaS products get different interfaces than API products, Data products, or Headless services.

ProductApp

The ProductApp component renders a Product as a full application shell with navigation, views, and panels appropriate for the product type.

Props

interface ProductAppProps {
  /** Product to render */
  product: string | Product
  /** App configuration override */
  config?: {
    /** Custom navigation items */
    navigation?: NavItem[]
    /** Shell layout options */
    shell?: {
      sidebar?: boolean
      header?: boolean
      sidebarCollapsed?: boolean
    }
    /** Theme settings */
    theme?: {
      preset?: string
      mode?: 'light' | 'dark' | 'system'
      custom?: Record<string, string>
    }
  }
  /** Loading state */
  loading?: boolean
  /** Error state */
  error?: string
  /** Custom className */
  className?: string
}

Usage

import { ProductApp } from '@mdxui/cockpit'

// Render full product application
<ProductApp product={product} />

// With custom config
<ProductApp
  product={product}
  config={{
    navigation: [
      { label: 'Overview', href: '/overview', icon: 'Home' },
      { label: 'Analytics', href: '/analytics', icon: 'BarChart' },
      { label: 'Settings', href: '/settings', icon: 'Settings' },
    ],
    shell: {
      sidebar: true,
      header: true,
      sidebarCollapsed: false,
    },
  }}
/>

Product Type Adaptations

The ProductApp automatically configures itself based on product type:

SaaS Product → SaaSApp

// SaaS product renders with:
<SaaSApp product={saasProduct}>
  <Shell>
    <Sidebar navigation={[
      'Dashboard',
      'Workspaces',
      'Team',
      'Billing',
      'Settings',
    ]} />
    <MainContent>
      <DashboardView />
    </MainContent>
  </Shell>
</SaaSApp>

Default Views:

Dashboard: Key metrics, usage, activity
Workspaces: Multi-tenant workspace management
Team: Members, roles, invitations
Billing: Subscription, invoices, payment methods
Settings: App preferences, integrations

Default Panels:

UsageMetrics: Current plan usage
RecentActivity: Latest user activity
QuickActions: Common tasks
WorkspaceSwitcher: Switch between workspaces

API Product → DeveloperApp

// API product renders with:
<DeveloperApp product={apiProduct}>
  <Shell>
    <Sidebar navigation={[
      'Overview',
      'API Keys',
      'Webhooks',
      'Usage',
      'Logs',
      'Documentation',
    ]} />
    <MainContent>
      <DashboardView />
    </MainContent>
  </Shell>
</DeveloperApp>

Default Views:

Overview: API status, quick stats
API Keys: Create, rotate, revoke keys
Webhooks: Configure webhook endpoints
Usage: Request counts, rate limits
Logs: Request/response logs
Documentation: API reference

Default Panels:

APIStatus: Endpoint health
UsageMetrics: Requests, bandwidth
RecentRequests: Latest API calls
QuickStart: Getting started guide

Data Product → DataApp

// Data product renders with:
<DataApp product={dataProduct}>
  <Shell>
    <Sidebar navigation={[
      'Datasets',
      'Sources',
      'Pipelines',
      'Query Explorer',
      'Quality',
      'Usage',
    ]} />
    <MainContent>
      <DashboardView />
    </MainContent>
  </Shell>
</DataApp>

Default Views:

Datasets: Browse available datasets
Sources: Manage data sources
Pipelines: ETL pipeline status
Query Explorer: SQL/query interface
Quality: Data quality metrics
Usage: Storage, query usage

Default Panels:

DatasetStats: Row counts, size
PipelineStatus: Active pipelines
RecentQueries: Latest queries
QualityScore: Data quality metrics

Headless Product → HeadlessApp

// Headless product renders with:
<HeadlessApp product={headlessProduct}>
  <Shell>
    <Sidebar navigation={[
      'MCP Servers',
      'AI Agents',
      'API Playground',
      'Schema',
      'Usage',
      'Logs',
    ]} />
    <MainContent>
      <DashboardView />
    </MainContent>
  </Shell>
</HeadlessApp>

Default Views:

MCP Servers: Model Context Protocol servers
AI Agents: Agent configuration
API Playground: Interactive testing
Schema: API schema explorer
Usage: Request metrics
Logs: Request/response logs

Default Panels:

MCPStatus: Server status
AgentActivity: Recent agent runs
APIMetrics: Request stats
QuickTest: API testing widget

ProductView

The ProductView component renders a single view/page within a product application.

Props

interface ProductViewProps extends BaseViewProps {
  /** Product context */
  product: string | Product
  /** View type to render */
  viewType:
    | 'dashboard'
    | 'settings'
    | 'usage'
    | 'apiKeys'
    | 'webhooks'
    | 'team'
    | 'billing'
    | 'datasets'
    | 'sources'
    | 'pipelines'
    | 'mcpServers'
    | 'agents'
    | 'playground'
  /** View-specific data */
  data?: any
  /** Custom panels to display */
  panels?: Array<{
    type: string
    props?: Record<string, any>
  }>
}

Usage

import { ProductView } from '@mdxui/cockpit'

// Render specific view for a product
<ProductView
  product={product}
  viewType="dashboard"
/>

// With custom panels
<ProductView
  product={product}
  viewType="usage"
  panels={[
    { type: 'UsageMetrics', props: { period: 'week' } },
    { type: 'UsageChart', props: { metric: 'requests' } },
    { type: 'RateLimitStatus' },
  ]}
/>

View Type Examples

Dashboard View

<ProductView
  product={apiProduct}
  viewType="dashboard"
  panels={[
    { type: 'APIStatus', props: { realtime: true } },
    { type: 'UsageMetrics', props: { period: 'month' } },
    { type: 'RecentRequests', props: { limit: 10 } },
    { type: 'QuickStart' },
  ]}
/>

API Keys View

<ProductView
  product={apiProduct}
  viewType="apiKeys"
  data={{
    keys: [
      {
        id: 'key_1',
        name: 'Production',
        key: 'sk_live_••••••••',
        created: '2024-01-15',
        lastUsed: '2024-03-20',
        scopes: ['read', 'write'],
      },
    ],
    allowCreate: true,
    showUsage: true,
  }}
/>

ProductPanel

The ProductPanel component renders individual panels/widgets within product views.

Props

interface ProductPanelProps {
  /** Product context */
  product: string | Product
  /** Panel type to render */
  panelType:
    | 'usageMetrics'
    | 'apiStatus'
    | 'recentActivity'
    | 'quickActions'
    | 'workspaceSwitcher'
    | 'datasetStats'
    | 'pipelineStatus'
    | 'mcpStatus'
    | 'agentActivity'
    | 'quickStart'
  /** Panel-specific configuration */
  config?: Record<string, any>
  /** Custom className */
  className?: string
  /** Collapsible panel */
  collapsible?: boolean
  /** Initially collapsed */
  defaultCollapsed?: boolean
}

Usage

import { ProductPanel } from '@mdxui/cockpit'

// Render usage metrics panel
<ProductPanel
  product={apiProduct}
  panelType="usageMetrics"
  config={{
    period: 'month',
    metrics: ['requests', 'bandwidth', 'errors'],
  }}
/>

// Collapsible panel
<ProductPanel
  product={saasProduct}
  panelType="quickActions"
  collapsible={true}
  defaultCollapsed={false}
/>

Panel Types by Product

SaaS Product Panels

// Usage metrics for SaaS
<ProductPanel
  product={saasProduct}
  panelType="usageMetrics"
  config={{
    metrics: ['seats', 'storage', 'apiRequests'],
    showLimits: true,
  }}
/>

// Workspace switcher
<ProductPanel
  product={saasProduct}
  panelType="workspaceSwitcher"
  config={{
    showCreateNew: true,
    groupByRole: true,
  }}
/>

// Recent activity
<ProductPanel
  product={saasProduct}
  panelType="recentActivity"
  config={{
    limit: 20,
    types: ['user.login', 'workspace.created', 'member.invited'],
  }}
/>

API Product Panels

// API status panel
<ProductPanel
  product={apiProduct}
  panelType="apiStatus"
  config={{
    endpoints: ['/v1/users', '/v1/posts'],
    showLatency: true,
    realtime: true,
  }}
/>

// Usage metrics
<ProductPanel
  product={apiProduct}
  panelType="usageMetrics"
  config={{
    metrics: ['requests', 'bandwidth', 'errors'],
    period: 'week',
    groupBy: 'endpoint',
  }}
/>

// Quick start guide
<ProductPanel
  product={apiProduct}
  panelType="quickStart"
  config={{
    language: 'typescript',
    showSDK: true,
  }}
/>

Data Product Panels

// Dataset statistics
<ProductPanel
  product={dataProduct}
  panelType="datasetStats"
  config={{
    metrics: ['rows', 'size', 'columns'],
    showGrowth: true,
  }}
/>

// Pipeline status
<ProductPanel
  product={dataProduct}
  panelType="pipelineStatus"
  config={{
    statuses: ['running', 'failed'],
    showLogs: true,
  }}
/>

Headless Product Panels

// MCP server status
<ProductPanel
  product={headlessProduct}
  panelType="mcpStatus"
  config={{
    servers: ['mcp://server1', 'mcp://server2'],
    showTools: true,
  }}
/>

// AI agent activity
<ProductPanel
  product={headlessProduct}
  panelType="agentActivity"
  config={{
    limit: 10,
    showMetrics: true,
  }}
/>

Auto-Wiring

ProductApp components automatically query product data from Payload:

// Queries products collection by ID
<ProductApp product="prod_123" />

// Or pass full product object
<ProductApp product={productObject} />

When a product ID is provided, the component automatically:

Fetches product data from Payload CMS
Loads related features, prices, and categories
Configures the app shell based on product type
Renders appropriate views and panels

Examples

Complete SaaS Application

<ProductApp
  product={saasProduct}
  config={{
    navigation: [
      { label: 'Dashboard', href: '/', icon: 'LayoutDashboard' },
      { label: 'Workspaces', href: '/workspaces', icon: 'Building' },
      { label: 'Team', href: '/team', icon: 'Users' },
      { label: 'Billing', href: '/billing', icon: 'CreditCard' },
      { label: 'Settings', href: '/settings', icon: 'Settings' },
    ],
    shell: {
      sidebar: true,
      header: true,
    },
    theme: {
      mode: 'system',
    },
  }}
/>

Developer Portal for API Product

<ProductApp
  product={apiProduct}
  config={{
    navigation: [
      { label: 'Overview', href: '/', icon: 'Home' },
      { label: 'API Keys', href: '/keys', icon: 'Key' },
      { label: 'Webhooks', href: '/webhooks', icon: 'Webhook' },
      { label: 'Usage', href: '/usage', icon: 'BarChart' },
      { label: 'Logs', href: '/logs', icon: 'FileText' },
      { label: 'Docs', href: '/docs', icon: 'Book' },
    ],
    shell: {
      sidebar: true,
      header: true,
    },
  }}
/>

Next Steps

Product as Site - Rendering products as marketing sites
Product as Card - Rendering products as cards and lists
Product Contexts - Products in Web, API, and MCP contexts

Product as App

On this page