DeveloperApp

The DeveloperApp specialization provides a complete developer portal interface focused on API keys, webhooks, usage metrics, request logs, and API documentation. It's designed for platforms that expose APIs to developers and need a comprehensive management interface.

Overview

DeveloperApp extends the base App with developer-specific views and panels:

API Keys Management - Create, rotate, and revoke API keys
Webhooks - Configure and test webhook endpoints
Usage Analytics - Track API usage, rate limits, and quotas
Request Logs - Debug API requests with detailed logs
Documentation - Interactive API documentation

Type Signature

interface DeveloperAppProps extends AppProps {
  /** Developer portal configuration */
  config?: {
    /** Show API keys section */
    showAPIKeys?: boolean // default: true
    /** Show webhooks section */
    showWebhooks?: boolean // default: true
    /** Show usage metrics */
    showUsage?: boolean // default: true
    /** Show API logs */
    showLogs?: boolean // default: true
    /** Show documentation */
    showDocs?: boolean // default: true
    /** API base URL */
    apiBaseUrl?: string
    /** Available API versions */
    apiVersions?: string[] // e.g., ["v1", "v2"]
  }
}

Naming Convention

All DeveloperApp components follow the pattern: Developer${Component} = ${Component} + developer-specific props.

// Base component + developer props = Developer component
DeveloperDashboard = Dashboard + { showAPIMetrics, showRecentRequests }
DeveloperAPIKeys = APIKeys + { showScopes, enableRotation }
DeveloperWebhooks = Webhooks + { showPayloadExamples, enableTesting }
DeveloperUsage = Usage + { showRateLimits, showQuotas }
DeveloperLogs = Logs + { showRequestHeaders, showResponseBody }

Quick Start

import type { AppComponents } from 'mdxui'
import { DeveloperApp } from '@mdxui/cockpit'

export const components: AppComponents = {
  App: DeveloperApp,
  Shell,
  Sidebar,
  Header,
  Dashboard: DeveloperDashboard,
  Settings,
}

In your MDX:

<DeveloperApp
  name="Acme API Portal"
  config={{
    showAPIKeys: true,
    showWebhooks: true,
    showUsage: true,
    showLogs: true,
    showDocs: true,
    apiBaseUrl: 'https://api.acme.com',
    apiVersions: ['v1', 'v2']
  }}
>
  <Shell>
    <DeveloperDashboard />
  </Shell>
</DeveloperApp>

App Structure

DeveloperApp
├── DeveloperDashboard - API metrics and activity overview
├── DeveloperAPIKeys - API key management
├── DeveloperWebhooks - Webhook configuration and testing
├── DeveloperUsage - Usage analytics and rate limits
├── DeveloperLogs - Request/response logs
├── DeveloperDocs - Interactive API documentation
└── Settings - Account and API settings

Default Views

DeveloperDashboard

Main dashboard showing API metrics and recent activity.

interface DeveloperDashboardProps extends DashboardProps {
  /** Show API request metrics */
  showAPIMetrics?: boolean // default: true
  /** Show recent API requests */
  showRecentRequests?: boolean // default: true
  /** Show rate limit status */
  showRateLimits?: boolean // default: true
  /** Show error rate */
  showErrors?: boolean // default: true
}

Layout:

DashboardView (single)
├── MetricsPanel - Total requests, success rate, avg latency
├── ChartPanel - Request volume over time
├── ActivityPanel - Recent API requests
└── StatsPanel - Top endpoints, error breakdown

Usage:

<DeveloperDashboard
  showAPIMetrics={true}
  showRecentRequests={true}
  showRateLimits={true}
/>

DeveloperAPIKeys

API key creation, rotation, and management.

interface DeveloperAPIKeysProps extends APIKeysProps {
  /** Show scopes/permissions */
  showScopes?: boolean // default: true
  /** Enable key rotation */
  enableRotation?: boolean // default: true
  /** Show key usage stats */
  showUsageStats?: boolean // default: true
  /** Default key expiration (days) */
  defaultExpiration?: number // default: 90
}

Layout:

APIKeysView (column)
├── TablePanel - List of API keys
│   ├── Name
│   ├── Key (masked)
│   ├── Scopes
│   ├── Last used
│   ├── Expires
│   └── Actions (rotate, delete)
└── DetailPanel - Key details and usage
    ├── Key information
    ├── Scopes editor
    ├── Usage chart
    └── Regenerate button

Usage:

<DeveloperAPIKeys
  showScopes={true}
  enableRotation={true}
  showUsageStats={true}
  defaultExpiration={90}
/>

DeveloperWebhooks

Webhook endpoint configuration and testing.

interface DeveloperWebhooksProps extends WebhooksProps {
  /** Show payload examples */
  showPayloadExamples?: boolean // default: true
  /** Enable webhook testing */
  enableTesting?: boolean // default: true
  /** Show delivery logs */
  showDeliveryLogs?: boolean // default: true
  /** Retry configuration */
  retryConfig?: {
    maxRetries: number
    backoffStrategy: 'linear' | 'exponential'
  }
}

Layout:

WebhooksView (column)
├── TablePanel - Webhook endpoints
│   ├── URL
│   ├── Events
│   ├── Status (active/inactive)
│   ├── Success rate
│   └── Actions (test, edit, delete)
└── DetailPanel - Webhook configuration
    ├── URL input
    ├── Events selector
    ├── Headers editor
    ├── Test button
    └── Recent deliveries log

Usage:

<DeveloperWebhooks
  showPayloadExamples={true}
  enableTesting={true}
  showDeliveryLogs={true}
  retryConfig={{
    maxRetries: 3,
    backoffStrategy: 'exponential'
  }}
/>

DeveloperUsage

API usage analytics and quota tracking.

interface DeveloperUsageProps extends UsageProps {
  /** Show rate limit status */
  showRateLimits?: boolean // default: true
  /** Show quota usage */
  showQuotas?: boolean // default: true
  /** Show cost estimates */
  showCosts?: boolean // default: false
  /** Time period options */
  periods?: Array<'hour' | 'day' | 'week' | 'month'>
}

Layout:

UsageView (single)
├── FilterPanel - Time range, endpoint, status filters
├── MetricsPanel - Total requests, quota used, rate limit
├── ChartPanel - Request volume over time
└── TablePanel - Top endpoints by volume

Usage:

<DeveloperUsage
  showRateLimits={true}
  showQuotas={true}
  showCosts={false}
  periods={['day', 'week', 'month']}
/>

DeveloperLogs

Request/response logs for debugging.

interface DeveloperLogsProps extends LogsProps {
  /** Show request headers */
  showRequestHeaders?: boolean // default: true
  /** Show response body */
  showResponseBody?: boolean // default: true
  /** Show timing breakdown */
  showTiming?: boolean // default: true
  /** Log retention days */
  retentionDays?: number // default: 30
}

Layout:

LogsView (column)
├── FilterPanel - Search, endpoint, status, time filters
├── TablePanel - Request logs
│   ├── Timestamp
│   ├── Method + Endpoint
│   ├── Status code
│   ├── Latency
│   └── API key
└── DetailPanel - Request details
    ├── Request (method, URL, headers, body)
    ├── Response (status, headers, body)
    └── Timing breakdown

Usage:

<DeveloperLogs
  showRequestHeaders={true}
  showResponseBody={true}
  showTiming={true}
  retentionDays={30}
/>

DeveloperDocs

Interactive API documentation.

interface DeveloperDocsProps {
  /** Documentation format */
  format?: 'openapi' | 'markdown' | 'custom'
  /** OpenAPI spec URL */
  specUrl?: string
  /** Enable try-it console */
  enableTryIt?: boolean // default: true
  /** Show code examples */
  showCodeExamples?: boolean // default: true
  /** Supported languages for examples */
  languages?: string[] // e.g., ['curl', 'javascript', 'python']
}

Layout:

DocsView (column)
├── NavPanel - API sections and endpoints
├── ContentPanel - Documentation content
│   ├── Endpoint description
│   ├── Parameters table
│   ├── Request examples
│   ├── Response examples
│   └── Try-it console
└── DetailPanel - Quick reference
    ├── Authentication
    ├── Rate limits
    └── Error codes

Usage:

<DeveloperDocs
  format="openapi"
  specUrl="https://api.acme.com/openapi.json"
  enableTryIt={true}
  showCodeExamples={true}
  languages={['curl', 'javascript', 'python', 'ruby']}
/>

Configuration

API Keys Configuration

<DeveloperApp
  config={{
    showAPIKeys: true,
    apiBaseUrl: 'https://api.acme.com'
  }}
>
  <DeveloperAPIKeys
    defaultExpiration={90}
    enableRotation={true}
    showScopes={true}
  />
</DeveloperApp>

Webhooks Configuration

<DeveloperWebhooks
  retryConfig={{
    maxRetries: 3,
    backoffStrategy: 'exponential'
  }}
  showPayloadExamples={true}
  enableTesting={true}
/>

Usage Analytics Configuration

<DeveloperUsage
  periods={['day', 'week', 'month']}
  showRateLimits={true}
  showQuotas={true}
  showCosts={true}
/>

Auto-Wiring

DeveloperApp components automatically wire to Payload collections:

Component	Collection	Purpose
`DeveloperAPIKeys`	`apiKeys`	API key management
`DeveloperWebhooks`	`webhooks`	Webhook configuration
`DeveloperUsage`	`usage`	Usage metrics
`DeveloperLogs`	`logs`	Request logs

Collection Schemas

apiKeys Collection:

{
  name: string
  key: string // hashed
  scopes: string[]
  projectId: string
  expiresAt: Date
  lastUsed: Date
  createdBy: User
}

webhooks Collection:

{
  url: string
  events: string[]
  headers: Record<string, string>
  secret: string
  active: boolean
  deliveries: Array<{
    timestamp: Date
    status: number
    attempt: number
  }>
}

usage Collection:

{
  timestamp: Date
  apiKey: string
  endpoint: string
  method: string
  statusCode: number
  latency: number
  requestSize: number
  responseSize: number
}

logs Collection:

{
  timestamp: Date
  apiKey: string
  method: string
  path: string
  statusCode: number
  latency: number
  request: {
    headers: Record<string, string>
    body: any
  }
  response: {
    headers: Record<string, string>
    body: any
  }
}

Default navigation structure:

const navigation = [
  { path: '/', label: 'Dashboard', icon: 'LayoutDashboard' },
  { path: '/keys', label: 'API Keys', icon: 'Key' },
  { path: '/webhooks', label: 'Webhooks', icon: 'Webhook' },
  { path: '/usage', label: 'Usage', icon: 'BarChart3' },
  { path: '/logs', label: 'Logs', icon: 'FileText' },
  { path: '/docs', label: 'Documentation', icon: 'Book' },
  { path: '/settings', label: 'Settings', icon: 'Settings' },
]

Best Practices

API Key Security

Hash keys - Never store keys in plain text
Scope limits - Always enforce least-privilege scopes
Expiration - Set default expiration periods
Rotation - Provide key rotation without downtime

<DeveloperAPIKeys
  defaultExpiration={90}
  enableRotation={true}
  showScopes={true}
/>

Webhook Reliability

Retry logic - Implement exponential backoff
Signature verification - Include webhook secrets
Delivery logs - Track success/failure
Testing - Provide test endpoint functionality

<DeveloperWebhooks
  retryConfig={{
    maxRetries: 3,
    backoffStrategy: 'exponential'
  }}
  enableTesting={true}
/>

Usage Monitoring

Rate limiting - Display current usage vs limits
Quota tracking - Alert near quota exhaustion
Endpoint analysis - Identify high-traffic endpoints
Cost transparency - Show usage-based costs

<DeveloperUsage
  showRateLimits={true}
  showQuotas={true}
  showCosts={true}
/>

Log Management

Retention - Set appropriate retention periods
PII filtering - Redact sensitive information
Search - Provide powerful filtering
Export - Allow log downloads

<DeveloperLogs
  retentionDays={30}
  showRequestHeaders={true}
  showResponseBody={true}
/>

App - Base App component
APIKeys - API Keys view
Webhooks - Webhooks view
Usage - Usage analytics view
Logs - Logs view
Dashboard - Dashboard view
Settings - Settings view

Examples

Minimal Developer Portal

<DeveloperApp name="API Portal">
  <Shell>
    <DeveloperDashboard />
  </Shell>
</DeveloperApp>

Full-Featured Portal

<DeveloperApp
  name="Acme API Portal"
  config={{
    showAPIKeys: true,
    showWebhooks: true,
    showUsage: true,
    showLogs: true,
    showDocs: true,
    apiBaseUrl: 'https://api.acme.com',
    apiVersions: ['v1', 'v2', 'v3']
  }}
>
  <Shell>
    <Routes>
      <Route path="/" element={<DeveloperDashboard />} />
      <Route path="/keys" element={
        <DeveloperAPIKeys
          defaultExpiration={90}
          enableRotation={true}
          showUsageStats={true}
        />
      } />
      <Route path="/webhooks" element={
        <DeveloperWebhooks
          enableTesting={true}
          showDeliveryLogs={true}
          retryConfig={{
            maxRetries: 3,
            backoffStrategy: 'exponential'
          }}
        />
      } />
      <Route path="/usage" element={
        <DeveloperUsage
          showRateLimits={true}
          showQuotas={true}
          showCosts={true}
        />
      } />
      <Route path="/logs" element={
        <DeveloperLogs
          retentionDays={30}
          showRequestHeaders={true}
          showResponseBody={true}
        />
      } />
      <Route path="/docs" element={
        <DeveloperDocs
          format="openapi"
          specUrl="https://api.acme.com/openapi.json"
          enableTryIt={true}
          languages={['curl', 'javascript', 'python']}
        />
      } />
    </Routes>
  </Shell>
</DeveloperApp>

DeveloperApp

DeveloperApp

Overview

Type Signature

Naming Convention

Quick Start

App Structure

Default Views

DeveloperDashboard

DeveloperAPIKeys

DeveloperWebhooks

DeveloperUsage

DeveloperLogs

DeveloperDocs

Configuration

API Keys Configuration

Webhooks Configuration

Usage Analytics Configuration

Auto-Wiring

Collection Schemas

Navigation

Best Practices

API Key Security

Webhook Reliability

Usage Monitoring

Log Management

Examples

Minimal Developer Portal

Full-Featured Portal

On this page