> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.

# UI Quickstart

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

The Agent Control dashboard lets you manage [controls](/concepts/controls.md) 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](/core/quickstart.md) first.

You also need:

* **Node.js 20+** (CI uses 20; 18+ may work)
* **pnpm 9+** — install from [pnpm.io](https://pnpm.io/) or run `corepack enable && corepack prepare pnpm@latest --activate`

> **Note:** If you started the server using **One-line setup** from the [Quickstart](/core/quickstart.md), the UI is already running at [http://localhost:4000](http://localhost:4000). You can skip the setup steps below and jump directly to [viewing the dashboard](#create-controls-from-the-ui).

## 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**:

```bash theme={null}
cd ui
pnpm install
pnpm dev
```

The dashboard is now running at [http://localhost:4000](http://localhost:4000).

> [!TIP]
>
> 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](http://localhost:4000). You should see an empty state — this is expected before any controls are registered.

![Dashboard with no controls at startup](https://mintcdn.com/agentcontrol-docs-country-controls-example/Wmix3MQiaRi52662/images/no-controls-at-startup.png?fit=max\&auto=format\&n=Wmix3MQiaRi52662\&q=85\&s=8c0a7aef3cbbc537b6cf75023cab1ac8)

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.

![Add a new control](https://mintcdn.com/agentcontrol-docs-country-controls-example/Wmix3MQiaRi52662/images/add-control.png?fit=max\&auto=format\&n=Wmix3MQiaRi52662\&q=85\&s=23ec7c88b6b9ec12c7f7b5ab884e4dce)

**2. Select the control type**

Choose an [evaluator](/concepts/evaluators/overview.md) type for your control. Options include [Regex](/concepts/evaluators/built-in-evaluators.md#regex-evaluator), [List](/concepts/evaluators/built-in-evaluators.md#list-evaluator), [JSON](/concepts/evaluators/json.md), [SQL](/concepts/evaluators/sql.md), and [AI-powered](/concepts/evaluators/custom-evaluators.md) evaluators.

![Select the control type to create](https://mintcdn.com/agentcontrol-docs-country-controls-example/Wmix3MQiaRi52662/images/select-control-type-to-create.png?fit=max\&auto=format\&n=Wmix3MQiaRi52662\&q=85\&s=d41e85c78580486ad8cbde2bbd5fac23)

**3. Configure the control**

Fill in the control details. See [Controls](/concepts/controls.md) for a full explanation of each field.

![Configure the selected control type](https://mintcdn.com/agentcontrol-docs-country-controls-example/Wmix3MQiaRi52662/images/configure-selected-control-type.png?fit=max\&auto=format\&n=Wmix3MQiaRi52662\&q=85\&s=8021b15909313eb246955ef5a5f1b37d)

| 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:

```bash theme={null}
pnpm fetch-api-types  # fetches from http://localhost:8000/openapi.json
```

## Monitoring

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

![Control monitoring dashboard](https://mintcdn.com/agentcontrol-docs-country-controls-example/Wmix3MQiaRi52662/images/monitor-controls.png?fit=max\&auto=format\&n=Wmix3MQiaRi52662\&q=85\&s=01da99636297b317153193579e7dfdb1)

* **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.

> [!NOTE]
>
> Monitoring data populates as agents process requests. Run the [Agent Control Demo](/examples/agent-control-demo.md) to generate sample data:
>
> ```bash theme={null}
> uv run python examples/agent_control_demo/demo_agent.py
> ```

## Next Steps

> [card] [Agent Control Demo](/examples/agent-control-demo.md)
>
> Full end-to-end walkthrough with runnable scripts.

> [card] [Controls](/concepts/controls.md)
>
> Learn how to define controls using the SDK or API.

> [card] [Evaluators](/concepts/evaluators/overview.md)
>
> Explore built-in and custom evaluator types.

> [card] [Configuration](/core/configuration.md)
>
> Server configuration, authentication, and deployment options.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.