---
title: "Building an Agent Admin Dashboard: React Components for Monitoring and Configuration"
description: "Design and build an admin dashboard for AI agents with metric cards, real-time charts, configuration panels, and activity logs using React, TypeScript, and TanStack Query."
canonical: https://callsphere.ai/blog/building-agent-admin-dashboard-react-monitoring-configuration
category: "Learn Agentic AI"
tags: ["Admin Dashboard", "React", "Monitoring", "TypeScript", "AI Agent Management"]
author: "CallSphere Team"
published: 2026-03-17T00:00:00.000Z
updated: 2026-05-06T01:02:44.948Z
---

# Building an Agent Admin Dashboard: React Components for Monitoring and Configuration

> Design and build an admin dashboard for AI agents with metric cards, real-time charts, configuration panels, and activity logs using React, TypeScript, and TanStack Query.

## What an Agent Dashboard Needs

An agent admin dashboard serves two audiences: operations teams monitoring agent health and behavior, and product teams configuring agent behavior. The dashboard must display key metrics at a glance, show conversation activity in real-time, surface errors and escalations, and provide configuration controls for agent parameters.

## Dashboard Layout

Use a grid-based layout with a sidebar for navigation and a main content area divided into metric cards at the top and detailed panels below.

```mermaid
flowchart LR
    INPUT(["User intent"])
    PARSE["Parse plus
classify"]
    PLAN["Plan and tool
selection"]
    AGENT["Agent loop
LLM plus tools"]
    GUARD{"Guardrails
and policy"}
    EXEC["Execute and
verify result"]
    OBS[("Trace and metrics")]
    OUT(["Outcome plus
next action"])
    INPUT --> PARSE --> PLAN --> AGENT --> GUARD
    GUARD -->|Pass| EXEC --> OUT
    GUARD -->|Fail| AGENT
    AGENT --> OBS
    style AGENT fill:#4f46e5,stroke:#4338ca,color:#fff
    style GUARD fill:#f59e0b,stroke:#d97706,color:#1f2937
    style OBS fill:#ede9fe,stroke:#7c3aed,color:#1e1b4b
    style OUT fill:#059669,stroke:#047857,color:#fff
```

```typescript
function AgentDashboard() {
  return (

# Agent Overview

  );
}
```

## Metric Cards with Real-Time Data

Metric cards show the most important numbers: total conversations, average response time, error rate, and user satisfaction score. Fetch these with TanStack Query for automatic background refetching.

```typescript
import { useQuery } from "@tanstack/react-query";

interface AgentMetrics {
  totalConversations: number;
  avgResponseTimeMs: number;
  errorRate: number;
  satisfactionScore: number;
}

function MetricCardsRow() {
  const { data, isLoading } = useQuery({
    queryKey: ["agent-metrics"],
    queryFn: () =>
      fetch("/api/admin/metrics").then((r) => r.json()),
    refetchInterval: 30_000, // Refresh every 30 seconds
  });

  if (isLoading) return ;

  return (

  );
}
```

## The Metric Card Component

Each card displays a label, value, and trend indicator. The trend arrow and color change based on whether the direction is positive or negative.

```typescript
interface MetricCardProps {
  label: string;
  value: string;
  trend: string;
  trendUp: boolean;
}

function MetricCard({ label, value, trend, trendUp }: MetricCardProps) {
  return (

{label}

{value}

{trendUp ? "^" : "v"} {trend} vs last week

  );
}
```

## Skeleton Loading States

Dashboard components should show skeleton placeholders during data loading instead of blank space. This prevents layout shift and communicates that data is on the way.

```typescript
function MetricCardsSkeleton() {
  return (

      {Array.from({ length: 4 }).map((_, i) => (

      ))}

  );
}
```

## Recent Activity Feed

An activity log shows recent conversations, errors, and escalations in chronological order. Use a polling query to keep it up-to-date.

```typescript
interface ActivityItem {
  id: string;
  type: "conversation" | "error" | "escalation";
  summary: string;
  timestamp: string;
}

function RecentActivity() {
  const { data } = useQuery({
    queryKey: ["agent-activity"],
    queryFn: () =>
      fetch("/api/admin/activity?limit=20").then((r) => r.json()),
    refetchInterval: 10_000,
  });

  const typeStyles: Record = {
    conversation: "bg-blue-100 text-blue-700",
    error: "bg-red-100 text-red-700",
    escalation: "bg-yellow-100 text-yellow-700",
  };

  return (

## Recent Activity

        {data?.map((item) => (

              {item.type}

{item.summary}

{item.timestamp}

        ))}

  );
}
```

## Agent Configuration Panel

Allow admins to tweak agent parameters like system prompt, temperature, max tokens, and enabled tools without deploying code.

```typescript
import { useMutation, useQueryClient } from "@tanstack/react-query";

interface AgentConfig {
  systemPrompt: string;
  temperature: number;
  maxTokens: number;
  enabledTools: string[];
}

function AgentConfigPanel() {
  const queryClient = useQueryClient();
  const { data: config } = useQuery({
    queryKey: ["agent-config"],
    queryFn: () =>
      fetch("/api/admin/config").then((r) => r.json()),
  });

  const mutation = useMutation({
    mutationFn: (updated: AgentConfig) =>
      fetch("/api/admin/config", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(updated),
      }),
    onSuccess: () =>
      queryClient.invalidateQueries({ queryKey: ["agent-config"] }),
  });

  if (!config) return null;

  return (

## Agent Configuration

        System Prompt

       mutation.mutate(config)}
        className="bg-blue-600 text-white px-4 py-2 rounded-lg
                   text-sm disabled:opacity-50"
        disabled={mutation.isPending}
      >
        {mutation.isPending ? "Saving..." : "Save Changes"}

  );
}
```

## FAQ

### How do I add charts to the dashboard?

Use a charting library like Recharts or Chart.js with a React wrapper. Fetch time-series data from your API (grouped by hour or day) and pass it to a line or bar chart component. Recharts integrates naturally with React because its charts are composed from React components like ``, ``, and ``.

### Should I use WebSockets or polling for real-time dashboard updates?

Polling with TanStack Query's `refetchInterval` is simpler and works well for dashboards where 10-30 second latency is acceptable. Use WebSockets only if you need sub-second updates, such as live conversation transcripts or real-time error alerts that require immediate operator attention.

### How do I restrict dashboard access to admin users?

Wrap your dashboard routes in an authentication guard that checks the user's role. In Next.js, use middleware to redirect non-admin users before the page loads. On the API side, every admin endpoint should verify the JWT token contains an admin role claim and return 403 if it does not.

---

#AdminDashboard #React #Monitoring #TypeScript #AIAgentManagement #AgenticAI #LearnAI #AIEngineering

---

Source: https://callsphere.ai/blog/building-agent-admin-dashboard-react-monitoring-configuration