UI Dashboard

The Agent Control UI is a Next.js dashboard for managing agents and controls. It runs on port 4000 by default and works best with a running Agent Control server.

Prerequisites

Node.js 20+ (CI uses 20; 18+ may work)
pnpm 9+ (install from pnpm.io or run corepack enable && corepack prepare pnpm@latest --activate)

For full functionality (live data, regenerating API types), the server must be running. See the main repo quick start for server setup.

Tech Stack

Next.js 15 (Pages Router) + React 19 + TypeScript
Mantine 7 + Jupiter DS
TanStack Query for server state management
openapi-fetch with auto-generated types from the server OpenAPI spec

Quick Start

pnpm install
pnpm dev

The UI starts on http://localhost:4000. To regenerate API types from a running server:

pnpm fetch-api-types

If server auth is enabled, set an API key before starting the UI:

export NEXT_PUBLIC_AGENT_CONTROL_API_KEY=your-admin-api-key

Folder Structure

src/
├── pages/                 # Next.js routes
│   ├── _app.tsx           # App wrapper (providers, global styles)
│   ├── index.tsx          # Home page (agents list)
│   ├── agents/
│   │   ├── [id].tsx       # Agent detail page
│   │   └── [id]/          # Agent sub-routes
│   │       ├── controls.tsx
│   │       └── monitor.tsx
├── core/
│   ├── api/               # API client + auto-generated types
│   │   ├── client.ts      # openapi-fetch client with typed methods
│   │   ├── generated/     # Auto-generated from OpenAPI spec
│   │   └── types.ts       # Re-exported type aliases
│   ├── evaluators/        # Evaluator form registry (json, sql, regex, list, luna2)
│   ├── hooks/query-hooks/ # TanStack Query hooks (useAgent, useAgents, etc.)
│   ├── layouts/           # App shell with sidebar navigation
│   ├── page-components/   # Page-level components (home, agent-detail)
│   ├── providers/         # React context providers (QueryProvider)
│   └── types/             # Shared TypeScript types
├── components/            # Reusable UI components (error-boundary, icons)
└── styles/                # Global CSS, fonts

Key Patterns

API types are auto-generated. Run pnpm fetch-api-types after server API changes.
Query hooks wrap the api client and return typed data (see core/hooks/query-hooks/).
Page components contain UI logic; pages/ files are thin wrappers that apply layouts.
Evaluator forms follow a registry pattern in core/evaluators/.

Documentation and Help

UI Quickstart: UI Quickstart
Server setup: Server
API reference: Reference

Source Code

View the complete UI dashboard source code and implementation: Agent Control UI

Getting Started

Concepts

How-to Guides

Integrations

Third-Party Agents

Examples

Reference

Prerequisites

Tech Stack

Quick Start

Folder Structure

Key Patterns

Documentation and Help

Source Code

​Prerequisites

​Tech Stack

​Quick Start

​Folder Structure

​Key Patterns

​Documentation and Help

​Source Code

Prerequisites

Tech Stack

Quick Start

Folder Structure

Key Patterns

Documentation and Help

Source Code