# Agent UI Deployments

> Build and deploy interactive dashboards backed by agents, prompts, and data sources with a grid layout system, multi-page navigation, and PIN protection.

Source: https://0.0.0.0:8080/docs/agent-ui-deployments

Agent UI Deployments let you create interactive web dashboards that expose your agents, prompts, and data sources to end users without writing any frontend code. Each deployment is a standalone application with its own URL, pages, layout, and optional PIN protection.

## Overview

A deployment is a multi-page dashboard where each page contains boxes arranged in a grid layout. Each box is connected to an agent, prompt, or data source, and renders an interactive interface for execution.

This enables non-technical users to interact with your AI agents through a simple, customizable web interface.

## Deployment Structure

```
Deployment
├── Page 1 (e.g., "Customer Lookup")
│   ├── Box A: Customer Search Agent
│   └── Box B: Order History Data Source
├── Page 2 (e.g., "Content Generator")
│   ├── Box A: Blog Post Agent
│   └── Box B: SEO Analysis Prompt
└── Page 3 (e.g., "Analytics")
    └── Box A: Sales Dashboard Data Source
```

## Grid Layout System

Pages use a **12-column grid system** for responsive layouts. Each box has:

| Property | Description                   |
| -------- | ----------------------------- |
| `grid_x` | Horizontal position (0-11)    |
| `grid_y` | Vertical position (row index) |
| `grid_w` | Width in columns (1-12)       |
| `grid_h` | Height in rows                |

### Layout Examples

**Two equal columns:**

```
Box A: grid_x=0, grid_y=0, grid_w=6, grid_h=4
Box B: grid_x=6, grid_y=0, grid_w=6, grid_h=4
```

**Full width + two columns below:**

```
Box A: grid_x=0, grid_y=0, grid_w=12, grid_h=3
Box B: grid_x=0, grid_y=3, grid_w=4, grid_h=4
Box C: grid_x=4, grid_y=3, grid_w=8, grid_h=4
```

## Box Types

Each box connects to one source type:

### Agent Box (`agent`)

Renders a form based on the agent's input schema and displays the execution result.

```python
box = {
    "title": "Customer Support",
    "source_type": "agent",
    "source_id": "agent-ksuid",
    "grid_x": 0, "grid_y": 0, "grid_w": 12, "grid_h": 6
}
```

### Prompt Box (`prompt`)

Renders a form for the prompt's input schema and displays the LLM response.

```python
box = {
    "title": "Text Summarizer",
    "source_type": "prompt",
    "source_id": "prompt-ksuid",
    "grid_x": 0, "grid_y": 0, "grid_w": 6, "grid_h": 4
}
```

### Data Source Box (`data_source`)

Renders a parameterized query form and displays results in a table.

```python
box = {
    "title": "Sales Report",
    "source_type": "data_source",
    "source_id": "data-source-ksuid",
    "grid_x": 6, "grid_y": 0, "grid_w": 6, "grid_h": 4
}
```

## Page Parameters

Pages can define parameters that users fill in before executing boxes. Parameters are mapped to box inputs.

| Field           | Description                             |
| --------------- | --------------------------------------- |
| `name`          | Parameter identifier                    |
| `label`         | Display label                           |
| `param_type`    | Input type (text, number, select, etc.) |
| `default_value` | Default value                           |
| `options`       | Options for select-type parameters      |
| `required`      | Whether the parameter is required       |
| `sort_order`    | Display order                           |

```python
parameter = {
    "name": "customer_email",
    "label": "Customer Email",
    "param_type": "text",
    "required": True,
    "sort_order": 1
}
```

## Input Mapping

Box input mapping connects page parameters to the box's source input fields:

```json
{
  "message": "{{customer_email}}",
  "action": "lookup"
}
```

This maps the page parameter `customer_email` to the agent's `message` input field.

## PIN Protection

Deployments can require a PIN code for access. Enable **Require PIN** while configuring the deployment and set the PIN in the dashboard before publishing.

When enabled, users must enter the correct PIN before accessing the deployment. The PIN is hashed before storage.

## Public URLs

Each deployment has a unique slug that forms its public URL:

```
https://your-instance.com/d/internal-tools
```

Slugs must be unique across all deployments.

## Creating a Deployment

Create deployments from the PromptRails dashboard:

1. Open **Agent UI Deployments** in your workspace.
2. Create a new deployment and set its name, slug, description, and PIN requirements.
3. Add one or more pages to define the navigation structure.
4. Add page parameters for shared inputs such as customer ID, email address, or date range.
5. Add boxes to each page and connect them to an agent, prompt, or data source.
6. Configure each box's layout and input mapping, then publish the deployment.

## Analytics

Deployments track execution logs including:

- Which boxes were executed
- Input payloads and output summaries
- Status (success/failure)
- Session tracking
- Error messages

Review these logs from the deployment detail view in the dashboard to understand how end users are interacting with each page and box.

## Deployment Fields

| Field               | Type      | Description                     |
| ------------------- | --------- | ------------------------------- |
| `id`                | KSUID     | Unique deployment identifier    |
| `workspace_id`      | KSUID     | Workspace scope                 |
| `name`              | string    | Display name                    |
| `description`       | string    | Optional description            |
| `slug`              | string    | URL slug (unique)               |
| `status`            | string    | `active` or `inactive`          |
| `require_pin`       | boolean   | Whether PIN is required         |
| `grid_columns`      | integer   | Grid column count (default: 12) |
| `last_published_at` | timestamp | Last publish time               |
| `created_at`        | timestamp | Creation time                   |
| `updated_at`        | timestamp | Last update time                |

## Related Topics

- [Agents](/docs/agents) -- Agents used in dashboard boxes
- [Prompts](/docs/prompts) -- Prompts used in dashboard boxes
- [Data Sources](/docs/data-sources) -- Data sources used in dashboard boxes