Skip to content
Kaisoft Docs

Orientation & Navigation

This page provides a walkthrough of the Kaisoft user interface — where things are, how to navigate between views, and how the layout adapts to your workflow.

Application layout

Section titled “Application layout”

When you open Kaisoft, the interface is divided into three main areas:

┌──────┬─────────────────────────────────────────────────┐
│      │  Header Bar: Connection Status │ Chat │ Layout  │
│      ├──────────────┬──────────────────────────────────┤
│      │              │                                  │
│ Side │  Data        │                                  │
│ bar  │  Sources     │       Dashboard Workspace        │
│      │              │       (Charts & Visualisations)  │
│ Nav  │──────────────│                                  │
│      │              │                                  │
│      │  Kai (AI     │                                  │
│      │  Agent)      │                                  │
│      │              │                                  │
└──────┴──────────────┴──────────────────────────────────┘
Section titled “Sidebar navigation”

The far-left sidebar provides access to every page in Kaisoft:

IconPageDescription
🏭Manufacturing IDEMain workspace — data explorer, Kai, and dashboards
📡MQTT IntegrationManage MQTT broker connections and topic subscriptions
🔒OPC-UA IntegrationConnect OPC-UA servers and browse tag address spaces
🗄️Data SourcesAdd, edit, and test SQL database connections
💻SQL QueryDirect SQL query editor for advanced users
📋System LogsView application logs for diagnostics and troubleshooting
🔑LicenseManage your Kaisoft license — required for Kai
⚙️SettingsAI providers, user accounts, and app configuration

Click any item to navigate to that page. The currently active page is highlighted.

Header bar

Section titled “Header bar”

The header bar at the top of the Manufacturing IDE contains:

  • Connection status — Shows whether Kaisoft is connected to the backend (WebSocket status indicator).
  • Chat / Dashboard toggle — Switch between split-panel (IDE) mode and full-screen chat mode.
  • Search — Open the command palette to quickly find actions and settings.

Left panel

Section titled “Left panel”

The left panel in the Manufacturing IDE contains two collapsible sections:

  1. Data Sources Explorer — Shows all connected data sources with live status indicators (online/offline). You can browse tables, topics, and tags, and drag items onto the dashboard.

  2. Kai — AI agent — A chat interface where you can ask questions about your data. Kai is context-aware and knows which data sources are connected. Requires an active license — see Licensing.

Both sections can be collapsed by clicking their headers. The entire left panel can be collapsed using the arrow button in the header bar.

Dashboard workspace

Section titled “Dashboard workspace”

The centre area of the IDE where your visualisations live:

  • Tabbed interface — Create multiple dashboard tabs for different views.
  • Drag & drop — Drag data from the left panel to create charts.
  • Auto-generated charts — When Kai answers a data question, charts are placed here automatically.
  • Resizable panels — Drag the divider between the left panel and dashboard to adjust sizes.

Chat mode vs IDE mode

Section titled “Chat mode vs IDE mode”

Kaisoft offers two viewing modes:

IDE mode (default)

Section titled “IDE mode (default)”

The split-panel layout with the data explorer, Kai, and dashboard side by side. Best for building dashboards and monitoring data.

Chat mode

Section titled “Chat mode”

Click the Chat button in the header to switch to a full-screen chat experience. In this mode:

  • Kai takes centre stage with a wide chat window.
  • Charts and visualisations appear inline in the conversation.
  • Data sources remain accessible in the sidebar.
  • Click Dashboard to switch back to the split view.

Mobile and responsive layout

Section titled “Mobile and responsive layout”

Kaisoft is a Progressive Web App (PWA) and adapts to smaller screens:

  • On mobile devices, the sidebar collapses into a hamburger menu.
  • The left panel stacks above the dashboard on narrow screens.
  • You can install Kaisoft as a standalone app on your device for quick access.

Theme

Section titled “Theme”

Kaisoft supports light and dark themes. Toggle the theme using the theme switch in the sidebar footer.

Next steps

Section titled “Next steps”