Skip to main content
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

​
Source Code

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