Build rich admin panels with zero HTML/CSS/JS. Register pages from Python, compose UIs with the component API, and the SDK renders everything.
1. @aiui.page() registers a page with the server
@aiui.page()
2. dashboard.js fetches /api/pages, builds the sidebar automatically
dashboard.js
/api/pages
3. When a page is selected, it fetches /api/pages/{id}/data
/api/pages/{id}/data
4. If the data contains _components, they render as real UI elements (cards, tables, etc.)
_components
Pages without component layouts render as formatted JSON.
Pages are grouped in the sidebar by the group parameter:
group
| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| page_id | str | ✅ | Unique identifier (URL-safe) |
page_id
str
| title | str | ✅ | Display name in sidebar |
title
| icon | str | ❌ | Emoji or icon character |
icon
| group | str | ❌ | Sidebar group name |
| description | str | ❌ | Subtitle below the title |
description
Build dashboard UIs entirely from Python — no HTML needed. 54 components are available across 7 categories.
> See the full Component API Reference for all components and parameters.
Arrange components side-by-side in a responsive grid:
Data tables with headers and rows:
Organize content in tabs or collapsible sections:
Wrap all components in a layout container:
The layout() function adds the _components key that tells the frontend to render structured components instead of raw JSON.
layout()
When style is set to dashboard, 16 built-in pages are auto-registered from the feature system:
dashboard
| Page | Group | Description |
|------|-------|-------------|
| 🤖 Agents | Agent | Configured AI agents |
| ⚡ Skills | Agent | Agent tools and skills |
| 🖥️ Nodes | Agent | Execution nodes |
| 📊 Overview | Control | System overview |
| 📡 Channels | Control | Messaging channels |
| 📋 Sessions | Control | Active sessions |
| 📻 Instances | Control | Connected instances |
| 📈 Usage | Control | Token usage analytics |
| ⏰ Cron | Control | Scheduled jobs |
| 📋 Jobs | Control | Async job queue |
| ✅ Approvals | Control | Pending approvals |
| 🔌 API | Control | API documentation |
| ⚙️ Config | Settings | Runtime configuration |
| 🔐 Auth | Settings | Authentication |
| 📜 Logs | Settings | Real-time log viewer |
| 🐛 Debug | Settings | Debug information |
Custom pages added via @aiui.page() appear alongside built-in pages.
Each agent card on the Agents page includes a ▶ Run button. Clicking it navigates to the Chat page with that agent automatically pre-selected in the agent dropdown.
1. The Run button reads the agent name from its data-id attribute
data-id
2. It pushes /chat?agent=<name> to browser history and dispatches popstate
/chat?agent=<name>
popstate
3. The dashboard's popstate listener calls selectPage('chat'), loading the Chat view
selectPage('chat')
4. Chat's render() calls loadAgents(), then checks URLSearchParams for ?agent=
render()
loadAgents()
URLSearchParams
?agent=
5. If found, it sets the dropdown value and currentAgentName, then cleans the URL
currentAgentName
Every dashboard includes a Test All Features link at the bottom of the sidebar. It auto-discovers all registered features from /api/features and tests each endpoint, showing pass/fail results in a grid.
/api/features
| Endpoint | Method | Description |
|----------|--------|-------------|
| /api/pages | GET | List all registered pages |
| /api/pages/{id}/data | GET | Get page handler response |
| /api/features | GET | List all registered features |
| /plugins/plugins.json | GET | Style-aware frontend plugin list |
/plugins/plugins.json