mdxui

AgentApp

AI agent management with MCP tools and prompt engineering

AgentApp

The AgentApp specialization provides a complete AI agent management interface with MCP (Model Context Protocol) tools, prompt templates, execution logs, and agent testing capabilities. It's designed for platforms that build, deploy, and manage AI agents.

Overview

AgentApp extends the base App with AI agent-specific features:

  • Agent Management - Create, configure, and deploy AI agents
  • MCP Tools - Manage Model Context Protocol tools and resources
  • Prompts & Templates - Version-controlled prompt engineering
  • Agent Runs - Monitor and debug agent executions
  • Playground - Test agents interactively

Type Signature

interface AgentAppProps extends AppProps {
  /** AI agent management configuration */
  config?: {
    /** Show agents list */
    showAgents?: boolean // default: true
    /** Show MCP tools */
    showMCPTools?: boolean // default: true
    /** Show prompts/templates */
    showPrompts?: boolean // default: true
    /** Show agent runs/logs */
    showRuns?: boolean // default: true
    /** Show training data */
    showTrainingData?: boolean // default: false
    /** Supported model providers */
    modelProviders?: string[] // e.g., ["openai", "anthropic"]
    /** Available agent types */
    agentTypes?: string[] // e.g., ["chat", "task", "research"]
    /** Enable agent playground */
    enablePlayground?: boolean // default: true
  }
}

Naming Convention

All AgentApp components follow the pattern: Agent${Component} = ${Component} + agent-specific props.

// Base component + agent props = Agent component
AgentDashboard = Dashboard + { showAgentMetrics, showRecentRuns }
AgentAgents = Agents + { showTypes, enableDeployment }
AgentMCPTools = MCPTools + { showResources, enableTesting }
AgentPrompts = Prompts + { showVersions, enableTesting }
AgentRuns = Runs + { showLogs, showTraces }
AgentPlayground = Playground + { showHistory, enableDebug }

Quick Start

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

export const components: AppComponents = {
  App: AgentApp,
  Shell,
  Sidebar,
  Header,
  Dashboard: AgentDashboard,
  Settings,
}

In your MDX:

<AgentApp
  name="AI Agent Manager"
  config={{
    showAgents: true,
    showMCPTools: true,
    showPrompts: true,
    showRuns: true,
    enablePlayground: true,
    modelProviders: ['openai', 'anthropic'],
    agentTypes: ['chat', 'task', 'research']
  }}
>
  <Shell>
    <AgentDashboard />
  </Shell>
</AgentApp>

App Structure

AgentApp
├── AgentDashboard - Agent metrics and activity overview
├── AgentAgents - Agent list and configuration
├── AgentMCPTools - MCP tools and resources management
├── AgentPrompts - Prompt templates and versions
├── AgentRuns - Execution logs and traces
├── AgentPlayground - Interactive agent testing
└── Settings - Agent configuration settings

Default Views

AgentDashboard

Main dashboard showing agent metrics and recent activity.

interface AgentDashboardProps extends DashboardProps {
  /** Show agent metrics */
  showAgentMetrics?: boolean // default: true
  /** Show recent runs */
  showRecentRuns?: boolean // default: true
  /** Show model usage */
  showModelUsage?: boolean // default: true
  /** Show cost breakdown */
  showCosts?: boolean // default: true
}

Layout:

DashboardView (single)
├── MetricsPanel - Total agents, runs, success rate
├── ChartPanel - Agent activity over time
├── ActivityPanel - Recent agent runs
└── StatsPanel - Model usage, costs, errors

Usage:

<AgentDashboard
  showAgentMetrics={true}
  showRecentRuns={true}
  showModelUsage={true}
  showCosts={true}
/>

AgentAgents

Agent list, creation, and configuration.

interface AgentAgentsProps {
  /** Show agent types */
  showTypes?: boolean // default: true
  /** Enable deployment controls */
  enableDeployment?: boolean // default: true
  /** Show agent metrics */
  showMetrics?: boolean // default: true
  /** Available agent types */
  agentTypes?: Array<{
    type: string
    description: string
    capabilities: string[]
  }>
}

Layout:

AgentsView (column)
├── ToolbarPanel - Create agent, filters, search
├── CardsPanel - Agent cards
│   ├── Name + Type
│   ├── Description
│   ├── Status (active/inactive)
│   ├── Metrics (runs, success rate)
│   └── Actions (edit, test, deploy)
└── DetailPanel - Agent configuration
    ├── Basic info (name, type, description)
    ├── Model config (provider, model, temperature)
    ├── System prompt
    ├── Tools/capabilities
    ├── Deployment settings
    └── Test in playground button

Usage:

<AgentAgents
  showTypes={true}
  enableDeployment={true}
  showMetrics={true}
  agentTypes={[
    {
      type: 'chat',
      description: 'Conversational assistant',
      capabilities: ['conversation', 'context-awareness']
    },
    {
      type: 'task',
      description: 'Task execution agent',
      capabilities: ['tool-use', 'planning', 'execution']
    },
    {
      type: 'research',
      description: 'Research and analysis',
      capabilities: ['web-search', 'analysis', 'summarization']
    }
  ]}
/>

AgentMCPTools

MCP (Model Context Protocol) tools and resources management.

interface AgentMCPToolsProps {
  /** Show MCP resources */
  showResources?: boolean // default: true
  /** Enable tool testing */
  enableTesting?: boolean // default: true
  /** Show usage stats */
  showUsageStats?: boolean // default: true
  /** Tool categories */
  categories?: string[] // e.g., ["data", "communication", "search"]
}

Layout:

MCPToolsView (column)
├── TabsPanel - Tools, Resources, Prompts
├── ListPanel - Available tools
│   ├── Name
│   ├── Description
│   ├── Category
│   ├── Usage count
│   └── Actions (test, edit, delete)
└── DetailPanel - Tool details
    ├── Description
    ├── Parameters schema
    ├── Example usage
    ├── Test interface
    └── Recent executions

Usage:

<AgentMCPTools
  showResources={true}
  enableTesting={true}
  showUsageStats={true}
  categories={['data', 'communication', 'search', 'computation']}
/>

AgentPrompts

Prompt templates with versioning and testing.

interface AgentPromptsProps {
  /** Show prompt versions */
  showVersions?: boolean // default: true
  /** Enable prompt testing */
  enableTesting?: boolean // default: true
  /** Show usage stats */
  showUsageStats?: boolean // default: true
  /** Template categories */
  categories?: string[] // e.g., ["system", "user", "assistant"]
}

Layout:

PromptsView (column)
├── ToolbarPanel - Create prompt, filters
├── ListPanel - Prompt templates
│   ├── Name
│   ├── Category
│   ├── Version
│   ├── Usage count
│   └── Actions (edit, version, test)
└── DetailPanel - Prompt editor
    ├── Template editor
    ├── Variables definition
    ├── Version history
    ├── Test interface
    └── Usage examples

Usage:

<AgentPrompts
  showVersions={true}
  enableTesting={true}
  showUsageStats={true}
  categories={['system', 'user', 'assistant', 'function']}
/>

AgentRuns

Agent execution logs and traces.

interface AgentRunsProps {
  /** Show execution logs */
  showLogs?: boolean // default: true
  /** Show traces */
  showTraces?: boolean // default: true
  /** Show token usage */
  showTokens?: boolean // default: true
  /** Show cost breakdown */
  showCosts?: boolean // default: true
}

Layout:

RunsView (column)
├── FilterPanel - Time, agent, status, model filters
├── TablePanel - Execution history
│   ├── Timestamp
│   ├── Agent
│   ├── Status (success/error)
│   ├── Duration
│   ├── Tokens
│   ├── Cost
│   └── Actions (view details)
└── DetailPanel - Run details
    ├── Input/output
    ├── Execution trace
    ├── Tool calls
    ├── Model usage
    └── Error logs (if failed)

Usage:

<AgentRuns
  showLogs={true}
  showTraces={true}
  showTokens={true}
  showCosts={true}
/>

AgentPlayground

Interactive agent testing environment.

interface AgentPlaygroundProps {
  /** Show conversation history */
  showHistory?: boolean // default: true
  /** Enable debug mode */
  enableDebug?: boolean // default: true
  /** Show token usage */
  showTokens?: boolean // default: true
  /** Available models */
  models?: Array<{
    provider: string
    model: string
    contextWindow: number
  }>
}

Layout:

PlaygroundView (column)
├── ConfigPanel - Agent selector, model settings
│   ├── Agent dropdown
│   ├── Model selector
│   ├── Temperature slider
│   ├── Max tokens input
│   └── System prompt override
├── ChatPanel - Conversation interface
│   ├── Message history
│   ├── Input field
│   └── Send button
└── DebugPanel - Execution details
    ├── Request/response
    ├── Tool calls
    ├── Token usage
    └── Timing breakdown

Usage:

<AgentPlayground
  showHistory={true}
  enableDebug={true}
  showTokens={true}
  models={[
    {
      provider: 'openai',
      model: 'gpt-4',
      contextWindow: 8192
    },
    {
      provider: 'anthropic',
      model: 'claude-3-opus-20240229',
      contextWindow: 200000
    }
  ]}
/>

Configuration

Model Providers

<AgentApp
  config={{
    modelProviders: ['openai', 'anthropic', 'google']
  }}
>
  {/* Configure supported LLM providers */}
</AgentApp>

Agent Types

<AgentApp
  config={{
    agentTypes: ['chat', 'task', 'research', 'coding']
  }}
>
  {/* Define available agent types */}
</AgentApp>

Playground Configuration

<AgentPlayground
  enableDebug={true}
  showTokens={true}
  models={[
    { provider: 'openai', model: 'gpt-4', contextWindow: 8192 },
    { provider: 'anthropic', model: 'claude-3-opus-20240229', contextWindow: 200000 }
  ]}
/>

Auto-Wiring

AgentApp components automatically wire to Payload collections:

ComponentCollectionPurpose
AgentAgentsagentsAgent definitions
AgentMCPToolsmcpToolsMCP tool registry
AgentPromptspromptsPrompt templates
AgentRunsagentRunsExecution logs

Collection Schemas

agents Collection:

{
  name: string
  type: 'chat' | 'task' | 'research' | 'coding'
  description: string
  modelProvider: 'openai' | 'anthropic' | 'google'
  model: string
  systemPrompt: string
  temperature: number
  maxTokens: number
  tools: string[] // MCP tool IDs
  active: boolean
  createdBy: User
}

mcpTools Collection:

{
  name: string
  description: string
  category: string
  inputSchema: object // JSON Schema
  handler: string // Function reference
  usageCount: number
  lastUsed: Date
}

prompts Collection:

{
  name: string
  category: string
  template: string
  variables: Array<{
    name: string
    type: string
    required: boolean
    default?: any
  }>
  version: number
  versions: Array<{
    version: number
    template: string
    createdAt: Date
    createdBy: User
  }>
  usageCount: number
}

agentRuns Collection:

{
  agentId: string
  status: 'success' | 'error' | 'timeout'
  input: any
  output: any
  trace: Array<{
    step: string
    timestamp: Date
    data: any
  }>
  toolCalls: Array<{
    tool: string
    input: any
    output: any
    duration: number
  }>
  model: string
  tokens: {
    prompt: number
    completion: number
    total: number
  }
  cost: number
  duration: number
  error?: string
  startedAt: Date
  completedAt: Date
}

Default navigation structure:

const navigation = [
  { path: '/', label: 'Dashboard', icon: 'LayoutDashboard' },
  { path: '/agents', label: 'Agents', icon: 'Bot' },
  { path: '/tools', label: 'MCP Tools', icon: 'Wrench' },
  { path: '/prompts', label: 'Prompts', icon: 'MessageSquare' },
  { path: '/runs', label: 'Runs', icon: 'Activity' },
  { path: '/playground', label: 'Playground', icon: 'FlaskConical' },
  { path: '/settings', label: 'Settings', icon: 'Settings' },
]

Best Practices

Agent Design

  1. Clear purpose - Define specific agent capabilities
  2. System prompts - Version control prompts
  3. Tool selection - Only include necessary tools
  4. Testing - Test in playground before deployment
<AgentAgents
  showTypes={true}
  enableDeployment={true}
  agentTypes={[
    {
      type: 'chat',
      description: 'Conversational assistant',
      capabilities: ['conversation']
    }
  ]}
/>

Prompt Engineering

  1. Versioning - Track prompt changes
  2. Testing - Test prompts with real data
  3. Variables - Use template variables
  4. Documentation - Document expected behavior
<AgentPrompts
  showVersions={true}
  enableTesting={true}
  showUsageStats={true}
/>

Execution Monitoring

  1. Logging - Log all agent executions
  2. Tracing - Track execution steps
  3. Metrics - Monitor success rates
  4. Cost tracking - Track token usage and costs
<AgentRuns
  showLogs={true}
  showTraces={true}
  showTokens={true}
  showCosts={true}
/>

MCP Tools

  1. Schema validation - Validate tool inputs
  2. Error handling - Handle tool failures gracefully
  3. Testing - Test tools independently
  4. Documentation - Provide clear descriptions
<AgentMCPTools
  showResources={true}
  enableTesting={true}
  categories={['data', 'communication', 'search']}
/>

Examples

Minimal Agent App

<AgentApp name="AI Agents">
  <Shell>
    <AgentDashboard />
  </Shell>
</AgentApp>
<AgentApp
  name="AI Agent Platform"
  config={{
    showAgents: true,
    showMCPTools: true,
    showPrompts: true,
    showRuns: true,
    enablePlayground: true,
    modelProviders: ['openai', 'anthropic', 'google'],
    agentTypes: ['chat', 'task', 'research', 'coding']
  }}
>
  <Shell>
    <Routes>
      <Route path="/" element={
        <AgentDashboard
          showAgentMetrics={true}
          showRecentRuns={true}
          showModelUsage={true}
          showCosts={true}
        />
      } />
      <Route path="/agents" element={
        <AgentAgents
          showTypes={true}
          enableDeployment={true}
          showMetrics={true}
          agentTypes={[
            {
              type: 'chat',
              description: 'Conversational assistant',
              capabilities: ['conversation', 'context-awareness']
            },
            {
              type: 'task',
              description: 'Task execution agent',
              capabilities: ['tool-use', 'planning', 'execution']
            }
          ]}
        />
      } />
      <Route path="/tools" element={
        <AgentMCPTools
          showResources={true}
          enableTesting={true}
          showUsageStats={true}
          categories={['data', 'communication', 'search']}
        />
      } />
      <Route path="/prompts" element={
        <AgentPrompts
          showVersions={true}
          enableTesting={true}
          showUsageStats={true}
        />
      } />
      <Route path="/runs" element={
        <AgentRuns
          showLogs={true}
          showTraces={true}
          showTokens={true}
          showCosts={true}
        />
      } />
      <Route path="/playground" element={
        <AgentPlayground
          showHistory={true}
          enableDebug={true}
          showTokens={true}
          models={[
            {
              provider: 'openai',
              model: 'gpt-4',
              contextWindow: 8192
            },
            {
              provider: 'anthropic',
              model: 'claude-3-opus-20240229',
              contextWindow: 200000
            }
          ]}
        />
      } />
    </Routes>
  </Shell>
</AgentApp>

SaaSApp

Multi-tenant product application with workspace management and billing

ClientPortalApp

Client-facing portal with projects, invoices, and deliverables

On this page

AgentAppOverviewType SignatureNaming ConventionQuick StartApp StructureDefault ViewsAgentDashboardAgentAgentsAgentMCPToolsAgentPromptsAgentRunsAgentPlaygroundConfigurationModel ProvidersAgent TypesPlayground ConfigurationAuto-WiringCollection SchemasNavigationBest PracticesAgent DesignPrompt EngineeringExecution MonitoringMCP ToolsRelated ComponentsExamplesMinimal Agent AppFull-Featured Agent Platform