UI Quickstart

Launch the Agent Control dashboard to manage controls and monitoring from your browser.

The Agent Control dashboard lets you manage controls and monitor agent activity — no code changes required.

Prerequisites

Before starting the UI, make sure the Agent Control server is already running. If you haven’t set it up yet, follow the Quickstart first.

You also need:

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

Note: If you started the server using One-line setup from the Quickstart, the UI is already running at http://localhost:4000. You can skip the setup steps below and jump directly to viewing the dashboard.

Start the UI Server

1. Install and start the dashboard

   From the root of the agent-control repository, run the following commands in a separate terminal:

   cd ui
   pnpm install
   pnpm dev
   

   The dashboard is now running at http://localhost:4000.

   Keep the Agent Control server (make server-run) and the UI (pnpm dev) running in separate terminal windows. The dashboard communicates with the server at http://localhost:8000 by default.

2. Verify the dashboard is running

   Open http://localhost:4000. You should see an empty state — this is expected before any controls are registered.

   

   The dashboard reflects the server’s current configuration. Controls appear here automatically once you create them.

Create Controls from the UI

You can create controls directly in the dashboard — no scripts or SDK code required.

1. Add a new control

   Click the Add Control button from the controls page to start creating a new control.

   
2. Select the control type

   Choose an evaluator type for your control. Options include Regex, List, JSON, SQL, and AI-powered evaluators.

   
3. Configure the control

   Fill in the control details. See Controls for a full explanation of each field.

   

   Field	Description
   Control name	A unique identifier for the control
   Enabled	Toggle the control on or off
   Stages	When to evaluate — Pre (before execution) or Post (after execution)
   Selector path	The data path to evaluate (for example, * for all fields)
   Action	What happens on a match — Deny blocks the request
   Execution environment	Where evaluation runs — Server or Client
   Evaluator configuration	Type-specific settings (values, logic, match mode, case sensitivity)

   Click Save to register the control. It takes effect immediately — no redeployment needed.

Regenerate API Types (Optional)

If you update the server API and need fresh UI types, regenerate them from the running server:

pnpm fetch-api-types  # fetches from http://localhost:8000/openapi.json

Monitoring

The monitoring dashboard shows real-time control activity across all agents:

• Total evaluations — Requests processed per control
• Block count — Requests denied per control
• Pass/block ratio — Visual breakdown of allowed vs. blocked operations
• Activity timeline — Recent evaluations with timestamps

Use this view to verify controls are working, spot patterns that need tuning, and audit which controls triggered on which agent.

Monitoring data populates as agents process requests. Run the Agent Control Demo to generate sample data:

uv run python examples/agent_control_demo/demo_agent.py

Next Steps

Agent Control Demo

Full end-to-end walkthrough with runnable scripts.

Controls

Learn how to define controls using the SDK or API.

Evaluators

Explore built-in and custom evaluator types.

Configuration

Server configuration, authentication, and deployment options.