Tokomono
Ai Suite
1. Getting Started

Navigating the UI & Dashboard

Navigating the UI & Dashboard

The AI Suite UI is a single-page application accessible at /ai-suite#/ (or under your configured route_prefix).

1. Top Navigation Bar

The top navigation bar gives you direct access to every module of the AI Suite:

  • Dashboard — Customizable 4-column grid displaying key metrics, counts, and test score graphs.
  • Agents (Dropdown Menu):
    • Agents — Manage, organize (in folders), sync, create, and test AI Agents.
    • Roles — Create and manage reusable personas (### ROLE:) for the CRAFT prompt engine.
    • Tones & Targets — Create and manage reusable tone-of-voice and target audience instructions (### TARGET & TONE:).
  • Tests — View and filter all historical agent evaluation runs, scores, costs, and AI-suggested prompt fixes.
  • Workflows — Create, edit, test, and publish visual node-based workflows.
  • Language Toggle (EN / NL) — Located on the far right of the top bar; switches all UI labels and messages between English (EN) and Dutch (NL).

2. Step-by-Step: Customizing the Dashboard

The Dashboard displays interactive metric and chart blocks on a 4-column drag-and-drop grid. Built-in blocks include Agents Count, Roles Count, Tones Count, and Test Results Graph, and you can register custom blocks implementing Tokomono\AiSuite\Contracts\DashboardBlockInterface.

How to Add, Move, or Remove Dashboard Blocks

  1. Open the Dashboard: Navigate to /ai-suite#/.
  2. Enter Edit Mode: Click the Edit Dashboard button in the top-right corner. A 4-column dashed background grid appears.
  3. Add a Block:
    • Click the blue Add Block button in the top-right corner.
    • In the Add Block modal, browse the available dashboard blocks and click Add next to any block not yet on your dashboard (blocks already on the grid show Added).
    • Click Close to exit the modal. The new block is automatically placed in the first available grid slot.
  4. Move or Swap Blocks:
    • Drag any block across the grid. A blue preview outline shows where the block will land.
    • Drop a block onto an empty grid area to move it, or drop it onto another block to swap their positions. If a placement causes blocks to overlap, a red highlight appears and the move is prevented.
  5. Remove a Block: While in edit mode, click the red × button in the top-right corner of any block to remove it from the grid.
  6. Save Your Layout: Click the green Save Layout button in the top-right corner to persist the layout.